/*"Yanone Kaffeesatz"*/
/*font-family:'Soleil W05';*/
 
@view-transition {
  navigation: auto;
}
 
body {
	background-color: #CCBA94;
	font-family: "Clarity City";
	font-variant-ligatures: common-ligatures;
	font-variant-numeric: oldstyle-nums;
	font-feature-settings: "onum";
}

.row {
  max-width: 80em; }
}

.contain-to-grid .top-bar {
  max-width: 80em;
  margin: 0 auto;
  margin-bottom: 0; }


#main strong, #main b {
	font-weight: 600;
}

#main p, footer p,
#main li, footer li,
#main .button, footer .button,
#main button, footer button,
#main p, footer p
 {
	font-family: "Clarity City";
	font-size: 1em;
	font-weight: 400;
	font-variant-ligatures: common-ligatures;
	-moz-font-feature-settings: "liga", "clig";
	-webkit-font-feature-settings: "liga", "clig";
	font-feature-settings: "liga", "clig";
	font-variant-numeric: oldstyle-nums;
	-moz-font-feature-settings: "onum";
	-webkit-font-feature-settings: "onum";
	font-feature-settings: "onum";
}

#main .button, footer .button,
#main button, footer button {
	color: #fff;
	font-size: 1em;	
}

#main a {
	color: #FAF1DF;
}
#main a:hover, #main a:focus {
	color: #fff;
}

footer a {
	color: #6B3844;
}

footer a:hover, footer a:focus {
	color: #28354F;
}

#main p.caption {
	font-size: 1em;
}

.mfp-title {
	font-size: 1em;
}

h1 { 
	font-size: 3em;
	font-family: "Yanone Kaffeesatz";
	color: #EEDEBC;
	text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.8), -.05em -0.05em .05em rgba(255,255,255,0.2);
}

.blackback {
	background-color: #211F23;
}

.wolkenabstand {
	min-height: 8.5em;
}

h2, h3,
.panel h2, .panel h3 {
	font-size: 1.7em;
	font-family: "Yanone Kaffeesatz";
	color: #EEDEBC;
	/*text-shadow:0 0.05em 0.1em #000;*/
	text-shadow: 0.05em 0.05em 0.05em rgba(0,0,0,0.8), -.05em -0.05em .05em rgba(255,255,255,0.2);
}

.panel p {
	color: #eee;
}

h4, h5, h6 {
	font-family: "Clarity City";
	color: #EEDEBC;
	text-shadow:0 0.05em 0.1em #000;
}
footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 {
	font-size: 1.7em;
	font-family: "Yanone Kaffeesatz";
	color: #323232;
	text-shadow:0 -0.05em 0.05em rgba(0,0,0,0.2), 0 0.05em .05em rgba(255,255,255,0.4);
}

h4, h5, h6 {
	font-family: "Clarity City";
	color: #EEDEBC;
	text-shadow:0 0.05em 0.1em #000;
}

.abstand {
	display: block;
	height: 2em;
}

.topnav {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
	margin-bottom: 2em;
}
.topnav::before {
	display: none;
}

.topnav h1 {
	font-family: "Yanone Kaffeesatz";
	color: #DBCDB3;
	font-size: 1em;
	margin-top: 0.6em;
	text-shadow: 0px 1px 5px #000;
	margin-bottom: 0.1em;
}

.topnav a p {
	font-family: "Yanone Kaffeesatz";
	color: #918A97;
	transition: all .5s ease-in-out;
	line-height: 1.4em;
	font-size: 0.9em;
}

ul.fa-ul li {
	margin-bottom: 0.3em;
}

.topnav a:hover p,
.topnav a:hover h1, 
.topnav .active p,
.topnav .active h1
 {
	color: #eee;
	transition: all .2s ease-in-out;
}

ul.subnav {
	margin-top: 0.6em;
	font-family: "Yanone Kaffeesatz";
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

ul.subnav li a {
	color: #DBCDB3;
	font-size: 1.3em;
	transition: all .5s ease-in-out;
}

ul.subnav li a:hover,
ul.subnav li.active a {
	color: #fff;
	font-size: 1.3em;
	transition: all .2s ease-in-out;
}

div.topnav > div {
	background-position: 0em -13em;
	padding-left: 1.2em;
	/*min-height: 10em;*/
	transition: all 0.8s cubic-bezier(.63,-0.2,.62,1);
}

div.topnav > div:hover,
div.topnav > div.active {
	background-repeat: no-repeat;
	background-position: 0em -3.5em;
	transition: all 0.5s cubic-bezier(.15,1.5,.68,.89);
}

div.topnav > div.schilder:hover { background-position: 0em -4.9em; }
div.topnav > div.beschriftung:hover { background-position: 0em -3.5em; }
div.topnav > div.sandstrahlfolien:hover { background-position: 0em -4.9em; }
div.topnav > div.design:hover { background-position: 0em -3.6em; }
div.topnav > div.web:hover { background-position: 0em -6.4em; }
div.topnav > div.cutting:hover { background-position: 0em -4.4em; }

div.topnav > div.referenzen:hover,
div.topnav > div.activereferenzen { background-position: 0em -9.8em; }
div.topnav > div.beispiele:hover,
div.topnav > div.activebeispiele { background-position: 0em -7.7em; }
div.topnav > div.kontakt:hover,
div.topnav > div.activekontakt { background-position: 0em -5.6em; }

.kontaktformular {
		margin: 0.5em 0; 	
}

ul.fa-ul {
	margin-left: 1.3em;
}
ul.fa-ul  ul.fa-ul {
	margin-left: 1em;
}

ul.fa-ul li i {
	margin-left: -1.7em;
}

.fa-fw {
	width: 1.7em;
}

#main {
	background-color: #211F23;
	color: #A4A1A6;
	padding-bottom: 3em;
}

.Logo {
	position: absolute;
	top: -1.3em;
	right:  0.9375em;
	height: 183px;
	width: 315px;
	background-image: url('/assets/DS/template/img/Wolke2.svg');
	z-index: 20;
	background-repeat: no-repeat;
	transition: all 0.8s cubic-bezier(.63,-0.2,.62,1);
}
.Logo:hover {
	top: -1.3em;
	right:  0.9375em;
	transform: translate(0px, -5px);
	transition: all 0.3s cubic-bezier(.15,1.5,.68,0.89);
}

.Logo.small {
	top:-0.2em;
}
.Logo.small:hover {
	top: -0.2em;
	right:  0.9375em;
}

.bannertext {
	position: absolute;
	z-index: 1000;
	bottom: 10%;
	left:  3%;
}

.bannergalerie {
	margin-bottom: 3em;
}
.bannergalerie.small {
	margin-top: 10.2em;
	margin-bottom: 1em;
}

.bannertext h1, .bannertext h2 {
	color: #fff;
	text-shadow: 
		0.02em 0.03em 0.05em rgba(0,0,0,0.7), 
		0 0 0.9em rgba(0,0,0,1),
		0 0 0.3em rgba(0,0,0,1);
}

.bannertext h1 {
	font-size: 6em;
	line-height: 0.7em;
}
.bannertext h2 {
	font-size: 3em;
}

.panel.rot,
.panel.gruen,
.panel.blau,
.panel.grau {
	border: none;
}

.panel.rot p,
.panel.gruen p,
.panel.blau p,
.panel.grau p,
.panel.grau label {
	color: #C7C2CC;
}

.panel.rot {
	background: rgb(95,70,76);
background: -moz-radial-gradient(20% 10%, ellipse cover, rgb(95,70,76) 0%, rgb(64,47,51) 100%);
background: -webkit-gradient(radial, 20% 10%, 0px, 20% 10%, 100%, color-stop(0%, rgb(95,70,76)), color-stop(100%, rgb(64,47,51)));
background: -webkit-radial-gradient(20% 10%, ellipse cover, rgb(95,70,76) 0%, rgb(64,47,51) 100%);
background: -o-radial-gradient(20% 10%, ellipse cover, rgb(95,70,76) 0%, rgb(64,47,51) 100%);
background: -ms-radial-gradient(20% 10%, ellipse cover, rgb(95,70,76) 0%, rgb(64,47,51) 100%);
background: radial-gradient(ellipse at 20% 10%, rgb(95,70,76) 0%, rgb(64,47,51) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f464c', endColorstr='#402f33', GradientType=1 );
}

.panel.gruen {
	background: rgb(72,79,65);
background: -moz-radial-gradient(20% 10%, ellipse cover, rgb(72,79,65) 0%, rgb(49,54,44) 100%);
background: -webkit-gradient(radial, 20% 10%, 0px, 20% 10%, 100%, color-stop(0%, rgb(72,79,65)), color-stop(100%, rgb(49,54,44)));
background: -webkit-radial-gradient(20% 10%, ellipse cover, rgb(72,79,65) 0%, rgb(49,54,44) 100%);
background: -o-radial-gradient(20% 10%, ellipse cover, rgb(72,79,65) 0%, rgb(49,54,44) 100%);
background: -ms-radial-gradient(20% 10%, ellipse cover, rgb(72,79,65) 0%, rgb(49,54,44) 100%);
background: radial-gradient(ellipse at 20% 10%, rgb(72,79,65) 0%, rgb(49,54,44) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484f41', endColorstr='#31362c', GradientType=1 );
}

.panel.blau {
	background: rgb(72,79,90);
background: -moz-radial-gradient(20% 10%, ellipse cover, rgb(72,79,90) 0%, rgb(46,50,57) 100%);
background: -webkit-gradient(radial, 20% 10%, 0px, 20% 10%, 100%, color-stop(0%, rgb(72,79,90)), color-stop(100%, rgb(46,50,57)));
background: -webkit-radial-gradient(20% 10%, ellipse cover, rgb(72,79,90) 0%, rgb(46,50,57) 100%);
background: -o-radial-gradient(20% 10%, ellipse cover, rgb(72,79,90) 0%, rgb(46,50,57) 100%);
background: -ms-radial-gradient(20% 10%, ellipse cover, rgb(72,79,90) 0%, rgb(46,50,57) 100%);
background: radial-gradient(ellipse at 20% 10%, rgb(72,79,90) 0%, rgb(46,50,57) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#484f5a', endColorstr='#2e3239', GradientType=1 );
}

.panel.grau {
	background: rgb(73,70,78);
background: -moz-radial-gradient(20% 10%, ellipse cover, rgb(73,70,78) 0%, rgb(47,44,49) 100%);
background: -webkit-gradient(radial, 20% 10%, 0px, 20% 10%, 100%, color-stop(0%, rgb(73,70,78)), color-stop(100%, rgb(47,44,49)));
background: -webkit-radial-gradient(20% 10%, ellipse cover, rgb(73,70,78) 0%, rgb(47,44,49) 100%);
background: -o-radial-gradient(20% 10%, ellipse cover, rgb(73,70,78) 0%, rgb(47,44,49) 100%);
background: -ms-radial-gradient(20% 10%, ellipse cover, rgb(73,70,78) 0%, rgb(47,44,49) 100%);
background: radial-gradient(ellipse at 20% 10%, rgb(73,70,78) 0%, rgb(47,44,49) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49464e', endColorstr='#2f2c31', GradientType=1 );
}

.button {
	box-shadow: 0px 3px 7px rgba(0,0,0,0.4);
	margin-bottom: 1em;
}

a.button.blau,
button.blau {
	background: rgb(72,79,90);
}
a.button.blau:hover,
button.blau:hover
 {
	background: rgba(72,79,90,0.8)
}
a.button.gruen {
	background: rgb(72,79,65);
}
a.button.gruen:hover {
	background: rgba(72,79,65,0.8)
}
a.button.rot {
	background: rgb(95,70,76);
}
a.button.rot:hover {
	background: rgba(95,70,76,0.8)
}
a.button.grau {
	background: rgb(73,70,78);
}
a.button.grau:hover {
	background: rgba(73,70,78,0.8)
}

a.button {
	color: #fff;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}

.einzelbild {
	margin: 0.5em 0; 	
}

.zaun {
	height: 70px;
	background-color: #211F23;
	background-image: url('/assets/DS/template/img/Zaun.svg');
	background-repeat: repeat-x;
}

.zaun {
	/*overflow: hidden;*/
	/*margin-left: -2em;*/
	/*margin-right: -2em;*/
	box-shadow: 0 1.6em 2em -1em rgba(0,0,0,0.55);
	margin-bottom: 2em;
}

.top-bar, 
.top-bar-section ul li,
.top-bar.expanded .title-area {
	background-color: #484F5A;
}

.top-bar-section ul li > a {
	font-family: 'Clarity City';
	font-size: 0.85em;
}

.top-bar-section ul li.active > a,
.top-bar-section ul li.active > a:hover {
	background-color: #5E454B;
}

i.unordered {
	font-size: 0.7em;
	width: 1.7em;
}

div.topnav > div > a > p {
	display: none;
}


@media only screen and (min-width: 50em) {

	div.topnav > div:hover,
	div.topnav > div.active {
		background-image: url('/assets/DS/template/img/Spinnenblume.svg');
	}

	div.topnav > div > a > p {
		display: block;
	}

	div.topnav > div {
		min-height: 10em;
	}

	.topnav {
		display: grid;
		grid-template-columns: repeat(7, 1fr);
		grid-gap: 1em;
		margin-bottom: 2em;
	}

	.topnav h1 {
		font-size: 1.5em;
	}

	.topnav a p {
		font-size: 1.1em;
	}
}

@media only screen and (max-width: 40em) {
	.bannertext h1 {
		font-size: 2em;
	}
	.bannertext h2 {
		font-size: 1.5em;
		line-height: 0.7em
	}
	.bannertext {
		position: absolute;
		z-index: 1000;
		bottom: 0.1%;
		left:  3%;
	}
	.wolkenabstand {
		margin-top: 10em;
	}
	.Logo.nurwolke {
		top:-0.2em;
	}
}

@media only screen and (min-width: 40em) and (max-width: 64em) {
	.topnav h1 {
		font-size: 1.1em;
	}
	.topnav p {
		font-size: 0.9em;
	}
	.bannertext h1 {
		font-size: 4em;
	}
	.bannertext h2 {
		font-size: 1.5em;
		line-height: 0.7em
	}
	.Logo.nurwolke {
		top:-3em;
	}
	.wolkenabstand {
		margin-top: 8em;
	}
	h1 {
		font-size: 2.4em;
	}
	h2 {
		font-size: 1.6em;
	}
	h3 {
		font-size: 1.3em;
	}
}

.videoWrapper {
	position: relative;
	padding-top: 0;
	height: 0;
  clear:both;
	width: 100%;
}

.videoWrapper.ratio-16-9 {
		// aspect-ratio: 16 / 9;
    padding-bottom: 56.25%; /* 16:9 */
}
.videoWrapper.ratio-21-9 {
		// aspect-ratio: 21 / 9;
    padding-bottom: 42.857%; /* 21:9 */
}
.videoWrapper.ratio-4-3 {
		// aspect-ratio: 4 / 3;
    padding-bottom: 75%; /* 4:3 */
}

.videoWrapper iframe, .videoWrapper video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.stoerer {
	display: none;
	--_width: clamp(6em, 15vw, 15em);
	position: relative;
	max-width: 80em;
	margin-inline: auto;
	margin-block: -1px;
	height: 0;
	z-index: 1;
	overflow: visible;
	:is(.page-12, .page-43, .page-46, .page-44, .page-55, .page-48, .page-52, .page-66, .page-61) & {
		display: block;
	}
	.stoerer-animation {
		animation: pop .5s cubic-bezier(.58,1.37,.62,1) 1s 1 both; 
		position: absolute;
		top: 9em;
		left: -0.3em;
		width: var(--_width);
		aspect-ratio: 1;
		transition: left .5s ease-in-out;
		overflow: visible;
		@media screen and (min-width: 40em) {
			top: -1em;
			left: 2em;
		}
		@media screen and (min-width: 87em) {
			left: calc(-1 * var(--_width) / 4);
		}
	}
	.stoerer-bild-a, .stoerer-bild-b {
		position: absolute;
		width: var(--_width);
		aspect-ratio: 1;
		perspective: 800px;
		rotate: -10deg;
	}
	.stoerer-bild-a {
		background: url(../img/Deckel_Eigenwerbung_Front2.svg);
		z-index: 2;
		transition: transform .5s ease,
								opacity 0s .15s;
		opacity: 1;
		.stoerer-animation:hover & {
			opacity: 0;
			transform: rotate3d(0, 1, 0, 180deg);
		}
	}
	.stoerer-bild-b {
		background: url(../img/Deckel_Eigenwerbung_Heck2.svg);
		transform: rotate3d(0, 1, 0, 180deg);
		opacity: 0;
		transition: transform .5s ease,
								opacity 0s .15s;
		z-index: 3;
		.stoerer-animation:hover & {
			transform: rotate3d(0, 1, 0, 360deg);
			opacity: 1;
		}
	}
}

@keyframes pop {
	0%			{scale: 0; opacity: 0;}
	100%		{scale: 1; opacity: 1;}
}