/*FONTS*/

/*
 font-family: "Raleway", sans-serif;
font-family: 'Cinzel Decorative', cursive;
font-family: 'Open Sans', sans-serif;
font-family: "Splash", cursive;
 font-family: "Montserrat", sans-serif;*/

@font-face {
	local('Windsong');
	font-family: 'Windsong';
	src:url('Windsong/Windsong.ttf') format:('ttf');
	font-weight:normal;
	font-style:normal;
}

@font-face {
	font-family: '1942 report';
	src:url(1942-report/1942.ttf) format:('ttf');
	font-weight:normal;
	font-style:normal;
}

@font-face {
	local('Black Jack');
	font-family: 'Black Jack';
	src:url('blackjack/blackjack.otf') format:('otf');
	font-weight:normal;
	font-style:normal;
}

@font-face {
	local('Splash Regular');
	font-family: 'Black Jack';
	src:url('Splash/bSplash-Regular.ttf') format:('ttf');
	font-weight:normal;
	font-style:normal;
}
@font-face {
	local('Raleway Variable');
	font-family: 'Raleway';
	src:url('Raleway/Raleway-VariableFont_wght.ttf') format:('ttf');
	font-weight:normal;
	font-style:normal;
}





/*ROOT-VARIABLEN*/
:root {
	--greenColor:rgba(47,79,79,1.0);
	--linkColor:rgba(178,34,34,1.0);
	--link2Color:rgba(138,79,0,1.0);
	--greenLightColor:rgba(47,79,79,0.6);
	--textColor:rgba(0,0,0,0.8);
	--dropSh:drop-shadow(3px 3px 5px rgba(0,0,0,0.6));
	--step--3: clamp(0.651rem, 0.6104rem + 0.2034vi, 0.768rem);
	 --step--2: clamp(0.7813rem, 0.7191rem + 0.3109vi, 0.96rem);
	 --step--1: clamp(0.9375rem, 0.8462rem + 0.4565vi, 1.2rem);
	 --step-0: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem);
	 --step-1: clamp(1.35rem, 1.1674rem + 0.913vi, 1.875rem);
	 --step-2: clamp(1.62rem, 1.3683rem + 1.2587vi, 2.3438rem);
	 --step-3: clamp(1.944rem, 1.6012rem + 1.7142vi, 2.9297rem);
	 --step-4: clamp(2.3328rem, 1.8704rem + 2.3118vi, 3.6621rem);
	 --step-5: clamp(2.7994rem, 2.1808rem + 3.0927vi, 4.5776rem);
	 --step-6: clamp(3.3592rem, 2.5374rem + 4.1092vi, 5.722rem);
	 --step-7: clamp(4.0311rem, 2.9453rem + 5.4287vi, 7.1526rem);
	  --step-8: clamp(4.8373rem, 3.41rem + 7.1364vi, 8.9407rem);
	  --step-9: clamp(5.8048rem, 3.9365rem + 9.3411vi, 11.1759rem);
	  --step-10: clamp(6.9657rem, 4.5295rem + 12.1811vi, 13.9698rem);

}

html  {font-size:100%; font-size:16px; background:white; scroll-behavior: smooth;}

body { font-family: "Montserrat", sans-serif;/*font-family: 'Open Sans', sans-serif; /* font-family: "Raleway", sans-serif;*/ min-height:100vh;  width:100%; line-height:1.5; margin:0; padding:0;  overflow-x:hidden; color:var(--textColor);  font-size:1rem;  background: transparent; transition:all 0.8s ease-in-out;
	 display:grid; gap:2rem; 
	 grid-template-columns: 1fr 64rem 1fr; 
	 grid-template-areas: ". header ." 
						  ". main ." 
						  "footer footer footer";
	grid-template-rows: auto 1fr auto; }

*, *:before, *:after {box-sizing:border-box; margin:0; padding:0;  quotes: "»" "«";}

h1 {font-family: 'Cinzel Decorative', cursive; font-size:var(--step-4); text-shadow:0px 1px 1px rgba(255,255,255,1.0); margin:2rem 0; hyphens:auto; justify-self:center;}
h2 { font-family: "Splash", cursive; font-size:var(--step-5); color:#aaa6d7; -webkit-text-stroke:1px blue; margin:1rem 0; column-span:all;}

p {font-size:var(--step--1); margin-bottom:0.5rem;}
p.meta, span.meta {color:rgba(0,0,255,1.0);}
p.maer, span.maer {color:rgba(0,128,128,1.0 );}
p.eingerueckt {font-style:italic; font-variant:normal; font-size:1rem; background:rgba(0,0,0,0.1); padding:0.25rem;}
span.italic {font-style:italic;font-variant:all-petite-caps;}
strong {font-weight:bolder; font-variant:small-caps;}

a:link, a:visited {color:darkslategray; }
a:hover, a:focus, a:active {color:firebrick;}

a.none {text-decoration:none; float:right; font-size:var(--step-3); color:blue;}
hr {margin:1rem;}

header, main, footer {padding:20px 50px;}

aside.links, aside.hauptseite {padding:0px 50px; display:grid;}

header {display:grid;}


img {max-width:100%; display:block; height:auto; border:0.5px solid var(--greenColor);}

header {grid-area:header;}
footer {grid-area:footer;}

main { grid-area:main; height:auto; width:auto; display: grid;
      grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr) );
      grid-auto-rows: 9.375rem;	  
      grid-auto-flow: dense;
      grid-gap: 0.8rem;		}
	  
main.alles {display:block; padding:2rem; }
		
/*FENSTERCHEN*/

.fensterchen {border:2px solid gold; display:grid; place-items:center; box-shadow:inset 1px 0px 1px rgba(0,0,0,1.0), 4px 4px 4px rgba(0,0,0,0.4); cursor:pointer;  background-color:white; background-blend-mode:difference; background-size:contain; background-repeat:no-repeat; background-position: center; transition:all 0.4s ease-in-out;}
.fensterchen > p {color:white; font-size:3rem; font-family: 'Cinzel Decorative', cursive; text-shadow:1px 1px 1px black;}
 .fensterchen:first-child {border-radius:50%;}

.fensterchen:hover {box-shadow:inset 1px 0px 1px rgba(0,0,0,1.0), 10px 10px 100px rgba(0,0,0,0.35);}


.fensterchen.span1  {grid-column: span 1; grid-row: span 1;}
.fensterchen.spanb2 {grid-column: span 2; grid-row: span 1;}
.fensterchen.spanh2 {grid-column: span 1; grid-row: span 2;}
.fensterchen.span2  {grid-column: span 2; grid-row: span 2;}
.fensterchen.bg1 {background-image:url(images/17_Weihnachtsbaum_Dana_2.png);}
.fensterchen.bg2 {background-image:url(images/01_Weihnachtsbaum_Noah_def.png);}
.fensterchen.bg3 {background-image:url(images/06_Weihnachtsbaum_Eliah_2.png);}

/*FENSTER*/
.fenster {position:fixed; top:0px; left:0px; right:0px; bottom:0px; border:3px dashed gold; background:lavender; padding:20px; z-index:10; transform: translateX(-100vw); transition:transform 0.8s 0.2s ease-in-out;  overflow-x:hidden; overflow-y:scroll; display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr; cursor:pointer;}
.fenster .inner p.zu {text-decoration:underline; color:darkslategray;}

.abschnitt {column-width:20rem; margin:20px 0; padding:20px;  border:2px dashed blue; display:grid; grid-template-columns:1fr; grid-template-rows:auto 1fr;}
.inner {column-width:20rem; column-gap: 3rem; column-rule:1px dotted white; hyphens:auto; padding-bottom:50px; text-align:justify;}
.inner.inspektor,.inner, p.extra p.smallcaps, div.smallcaps, span.smallcaps {font-variant:normal;}
span.nsc, .nsc {font-variant:normal;}

p.BABA {font-size:larger; color:firebrick; text-shadow:0px 1px 1px white;}

.abschnitt .inner p:last-child::after {content:url(#top);}

div.scheinwerfer {background: radial-gradient(circle at center, transparent 20%,#0000ff75 20%);}


@media screen and (max-width:1024px){
	
	body { grid-template-columns:1fr; grid-template-areas: "header" 
					  "main" 
					  "footer";}
	
}

@media screen and (max-width:450px){

	header, main, main.alles footer, aside {padding:10px;}

	.fenster { padding:10px;}


	.fensterchen.span1, .fensterchen.spanb2, .fensterchen.spanh2, .fensterchen.span2 {grid-column:span 1; grid-row: span 1;}

}