/* zusätzliches Farbschema blau */
:root { --r: min(2vw,2vh); --dg: #aab; --mg: #ccd; }
	p, li	{ text-align: left; line-height: 1.3; font-size: 120%; }
	.kalschr { font-family: 'Kalam'; }
	.fett { font-weight: 700; }
	img.vorschau { display: none; } /* Vorschaubild für Sozial Media */
	@media (min-width:601px) { body	{ font-size: min(2.3vw,2.3vh) } }
	@media (max-width:600px) { body	{ font-size: 16px } }
	li	{ margin-bottom: 0.5em; }
	[type='text'], [type='tel'], [type='email'], [type='password'], [type='num'], textarea	{ font-size: 1.3em; margin-bottom:0.2em; }
	
	header { display: none; }
	
	h1 { text-align: center; margin: var(--r); font-size: 200%; }
	h2 { text-align: center; font-size: 160%; margin-bottom: var(--s); margin-top: var(--s); }
/* Linkleiste unten */
	footer					{ background: #008; border-top: white 1px solid; }
	a,
		a:link, 
		a:visited			{ text-decoration: none; color: #00f; }
		a:hover, 
		a:focus				{ color: #0c0; } 
	footer a,
	footer a:link,
	footer a:visited		{ color: white; }
	footer a:hover, 
	footer a:focus			{ color: #0ff; }
	footer a.hier			{ color: #0cc ; font-weight:700 ; }
/* Allgemeine Einrichtungen */
	button					{ background-color: #008; color: white; font-family: kalam; border-width: 0; margin: var(--r) auto; font-size: 110%; }
	#eintragung button,
	#gelber					{ background-color: #fc0; color: #333; font-family: inherit; border-width: 0; margin: var(--r) auto; }
	#verabschiedung		{ display: block; max-width: 30em; width: 90vw; margin: 0.5em 0.5em 0 5vw; }
	#schilf					{ display: block; max-width: var(--g); width: 90vw; margin: var(--s) auto; }
	
	main.kachel 			{ width: 100%; max-width: 100%; margin: 0; }
	img, video				{ border-radius: var(--r); margin: 0; }

	#erinnerung				{ margin: var(--s); padding: var(--s); }
	#schweden img,
	#behandlung img		{ margin: 0; }
	#schweden p,
	#behandlung p			{ margin: 0; padding: 0; }
	#deinstein,
	#einfangen				{ margin: var(--s); padding: var(--s); }
	#geschichtensteine	{ color:white; background-image: url(../bilder/elemente/kommern-geschichtenstein-polyzoides-com.jpg); background-repeat: repeat-y; background-size: 100% auto; }
		#geschichtensteine h2	{ color:white;}
	section.kachel h2		{ background-color: #fffc; margin: 0 var(--r); padding: calc(var(--r)/4);  }
	section.kachel a:hover h2,
	section.kachel a:focus h2		{ color: #0c0; }
/* Große Viewports - Desktop oder Landscape-Mobile */
@media (min-width: 600px) {
/* Größenangaben */
:root {
		--k: calc(14 * var(--r));
		--g: calc(30 * var(--r));
		--a: calc(46 * var(--r));
		--s: calc(2 * var(--r));
		--startvideoh: calc(4em + var(--s));
		--rand0: calc(46vw - (var(--a) / 2) + var(--r));
		--rand1: calc(var(--rand0) + var(--k) + var(--s));
		--rand2: calc(var(--rand1) + var(--k) + var(--s));
		--oben0: calc(var(--r) + var(--startvideoh));
		--oben1: calc(var(--oben0) + var(--k) + var(--s));
		--oben2: calc(var(--oben1) + var(--k) + var(--s));
		--oben3: calc(var(--oben2) + var(--k) + var(--s));
		--oben4: calc(var(--oben3) + var(--k) + var(--s));
	}
/* Kachelstruktur */
	section.kachel 										{ width: var(--a); margin: 0 auto calc(2em - var(--startvideoh)) auto; height: var(--oben4); }
		section.kachel a 									{ position: absolute; }
			section.kachel a div 						{ display: block; border-radius: var(--r); margin: var(--r); width: var(--k); height: var(--k); }
				section.kachel img,
				section.kachel video						{ position: relative; right: 0; bottom: 0; width: var(--k); height: var(--k); z-index:-1; }
				section.kachel h2							{ position: relative; top: -5em; font-size:100% }
		section.kachel a:nth-child(1)					{ width: var(--g); height: var(--g); left: var(--rand0); top: var(--oben0); }
		section.kachel a:nth-child(2)					{ left: var(--rand2); top: var(--oben0); }
		section.kachel a:nth-child(3)					{ left: var(--rand0); top: var(--oben2); }
		section.kachel a:nth-child(4)					{ left: var(--rand1); top: var(--oben2); }
		section.kachel a:nth-child(5)					{ height: var(--g); left: var(--rand2); top: var(--oben1); }
		section.kachel a:nth-child(6)					{ left: var(--rand0); top: var(--oben3); }
		section.kachel a:nth-child(7)					{ width: var(--g); left: var(--rand1); top: var(--oben3); }
			section.kachel a:nth-child(1) img,
			section.kachel a:nth-child(1) div		{ width: var(--g); height: var(--g); }
			section.kachel a:nth-child(5) video,
			section.kachel a:nth-child(5) div		{ height: var(--g); }
			section.kachel a:nth-child(7) img,
			section.kachel a:nth-child(7) div		{ width: var(--g); }
				section.kachel a:nth-child(1) h2		{ top: -3.2em; }
				section.kachel a:nth-child(2) h2,
				section.kachel a:nth-child(6) h2,
				section.kachel a:nth-child(7) h2		{ top: -11.5em; }

/* Inhalt-Abschnitte */
/* Hintergrundbilder */
	#schweden				{ background-image: url(../bilder/geschichtensteine/lp/unser-holzhaus-polyzoides-com.jpg); padding: var(--r) 0; background-size: auto 100%; background-repeat: no-repeat; background-color: var(--dg); } 
	#nachhaltig				{ background-image: url(../bilder/elemente/kommern-geschichtenstein-polyzoides-com.jpg); padding: var(--r) 0; background-size: auto 100%; background-repeat: no-repeat; background-color: var(--dg); } 
	#behandlung				{ background-image: url(../bilder/geschichtensteine/lp/fachwerkhaus-polyzoides-com.png); padding: 0; background-position: right bottom; background-size: auto 100%; background-repeat: no-repeat; background-color: var(--mg); } 
	#einfangen				{ background-image: url(../bilder/geschichtensteine/lp/farn-einfahrt-geschichtensteine-polyzoides-com.jpg); background-repeat: no-repeat; background-size: auto 90%; background-position: right; }
	#infopost, 
	#herstellung			{ background-image: url(../bilder/elemente/holz-weiss-detail.jpg); background-repeat: repeat-y; background-size: 100% auto; padding: 3em 0; }
	#abfall					{ background-color: var(--dg); padding: 3em 0; }
/* Anordnung der einzelnen Elemente */
 	#schweden,
 	#nachhaltig 				{ display: grid; gap: var(--r); align-items: center; grid-template-columns: 7fr 2fr 2fr 2fr 1fr; grid-template-rows: repeat(5, auto); padding: 0; margin: var(--r) 0; }
	 	#schweden h2,
	 	#nachhaltig h2						{ text-align: center; grid-column: 2 / 5; grid-row: 1 / 2; }
	 	#schweden div:nth-of-type(1),
	 	#nachhaltig div:nth-of-type(1)	{ background-image: linear-gradient(to right, transparent calc(45vw - var(--k)), var(--dg) calc(60vw - var(--k))); grid-column: 1 / -1; grid-row: 1 / -1; height: 100%; }
	 	#schweden img:nth-of-type(1),
	 	#nachhaltig img:nth-of-type(1)	{ grid-column: 4 / 5; grid-row: 2 / 3; }
	 	#schweden img:nth-of-type(2),
	 	#nachhaltig img:nth-of-type(2) 	{ grid-column: 2 / 3; grid-row: 3 / 5; }
	 	#schweden img:nth-of-type(3),
	 	#nachhaltig img:nth-of-type(3) 	{ display: none; }
	 	#schweden p:nth-of-type(1),
	 	#nachhaltig p:nth-of-type(1)		{ grid-column: 2 / 4; grid-row: 2 / 3; }
	 	#schweden p:nth-of-type(2),
	 	#nachhaltig p:nth-of-type(2)		{ grid-column: 3 / 5; grid-row: 3 / 4; }
	 	#schweden p:nth-of-type(3),
	 	#nachhaltig p:nth-of-type(3)		{ grid-column: 3 / 5; grid-row: 4 / 5; }
	 	#schweden a,
	 	#nachhaltig a							{ grid-column: 2 / 5; grid-row: 5 / -1; }
	#erinnerung							{ display: grid; gap: var(--r); align-items: center; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: repeat(8, auto); width: 60em; margin: 0 auto;  }
	 	#erinnerung h2					{ grid-column: 1 / -1; grid-row: 1 / 2; text-align: center; }
	 	#erinnerung img:nth-of-type(1)	{ grid-column: 1 /  2; grid-row: 2 /  5; }
	 	#erinnerung img:nth-of-type(2)	{ grid-column: 3 / -1; grid-row: 5 /  7; }
	 	#erinnerung p:nth-of-type(1)		{ grid-column: 2 / -1; grid-row: 2 /  3; }
	 	#erinnerung p:nth-of-type(2)		{ grid-column: 2 / -1; grid-row: 3 /  4; }
	 	#erinnerung p:nth-of-type(3)		{ grid-column: 2 / -1; grid-row: 4 /  5; }
	 	#erinnerung p:nth-of-type(4)		{ grid-column: 1 /  3; grid-row: 5 /  6; }
	 	#erinnerung p:nth-of-type(5)		{ grid-column: 1 /  3; grid-row: 6 /  7; }
	 	#erinnerung video						{ grid-column: 1 / -1; grid-row: 7 /  8; height: 70vh; min-height: 30vw; width: auto; max-width: 1080px; margin: 0 auto; }
	 	#erinnerung a							{ grid-column: 1 / -1; grid-row: 8 / -1; }
 	#geschichtensteine				{ display: grid; gap: var(--s); grid-template-columns: repeat(2 , 1fr); grid-template-rows: repeat(3 , auto); padding: var(--r) 0; }
	 	#geschichtensteine h2		{ text-align: center; grid-column: 1 / -1; grid-row: 1 / 2; font-size: 200%; }
	 	#geschichtensteine p			{ background-color:rgb(30 30 30 /0.7); margin: 0 calc(var(--k)/2); padding: var(--r); border-radius: var(--r); }
	 	#geschichtensteine a			{ text-align: center; grid-column: 1 / -1; grid-row: 3 / -1; }
 	#behandlung 						{ display: grid; gap: var(--s); align-items: center; grid-template-columns: 0 1fr 1fr 0 45vw; grid-template-rows: repeat(5,auto); padding: 0; }
	 	#behandlung div				{ background-image: linear-gradient(to left, transparent 35vw, var(--mg) 45vw); grid-column: 1 / -1; grid-row: 1 / -1; height: 100% }
	 	#behandlung h2					{ text-align: center; grid-column: 1 / 5; grid-row: 1 / 2; }
	 	#behandlung img:nth-of-type(1) { display: none; }
	 	#behandlung img:nth-of-type(2) { grid-column: 2 / 3; grid-row: 3 / 4; }
	 	#behandlung img:nth-of-type(3) { grid-column: 3 / 4; grid-row: 4 / 5; }
	 	#behandlung p:nth-of-type(1)	{ grid-column: 2 / 4; grid-row: 2 / 3; }
	 	#behandlung p:nth-of-type(2)	{ grid-column: 3 / 4; grid-row: 3 / 4; }
	 	#behandlung p:nth-of-type(3)	{ grid-column: 2 / 3; grid-row: 4 / 5; }
	 	#behandlung a					{ grid-column: 2 / 4; grid-row: 5 / -1; }
	 	
	 	#einfangen video				{ margin: calc(2*var(--s)) auto; height: 70vh; min-height: 30vw; width: auto; max-width: 1080px; }
 	#infopost							{ display: grid; gap: 0; grid-template-columns: auto auto; grid-template-rows: repeat(6, auto); padding: var(--s); }
	 	#infopost h2					{ grid-column: 1 / 2; grid-row: 1 / 2; }
	 	#infopost ul					{ grid-column: 1 / 2; grid-row: 2 / 3; }
	 	#infopost p						{ grid-column: 1 / 2; grid-row: 3 / 4; }
	 	#infopost form					{ grid-column: 1 / 2; grid-row: 4 / -1; }
	 	#infopost img					{ grid-column: 2 / -1; grid-row: 1 / -1; margin: var(--s); max-height: 60vh; }
	 	#infopost a						{ grid-column: 2 / -1; grid-row: 4 / -1; }
 	#deinstein							{ display: grid; gap: var(--s); grid-template-columns: auto auto; grid-template-rows: repeat(5, auto); padding: var(--s); }
	 	#deinstein h2					{ grid-column: 2 / -1; grid-row: 1 /  2; }
	 	#deinstein p:nth-of-type(1) {grid-column: 2 / -1; grid-row: 2 /  3; }
	 	#deinstein p:nth-of-type(2) {grid-column: 2 / -1; grid-row: 3 /  4; }
	 	#deinstein p:nth-of-type(3) {grid-column: 1 /  2; grid-row: 4 /  5; }
	 	#deinstein p:nth-of-type(4) {grid-column: 2 / -1; grid-row: 4 /  5; }
	 	#deinstein p:nth-of-type(5) {grid-column: 1 / -1; grid-row: 5 /  6; }
	 	#deinstein a:nth-of-type(1) {grid-column: 1 / -1; grid-row: 6 / -1; }
	 	#deinstein img					{ grid-column: 1 /  2; grid-row: 1 /  4; margin: var(--s); max-height: 40vh; }
}
/* Kleine Viewports - Mobile */
@media (max-width:599px)	{ 
/* Größenangaben */
	:root { --r: 3vw; --s: calc(2 * var(--r)); --k: calc(14 * var(--r)); --g: calc(30 * var(--r)); --a: var(--g);	}
/* Kachelstruktur */
	section.kachel 										{ display: grid; gap: var(--s); grid-template-columns: var(--k) var(--k); grid-template-rows: var(--g) var(--k) var(--k) var(--k); padding: 0; margin: var(--s) auto; width: var(--a); }
		section.kachel a									{ display: block; width: var(--k); height: var(--k); margin: 0; padding: 0; }
		section.kachel div 								{ display: block; border-radius: var(--r); margin: 0; width: var(--k); height: var(--k); }
				section.kachel img,
				section.kachel video						{ position: relative; right: 0; bottom: 0; width: var(--k); height: var(--k); z-index:-1; }
				section.kachel h2							{ position: relative; top: -4.6em; background-color:rgb(255 255 255 /0.7); margin: 0 var(--r); padding: calc(var(--r)/4); font-size:100% }
		section.kachel a:nth-child(1)					{ grid-column: 1 / -1; grid-row: 1 /  2; width: var(--g); height: var(--g); }
		section.kachel a:nth-child(2)					{ grid-column: 1 /  2; grid-row: 2 /  3; }
		section.kachel a:nth-child(3)					{ grid-column: 1 /  2; grid-row: 3 /  4; }
		section.kachel a:nth-child(4)					{ grid-column: 1 /  2; grid-row: 4 /  5; }
		section.kachel a:nth-child(5)					{ grid-column: 2 / -1; grid-row: 2 /  4; height: var(--g); }
		section.kachel a:nth-child(6)					{ grid-column: 2 / -1; grid-row: 4 /  5;  }
		section.kachel a:nth-child(7)					{ grid-column: 1 / -1; grid-row: 5 / -1; width: var(--g) }
			section.kachel a:nth-child(1) img,
			section.kachel a:nth-child(1) div		{ width: var(--g); height: var(--g); }
			section.kachel a:nth-child(5) video,
			section.kachel a:nth-child(5) div		{ height: var(--g); }
			section.kachel a:nth-child(7) img,
			section.kachel a:nth-child(7) div		{ width: var(--g); }
				section.kachel a:nth-child(1) h2		{ top: -2.9em; }
				section.kachel a:nth-child(2) h2,
				section.kachel a:nth-child(6) h2,
				section.kachel a:nth-child(7) h2		{ top: -9.4em; }
/* Inhalt-Abschnitte */

/* Hintergrundbilder */
	#infopost				{ background-image: url(../bilder/elemente/holz-weiss-detail.jpg); background-repeat: repeat-y; background-size: 100% auto; }
	#herstellung			{ background-image: url(../bilder/elemente/holz-weiss-detail.jpg); background-repeat: repeat-y; background-size: 100% auto; padding: 3em 0; }
	#abfall					{ background-color: var(--dg); padding: 3em 0; }
/* Anordnung der einzelnen Elemente */
 	#schweden,
 	#nachhaltig 				{ display: grid; gap: var(--r); align-items: center; grid-template-columns: 1fr 1fr 1fr; background-color: var(--dg); grid-template-rows: repeat(5, auto); padding: 0 var(--r); margin: var(--r) 0; }
	 	#schweden div:nth-of-type(1),
	 	#nachhaltig div:nth-of-type(1)	{ display: none; }
	 	#schweden h2,
	 	#nachhaltig h2						{ grid-column: 1 / -1; grid-row: 1 /  2; text-align: center; }
	 	#schweden img:nth-of-type(1),
	 	#nachhaltig img:nth-of-type(1)	{ grid-column: 3 / -1; grid-row: 2 /  3; }
	 	#schweden img:nth-of-type(2),
	 	#nachhaltig img:nth-of-type(2) 	{ grid-column: 1 /  2; grid-row: 3 /  4; }
	 	#schweden img:nth-of-type(3),
	 	#nachhaltig img:nth-of-type(3) 	{ grid-column: 3 / -1; grid-row: 4 /  5; }
	 	#schweden p:nth-of-type(1),
	 	#nachhaltig p:nth-of-type(1)		{ grid-column: 1 /  3; grid-row: 2 /  3; }
	 	#schweden p:nth-of-type(2),
	 	#nachhaltig p:nth-of-type(2)		{ grid-column: 2 / -1; grid-row: 3 /  4; }
	 	#schweden p:nth-of-type(3),
	 	#nachhaltig p:nth-of-type(3)		{ grid-column: 1 /  3; grid-row: 4 /  5; }
	 	#schweden a,
	 	#nachhaltig a							{ grid-column: 1 / -1; grid-row: 5 / -1; }
	#erinnerung							{ display: grid; gap: 2vw; align-items: center; grid-template-columns: 45vw 45vw; grid-template-rows: repeat(8, auto); margin: 0 auto; }
	 	#erinnerung h2					{ grid-column: 1 / -1; grid-row: 1 / 2; text-align: center; }
	 	#erinnerung img:nth-of-type(1)	{ grid-column: 1 /  2; grid-row: 2 /  3; }
	 	#erinnerung img:nth-of-type(2)	{ grid-column: 2 / -1; grid-row: 4 /  5; }
	 	#erinnerung p:nth-of-type(1)		{ grid-column: 2 / -1; grid-row: 2 /  3; }
	 	#erinnerung p:nth-of-type(2)		{ grid-column: 1 / -1; grid-row: 3 /  4; }
	 	#erinnerung p:nth-of-type(3)		{ grid-column: 1 /  2; grid-row: 4 /  5; }
	 	#erinnerung p:nth-of-type(4)		{ grid-column: 1 / -1; grid-row: 5 /  6; }
	 	#erinnerung p:nth-of-type(5)		{ grid-column: 1 / -1; grid-row: 6 /  7; }
	 	#erinnerung video						{ grid-column: 1 / -1; grid-row: 7 /  8; height: 70vh; min-height: 30vw; width: auto; max-width: 90vw; margin: 0 auto; }
	 	#erinnerung a							{ grid-column: 1 / -1; grid-row: 8 / -1; }
 	#geschichtensteine					{ display: grid; gap: var(--r); grid-template-columns: repeat(2 , calc(50vw - 1.5*var(--r))); grid-template-rows: repeat(3 , auto); padding: var(--r); }
	 	#geschichtensteine h2			{ text-align: center; grid-column: 1 / -1; grid-row: 1 / 2; }
	 	#geschichtensteine p				{ background-color:rgb(30 30 30 /0.7); margin: 0; padding: var(--r); border-radius: var(--r); }
	 	#geschichtensteine a				{ text-align: center; grid-column: 1 / -1; grid-row: 3 / -1; }
 	#behandlung 							{ display: grid; gap: var(--r); grid-template-columns: 1fr; grid-template-rows: repeat(8,auto); padding: var(--r); background-color: var(--mg); }
	 	#behandlung div					{ display: none; }
	 	#behandlung img					{ max-height: 12em; max-width: 70vw; margin: 0 auto; }
	 	#behandlung h2						{ grid-row: 1 /  2; text-align: center; }
	 	#behandlung img:nth-of-type(1) {grid-row: 3 /  4; }
	 	#behandlung img:nth-of-type(2) {grid-row: 5 /  6; }
	 	#behandlung img:nth-of-type(3) {grid-row: 7 /  8; }
	 	#behandlung p:nth-of-type(1)	{ grid-row: 2 /  3; }
	 	#behandlung p:nth-of-type(2)	{ grid-row: 4 /  5; }
	 	#behandlung p:nth-of-type(3)	{ grid-row: 6 /  7; }
	 	#behandlung a						{ grid-row: 8 / -1; }
	 	#einfangen h2					{ text-align: center; }
	 	#einfangen img					{ display: none; }
	 	#einfangen video				{ margin: var(--s) auto; min-height: 30vw; max-height: 70vh; width: auto; }
 	#infopost							{ padding: var(--s); }
	 	#infopost h2					{ text-align: center; }
 	#deinstein							{ display: grid; gap: var(--r); align-items: center; grid-template-columns: repeat(2, calc(50vw - 1.5*var(--r))); grid-template-rows: repeat(6, auto); padding: 0; }
	 	#deinstein h2					{ grid-column: 1 / -1; grid-row: 1 /  2; }
	 	#deinstein img					{ grid-column: 1 /  2; grid-row: 2 /  3; }
	 	#deinstein p:nth-of-type(1) {grid-column: 2 / -1; grid-row: 2 /  3; }
	 	#deinstein p:nth-of-type(2) {grid-column: 1 / -1; grid-row: 3 /  4; }
	 	#deinstein p:nth-of-type(3) {grid-column: 1 / -1; grid-row: 4 /  5; }
	 	#deinstein p:nth-of-type(4) {grid-column: 1 / -1; grid-row: 5 /  6; }
	 	#deinstein a:nth-of-type(2) {grid-column: 1 / -1; grid-row: 6 / -1; }
}