@font-face {
	font-family: 'PatronRegular';
	src: url('../fonts/PatronWEB-Regular.woff2') format('woff2'),url('../fonts/PatronWEB-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'PatronBold';
	src: url('../fonts/PatronWEB-Bold.woff2') format('woff2'),url('../fonts/PatronWEB-Bold.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}




/*
BLAU	#0D0D87

ROT		#7E0606

GRÜN	#00742D
	
*/


html{
	scroll-behavior: smooth;
}


body {
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color:#000000;
	color:#000000;
	font-family:'PatronRegular',sans-serif;
	
	line-height:1.3;
}


.container-fluid{
	padding-left:50px;
	padding-right:50px;
	max-width:2500px;
}


h1,h2,h3,h4,h5,h6{
	font-size:100%;
	margin:0;
}
h1{
	padding-bottom:10vw;
	position:relative;
	left:-0.8vw;
}
h2{
	padding-bottom:7vw;
}


h3{
	
}



a{
	color:inherit;
	/*transition:color 0.1s ease-out;*/
}
a:hover{
	text-decoration: none;
	color:inherit;
}
section a:not(.button):hover{
	opacity:0.5;
}


section{
	min-height:100vh;	
	padding-top:10vw;
	padding-bottom:10vw;
	position:relative;
	
	color:#ffffff;
	background-color:#000000;
}

/*.section-inner{

	position: absolute;

	min-height:100vh;
	height:100%;
	
	top:0;
	clip: rect(0, auto, auto, 0);
	padding-top:10vh;
	padding-bottom:10vh;
}*/

.bereich{
	padding-bottom:7vw;
}



/* --------------------------------- 
	
	TYPOGRAFIE
	 
----------------------------------*/



/* Grösse 1 */
body{
	font-size:calc(10px + 0.7vw);
}

/* Grösse 2 */
h2,
section#netzwerk table td:nth-child(1),
section#netzwerk table td:nth-child(3),
.b-adresse,
.b-alle-projekte a span{
	font-size:200%;
}

@media screen and (max-width: 991px) {
	
	/* Grösse 2 */
	h2,
	section#netzwerk table td:nth-child(1),
	section#netzwerk table td:nth-child(3),
	.b-adresse,
	.b-alle-projekte a span{
		font-size:150%;
	}
	
}

/* Grösse 3 */
h1{
	font-size:10vw;
	line-height:1;
}

@media screen and (max-width: 450px) {
	h1{
		font-size:15vw;
	}
}



/* ---------------------------------
	
	OBJEKT
	
-----------------------------------*/
/*

.kreis{
	width:20vw;
	height:20vw;
	border:1px solid #FFFFFF;
	border-radius:50%;
	position:fixed;
	right:50px;
	top:250px;
	
}



.kreis-traeger{
	border-color:#0D0D87;
	background: linear-gradient(180deg, rgba(13,13,135,1) 0%, rgba(0,116,45,1) 100%);
}
.kreis-projekte{
	border-color:#00742D;
	background: linear-gradient(180deg, rgba(0,116,45,1) 0%, rgba(126,6,6,1) 100%);
	background: linear-gradient(180deg, rgba(126,6,6,1) 0%, rgba(0,116,45,1) 100%);
}
.kreis-netzwerk{
	border-color:#7E0606;
	background: linear-gradient(180deg, rgba(126,6,6,1) 0%, rgba(0,0,0,1) 100%);
}*/


section{
	
	/*background-position:top 250px right 50px;*/
	background-position:top 12vw right 50px;
	background-attachment:fixed;
	background-size:20vw 20vw;
	/*background-size:25vw 25vw;*/
	background-repeat:no-repeat;
}
section#intro{
	background-image:url(../bilder/objekt/auge_1.svg);
	/*background:none;*/
}
section#traeger{
	background-image:url(../bilder/objekt/auge_2.svg);
	/*background-image:url(../bilder/k_blau.png);*/
}
section#projekte{
	background-image:url(../bilder/objekt/auge_3.svg);
	/*background-image:url(../bilder/k_gruen.png);*/
}

section#netzwerk{
	background-image:url(../bilder/objekt/auge_4.svg);
	/*background-image:url(../bilder/k_rot.png);*/
}
section#kontakt{
	/*background-image:url(../bilder/kreise/kreis_5.svg);*/
	/*background-image:url(../bilder/k_rot.png);*/
	background-image:url(../bilder/objekt/auge_5_a.svg);
	animation-name: blinzeln;
	animation-fill-mode:backwards;
	animation-duration: 10s;
	animation-iteration-count: infinite;
}


@keyframes blinzeln{
	0%   {background-image:url(../bilder/objekt/auge_5_a.svg);}
	49%   {background-image:url(../bilder/objekt/auge_5_a.svg);}
	50%  {background-image:url(../bilder/objekt/auge_5_b.svg);}
	51%  {background-image:url(../bilder/objekt/auge_5_a.svg);}
	52%  {background-image:url(../bilder/objekt/auge_5_b.svg);}
	53%  {background-image:url(../bilder/objekt/auge_5_b.svg);}
	54%  {background-image:url(../bilder/objekt/auge_5_a.svg);}
}


/*section#traeger{
	background-image:url(../bilder/abdecker_blau.svg),url(../bilder/verlauf.png);
	background-position:top right,top right;
	background-attachment:fixed,scroll;
	background-size:100%,cover;
	background-repeat:no-repeat,repeat;
}
*/






/* ---------------------------------
	
	HEADER
	
-----------------------------------*/

header{
	color:#FFFFFF;
	position:fixed;
	width:100%;
	padding:20px 0;
	text-transform:uppercase;
	background:#000000;
	z-index:99;
	transition:background-color 0.1s ease-out;
	
}
header a{
	color:#FFFFFF;
	letter-spacing:0.02em;
	
}


/* Section spezifische header farben */

/* ROT */
body.b-traeger header{
	background-color:#FFFFFF;
	
}
body.b-traeger header a{
	color:#FF0000;
}
body.b-traeger #logo-kulturspot path{
    fill: #FF0000; 
}



/* GRÜN */
body.b-projekte header,
body#b-projekt header,
body.b-projekt-intro header{
	background-color:#000000;
}
body.b-projekte header a,
body#b-projekt header a,
body.b-projekt-intro header a{
	color:#00FF00;
}
body.b-projekte #logo-kulturspot path,
body#b-projekt #logo-kulturspot path{
    fill: #00FF00; 
}



/* BLAU */
body.b-netzwerk header{
	background-color:#FFFFFF;
}
body.b-netzwerk header a{
	color:#0000FF;
}
body.b-netzwerk #logo-kulturspot path{
	fill: #0000FF; 
}



/* WEISS */

body#b-projekt.b-projekt-bilder header{
	background-color:#FFFFFF;
}
body#b-projekt.b-projekt-bilder header a{
	color:#000000;
}

body#b-projekt.b-projekt-bilder #logo-kulturspot path{
	fill: #000000; 
}





/* ------------------------- */

.logo-wrapper svg{
	min-width:150px;
	max-width:220px;
	width:15vw;
}

#logo-kulturspot{
	display:block;
}
#logo-kulturspot path {
    fill: white; 
    transition:fill 0.1s ease-out;
}


.nav-container{
	text-align:right;
}
nav{
	text-align:right;
	margin-top:10px;
}
nav ul{
	list-style-type:none;
	padding:0;
	margin:0;
}
nav ul li{
	display:inline-block;
	
}
nav a{
	transition:opacity 0.1s ease-out;
	padding-left:1vw;
	padding-right:1vw;
}
nav li:first-child a{
	padding-left:0;
}
nav li:last-child a{
	padding-right:0;
}

nav:hover a{
	opacity:0.5;
}
nav a:hover{
	opacity:1;
}


/* ---------------------------------
	
	SECTION: INTRO
	
-----------------------------------*/

section#intro{
	color:#ffffff;
	background-color:#000000;
}
section#intro a{
	color:#FFF;
}

section#intro h1{
	padding-top:10vh;
	padding-bottom:10vh;
}



/* ---------------------------------
	
	SECTION: TRÄGER
	
-----------------------------------*/

section#traeger{
	color:#FF0000;
	background-color:#FFFFFF;
}
section#traeger a{

}
.b-textblock{
	border-top:1px solid #FF0000;
	border-bottom:1px solid #FF0000;
	padding-bottom:0px;
}
.b-textblock h2{
	padding-bottom:0px;
}
.b-textblock .row{
	padding-top:7vw;
	padding-bottom:7vw;
}
.b-textblock .row:first-child{
	border-bottom:1px solid #FF0000;
}

/* ---------------------------------
	
	SECTION: PROJEKTE
	
-----------------------------------*/

section#projekte{
	color:#00FF00;
	/*background-color:#E7EFEB;
	border-top:1px solid #00742D;*/
}


.b-projekt-gross{
	padding-top:7vw;
	border-top:1px solid #00FF00;
	border-bottom:1px solid #00FF00;
	margin-bottom:7vw;
}
.b-projekt-gross h2{
	padding-bottom:calc(30px + 1vw);
}

a.button{
	display:inline-block;
	padding:20px 40px;
	border:1px solid #00FF00;
	border-radius:100px;
	margin-top:calc(30px + 1vw);
}
a.button:hover{
	background-color:#00FF00;
	color:#000000;
}

.b-alle-projekte h2{
	padding-top:10px;
	padding-bottom:calc(30px + 1vw);
}
.b-alle-projekte a{
	position:relative;
	display:block;
}
.b-alle-projekte a span{
	opacity:0;
	position:absolute;
	top:0;
	right:20px;
	color:#00FF00;
	/*transition:opacity 0.1s ease-out;*/
}
.b-alle-projekte a:hover span{
	opacity:1;
}




/* ---------------------------------
	
	SECTION: PROJEKT DETAIL
	
-----------------------------------*/

section#projekt-intro{
	color:#00FF00;
	
}

.video{
	margin-top:10vw;
}
.video h2{
	padding-bottom:calc(30px + 1vw);
}
#projekt-bilder{
	background-color:#FFFFFF;
	padding-top:50px;
}

#projekt-bilder .col-lg-6{
	padding-bottom:30px;
}



/* ---------------------------------
	
	SECTION: NETZWERK
	
-----------------------------------*/

section#netzwerk{
	color:#0000FF;
	background-color:#FFFFFF;
}
section#netzwerk a{

}
section#netzwerk table{
	width:100%;
}
section#netzwerk table td a{
	display:block;
	width:100%;
}
section#netzwerk table tr:first-child td{
	border-top:1px solid #0000FF;
}

section#netzwerk table td{
	border-bottom:1px solid #0000FF;
	padding-bottom:3vh;
	vertical-align: top;
}


section#netzwerk table td:nth-child(1){
	width:48%;
	padding-right:10px;
}
section#netzwerk table td:nth-child(2){
	width:48%;
}
section#netzwerk table td:nth-child(3){
	width:4%;
	text-align:right;
}

section#netzwerk table td:nth-child(3) span{
	color:#FFFFFF;
}
section#netzwerk table tr.has-link{
	cursor:pointer;
}
section#netzwerk table tr.act td:nth-child(3) span{
	color:#0000FF;
}
section#netzwerk table tr.act td a{
	opacity:0.5;
}



/* ---------------------------------
	
	SECTION: KONTAKT
	
-----------------------------------*/

section#kontakt{
	color:#ffffff;
	background-color:#000000;
	min-height:101vh;
	padding-bottom:0px;
	
}
section#kontakt a{

}
.b-adresse{
	
}









/* ---------------------------------
	
	RESPONSIVE
	
-----------------------------------*/





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

@media screen and (max-width: 991px) {
	section{
		padding-top:15vw;
		padding-bottom:15vw;
		background-size:25vw 25vw;
	}
	.b-projekt-gross .col-md-6:first-child{
		/*padding-bottom:7vw;*/
	}
	.b-projekt-gross .col-md-6:first-child{
		/*padding-bottom:7vw;*/
	}
	
	
}



@media screen and (max-width: 767px) {
	.b-projekt-gross .col-md-6:first-child{
		padding-bottom:7vw;
	}
	
	.b-textblock h2{
		padding-bottom: 30px;
	}

}

@media screen and (max-width: 700px) {
	section{
		padding-top:25vw;
		padding-bottom:25vw;
	}
	.container-fluid{
		padding-left:25px;
		padding-right:25px;	
	}
	#hauptnav{
		display:none;
	}
	header .col-3{
		max-width:100%;
		width:100%;
		flex:0 0 100%;
	}
	header,
	body.b-traeger header,
	body.b-projekte header,
	body.b-netzwerk header{
		background-color:transparent;
	}
	section{
		background-position:top 20px right 25px;
	}
		
	#projekt-bilder{
		padding-top:25px;
	}
	
}


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


@media screen and (max-width: 450px) {
	
	section{
		padding-top:150px;
		padding-bottom:150px;
	}
	
	section#netzwerk table td,
	section#netzwerk table td:nth-child(1),
	section#netzwerk table td:nth-child(2),
	section#netzwerk table td:nth-child(3){
		width:100%;
		display:block;
		
	}
	section#netzwerk table td:nth-child(1){
		border-bottom:0px;
	}
	section#netzwerk table td:nth-child(3){
		display:none;
	}
	section#netzwerk table tr:first-child td:nth-child(2){
		border-top:0px;
	}
	section#netzwerk table td{
		padding-bottom:10px;
	}
	section#netzwerk table td:nth-child(2){
		padding-bottom:30px;
	}
	
	
	
	.b-adresse br{
		display:none;
	}
	.b-adresse span:not(.s-kreis){
		display:block;
	}
	.b-adresse span.s-kreis{
		display:none;
	}
}