/* Allgemeine Angaben entwicklungsreich.de */
/*	@font-face {	font-family: 'gabriela'; src: url('gabriela-regular-webfont.eot');
					 	src: url('gabriela-regular-webfont.eot?#iefix') format('embedded-opentype'),
					 	url('gabriela-regular-webfont.woff2') format('woff2'),
					 	url('gabriela-regular-webfont.woff') format('woff'),
					 	url('gabriela-regular-webfont.svg#gabrielaregular') format('svg');
					 	font-weight: normal; font-style: normal;}
	h1, h2, h3, h4, h5, h6 {font-family: gabriela, cursive; } */
	a, a:link, a:visited	{ text-decoration: none; color: #00f; }
		a:hover, a:focus	{ color: #0c0; } 
	body						{ color: #444; font-family: "Comic Sans MS", comic, "Comic Sans", "Comic Neue", sans-serif; background-color: #f8f8f8; min-height:100px; margin: 0 auto; }
	main						{ max-width: 70em; margin: 0 auto; }
	@media (min-width:1800px) { body	{ font-size: 20px } }
	@media (max-width:1799px) { body	{ font-size: 17px } }
	@media (max-width:1500px) { body	{ font-size: 15px } }
	@media (max-width:1200px) { body	{ font-size: 14px } }
	@media (max-width: 900px) { body	{ font-size: 13px } }
	@media (max-width: 700px) { body	{ font-size: 12px } }
	@media (max-width: 500px) { body	{ font-size: 11px } }
	@media (max-width: 300px) { body	{ font-size: 10px } }
	main.lp					{font-size: 120%}
	img						{ max-width: 100%; }
	img.hs					{ display:block; margin: 0 auto; }
	img.willkommen			{ display:block; margin: 1% auto; border-radius:0.5em ; max-width: 36em; width: 98%; }
	video.clubport, img.clubport	{ display:inline-block; margin: 1em; border-radius:0.5em ; max-width: 9em; max-height: 16em; }
	video.clubland, img.clubland	{ display:inline-block; margin: 1em; border-radius:0.5em ; max-width: 20.5em; max-height: 13em; }
	video, img.lp1			{ display:block; margin: 1% auto; border-radius:0.5em ; max-width: 320px; width: 98%; }
	img.flinks				{ float: left; max-height: 12em; border-radius:0.5em ; margin:0.5em; }
	img.flinks2				{ float: left; margin:0 1em; max-width: 50%; }
	img.frechts				{ float: right; max-height: 12em; border-radius:0.5em ; margin:0.5em; }
	img.frechts2			{ float: right; margin:0 1em; max-width: 50%; }
	img.unterschrift		{ max-width: 18em; width: 90%; margin: 0.5em 4em; }
	article img.willkommen		{ display:block; margin: 1% auto; border-radius:0.5em ; max-width: 25em; width: 98%; }
	img.kurs					{ float: left; max-height: 12em; border-radius:0.5em ; margin:0 0.5em }
	p.band					{ text-align: center; }
	p.band img, p.band video	{ display:inline-block; max-height: 12em; border-radius:0.5em ; margin:0 0.5em; width:auto }
	p.band2					{ text-align: center; }
	p.band2 img, p.band2 video	{ display:inline-block; max-height: 8em; border-radius:0.5em ; margin:0 0.5em; width:auto }
	p.band3					{ text-align: center; padding-bottom:5em; }
	p.band3 img, p.band3 video	{ display:inline-block; max-height: 8em; border-radius:0.5em ; margin:0 0.5em; width:auto }
	section.hs				{ background-color: #eee; border:#fc0 1px solid; padding:0 10px; border-radius:10px; max-width: 80%; margin: 5% auto; }
	section.forum			{ margin-left: 2em; }
	section.forum section	{ margin-left: 2em; }
	h2 small					{ font-weight: 500; font-size: 75%; color: #444;}
	section article p:last-of-type {text-align: right; font-size: 75% }
	section article		{ margin-top: 20px; background-image: linear-gradient(white, transparent); border-radius: 3em 0 3em 0; border-top: gray 1px solid }
	section article img			{ display:block; max-width: 600px; margin: 2% auto; width:100% }
	section article img.neben	{ float: left; max-width: 25%; padding: 2% 5% 5% 2%; margin: 0; }
	h1							{ margin: 3% 6.5% 0; font-size: 160%; color: #f00; font-weight: 700; text-align: left; }
	h2							{ margin: 3% 4% 0; font-size: 140%; color: #f00; font-weight: 700; text-align: left; }
	h3							{ margin: 3% 2% 0; font-size: 120%; color: #f00; font-weight: 700; text-align: left; }
	h4							{ margin: 3% 1% 0; font-size: 100%; color: #f00; font-weight: 700; text-align: left; }
	p.hs						{ display: block; margin: 5% auto; max-width: 70%; }
	ul.hs						{ display: block; margin: 5% auto; max-width: 70%; }
	ul.hs	li.separiert	{ margin-bottom: 1.5em; }
	p							{ text-align:justify; padding: 0 1em; }
	p.hand					{ display: block; padding: 0 2em 1em 2em; font-family:"Segoe Print", "Segoe Script", "AR Blanca", "AR Berkley", cursive; }
	img.uz					{ display: block; max-height: 5em; margin: -2em 2em 4em auto; transform: rotate(-10deg); }
	img.ich					{ float:left; max-height: 9em; margin: .6em 2em; border-radius:0.5em; }
	.tab						{ margin-left:20px; }
	.zentriert				{ text-align: center; }
	.rot						{ color: red; }
	.hell						{ display: inline-block; border: lightgrey 1px solid; border-radius: 1em; background-color: white; max-width: 90%; width: 60em; padding: 0.5em 1em }
	.lpvideo					{ margin:1em; border-radius:1em }
	.voll						{ width:100% ; height:auto; max-width:55em; max-height:auto; }
	div.lpimg				{ display: block; text-align: right; margin-bottom:0; }
	div.lpimg img			{ padding-left: auto; padding-right: 0; max-width: 15em }
/* SVG-Darstellung */
	svg						{ margin:1em; max-width: 90vw; max-height: 100vw; }
	svg:nth-of-type(odd)	{ float:left; }
	svg circle				{ r: 2px; stroke: #000; fill: #0fa; stroke-width: 0.5; }
	svg line					{ r: 1px; stroke: grey; stroke-width: 0.5; }
	svg path					{ r: 1px; fill: none; stroke: #fc0; stroke-width: 1; }
	svg text					{ font-size: 9px; font-weight:700 }
@media (min-width:60em) {
		.vertiabstand { padding-top: 30em; } 
		.lpvideo { float: left; max-width: 50%; width: 25em; margin: 2em } 
		div.lpvideo { float: left; max-width: 40%; width: 25em; margin: 2em } 
		div.lpvideo:last-of-type { min-height: 20em; margin-top:8em; max-width: 20%; } 
		.lpheadline { margin-bottom:3em } 
		}
	.kleiner					{ font-size: 75%; }
	input.mitte				{ display: block; margin: 1em auto -0.5em auto;}
	input.mitte:last-of-type	{ margin-bottom: -0.5em;}
	input.mitte:first-of-type	{ margin-top: -0.5em;}
	[type='text'], [type='tel'], [type='email'], [type='password'], [type='num'] textarea	{ font-family: arial; text-align: left; font-size: 0.75em; width: 90%; max-width: 40em; }
	form.gewinn				{ display: block; margin: 0.5em auto; border: lightgrey 1px solid; border-radius: 1em; background-color: white; max-width: 90%; width: 60em; padding:1em } 
	form.gewinn input[type='text'], form.gewinn input[type='email'] { width: 55em; max-width: 90%; }
	form.gewinn label		{ display: inline-block; width: 55em; max-width: 90%; }
	form.gewinn textarea { width: 55em; height: 5em; max-width: 90%; }
	textarea					{ font-family: arial; text-align: left; font-size: 0.75em; width: 90%; max-width: 40em; }
	table.termin			{ border: 1px solid lightgrey; margin: 1em 0 0 0; width: 90% }
	table.termin td		{ border: 1px solid lightgrey }
	table.termin td:first-of-type		{ padding-left: 1em; }
	table.termin td:nth-of-type(2)	{ text-align: right; padding-right:0.5em }
	table.termin td:nth-of-type(3)	{ text-align: center; }
	table.termin th		{ background-color: white; color: red; font-weight: 700; font-size:inherit; }
	table.termin tr		{ background-color: white; }
	table.termin tr.ferien	{ background-color: lightcyan; }
	table.termin tr.vergangen td:first-of-type	{ background-image:url(../bilder/logos/durch.png); background-size:2em; background-repeat: repeat; }
	table.termin tr.vergangen td:nth-of-type(2)	{ background-image:url(../bilder/logos/durch.png); background-size:2em; background-repeat: repeat; }
	table.mitte				{ border: 1px solid lightgrey; margin: 1em auto; }
	table.mitte td			{ margin: 0 1em; border: 1px solid lightgrey; }
	table.mitte th			{ background-color: white; color: red; font-weight: 700; font-size:inherit; }
	button					{ display: block; background-color: #fc0; font-size:80%; padding: 1em 2em; font-weight:700; text-align: center; margin: 5% auto; border-radius:1em; border:solid 1px lightgrey; }
	div.zahnradvideo		{ display: block; min-height: 10em; margin: 0.5em 0; vertical-align: middle; }
	div.zahnradvideo div		{ float: left; width: 10em; height: 10em; margin: 0.5em 1em 0.5em 1em; }
	div.zahnradvideo:nth-of-type(even) div		{ float: right; }
	div.zahnradvideo video	{ display: inline; width: 7em; margin: 1.5em; border-radius: 3.5em }
	div.zahnradvideo img		{ display: inline; width: 10em; margin: 0 0 0 -10em; }
	article.mb h3, article.mbstart h3	{ color: #00f; }
	article.mb button		{ display: inline-block; background-color: #f8f8f8; font-size:80%; padding: 1em 2em; margin: 1em; color: inherit; font-weight:700; text-align: center; border-radius:1em; border: solid 1px lightgrey; }
@media (min-width:60em) { 
		button.lp		{position: relative; top: 35em; margin-left:48em }
		div.lpzahnrad	{ float:right; }
		div.lpzahnrad div	{ margin: 7em 15em 0 0 }
		div.rahmen		{ display: block; border-radius: 1em; border: lightgray solid 1px; background-color: white; padding: 1em }
		div.spalten		{ display: flex; flex-direction: row; border-radius: 1em; border: lightgray solid 1px; background:white; padding: 1em }
		div.spalten	form	{ display: block; }
		div.spalten section	{flex: 2;}
		div.spalten section:last-of-type	{flex: 3;}
		div.spalten section p	{margin: 2em 2em 2em 4em; color: inherit; }
		img.zahnrad		{ margin: -0.5em 0 -1em -3.5em; width: 3em; }
		div.spalten section:first-of-type	{margin-right: 1em;}
		div.spalten section:last-of-type	{margin-left: 1em;}
	}
@media (max-width:60em) { 
		div.lpzahnrad	{ width: 95%; text-align: center; float:none; }
		div.lpzahnrad div	{ margin: 0 auto; float:none; }
		div.rahmen, div.spalten		{ display: block; border-radius: 1em; border: lightgray solid 1px; background-color: white; margin: 0.5em; padding: 0.5em }
		div.spalten section	{width: 100%; margin-bottom: 6em; }
		div.spalten section p	{margin: 2em 2em 2em 4em; color: inherit; }
		img.zahnrad		{ margin: -0.5em 0 -1em -3.5em; width: 3em; }
	}
/* Index-Abschnitte */
		span.linkanimation	{ color:blue; }
		span.durchgestr		{ text-decoration-line: line-through; text-decoration-color: red; }
		span.linkanimation:hover, span.linkanimation:focus		{ color:#0c0; }
		div.notiz			{ height:18em; width:18em; margin-bottom: -28em; background-image: url(../bilder/elemente/notizzettel.png); background-size:20em; background-repeat: round; padding: 6em 3em 4em 3em; text-align: center; }
		div.notizkl			{ height:12em; width:12em; margin-bottom: -22em; background-image: url(../bilder/elemente/notizzettel.png); background-size:16em; background-repeat: no-repeat; padding: 4em 2em 3em 2em; text-align: center; }
		div.notizkl2		{ height:17em; width:17em; margin-bottom: -27em; background-image: url(../bilder/elemente/notizzettel.png); background-size:21em; background-repeat: no-repeat; padding: 5em 5em 4em 2em; text-align: center; }
		div.notizgr			{ height:24em; width:24em; margin-bottom: -34em; background-image: url(../bilder/elemente/notizzettel.png); background-size:32em; background-repeat: no-repeat; padding: 7em 3em 4em 4em; text-align: center; }
		div.notiz p, div.notizkl p, div.notizkl2 p, div.notizgr p, div.notizgr form	{ transform: rotate(2deg); text-align: center; margin:0; }
		div.notiz ul			{ transform: rotate(2deg); text-align: left; margin:0; }
		div.bullet1, div.bullet2, div.bullet25, div.bullet3, div.bullet4	{ height:20em; width:20em; border-radius:10em; background-size:20em; background-image: url(../bilder/elemente/grzarot.png); background-repeat: no-repeat; margin: 2em 2em -20em auto; transform: rotate(-5deg); }
		div.bullet2			{ background-image: url(../bilder/elemente/grzagrt.png); margin: 68em auto -20em 30em; }
		div.bullet25		{ background-image: url(../bilder/elemente/grzagrt.png); margin: 68em auto -20em 30em; }
		div.bullet3			{ background-image: url(../bilder/elemente/grzagrt.png); margin: 55em auto 0 2em; }
		div.bullet4			{ background-image: url(../bilder/elemente/grzagrt.png); margin: 75em 2em -2em auto; }
		div.bullet1 img, div.bullet1 video { display: inline-block; height: 8.3em; width: 16.6em; margin: 1.6em 1.7em 0 2em; border-radius: 8.3em 8.3em 0 0; padding: 0; } 
		div.bullet2 img, div.bullet2 video { display: inline-block; height: 8.3em; width: 16.6em; margin: 1.7em 1.7em 0 1.7em; border-radius: 8.3em 8.3em 0 0; padding: 0; } 
		div.bullet25 img { display: inline-block; height: 8.3em; width: 16.6em; margin: 0; padding: 0; } 
		div.bullet3 img, div.bullet3 video { display: inline-block; height: 8.3em; width: 16.6em; margin: 0 1.7em 1.7em 1.7em; border-radius: 0 0 8.3em 8.3em; padding: 0; }
		div.bullet1 p, div.bullet2 p { display: inline-block; height: 8.3em; width: 16.6em; margin: 0 1.7em 1.7em 1.7em; border-radius: 0 0 8.3em 8.3em; padding: 0; text-align: center; }
		div.bullet25 p		{ display: inline-block; height: 16.6em; width: 16.6em; margin: 1.7em 1.7em 1.7em 1.7em; border-radius: 8.3em; padding: 0; text-align: center; }
		div.bullet3 p 		{ display: inline-block; height: 8.3em; width: 16.6em; margin: 1.7em 1.7em 0 1.7em; border-radius: 8.3em 8.3em 0 0; padding: 0; text-align: center; } 
		div.bullet4 p 		{ display: inline-block; height: 16.6em; width: 16.6em; margin: 1.7em; padding: 4.5em 0; text-align: center; vertical-align: middle; } 
		.notizzettel 		{ display: inline; max-width: 80%; width: 80%; height: auto; max-height:none; border-radius:0.5em; } 
@media (min-width:60em) { 
			div.notiz, div.notizkl, div.notizkl2, div.notizgr, p.band3 { position: relative; }
			img.bannerindex {width:30%;position:absolute;top:13em;left:60%;z-index:-2 } 
		}
@media (max-width:60em) { div.notiz, div.notizkl, div.notizkl2, div.notizgr { position: static; margin: 0 auto 3em auto; } div.bullet1, div.bullet2, div.bullet25, div.bullet3, div.bullet4 {margin: 2em auto;} img.bannerindex { margin-top:-13em} }
/* Titelleiste */
	@keyframes drehen { 0 { transform: rotate(0) } 100% { transform: rotate(360deg) } }
	img.drehenr			{ animation: drehen 12s infinite linear normal }
	img.drehenl			{ animation: drehen 12s infinite linear reverse }
	a.hier 				{ color:red; }
@media (min-width:60em) { 
		header				{ display: none;}
		hr						{ margin:  2em 0; }
		nav					{ display:block; padding: 0 ; }
		img.mobil			{ display: none; }
		nav ul				{ margin: 2em 20em 0 8em; padding: 0; background-color: inherit; display: flex; flex-direction: row; }
		nav ul li 			{ flex: 1; font-size: 1em; list-style: none; margin: 0.5em 2.5em 0.5em 0.5em; padding: 0; text-align: left; }
		nav ul li img		{ display: block; width: 3em ; margin: 0 3em -2.5em -3em; z-index: 5; }
		img.hintergrund	{ width: 98%; max-width: 70em; margin: 0 0 -32.7em 0; }
		p.hintergrund		{ display:none; }
		video.oben, img.oben			{ margin: -35em auto 20em auto; border-radius: 0 3em 0 10em; max-width: 30em; width: 98%; border: lightgrey 1px solid; }
		img.oben2			{ display:block; margin: -33em 10em 20em auto; border-radius: 0; max-width: 10em; width: 98%; }
		nav ul li:nth-of-type(1)	{ margin-top: 0; }
		nav ul li:nth-of-type(2)	{ margin-top: 14em; }
		nav ul li:nth-of-type(3)	{ margin-top: 19em; }
		nav ul li:nth-of-type(4)	{ margin-top: 20em; }
		nav ul li:nth-of-type(5)	{ margin-top: 20.3em; }
		nav ul li:nth-of-type(6)	{ margin-top: 20.5em; }
		nav ul li:last-of-type		{ margin-bottom: 10em; }
		nav ul li a 		{ display: block; padding: 0.4em; text-decoration: none; font-weight: bold; }
		nav.blog				{ position:relative; top:0.2em; display: flex; flex-direction: row; max-width:100%; width: auto; height: 4em; padding: 0 1em 2em 1em; border-radius: 2em; border: 1px solid lightgrey; background-color: white; z-index:1 }
		nav.blog h2			{ text-align: center; font-weight:bold; }
		nav.blog h4			{ text-align: center; font-weight:bold; }
		nav.blog ul			{ font-size:0;margin:0;padding:0; }  
		nav.blog:hover ul, nav.blog:focus ul		{ position:relative; top:0; font-size:inherit; margin: 0; padding: 0; flex:content; display:flex;
								  flex-direction:column; z-index:1; }
		nav.blog:hover ul li, nav.blog:focus ul li	{ flex: 1; font-size: 1em; list-style: none; margin: 0; padding: 0.5em; background-color: white; border: lightgrey solid 1px; border-top:0 ; border-bottom:0; }
		nav.blog ul li:last-of-type	{ border-radius: 0 0 2em 2em; border-bottom: lightgrey solid 1px; }
		nav.blog ul li:first-of-type	{ border-radius: 2em 2em 0 0; border-top: lightgrey solid 1px; }
		main h1		{display: none;}
		h1.oben		{display: block; margin:-18em 0 16em 15em}
		video.lp		{float:left;max-width:50%;width:25em;margin:3em}
	}
@media (max-width: 60em) {
		img.oben2			{ display:none; }
		img.hintergrund	{ display:none; }
		header				{ height: 3.6em; padding: 0; vertical-align: middle; z-index: 5; margin: 0;}
		img.mobil			{ position:absolute;top:1em;right:1em;margin:0 0 -2em auto; height:4.3em ; z-index: 5 }
		p.hintergrund		{ display: block; margin-top: 0.5em; max-width: 60%; text-align: left;}
		nav					{ display:block; background: #fc0; padding: 0.6em; }
		nav img.mobil		{ position: static; float:none; margin: 0; height: 3em; width: 3em; }
		nav ul				{ display:none;}
		nav:hover ul, nav:focus ul		{ margin: 0; padding: 0; display: flex; flex-direction: column; background-color:white; border-radius: 0.5em; border: lightgrey 1px solid }
		nav li				{ list-style: none; margin: 0.5em; padding: 0; }
		nav li img			{ width:2em }
		video.lp				{ display:block; width:90%; margin:0.2em auto;}
	}
	nav.blog:hover h2 span, nav.blog:focus h2 span	{ font-size:0 }
	article				{ display: block; float: none; margin-top: 1em; max-width:100%; width: auto; padding: 1em; border-radius: 2em; border: 1px solid lightgrey; text-align: left; background-color: white; }
	section:nth-of-type(2)				{ background-image: url(../bilder/gutschein/gruppe-im-entwicklungsreich.jpg); }
	nav.blog ul
	nav.blog a, nav.blog a:link, nav.blog a:visited { display: block; padding: 0.4em; text-decoration: none; font-weight: bold; color:red; }
	nav.blog a, nav.blog a:link, nav.blog a:visited { display: block; padding: 0.2em; text-decoration: none; font-weight: normal; text-align: center; color:red; }
	nav.blog a:hover, nav a:focus { color:#0c0; }
	nav.blog a.hier { color:blue; }
/* Linkleiste unten */
	footer	{ background: #fc0; }
	@media (min-width: 60em) {
		p.last { display: block; line-height: 400%; font-size:larger; }
		footer { position: fixed; bottom: 0px ; left: 0px ; font-size:inherit ; min-height:2em ; padding:0.5em ; height:auto ; width:100% ; z-index: 5; }
		footer p		{ text-align:right; font-size: 75%; margin: -1.2em 1.2em 0 0;  }
	}
	@media (max-width: 60em) { 
		footer { position: static; padding:0.5em 0 ; height:auto ; min-height:5% ; width:100% ; text-align:center; } 
		footer p	{ text-align:right; font-size: 75%; margin: 0 1.2em 0 0; }
	}
	footer img.logo { float: right; margin:-3.6em 1em 2em 1em; height:4.3em ; z-index: 5 }
	footer a				{ margin-right: 30px ; margin-left:0px ; }
	footer a.hier		{ margin-right: 30px ; margin-left:0px ; color: #0c0 ; font-weight:700 ; }
	footer p.ssl img		{ margin-bottom: 0; }
/* Videopositionierung auf Online-Workshop-Landing-Page */
	ul li p {margin: 0.5em 1em } 
	@media (min-width: 60em) {
		video.wsv { float: right; max-width: 50%; width: 25em; max-height: 20em; height: auto; margin: 2em }
	}
	@media (max-width: 60em) { 
		.wsv { float: none; max-width:80%;width:60em; height:auto; margin:0.5em auto; }
	}