/* CSS Document: Die Spuernasen - Das riecht nach Gefahr */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700,800');
@import url("scrollbars.css");


	:root:before {
		content:'';
		/* partial fallback */
		background-image: url();
		visibility: hidden;
		position: absolute;
		left: -999em;
	}

	* { 
		margin: 0; 
		padding: 0;
		outline: 0; 
		border: 0;
		border-spacing: 0;
		border-collapse:collapse;
		box-sizing: border-box !important;
	}

	html, 
	body {
		width:100%;
		height:100%;
		overflow-y:hidden;
		}

	body {
		background: url(../img/layout/elements/spuerback.png) repeat #1a1b1a;
		background-size:10%;
		text-align:center;
		font: 400 100.01% 'Open Sans', Verdana, sans-serif;
		color:hsl(0, 0%, 90%);
	}

	#container {
		position: relative;
        display: grid;
		left: 50%;
		top: 50%;
		-webkit-transform: translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		transform: translate(-50%,-50%);
		width:100vw;
		min-width: 360px;
		text-align:left;
	}


    @media (max-width: 749px) {

        #container {   
            height:100%;
            grid-template-rows: 15% auto 8%;
            grid-template-columns:100%;
			max-width:550px !important;
			/* font-size: clamp(10px,0.8em,16px); */
			background: radial-gradient(circle at 0% 25%, #09335d 35% , #05111d);
        }

        #logo {
            width:90%;
            height: auto;
            /* background: #2c659b; */
        }

        main {
			height: 100%;
            align-self: baseline;
            grid-template-rows: 4.5% auto;
			row-gap: 4.5%;
        }

        nav {
            grid-row: 1;
            height: 100%;
			width: 100%;
			grid-template-columns: repeat(6,auto);
			grid-template-rows: 100%;
			justify-items:stretch;
			font-size: 0.8em;
        }

        nav a {
			padding: 0.4em;
            border-bottom-left-radius: 0.5em;
            border-bottom-right-radius: 0.5em;
            border: 2px solid hsl(215, 35%, 5%);
			border-top: none;
        }

        nav a:hover,
        nav a.active {
            background: linear-gradient(to bottom, rgb(255, 244, 91), rgb(255, 229, 80) 12%, #ff9900 25%, rgb(255, 206, 44) 80%,  hsl(36, 100%, 43%) 90%)
        }

        #content {
            grid-row: 2;
			grid-template-rows: max-content auto;
			width:100%;
			height: 98%;
			padding: 0 0.5em 0 0.5em;	
			font-size: 1em;
        }

        .content-post-left {
            text-align: center;
			margin-bottom: 1.5em;
			/* background-color: rgba(5, 10, 15, 0.5); */
        }

        .content-post-middle {
			margin-bottom: 5em;
        }

		footer {
			grid-template-columns: 13% 13% auto;
			font-size: 0.8em;
		}
		
		footer .sitemap {
			display: grid;
			margin-right: 5%;
			grid-template-rows: 50%;
			/* background-color: #AD1622; */
		}

		#newsletter-form {
			width: 100%;
		}

		a.button-back {
			bottom:0.65em;
			right:0.65em;
			width:2.25em;
			height:1.5em;
		}
    }


    @media (min-width: 750px) {

        #container {  
            height:calc(100vw*0.684210);	
			max-width: 1200px !important;
            max-height: calc(1200px*0.684210) !important;
            grid-template-rows: 20% auto 10%;
		    /* font-size: clamp(12px,1.25vw,16px); */
			box-shadow: 0px 0px 35px #3d3937;
			border: 1px solid #4f4a48 ;
			background: radial-gradient(circle at 40% 75%, hsl(210, 82%, 20%) 20% , #05111d);
        }
		
		header {
			border-bottom: 1px solid #4f4a48 ;
		}

        #logo {
            width: 47%;
			height: auto;
            align-self: center;
			/* background: #2c659b; */
        }
        
        main {
            grid-template-columns: 15% 80%;
            column-gap: 5%;
			font-size: 1.1em;
            /* height:calc(100%*0.5625);  */
        }

        nav {
            grid-column: 1;
            align-self:center;
            align-content: space-between;
            width:100%;
            height:90%;
			font-size: 1.15em;
        }

        nav a {
            width:100%; /*125px*/
			padding: 5% 0;
            border-top-right-radius: 0.5em;
            border-bottom-right-radius: 0.5em;
            border: 0.2em solid hsl(215, 35%, 5%);
			border-left: none;
        }

        nav a:hover,
        nav a.active {
            border-color: white;
            background: linear-gradient(to bottom, rgb(255, 244, 91), rgb(255, 229, 80) 12%, #ff9900 25%, rgb(255, 206, 44) 80%,  hsl(36, 100%, 43%) 90%)
        }

        #content {
            grid-column: 2;
            align-self: center;
			width:97%;
            height:90%;
            grid-template-columns: 15% 75%;
            column-gap: 3%;
        }

		.content-post-left,
		.content-post-middle {
			margin-bottom:2.9em;
		}

		.content-post-left {
			text-align: right;
		}

		footer {
			grid-template-columns: 7.5% 7.5% auto;
			border-top: 1px solid #4f4a48 ;
		}
			
		footer .sitemap {
			margin-right: 2.5%;
			max-width: 75%;
			font-size: 1em !important;
			/* background-color: #AD1622; */
		}

		#newsletter-form {
			width: 50%;
		}

		a.button-back {
			bottom:0.75em;
			right:0.65em;
			width:3.75em;
			height:2.1em;
		}

    }

	header,
	main,
	footer {
		position:relative;
        width: 100%;
	}

	header {
        grid-row: 1;
        display: grid;
        height: 100%;
        align-content: center;
        text-align: center;
		background: linear-gradient(to right, #262321 ,#000 65%);
	}

	main {
		grid-row: 2;
		display:grid;
		overflow: hidden !important;
	}

	footer {
        grid-row: 3;
		display: grid;
        height: 100%;
		background: linear-gradient(to right, #262321 ,#000 65%);
		font-weight:700;
	}

	footer a.x, 
	footer a.x:visited {
		grid-column: 1;
		width:100%;
		height:100%;
		background: hsl(17, 5%, 30%);
		-webkit-mask: url(../img/layout/social/logo.svg) center / 36% no-repeat border-box;
		mask: url(../img/layout/social/logo.svg) center / 36% no-repeat border-box;
	}

	footer a.newsletter, 
	footer a.newsletter:visited {
		grid-column:2;
		width:100%;
		height:100%;
		background: hsl(17, 5%, 25%);
		-webkit-mask: url(../img/layout/social/newsletter-symbol.svg)  center / 45% no-repeat border-box;
		mask: url(../img/layout/social/newsletter-symbol.svg)  center / 45% no-repeat border-box;
	}

	footer a.x:hover,
	footer a.x.active,
	footer a.newsletter:hover,
	footer a.newsletter.active {
		background: radial-gradient(hsl(51, 100%, 60%),hsl(25, 100%, 50%));
	}

	footer .sitemap {
		grid-column: 3;
		align-self: center;
		justify-self: right;
		text-align: right;
		color:hsl(27, 7%, 28%);
	}

	footer .sitemap a, 
	footer .sitemap a:visited {
		color:hsl(27, 7%, 28%);
	}

	footer .sitemap a:hover,
	footer .sitemap a.active { 
		color:hsl(45, 100%, 55%)
	}

	
/*- NAVI -*/

	nav {
		position: relative;
		display:grid;
	}

	nav a {
		text-align: center;
		align-self:center;
		color:#000 !important;
		font-style: italic;
		font-weight: 700;
		text-decoration:none;
		background: linear-gradient(to bottom, #2c659b 5%,  rgb(200, 237, 250) 10%, rgb(72, 154, 202) 20%, hsl(209, 56%, 60%) 25%,  #2c659b 35%, hsl(209, 57%, 55%) 65%, hsl(210, 61%, 35%) 85%, hsl(209, 56%, 55%) 95%);
		transition: background 1s ease-out;
	}


	#content {
		display: grid;
		line-height:1.5em;
		overflow-y:auto;
	}

	.content-post-left {
		width: 100%;
	}

	.content-post-middle {
		text-align:left;
		width: 100%;
		/* background: green; */
	}

	/* .content-post-middle:hover {
		background: rgba(255,255,255,0.1);
		border:5px;
	} */

	.content-post-middle.folgen {
		margin-bottom:4.5em;
	}

	.content-post-middle img {
		border-radius: 0.5em;
	}

	.contentloader {
		position:absolute;
		display:none;
		width:4em;
		height:4em;			
		inset: 50% 50%;
		transform: translate(-50%,-50%);
		background: url(../img/layout/elements/loader.svg) no-repeat center;
		background-size:100%;
		z-index:1;			
	}

	#intro {
		position:absolute; 
		width:100%; 
		height:auto;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		overflow: hidden;
		z-index:2;
	}

	#introvideo {
		width:100%; 
		height:auto;
		object-fit: cover;
	}

	.skip-intro {
		position:absolute;
		display:none;
		top:0.6em;
		right:0.6em;
		padding:0.4em;
		color: #4f4a48 !important;
		border: 1px solid #4f4a48 ;
		background: none;
		font-weight: 700;
		z-index: 5;
	}

	.skip-intro:hover {
		cursor: pointer;
		color: #000 !important;
		background: radial-gradient(hsl(51, 100%, 60%),hsl(35, 100%, 50%));
	}

	#counter {
		position:absolute;
		margin-left:875px;
		margin-top: 12px;
		visibility: hidden;
	}

	.downloads {
		display: inline-grid;
		justify-content: left;
		width: 100%;
		height: 5em;
		margin-bottom: 2.5em;
		font-size:0.8em;
	}

	a.download {
		grid-column: 1;
		align-content: center;
		height: 100%;
		padding: 0.5em;
		text-align: center;
		font-weight: 700;
		background-color: #28527B;
		border-top-left-radius: 1em;
	}

	a.download:hover {
		background-color: #FFCC00;
		color:#000 !important
	}

	.download-info {
		grid-column: 2;
		align-content: center;
		height: 100%;
		padding: 0.5em;
		background: hsla(213, 36%, 5%, 0.5);
		border-bottom-right-radius: 1em;
	}


/*- STANDARD STYLES -*/

	a:link, 
	a:visited, 
	a:active {
		color:hsl(0, 0%, 80%);
		text-decoration:none;
	}

	a:not(nav a, a.x, a.newsletter) {
		transition: all .5s ease;
	}

	a:hover	{
		color: #fc0;
		text-decoration:none;
	}

	a.button-back {
		position:absolute;
		display:none;
		background: radial-gradient(circle at 20%, hsl(51, 100%, 60%),hsl(24, 100%, 50%));
		/* background: url(../img/layout/elements/button-back.png) center no-repeat; */
		mask: url(../img/layout/elements/svg/arrow-left.svg) center no-repeat;
		mask-size: contain;
	}

	a.button-forward {
		display:block;
		width:2.75em;
		height:2em;
		margin-top: 2.6em;
		background: radial-gradient(circle at 20%, hsl(51, 100%, 60%),hsl(24, 100%, 50%));
		/* background: url(../img/layout/elements/button-forward.png) center no-repeat; */
		mask: url(../img/layout/elements/svg/arrow-right.svg) center no-repeat;
		mask-size: contain;
	}

	a.button-back:hover, 
	a.button-forward:hover {
		background: radial-gradient(circle at 80%, hsl(51, 100%, 60%),hsl(24, 100%, 50%));
	}

	p {
		margin-bottom: 1.5em;
	}

	em.interview {
		color: #fc0;
	}

	img {
		border:0;
	}

	img.td {
		position:relative;
		border-radius:0.5em;
		width: 100%;
		max-width: 140px;
		height: auto;
		margin-top: 0.25em;
		align-self: first baseline;
	}

	img.focus:hover {
		transition: border 0.3s ease-out;
		border: 0.25em solid #fc0;
	}

	li {
		list-style:none; 
	}

	.invisible { 
		display:none; 
	}	

	.yellow {
		color: #fc0 !important;
	}

	.yellow-link {
		color: #fc0;
		display:inline-block;
		margin-right:15px; 
		font-size:1.05em; 
		font-weight: 700;
	}

	.yellow-link:hover {
		color: hsl(48, 100%, 75%);
	}

	h1 {
		display: none;
		visibility: hidden;
		opacity: 0;
	}

	h2, 
	h3, 
	h4 { 
		color: #fff; 
		font-size: 1em; 
		font-weight: 700; 
	}

	h2:not(:first-child) {
		margin-top: 2em;
	}

	h2 {
		margin-bottom: 1em;
	}

	h2.capitalize {
		text-transform: uppercase;
		letter-spacing:0.03em;
	}

	h3 {
		padding: 20px 0 10px 0;		/* Impressum-Head */
	}

/*- Formular Allgemein -*/	

	label {
		display:block;
		margin-bottom: 0.25em;
		color: #FFCC00;
	}

	.form-group {
		align-content: first baseline;
		width: 100% !important;
		margin-bottom: 5%;
		padding: 0.5em !important;
		border-radius: 0.3em;
		background-color: rgba(5, 10, 15, 0.5);
	}

	.btn {
		display: block;
		width: fit-content;
		align-content: center;
		height: 3em;
		padding: 0 0.75em;
		border-radius: 0.3em;
		font-size: 0.9em;
		font-weight: 700;
		color:hsl(0, 0%, 85%);
		background-color: hsl(210, 55%, 30%) !important;
		transition: all .5s ease;
		cursor: pointer;
	}

	.btn:hover {
		background: radial-gradient(hsl(51, 100%, 60%),hsl(45, 100%, 50%));
		color:#000 !important;
	}

	.alert-success {
		position: relative;
		align-content:center;
		width: 100%;
		margin: 2em 0;
		padding: 1em;
		padding-right: 10%;
		border-radius: 0.5em;
		font-weight: 700;
		color:#003512;
		background: url(../img/layout/elements/svg/checkmark.svg) 97% center no-repeat, hsla(118, 60%, 60%, 0.9);
		background-size:2.75em;
		opacity: 0;
	}

	.alert-error {
		color: hsl(50, 100%, 90%);
		font-size: 0.9em;
		margin-top: 2px;
	}

	audio {
		margin-top: 0.25em;
	}

	audio::-internal-media-controls-download-button {
		display:none;
	}

	audio::-webkit-media-controls-enclosure {
		overflow:hidden;
	}

	audio::-webkit-media-controls-panel {
		width: calc(100% + 30px); /* Adjust as needed */
	}

	.merch {
		display: inline-grid;
		grid-template-columns: minmax(auto,140px) 70%;
		column-gap: 5%;
		align-content: baseline;
		justify-content: left;
		margin:2em 0;
	}

	.merch-img {
		grid-column: 1;
	}

	.merch-description {
		grid-column: 2;
		justify-self: left;
	}


/*----- IMPRESSUM -----*/

#impressum .address {
	display:inline-block; 
	list-style:none;
	margin-bottom:2em;
	line-height: 1.8em;
}

#impressum .address:first-child {
	padding-right:2em; 
}

#impressum .site-info img {
	margin-top: 0.5em;
	width:5em;
	height:auto;
}


/*----- FEEDBACK -----*/

#feedback-header {
	display: grid;
	align-content: center;
	margin-bottom:2em;
	grid-template-columns: 100%;
	background:none;
	width: 100%;
}

#feedback-header .btn {
	justify-self: right;
}

/*- Feedback Formular -*/

#feedback-insert {
	display:none;
	margin-bottom: 6em;
	width: 100%;
}

#feedback-form {
	display: grid;
	grid-template-columns: 48% 48%;
	grid-template-rows: repeat(4,auto);
	justify-content: space-between;
	gap: 1%;
	width: 100%;
	height: 100%;
}

#feedback-form input, 
#feedback-form textarea {
	width: 100%;
	padding: 0.5em;
	border-radius: 0.3em;
	background-color: hsl(220, 38%, 90%);
}

#feedback-form textarea {
	height: 8em;
}

#feedback-form input#name:focus,
#feedback-form input#contact:focus,
#feedback-form textarea:focus {
	background-color:hsl(60, 80%, 93%) !important;
}

#feedback-form #name-group,
#feedback-form #contact-group {
	grid-row: 1;
	grid-column: 1/2;
}

#feedback-form #contact-group {
	grid-column: 2/3;
}

#feedback-form #message-group {
	grid-column: 1/3;
	grid-row:2;
}

#feedback-form #emoticon-group {
	grid-row:3;
	grid-column: 1;
}

#feedback-form #emoticons {
	grid-row:4;
	grid-column: 1/3;
	/* display:none; */
	padding:1%;
	background: hsl(220, 38%, 90%);
	cursor: pointer !important;
}

#feedback-form #email-group {
	display:none !important;
	height: 0 !important;
	overflow: hidden;
	border-collapse: collapse;
}

#feedback-form .btn-send {
	grid-row:3;
	grid-column: 2;
}

#feedback-form span {
	display: inline-block;
	color:hsl(209, 20%, 83%);
	margin-left: 0.5em;
}

#feedback sup {
	color: hsl(220, 38%, 75%);
	margin-left: 0.5em;
}

/*- Feedback Entries -*/

.feedback-entry {
	display: grid;
	grid-template-rows: repeat(3,auto);
	row-gap: 0.75em;
	padding: 1em;
	border-radius:0.5em;
	margin-bottom: 15%;
	background-color: rgba(5, 10, 15, 0.5);
}

.feedback-entry .entry-header {
	grid-row: 1;
	font-size: 1.1em;
	font-weight:700;		
}
	
.feedback-entry .entry-text {
	grid-row: 2;		
}

.feedback-entry .entry-comment {
	grid-row: 3;
	font-style: italic;
	color:hsl(207, 48%, 78%);
}

.feedback-entry img {
	width:auto; 
	max-width:70%; 
}

/*- Feedback Page Navigation -*/
	
.feedback-nav {
	text-align:center;
	font:1.3em bold;
}
		
.feedback-nav a:link, 
.feedback-nav a:visited, 
.feedback-nav a:active {
	color: #fff;
	text-decoration: none;
}

.feedback-nav a:hover,
.feedback-nav .current-page {
	color: #FFCC00;
}


/*----- NEWSLETTER -----*/

#newsletter-form {
	display: grid;
	grid-template-rows: repeat(3,auto);
	grid-template-columns: 100%;
	justify-content: space-between;
	gap: 1%;
	margin: 2em 0;
}

#newsletter-form input {
	width: 100%;
	padding: 0.5em;
	border-radius: 0.3em;
	background-color: hsl(220, 38%, 90%);
}

#newsletter-form input#send {
	height: 3em;
	border-radius: 0.3em;
	font-size: 0.9em;
	font-weight: 700;
	color:hsl(0, 0%, 85%);
	background-color: hsl(210, 55%, 30%) !important;
	cursor: pointer;
}



/*----- UMFRAGE -----*/

		/* .opinion {float:left; width:170px; margin-right:50px; margin-top:40px;}

		.opinion_table { width: 100%; border:none; color:#fff; border-collapse:separate;}

		.question {
		background-color:#737373;
		padding: 3px;
		border-bottom:1px solid #666;
		}

		*.select {
		background-color: #828282;
		border-bottom:1px solid #666;
		border-right:1px solid #666;
		text-align:center; 
		width:20px; 
		padding:3px;
		}	
					
		*.answer {
		background-color: #949494;
		border-bottom:1px solid #666;
		padding-left:3px;
		padding-bottom:3px; 
		width:80%;
		}

		*.vote,
		*.results {
		background-color: #737373;
		padding: 4px;
		text-align:center;
		}

		*.results {
		background-color: #949494;
		}

		*.button_vote,
		*.button_results { 
		padding: 2px;	
		} */