/*FONTS*/

/*font-family: 'Fredericka the Great', cursive;
font-family: 'Merriweather', serif;
font-family: 'Open Sans', sans-serif;*/

/*ROOT-VARIABLEN*/
:root {
	--textColor:rgba(25,25,25,0.9);
	--h2Margin:0 0 1rem;
	--titleFamily: 'Merriweather', serif;
	--slowTransition:all 0.8s ease-in-out;
	--transition:all 0.4s ease-in-out;
	--boxShadow:1rem 1rem 1.5rem rgba(0,0,0,0.8);
	--aNavBoxShadow:0 5px 10px -5px rgba(0,0,0,0.5);;
	--aNavBoxShadowHover:0 10px 20px -10px rgba(0,0,0,0.8);
	
	--redColor:#bb2840;
	--greenColor:seagreen;
	--blueDarkColor:rgba(0,40,55,0.8);
	--blueDarkColorLight:rgba(0,40,55,0.2);
	--markColor:#598898;
	--blueColor:royalblue;
	--blueTColor:rgba(65,105.225,0.5);
	--goldLightColor:rgba(0,215,255,0.5);
	--textFamily:font-family: 'Open Sans', sans-serif;
	--blueZuerichColor:#079aea;
	--blueZuerichLightColor:#079aeac2;
	--greenLogoColor:#90ba15;
	
	--stickyTop:-110px;
	
    --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,body {max-width: 100%;}
html {height:100%; width:100%; font-size:100%; font-size:16px; background:#fff;scroll-behavior: smooth; /*scroll-padding-top:var(--scrollPadding,2rem);*/}

body {background:white;min-height:100vh; width:100%; font-family: 'Open Sans', sans-serif; line-height:1.5; margin:0; padding:0;  overflow-x:hidden; color:var(--textColor);  font-size:1rem; 
	 display:grid; gap:1.5rem; 
	 grid-template-columns: 1fr 80rem 1fr; 
	 grid-template-areas: "header header header" 
		 					". nav ."
						  ". main ." 
						  "footer footer footer";
	grid-template-rows:auto auto 1fr auto ; animation:show 3s  ease-in forwards;}
	
	@keyframes show{
		from { opacity:0.1;}
		to { opacity:1;}
	}

body * {overflow:hidden;}	
body * * {overflow:visible;}

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

::selection {
	background:var(--blueZuerichColor);
	color:#fff;
}


img {max-width:100%; display:block; height:auto;}

section#FotosBanner {grid-template-columns:1fr;}
section#FotosBanner p {grid-column:1/-1;}
section#FotosBanner img {grid-template-columns:1fr;}


/*FONTS*/
h1,h2,h3,h4 {line-height:1.1; font-family: var(--titleFamily); font-variant:small-caps;}
p,a,li,details, details p {font-size:1.2rem}
p {margin-bottom:0.8rem;}
ul {list-style-type:none; margin-bottom:0.8rem;}

ul.gap1rem, ol.gap1rem {display:grid;gap:1rem;}
ul.gap1_5rem {display:grid;gap:1.5rem;}
ul.gap2rem {display:grid;gap:2rem;}
ul.left1rem {margin-left:2rem;}

.top1rem {margin-top:1rem;}


a {color:var(--blueZuerichColor);text-decoration:underline; transition:var(--transition);}
a:hover {color:var(--redColor);}
.italic {font-style:italic;}
.noSmallCaps {font-variant:none;}
.justify {text-align:justify;}

strong {font-weight:900; font-size:larger;}


/*HEADER*/

header#top {transition:top .8s;grid-area:header;min-height:max-content; display:grid; grid-template-rows:auto; grid-template-columns:calc(50vw - 40rem) max-content 1fr 1fr;position:sticky;top:0; z-index:1;
							grid-template-areas:". intro ."}
@media screen and (max-width:480px){
							
	header#top.sticky {top:var(--stickyTop); transition:top .8s; max-width:max-content; height:auto;}

	header#top.sticky .intro {grid-template-rows:6.5rem 90px; }
	header#top.sticky img.logo {height:100px; transition:all .8s ease-in-out;}
	header#top.sticky div.bgTop {background-position:center top;}
}


div.bgTop {grid-column:1/-1;grid-row:1/-1;width:100vw; background-size:cover;isolation:isolate; opacity:0; transition:var(--slowTransition);}
div.bgTop.show {opacity:1;}

.bg1{background:url(images/top/top_1.JPG);background-position:center 30%;}
.bg2{background:url(images/top/top_2.JPG); background-position:center 30%;}
.bg3{background:url(images/top/top_3.JPG);background-position:center 35%;}
.bg4{background:url(images/top/top_4.JPG);background-position:center;}
.bg5{background:url(images/top/top_5.JPG);background-position:center 10%;}
.bg6{background:url(images/top/top_6.JPG);background-position:center 20%;}
.bg7{background:url(images/top/top_7.JPG);background-position:center 40%;}
.bg8{background:url(images/top/top_8.JPG);background-position:center;}
.bg9{background:url(images/top/top_9.JPG);background-position:center;}
.bg10{background:url(images/top/top_10.JPG);background-position:center }
.bg11{background:url(images/top/top_11.JPG);background-position:center;}
.bg12{background:url(images/top/top_12.JPG);background-position:center 20%;}
.bg13{background:url(images/top/top_13.JPG);background-position:center 20%;}
.bg14{background:url(images/top/top_14.JPG);background-position:center 20%;}
.bg15{background:url(images/top/top_15.JPG);background-position:center 20%;}
.bg16{background:url(images/top/top_16.JPG);background-position:center 20%;}
.bg17{background:url(images/top/top_17.JPG);background-position:center 60%;}
.bg18{background:url(images/top/top_18.JPG);background-position:center 60%;}
.bg19{background:url(images/top/top_19.JPG);background-position:center 40%;}
.bg20{background:url(images/top/top_20.JPG);background-position:center 10%;}




.intro {grid-area:intro; padding: 0; margin-left:-0.5rem; position: relative; z-index:1; display:grid; grid-template-rows:6.5rem auto; grid-template-areas:"PlaceHolder" "logo"}
.placeholder {grid-area:PlaceHolder;}
.intro::after {content: "";position: absolute; inset: 0; z-index: -1;background:linear-gradient(90deg,rgba(255, 215, 0, 0.36),rgba(0, 40, 55, 0.35)); /*background:linear-gradient(90deg,rgba(255,215,0,0.5),rgba(0,40,55,0.5)); */mix-blend-mode: multiply; }
img.logo {grid-area:logo;z-index:2; align-self:end; transition:all .8s ease-in-out}



h1.top {font-family: 'Fredericka the Great', cursive; font-variant:small-caps;z-index:1;align-self:end; font-size:clamp(2.5rem,5vw,4rem);color:white; hyphens:none; text-shadow:0 1px rgba(0,0,0,0.8); padding:0.5rem 1rem 0.5rem 0;}

/*ZEN - HAMBURGER*/
div#zen {display:none; width:2.7rem; height:1.6rem; border:1px solid rgba(0,0,0,0.0); position:fixed; top:2rem;right:2rem; overflow:visible; cursor:pointer; z-index:10; background:rgba(255,255,255,0);}
span.zen {display:block; height:0.2rem; background:white; border-radius:0.1rem; position:absolute; left:0; right:0; box-shadow:0px 0.5px 0px black;}
span.zen:first-child { top:0; left:0; right:0;}
span.zen:nth-child(2) { top:50%; margin-top:-2px; left:0; right:0;}
span.zen:nth-child(3) { top:50%; margin-top:-2px;}
span.zen:nth-child(4) { top:50%; margin-top:-2px;}
span.zen:last-child { top:100%; margin-top:-4px; left:0; right:0;}

div#zen:hover {cursor:pointer;}
div#zen.open  span.zen:first-child {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out;}
div#zen.close span.zen:first-child { opacity:1; transition:all 300ms ease-in-out;} 
div#zen.open  span.zen:nth-child(2) {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out 150ms;}
div#zen.close span.zen:nth-child(2) { opacity:1; transition:all 300ms ease-in-out 150ms;} 
div#zen.open  span.zen:last-child  {left:-150%; right:150%; opacity:0; transition:all 300ms ease-in-out 300ms;}
div#zen.close span.zen:last-child  { opacity:1; transition:all 300ms ease-in-out 300ms;} 

div#zen.open  span.zen:nth-child(3) {  opacity:1; transform:rotate(45deg) translate(-4px, 3px); transition:all 300ms ease-in-out; width:calc(141.421% - 6px); } 
div#zen.close span.zen:nth-child(3) {  opacity:0; transform: rotate(0deg) ; transition:all 300ms ease-in-out;  }
div#zen.open  span.zen:nth-child(4) {  opacity:1; transform:rotate(-45deg) translate(-3px, -4px); transition:all 300ms ease-in-out; width:calc(141.421% - 6px); } 
div#zen.close span.zen:nth-child(4) {  opacity:0; transform: rotate(0deg) ; transition:all 300ms ease-in-out;  }

div#zen:hover span.zen:first-child {animation:first 1s linear forwards;}
div#zen:hover span.zen:nth-child(2)  {animation:first 1s 0.2s linear forwards;}
div#zen:hover span.zen:last-child  {animation:first 1s 0.4s linear forwards;}

@keyframes first {
	0%  {transform:translateX(0);}
	25%  {transform:translateX(-1rem);}
	50%  {transform:translateX(0);}
	75%  {transform:translateX(1rem);}
	100%  {transform:translateX(0);}
}
/*UPPS*/

div.ups { display:none;position:fixed; bottom:1rem;right:1rem; font-size:2.5rem; padding:0.5rem;animation:leftRight 2s 5s ease-in-out infinite forwards;  cursor:pointer; z-index:200;}
div.ups a {font-size:2.5rem; text-decoration:none;}
div.ups:hover {animation:none;}
@keyframes leftRight {
	0%  {transform:translateY(0);}
	50%  {transform:translateY(-.8rem);}
	100%  {transform:translateY(0);}
}


/*NAVIGATIiON*/

nav {grid-area:nav; position:sticky;top:1rem; display:grid; grid-template-columns:2fr 3fr; z-index:2; height:min-content; position: -webkit-sticky; }

ul.nav {grid-column:2/-1;list-style-type:none; display:flex; flex-wrap:wrap; gap:0.2rem; justify-content:flex-end;}

a.nav {hyphens:none; display:inline-block;text-decoration:none; color:var(--textColor);font-family: 'Open Sans', sans-serif;box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5); padding:0.3rem 0.8rem; font-size:1.1rem;color:#777; transition:var(--transition);background:rgba(255,255,255,0.7);}

a.nav.mitmachen {background:var(--blueZuerichColor); color:white; font-variant:small-caps; box-shadow: 0 5px 10px -5px rgba(0,0,0,0.5); transition:var(--transition);}


a.nav:hover, a.nav.active, a.nav.mitmachen:hover, a.nav.mitmachen.active {color:var(--redColor); box-shadow: 0 10px 20px -10px rgba(0,0,0,0.8); background:rgba(255,255,255,0.9);z-index:4;}




/*ALLES TOPAKTUELL*/
/*POPUP*/
/*MANTELERLASS*/
/*RICHTPLAN*/

article.hinweisRichtplan {padding:.5rem; background:#d0e488b5; margin:2rem 0 3rem; border-left:solid 2rem #2f5020;
	& p {font-size:2rem;}
	& h3 {font-size:3rem;}
	& a {color: #e41a26;text-decoration:none;}
	& a:hover {color:royalblue;}
	}


article.ueberblenden {background:rgba(7, 154, 234, 0.5);z-index:10;width:100vw;height:100vh;padding-top:20vh; position:fixed; display:grid; grid-template-columns:1fr 3fr 1fr; grid-template-rows:auto; grid-template-areas:" . inhalt .";
	
	& div.inhalt {display:grid;grid-area:inhalt; grid-template-rows:auto auto auto 1fr; grid-template-columns:1fr 2rem;
	 	
	 
	
		& div.close {grid-column:2/-1;grid-row:1/2; height:2rem; background:black; color:#fff; z-index:21; display:grid; place-items:center; cursor:pointer; border-radius:0 1rem;}
		& figure {grid-column:1/-1;grid-row:1/3;}
		& p.text { grid-column:1/-1;grid-row:3/4;padding:1rem; background:white; font-size:1.2rem; font-weight:700;}
		& a {color:blue; font-weight:700;}

	}
}




/*popup*/
article.content.veranstaltung {padding:0; justify-content:start;}
div.popup {position:fixed; inset:0; background:var(--blueZuerichLightColor); z-index:20; display:grid; grid-template-columns:auto 4rem 1fr; grid-template-rows:1fr; gap:2rem; padding:2rem; }
button.popup {width:4rem; height:4rem; font-size:1rem; font-weight:900; background:var(--blueZuerichColor); cursor:pointer; grid-column:2/3;}
/*img.popup {max-width:auto; height:auto;}*/
figure.veranstaltung {padding:.5rem; border:.4rem solid var(--blueZuerichColor); border-radius:.2rem;}

/*div.popup.PUopen  {animation:popupOpen 3s .5s forwards linear;}
div.popup.PUclose {animation:popupClose 3s .5s forwards linear;}

img.popup {}

@keyframes popupOpen{
	0%		{opacity:0; transform:translateX(-100%); }
	100%	{opacity:1; transform:translateX(0); }		
}

@keyframes popupClose{
	0%		{opacity:1; transform:translateX(0); }
	100%	{opacity:0; transform:translateX(-100%);}		
	}*/



/*MAIN*/

main{grid-area:main; min-height:50vw; margin-top:-2rem;}


/*SECTIONS*/



section {min-height:100vh;display:grid;grid-template-columns:5fr 3fr; gap:1rem 5rem;
	grid-template-areas	:	" head head"
			 				"cont info" ;
		grid-template-rows: auto 1fr;
		align-content:start; align-items:start; transform:translateY(5rem); transition:all 1s ease-in-out;opacity:0; overflow:visible;}

section.show {transform:translateY(0);opacity:1;}

header.section{grid-area:head;}
h1.section, h2.section {font-size:clamp(2.5rem,6vmin,3.5rem);margin:0 0 1rem; font-variant:small-caps;}


section#start{
	grid-template-areas	:	" head head"
							"ini ini"
			 				"cont info" ;
		grid-template-rows: auto auto 1fr;}
		

div.initiativen {grid-area:ini; display:grid;grid-template-columns:repeat(auto-fit, minmax(20rem,1fr)); gap:1rem; position:relative;
	& a {color:rgb(158, 195, 69);font-size: var(--step-1); font-weight:600; text-decoration:none;}
	
	
	
	& div.banner {z-index:2; position:absolute; height:var(--step-4);left:30%; top:40%;  background:red; transform:skewy(-10deg); display:grid; place-items:center; animation: ticken 8s alternate-reverse infinite;
		& p{font-size:var(--step-1); font-weight:600; color:white; font-variant:small-caps;padding:0 1rem;}
		}
 }
@keyframes ticken {
 	
	 0% {scale:1;}
	50% {scale:1.2;}
 }

/*CONTENT BEINHALTET DEN HAUPTTEXT (ARTICLE.CONTENT) UND ZUSÄTZLICHE INFORAMTIOINEN (ASIDE.CONTENT)*/
div.content {grid-area:cont; display:grid; gap:2.5rem;}
h2.content,h3.content {margin:var(--h2Margin); font-size:2rem; font-variant:normal;}

article.content,aside.content {width:100%; height:auto; display:grid; gap:0.5rem;}

aside.info {grid-area:info; display:grid; gap:2rem; overflow:visible;}

article.asideInfo {background:#f4f4f4; padding:0.5rem;}
h2.asideInfo,h3.asideInfo { margin:var(--h2Margin); font-variant:small-caps;}

article.asideInfo p{font-size:1rem;}
.scale{transition: var(--slowTransition); transform-origin:right top;}
.scale:hover {background:#fff; transform:scale(1.3) translateX(calc(-50%)); filter:drop-shadow(0 0 0.125rem darkslategray);}

ul.asideInfo li {font-size:1rem; margin-bottom:0.5rem;}


/*START*/
figcaption.quellenangaben, a.quellenangaben {font-size:0.8rem; font-style:italic; font-family: 'Merriweather', serif; margin:0.3rem 0 0 0;}
a.quellenangaben.big {font-size:2rem;}

ul.pfeil li:before {content:'→'; color:var(--redColor); padding-right:0.25rem; font-weight:bolder;}
ul.pfeil2 li:before {content:'→'; color:var(--redColor); padding-right:0.25rem; color:var(--blueZuerichColor);}
ul.circle {list-style-type:disc; margin-left:2rem;}

/*AKTUELL MEDIENMITTEILUNGEN*/

article.content.medienmitteilung {display:grid; gap:2rem;}

dl.medienmitteilung {display:grid;grid-template-columns:1fr; transition:scale 0.5s ease-in-out,opacity 0.5s ease-in-out;}

dl.flzh {padding-left:1rem; border-left:.5rem solid var(--blueZuerichColor); display:grid;gap:.5rem;}

dl.flzh dt, dl.flzh dd{justify-self:start; font-weight:bolder;}
dl.flzh a {color:var(--blueZuerichColor);}
dl.flzh a:hover {color:var(--redColor);}

dd.withMarker {display:list-item; list-style-type:square; margin-left:1rem; padding-left:1rem; width:100%;}
dd.withMarker::marker {color:var(--redColor); vertical-align:baseline;}
dd.withMarker.video::marker {color:#0000;}

/*RICHTPLAN*/

section#richtplan{grid-template-areas	:	" head head"
			 				"cont cont" ;}
section#richtplan aside.info {display:none;grid-area:none;}


 
/*VISUALISIERUNGEN*/

section#visualisierungen{grid-template-areas	:	" head head"
			 				"cont cont" ;}
section#visualisierungen aside.info {display:none;grid-area:none;}

article.content.fotogallery {display:grid; grid-template-columns:2.5rem 1fr 2.5rem; grid-template-rows:1fr 2rem 1fr max-content;}

figure.fotogallery {background:white;align-self:end;grid-column:1/-1;grid-row:1/-1; display:grid; grid-template-columns:1fr; grid-template-rows:1fr max-content; opacity:0; transition:opacity 0.8s ease-in-out; gap:0.5rem;}


figure.fotogallery.fotoShow {opacity:1; transition:opacity 0.8s ease-in-out;}

figcaption.fotogallery {grid-column:1/-1;grid-row:2/-1; align-self:start; background:white; font-size:1.2rem;}

img.fotogallery {grid-column:1/-1; grid-row:1/2; width:100%;height:auto; align-self:start;}


div.prev, div.next {grid-row:2/3; font-size:4rem; line-height:0; color:white; background:var(--blueZuerichColor); cursor:pointer; padding:.5rem 0;margin-right:.5rem;}
div.prev {grid-column:1/2;  z-index:20;}
div.next {grid-column:-2/-1;  z-index:20;}


div.prev:hover, div.next:hover;{animation:none;}

@keyframes hinUndHerXXX {
	0%  {transform:translateX(-.2rem);}
	50%  {transform:translateX(.6rem);}
	100%  {transform:translateX(-.2rem);}
}




/*ARGUMENTE*/


details.argumente, details.richtplan   {padding-left:0;}
details.argumente > summary, details.richtplan > summary {list-style-position:outside; font-size:1.6rem;text-align:left; margin:0; padding:0 0 0.5rem 0; transition:var(--slowTransition); line-height:1.1; 
	/* font-family: var(--titleFamily);*/ font-variant:small-caps; font-weight:bolder; margin-bottom:1rem;}
/*details.argumente:hover > summary {background:rgba(255,215,0,0.5);}*/

summary::-webkit-details-marker, summary::marker {color:var(--blueZuerichColor); font-size:clamp(1.5rem,7vmin,2rem); opacity:0.8;}

details[open] summary ~ *, details details[open] summary ~ * {
  animation: sweep .8s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; }
  100%  {opacity: 1; }
}


figure.blockquote {margin-left:0;background:#efefef; padding:1rem 0.5rem 0.5rem 0.5rem; overflow:visible;}
figure.blockquote figcaption {text-align:center;}
blockquote { text-align:left; position:relative; padding-left:2.5rem; overflow:visible;}
blockquote::before {content: '“'; position:absolute; display:block; top:-5.5rem; left:-0.6rem; font-size:10rem;opacity:.8; color:var(--blueZuerichColor); overflow:visible;}

blockquote > p {text-align:center; font-family:var(--titleFamily); overflow:visible;}
blockquote p::first-letter {font-size:2.5rem;line-height:1.2rem; padding-left:0rem;overflow:visible;}

/*article.asideInfo:hover p, article.asideInfo:hover ul.asideInfo li {font-size:1.2rem;}*/
/*figure.asideInfo {transition:var(--slowTransition); transform-origin:right center;}
figure.asideInfo:hover {transform:scale(1.5);}*/

/*IFRAME YOUTUBE EINBETTEN*/
.video {   aspect-ratio: 16 / 9;   width: 100%; }


/*PRO & CONTRA*/
details.proContra  {padding-left:0;}
details.proContra > summary {list-style-position:outside; font-size:1.6rem;text-align:left; margin:0; padding:0 0 0.5rem 0; transition:var(--slowTransition); line-height:1.1; /*font-family: var(--titleFamily);*/ font-variant:small-caps; font-weight:bolder; margin-bottom:1rem;}

mark.proContra {background:var(--blueZuerichColor);color:#fff;}


div.double {display:grid;grid-template-columns:1fr 1fr; margin:0.5rem 0;}
figure.double1 {display:grid; grid-template-columns:1fr;justify-items:center; background:#efefef;}
img.double1 {transition:var(--slowTransition);}
img.double1:hover {transform:scale(1.5);}
figure.double1 figcaption {font-size:1rem;font-style:italic;}

figure.double {display:grid; grid-template-columns:1fr 1fr; place-items:center; background:#efefef;}
figure.double img {aspect-ratio:1.5; width:100%; transition:var(--slowTransition);}
figure.double img:hover {transform:scale(1.2);}



object.object,iframe.object {width:101%; aspect-ratio:2/1;}
figure.object {margin-left:0;background:#efefef; display:grid;justify-items:center;}

/*Ueber Uns*/

div.wrapperVorstand {display:grid;grid-template-columns:repeat(auto-fill, minmax(12rem,1fr)); gap:1.5rem;padding:0.5rem 0; transition:all 0.5s ease-in-out;}
article.vorstand {display:grid;gap:1rem; align-items:start; align-content:start; text-align:center; background:#fff;transition:var(--slowTransition); filter:drop-shadow(0 0 0.3rem rgba(0,0,0,0.5));}
article.vorstand:hover {filter:drop-shadow(0 0 0.7rem var(--blueZuerichColor));}

div.wrapperVorstand:has(article.vorstand:hover) article.vorstand:not(:hover) {
  filter:grayscale(100%) drop-shadow(0 0 0.3rem rgba(0,0,0,0.5));transition:all 0.5s ease-in-out;scale:0.95;
}

article.vorstand h4 {margin:1rem 0.5rem 0.5rem;font-family:var(--textFamily);}
figure.portrait figcaption {text-align:left; margin:1rem 0.5rem 0.5rem}

dl.vorstand dt {margin:1rem 0; font-size:1.6rem; line-height:1.1; font-family: var(--titleFamily); font-variant:small-caps;}
dl.vorstand dd, dl.vorstand a {font-size:1rem;}



/*Oppisitioin*/

article.links a {font-size:0.8rem;}
article.columns2 {columns:10rem;}


/*FOOTER*/
footer#kontakt {grid-area:footer;display:grid;grid-template-columns: 1fr 80rem 1fr; grid-template-areas: ". footerContent . ";margin-top:3rem; margin-bottom:3rem;}

	
	
.contentFooter {grid-area:footerContent; display:grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));gap:1.5rem;}

aside.footer {display:grid; gap:1rem; align-content:start;padding:1rem; margin:1rem 0;border:1px solid var(--blueDarkColor); transform:skewY(-4deg);background:#efefef; box-shadow:var(--aNavBoxShadow); transition:var(--transition);}
aside.footer:hover {box-shadow:var(--aNavBoxShadowHover);}
aside.footer * {transform:skewY(4deg); text-align:left;}
aside.footer * * {transform:skewY(0);}
aside.footer p, aside.footer a {font-size:1rem;margin-bottom:0.5rem;}
aside.footer > h2,aside.footer > h3, details.footer:first-child {margin-top:2rem;}

details.footer summary {list-style-position:outside; font-variant:small-caps; font-family: "Merriweather", serif}

details.footer summary::-webkit-details-marker, details.footer summary::marker {color:var(--blueZuerichColor); font-size:1.2rem; }



/*KONTAKTFORMULAR*/
form { width:100%;  display:grid; grid-template-columns:1fr; }

fieldset.kontakt {display:grid; grid-template-columns:1fr; grid-template-rows:auto; gap:.75rem; border:none;}

div.form {width:100%; height:auto;}
div.form.test {display:grid; grid-template-columns:auto 1fr; grid-gap:1rem; color:rgba(65,105,225,1);}
div.form.submitbox {display:grid; grid-template-columns:1fr 1fr; grid-gap:1rem; margin-top:1rem;}

input, textarea {width:100%; border:none; border-bottom:2px solid var(--blueZuerichColor); display:grid; align-content:end;background-color:transparent; height:2rem; font-size:1rem; color:var(--redColor);}
textarea {height:5rem; font-size:1rem;}
input::placeholder, textarea::placeholder {font-size:1rem; font-family: 'Open Sans', sans-serif; color:var(--blueZuerichColor);/*rgba(65,105,225,1)*/ align-self:end;}
label.none {display:none;}

input, label { display:flex; align-items:center; justify-content:center;}
input.absenden, input.abbrechen {background:white; box-shadow:var(--aNavBoxShadow); cursor:pointer;text-align:center; color:var(--textColor);}
div#output {width:100%; min-height:auto; border:1px solid transparent; padding:1rem; }
div#output p, div#output * {font-size:1rem; color:var(--blueZuerichColor);}
div#output.redBorder {border:2px dotted var(--blueZuerichColor);}
table.output {width:100%;}
table.output td {width:50%;}

/*BREAKPOINTS*/
@media screen and (max-width:1350px){
	

	
	body {grid-template-columns: 1fr; 
		grid-template-areas: 	"header" 
								"nav"
						  		"main " 
						 	   "footer";}
	
	nav,main,footer {margin:0 1rem; width:calc(100vw - 2rem);margin-right:2rem;}
	header#top {grid-template-columns:max-content 1fr;
						grid-template-areas:"intro . ""logo .";}
	div.intro {margin:0;}
	footer#kontakt {grid-area:footer;display:grid;grid-template-columns: 1fr; grid-template-areas: "footerContent"; margin-top:2rem;}
}

@media screen and (max-width:900px){
	section#start {grid-template-areas:"head"
										"ini"
										"cont"
										"info";
					grid-template-rows:auto;
					grid-template-columns:1fr;}
		section{grid-template-areas	:"head"
			 						"cont"
									"info";
		grid-template-columns:1fr;
		grid-template-rows: auto 1fr auto;}
		.scale:hover {transform:scale(1);}

		div.ups {display:block; z-index:100;}				
		
		div#zen {display:block; z-index:100;}
		/*nav {display:grid; position:fixed; inset:0; background:rgba(255,255,255,0.99);  grid-template-columns:1fr; grid-template-rows:1fr auto 3fr; grid-template-areas: "." "navi" "."; transform:translateX(0%); opacity:1; transition:all 0.8s ease-in-out;}
	
		nav.open {transform:translateX(0); opacity:1;}
	
		ul.nav {grid-area:navi;display:grid; grid-template-columns:1fr; grid-template-rows:repeat(12, auto); gap:1rem; place-content:center; padding:1rem 2rem;  background:transparent; } 
		ul.nav li {justify-self:end;}
	
		a.nav {font-size:clamp(1rem, 2rem, 3rem);}*/
		nav {grid-area:unset; width:100%;height:100%;position:fixed; inset:0; padding:0 0.5rem; display:grid; grid-template-columns:1fr; grid-template-rows:1fr auto 3fr; background:linear-gradient(90deg,rgba(0,0,0,0.95),rgba(0,0,0,0.5));transition:all 0.8s ease-in-out; transform:translateX(100vw); opacity:0; z-index:1; padding:0.3rem;}

		nav.isVisible {transform:translateX(0);opacity:1; z-index:10;}
		ul.nav { width:100%; list-style-type:none; grid-row:2 / 3; display:grid; grid-template-columns:1fr; justify-items:end;}
		ul.nav li {display:grid;}
		a.nav,a.nav.active,a.nav:hover {text-align:end; background:none;box-shadow:none; font-size:clamp(1.5rem,6vmin,3rem); line-height:1.1; color:white; transition:all 0.8s ease-in-out; position:relative;}
		a.nav:hover, a.nav:focus {transform:translateX(-2rem); text-decoration:underline;/* -webkit-text-stroke:1px var(--textColor);  -webkit-text-fill-color: white;*/ }
		a.nav::after {content:' \2190 ';  font-size:4vmin; line-height:1.1; z-index:10; transition:all 0.8s ease-in-out; opacity:0; transform:translateX(2rem); text-decoration:none;}
		a.nav:hover::after, a.nav:focus::after {content:' \2190 '; opacity:1; transform:translateX(0);}
		
		
}