:root {
	--hellblau:#87cbe1;
	--hellblau-rgb: 135, 203, 225;
	--rosa:#f9bed7;
	--gelb:#ffe000;
	--gelb-rgb:255, 224, 0;
	--dunkellila:#460a67;
	--dunkellila-rgb:70, 10, 103;
	--lila:#dcdae8;
	--pink:#e7345e;
	--pink-rgb: 231, 52, 94;
	--gruen:#89cbaa;
	--hellgrau:#d9d9d7;
	--grau:#888888;
	--rot:#a50033;
	--weiss:#ebebeb;
	--turkis:#b2e4e3;
	--turkis-rgb:178, 228, 227;	
}

::-moz-selection {
	background:var(--rosa);
	color: #ffffff;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

::selection {
	background:var(--rosa);
        color: #ffffff;
        text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

body {
        background:var(--hellblau);
        padding:0px;
        margin:0px;
        height:100%;
        width:100%;
        font-family:'Montserrat';
        font-size:14px;
	line-height:28px;
        color:#fff;
        -webkit-text-size-adjust: none;
}

body:after {
         content:"";
         position:fixed;
         top:-10px;
         left:0px;
         z-index:9;
         width:100%;
         -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
         -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
         box-shadow: 0px 0px 10px 0px rgba(0,0,0,1);
         height:10px;
}

.skew {
         -moz-transform: skew(-15deg, 0deg);
         -webkit-transform: skew(-15deg, 0deg);
         -o-transform: skew(-15deg, 0deg);
         -ms-transform: skew(-15deg, 0deg);
         transform: skew(-15deg, 0deg);
         -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
         -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
         box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
}

.noSkew {
         -moz-transform: skew(15deg, 0deg);
         -webkit-transform: skew(15deg, 0deg);
         -o-transform: skew(15deg, 0deg);
         -ms-transform: skew(15deg, 0deg);
         transform: skew(15deg, 0deg);
         display:block;
}

.wrapper {
         max-width:1000px;
         position:relative;
         top:0px;
         margin:0px auto 0px auto;
}

h1 {
         font-family:"Anton";
	 text-shadow: 3px 3px 0px rgba(0,0,0,0.25);
         font-size:60px;
         margin-top:0px;
         line-height:80px;
         font-weight:200;
         text-transform:uppercase;
         text-align:center;
}


h2 {
         font-family:"Anton";
	 text-shadow: 3px 3px 0px rgba(0,0,0,0.25);
         font-size:40px;
         margin-top:0px;
         line-height:70px;
         font-weight:200;
         text-transform:uppercase;
         text-align:center;
	 position:relative;
}

h1 span.headline-small {
         font-family:"Anton";
	 text-shadow: 3px 3px 0px rgba(0,0,0,0.25);
         font-size:25px;
         margin-top:0px;
         line-height:10px;
         font-weight:200;
         text-transform:uppercase;
         text-align:center;
}

h1 span.headline-highlight,
h2 span.headline-highlight {
	font-size:40px;
	text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.10);	
	font-family: "Meow Script", cursive;
	font-weight:bold;
	text-transform:none;
	position:absolute;
	top:35px;
	left:50%;
	transform: translateX(-50%);
	overflow: hidden; 
  	text-overflow: ellipsis;
  	white-space: nowrap;
}

         @media screen and (min-width:320px) and (max-width:729px) {
                 h1 {
                         font-size:25px;
                         line-height:35px;
                 }

                 h2 {
                         font-size:20px;
                         line-height:35px;
                 }

		 h1 span.headline-small {
		 	 font-size:15px;
		 }

		 h1 span.headline-highlight,
		 h2 span.headline-highlight {
			 font-size:25px;
			 top:25px;
		 }
         }

h3 {
         font-family:"Montserrat";
         font-size:20px;
         line-height:40px;
         font-weight:black;
         text-transform:uppercase;
}

a,
.noSelect,
button {
         -webkit-tap-highlight-color: transparent;
         -webkit-touch-callout: none;
         -webkit-user-select: none;
         -khtml-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
}

.floatLeft {
         float:Left;
}

.floatRight {
         float:right;
}

.clear {
         clear:both;
}

.break {
         flex-basis: 100%;
         width: 0px;
         height: 0px;
         overflow: hidden;
}
         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  body {
                           font-size:12px;
                  }

                  .wrapper {
                          width:calc(100% - 5%);
                          margin:0px 2.5% 0px 2.5%;
                  }

                  h1 {
                         font-size:27px;
                  }

                  h2 {
                           font-size:27px;
                           text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.5);
                  }

                  h2 span {
                           font-size:24px;
                  }

                  h3 {
                           font-size: 20px;
                  }
         }

@keyframes float { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-moz-keyframes float { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-webkit-keyframes float { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-o-keyframes float { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-ms-keyframes float { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }

@keyframes ringing {20% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 30% {transform: rotate(0deg);} 35% {transform: rotate(10deg);} 40% {transform: rotate(0deg);} }
@-moz-keyframes ringing {20% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 30% {transform: rotate(0deg);} 35% {transform: rotate(10deg);} 40% {transform: rotate(0deg);} }
@-webkit-keyframes ringing {20% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 30% {transform: rotate(0deg);} 35% {transform: rotate(10deg);} 40% {transform: rotate(0deg);} }
@-o-keyframes ringing {20% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 30% {transform: rotate(0deg);} 35% {transform: rotate(10deg);} 40% {transform: rotate(0deg);} }
@-ms-keyframes ringing {20% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 30% {transform: rotate(0deg);} 35% {transform: rotate(10deg);} 40% {transform: rotate(0deg);} }

.button-go {
         background:var(--gruen);
         padding:15px 0px 15px 25px;
         color:#fff;
         font-family:"Anton";
         font-weight:normal;
         font-size:28px;
         font-style:italic;
         text-decoration:none;
         text-transform:uppercase;
         text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25);
         -webkit-border-radius: 12px;
         -moz-border-radius: 12px;
         border-radius: 12px;
         display: inline-block;
         position:relative;
	 margin:50px auto 50px auto;
         -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
         -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
         box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.5);
         width:350px;
         -moz-transition: all .4s ease-in;
         -o-transition: all .4s ease-in;
         -webkit-transition: all .4s ease-in;
         transition: all .4s ease-in;
         cursor:pointer;
}

.button-go:hover {
         background:#339e64;
}

.button-go div    {
         -moz-transform: skew(15deg, 0deg);
         -webkit-transform: skew(15deg, 0deg);
         -o-transform: skew(15deg, 0deg);
         -ms-transform: skew(15deg, 0deg);
         transform: skew(15deg, 0deg);
         float:left;
         margin-right:25px;
}

.button-go:after {
         width:calc(100% - 12px);
         height:calc(100% - 12px);
         -webkit-border-radius: 12px;
         -moz-border-radius: 12px;
         border-radius:12px;
         position:absolute;
         top:3px;
         left:3px;
         display:block;
         opacity:1;
         border:2px solid #ffffff;
         content:""
}

.button-go img {
         float:right;
         font-style:normal;
         -moz-transform: skew(15deg, 0deg);
         -webkit-transform: skew(15deg, 0deg);
         -o-transform: skew(15deg, 0deg);
         -ms-transform: skew(15deg, 0deg);
         transform: skew(15deg, 0deg);
         margin:6px 25px 0px 0px;
         transition: all .5s ease-in-out;
         -moz-transition: all .5s ease-in-out;
         -o-transition: all .5s ease-in-out;
         -webkit-transition: all .5s ease-in-out;
}

.button-go:hover img {
         transform: skew(15deg, 0deg) scale(1.2);
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
		.button-go {
			margin:25px auto 25px auto;	
		}
         }

#buttonFixedBG {
         display:none;
}

.go {
         animation: float 6s ease-in-out infinite;
         -webkit-animation: float 6s ease-in-out infinite;
         -moz-animation: float 6s ease-in-out infinite;
         -o-animation: float 6s ease-in-out infinite;
}

	/********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width: 320px) and (max-width: 768px) {

                  #buttonFixedBG .go {
                          
                          
                  }

		  #buttonFixedBG span {
		  	  text-align:center;
		          display:block;
			  font-family:"Anton";
			  text-transform:uppercase;
			  font-size:20px;
			  margin:-30px 0px 0px 0px;	
		  }

                  #buttonFixedBG {
                          
                          width:calc(100% - 40px);
                          padding:40px 20px 0px 20px;
                          position:fixed;
                          bottom:0px;
                          height:80px;
                          z-index:999;
                          background: -moz-linear-gradient(top, rgba(125,185,232,0) 0%, rgba(70,10,103,1) 100%);
                          background: -webkit-linear-gradient(top, rgba(125,185,232,0) 0%,rgba(70,10,103,1) 100%);
                          background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(70,10,103,1) 100%);
                          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007db9e8', endColorstr='#170c57',GradientType=0 );
                  }

#buttonFixedBG .button-go {
         padding:20px 0px 15px 25px;
         font-size:28px;
	 margin:0px auto 0px auto;
         width:calc(100% - 25px);
	 max-width:300px;
	 left:50%;
transform: skew(-15deg, 0deg) translateX(-50%);
}

#buttonFixedBG .button-go img {
         margin:0px 25px 0px 0px;
}
       
         }

/********** FORM **********/
form {
	width:100%;
	text-align:center;
}

form a {
	color:#fff;
}

.input {
         color:var(--grau);
	 position:relative;
         padding:0px 0px 0px 10px;
         margin:0px auto 10px auto;
	 width:calc(100% - 10px);
	 max-width:400px;
         height:50px;
         font-family:'Montserrat';
         border:none;
	 border-radius:10px;
}

button {
	border:none;
}

button:hover {
	border:none;
}


@keyframes shadow-pulse {0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);} 100% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);}}
@-moz-keyframes shadow-pulse {0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);} 100% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);}}
@-webkit-keyframes shadow-pulse {0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);} 100% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);}}
@-o-keyframes shadow-pulse {0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);} 100% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);}}
@-ms-keyframes shadow-pulse {0% {box-shadow: 0 0 0 0px rgba(255, 255, 255, 1);} 100% {box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);}}


/********** SLIDER GENERAL **********/
.slick-slider {
         position: relative;
         display: block;
         box-sizing: border-box;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         -webkit-touch-callout: none;
         -khtml-user-select: none;
         -ms-touch-action: pan-y;
         touch-action: pan-y;
         -webkit-tap-highlight-color: transparent;
}

.slick-list {
         position: relative;
         display: block;
         overflow: hidden;
         margin: 0px;
         padding: 0px;
}

.slick-list:focus {
         outline: none;
}

.slick-list.dragging {
         cursor: pointer;
         cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
         position: relative;
         top: 0px;
         left: 0px;
         display: block;
         margin-left: auto;
         margin-right: auto;
}

.slick-track:before,
.slick-track:after {
         display: table;
         content: '';
}

.slick-track:after {
         clear: both;
}

.slick-loading .slick-track {
         visibility: hidden;
}

.slick-slide {
         display: none;
         float: left;
         height: 100%;
         min-height: 1px;
}

[dir='rtl'] .slick-slide {
         float: right;
}

.slick-slide img {
         display: block;
}

.slick-slide.slick-loading img {
         display: none;
}

.slick-slide.dragging img {
         pointer-events: none;
}

.slick-initialized .slick-slide {
         display: block;
}

.slick-loading .slick-slide {
         visibility: hidden;
}

.slick-vertical .slick-slide {
         display: block;
         height: auto;
         border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
         display: none;
}

.slick-prev,
.slick-next {
         font-size: 0;
         line-height: 0;
         position: absolute;
         top: 50%;
         z-index:10;
         display: block;
         padding: 0;
         -webkit-transform: translate(0, -50%);
         -ms-transform: translate(0, -50%);
         transform: translate(0, -50%);
         cursor: pointer;
         color: transparent;
         border: none;
         outline: none;
         background: transparent;
}

.slick-prev {
         left: -43px;
         background:url('img/left.svg') no-repeat;
         width: 43px;
         height: 43px;
}

.slick-prev:hover {
         left: -43px;
         background:url('img/left_hover.svg') no-repeat;
         width: 43px;
         height: 43px;
}

.slick-next {
         right: -43px;
         background:url('img/right.svg') no-repeat;
         width: 43px;
         height: 43px;
}

.slick-next:hover {
         right: -43px;
         background:url('img/right_hover.svg') no-repeat;
         width: 43px;
         height: 43px;
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  .slick-prev,
                  .slick-prev:hover {
                           left: -10px;
                           background:url('img/left.svg') no-repeat;
                           width: 30px;
                           height: 30px;
                           background-size:100% 100%;
                  }

                  .slick-next,
                  .slick-next:hover {
                           right: -10px;
                           background:url('img/right.svg') no-repeat;
                           width: 30px;
                           height: 30px;
                           background-size:100% 100%;
                  }
         }

/********** HEADER **********/
header {
         text-align:center;
         width:100%;
         min-height:500px;
         display: flex;
         flex-flow: row column;
         position:relative;
         top:0px;
         left:0px;
         z-index:1;
}

header .wrapper {
         flex:100%;
}

header .logo {
         position:relative;
         top:50px;
	 width:100px;
}

header #headline-one {
         background:var(--pink);
	 color:var(--gelb);
         padding:50px 0px 5px 0px;
         text-decoration:none;
         text-transform:uppercase;
         -webkit-border-radius: 25px;
         -moz-border-radius: 25px;
         border-radius: 25px;
         width:600px;
         position:absolute;
         top:190px;
         left:50%;	 
         transform: skew(-15deg) translateX(-50%);
         z-index:2;
}

@media screen and (min-width:640px) and (max-width:1980px) {
	header #headline-one h1 {
	 	font-size:60px;
	 	line-height:0px;
	 	transform: skew(-15deg);
	}
}

header #headline-one div, .slideContentInner  {
         -moz-transform: skew(15deg, 0deg);
         -webkit-transform: skew(15deg, 0deg);
         -o-transform: skew(15deg, 0deg);
         -ms-transform: skew(15deg, 0deg);
         transform: skew(15deg, 0deg);
}

header #headline-one:after {
         height:82px;
	 width:calc(100% - 12px);
         -webkit-border-radius: 25px;
         -moz-border-radius: 25px;
         border-radius: 25px;
         position:absolute;
         top:4px;
         left:4px;
         display:block;
         opacity:1;
         border:2px solid #ffffff;
         content:""
}

header #headline-two {
         background:var(--dunkellila);
         padding:10px 30px;
         color:var(--pink);
         font-family: "Meow Script", cursive;
	 font-weight:bold;
         font-size:30px;
         text-decoration:none;
         text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         display: inline-block;
         position:absolute;
         top:270px;
         left:50%;
	 transform: skew(-15deg) translateX(-50%);
         z-index:2;
}

header #headline-two div {
         -moz-transform: skew(15deg, 0deg);
         -webkit-transform: skew(15deg, 0deg);
         -o-transform: skew(15deg, 0deg);
         -ms-transform: skew(15deg, 0deg);
         transform: skew(15deg, 0deg);
}

header #headline-two:after {
         width:calc(100% - 10px);
         height:37px;
         -webkit-border-radius: 15px;
         -moz-border-radius: 15px;
         border-radius: 15px;
         position:absolute;
         top:3px;
         left:3px;
         display:block;
         opacity:1;
         border:2px solid var(--weiss);
         content:""
}

header ul {
	padding:0px;
	margin:0px;
	list-style:none;
	position:absolute;
	top:350px;
	left:50%;
	transform: translateX(-50%);
}

header ul li {
	list-style:none;
}

         /********** MIN. 320px - MAX. 414px **********/
         @media screen and (min-width:320px) and (max-width:449px) {
		header {
			height:450px;
		}
		
		header .logo {
         		top:30px;
		}

		header #headline-one {
         		padding:20px 0px 2px 0px;
         		width:90%;
         		top:150px;
		}

		header #headline-one:after {
        	 	height:62px;
		}

		header #headline-one h1 {
	 		font-size:25px;
		}

		header #headline-two {
         		padding:10px 30px;
			width:calc(70% - 60px);
         		font-size:20px;
         		top:210px;
		}

		header ul {
			top:300px;
			width:100%;
		}	 
	 }

         /********** MIN. 450px - MAX. 680px **********/
         @media screen and (min-width:450px) and (max-width:680px) {
		header {
			height:500px;
		}
		
		header .logo {
         		top:30px;
		}

		header #headline-one {
         		padding:30px 0px 2px 0px;
         		width:90%;
         		top:150px;
		}

		header #headline-one:after {
        	 	height:85px;
		}

		header #headline-one h1 {
	 		font-size:45px;
		}

		header #headline-two {
         		padding:10px 30px;
			width:calc(70% - 60px);
         		font-size:30px;
         		top:230px;
		}

		header ul {
			top:300px;
			width:100%;
		}	 
	 }


/********** NEWSLETTER TOP **********/
section.newsletter-top {
         width:100%;
         height:733px;
         background:url('img/pink_bg.svg') no-repeat center top;
         position:relative;
         top:0px;
         margin-top:-255px;
	 padding-top:270px;
         z-index:1;
}

section.newsletter-top h1 {
	margin:0px;
}

section.newsletter-top p {
	text-align:center;
	width:100%;
	max-width:360px;
	margin:0px auto 0px auto;
}
         /********** MIN. 450px - MAX. 680px **********/
         @media screen and (min-width:320px) and (max-width:680px) {
		section.newsletter-top form {
			margin-top:20px;
		}
	 }

/********** EINLEITUNG **********/
section.einleitung {
         background:url('img/bg_verlauf.svg') center -400px no-repeat;
         position:relative;
         top:0px;
         margin-top:-450px;
         padding-top:300px;
         padding-bottom:100px;
}

section.einleitung .wrapper {
         width:550px;
	 text-align:center;
}

section.einleitung .wrapper h1 span.headline-highlight {
	color:var(--pink);
}

section.einleitung .wrapper #nl-counter h2 {
	color:var(--pink);
}

section.einleitung .wrapper #nl-counter span.count {
	background:black;
	font-size:10vw!important;
	font-weight:800;
	color:var(--gelb);
	text-shadow: 5px 5px 0 rgba(0,0,0,.25);
}

section.einleitung .wrapper #nl-counter span.count {
	font-size:170px;
	font-weight:800;
	color:var(--gelb);
	text-shadow: 5px 5px 0 rgba(0,0,0,.25);
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  section.einleitung {
                           margin-top:-350px;
                           padding-top:150px;
                           padding-bottom:100px;
                  }

		  section.einleitung .wrapper {
		  	  width:calc(100% - 5%);
			  margin:0px 2.5% 0px 2.5%;	   
		  }

         }

/********** COUNTDOWN **********/
section.countdown {
         width:100%;
         background:url('img/pink.svg') center top no-repeat;
         height:690px;
         position:relative;
         top:50px;
         z-index:1;
         padding-top:100px;
         text-align:center;	
}

section.countdown h1 span.headline-highlight {
	color:var(--gelb);
}

/* === GRID === */
section.countdown .countdown{
  max-width: 1100px;
  padding: 0 2.5%;
  margin: 0 auto 30px auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;           /* verhindert Stretch-Höhen */
}

/* === BOX (immer quadratisch) === */
section.countdown .countdown .cd-box{
  width: 100%;
  aspect-ratio: 1 / 1;          /* Quadrat */
  background: var(--dunkellila);
  border-radius: 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* Inhalt mittig */
  align-items: center;
  overflow: hidden;
  box-shadow: 5px 5px 0 rgba(0,0,0,.25);
}

/* === ZAHL groß & deutlich === */
section.countdown .countdown .cd-value{
  font-weight: 800;
  line-height: 1;
  text-shadow: 5px 5px 0 rgba(0,0,0,.25);
  /* skaliert responsiv – simpel, ohne Container-Queries */
  font-size: clamp(28px, 7vw, 110px);
}

/* === LABEL sichtbar & klein darunter === */
section.countdown .countdown .cd-label{
  display: block;
  margin-top: 6px;
  font-size: clamp(10px, 1.6vw, 16px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pink);
  font-weight: 700;
}

/* ===== Tablet: 2×2 ===== */
@media (max-width: 767px){
  section.countdown .countdown{
    grid-template-columns: repeat(2, 1fr);
    max-width: 520px;           /* kompakter, damit die Felder nicht zu groß werden */
  }
  section.countdown .countdown .cd-value{
    font-size: clamp(26px, 11vw, 96px);
  }
}

/* ===== Mobile: 1 Spalte ===== */
@media (max-width: 479px){
  section.countdown .countdown{
    grid-template-columns: repeat(2, 1fr);
    max-width: 360px;           /* handlich auf kleinen Screens */
    gap: 14px;
  }
  section.countdown .countdown .cd-value{
    font-size: clamp(28px, 24vw, 88px);
  }
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  section.countdown {
                          top:0px;
                          position:relative;
                  }
         }

section.countdown .button-go {
         padding:15px 0px 15px 25px;
         font-size:33px;
	 line-height:40px;
	 margin:10px auto 0px auto;
         width:275px!important;	
}

.button-go:after {
         width:calc(100% - 10px);
         height:calc(100% - 10px);
}

section.countdown ul {
	list-style:none;
	padding:0px;
	margin:30px auto 0px auto;
}


/********** STEPS **********/
section.steps {
         width:100%;
         height:733px;
         background:url('img/pink_bg.svg') no-repeat center top;
         position:relative;
         top:0px;
         margin:0px 0px 100px 0px;
         z-index:1;
}

section.steps .button-go {
         position:absolute;
         top:120px;
         z-index:1;
}

section.steps .content {
         position:relative;
         top:300px;
         width:700px;
         margin:0px auto 0px auto;
}

section.steps .content .counter {
         display:flex;
         justify-content:space-between;
         width:300px;
         margin:50px auto 0px auto;
         position: relative;
}

section.steps .content .counter::before {
         position:absolute;
         top:calc(50% - 3px);
         left:10px;
         width:calc(100% - 30px);
         height:5px;
         content:"";
         background:url("img/dot.svg");
         opacity:0.25;
}

section.steps .content .counter::after {
         content: "";
         position: absolute;
         top: calc(50% - 3px);
         left: 10px;
         width: 0;
         height: 5px;
         background:var(--dunkellila);
         border-radius: 100px;
         -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15);
         -moz-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15);
         box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15);
}

section.steps .content .counter .number {
         background: #ffffff;
         border-radius: 100%;
         color: var(--pink);
         text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.25);
         width: 42px;
         height: 42px;
         display: flex;
         justify-content: center;
         align-items: center;
         font-family:"Impact";
         font-weight:normal;
         font-size: 24px;
         position: relative;
         z-index: 1;
         -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.25);
         box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.25);
         cursor:pointer;
}

section.steps .content .counter .number::after {
         content: "";
         position: absolute;
         top: 0px;
         left: 0px;
         width:100%;
         height:100%;
         border-radius: 100%;
         box-shadow:0 0 0 5px #fff;
         opacity:0;
}

section.steps .content .container {
         width:70%;
         position: absolute;
         margin:50px 15% 0px 15%;
}

section.steps .content .container .text {
         position: absolute;
         top:0px;
         left:50px;
         width:400px;
         margin:0px 0px 0px 0px;
         padding:0px;
         opacity: 0;
         transition: all 0.5s ease-out 0s;
         -moz-transition: all 0.5s ease-out 0s;
         -o-transition: all 0.5s ease-out 0s;
         -webkit-transition: all 0.5s ease-out 0s;
}

section.steps .content .container .text span {
         font-size: 24px;
         color: #fff;
         font-family:"Anton";
         font-weight:normal;
         text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.25);
         text-transform:uppercase;
         margin:0px 0px 20px 0px;
         padding:0px;
}

section.steps .content .container .icon {
         min-width: 100px;
         min-height: 100px;
         width: 100px;
         height: 100px;
         margin: 0px;
         padding:0px;
         background: rgba(255, 255, 255,1);
         border-radius: 100%;
         opacity:0;
         display:flex;
         position: absolute;
         top:0px;
         left:50px;
         transition: all 0.5s ease-out 0s;
         -moz-transition: all 0.5s ease-out 0s;
         -o-transition: all 0.5s ease-out 0s;
         -webkit-transition: all 0.5s ease-out 0s;
}

section.steps.one .content .container.one .icon,
section.steps.two .content .container.two .icon,
section.steps.three .content .container.three .icon {
         transition: all 0.5s ease-out .4s;
         -moz-transition: all 0.5s ease-out .4s;
         -o-transition: all 0.5s ease-out .4s;
         -webkit-transition: all 0.5s ease-out .4s;
         opacity: 1;
         left:0px;
         box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.25);
}

section.steps.one .container.one .text,
section.steps.two .container.two .text,
section.steps.three .container.three .text {
         transition: all 0.5s ease-out .4s;
         -moz-transition: all 0.5s ease-out .4s;
         -o-transition: all 0.5s ease-out .4s;
         -webkit-transition: all 0.5s ease-out .4s;
         opacity: 1;
         top: 0px;
         left:100px;
}

section.steps .content .container .text.containerInner {
         margin:-10px 0px 0px 50px;
}

section.steps .content .container .text.containerInner p {
         color: #fff;
         text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
         line-height:20px;
}

section.steps.one .counter::after {
         transition: all 1s ease-out 0s;
         -moz-transition: all 1s ease-out 0s;
         -o-transition: all 1s ease-out 0s;
         -webkit-transition: all 1s ease-out 0s;
         width: calc(33.3% - 40px);
}

section.steps.one.animation .counter::after {
         transition: all 1s linear 0s;
         -moz-transition: all 1s linear 0s;
         -o-transition: all 1s linear 0s;
         -webkit-transition: all 1s linear 0s;
         width: 50%;
}

section.steps.two .counter::after {
         transition: all 1s ease-out 0s;
         -moz-transition: all 1s ease-out 0s;
         -o-transition: all 1s ease-out 0s;
         -webkit-transition: all 1s ease-out 0s;
         width: calc(76.6% - 40px);
}

section.steps.two.animation .counter::after,
section.steps.three .counter::after {
         transition: all 1s linear 0s;
         -moz-transition: all 1s linear 0s;
         -o-transition: all 1s linear 0s;
         -webkit-transition: all 1s linear 0s;
         width: calc(100% - 40px);
}

section.steps.one .counter .number.one,
section.steps.two .counter .number.one,
section.steps.two .counter .number.two,
section.steps.three .counter .number.one,
section.steps.three .counter .number.two,
section.steps.three .counter .number.three {
         transition: all 0.5s ease-out 0s;
         -moz-transition: all 0.5s ease-out 0s;
         -o-transition: all 0.5s ease-out 0s;
         -webkit-transition: all 0.5s ease-out 0s;
         background:var(--dunkellila);
         color: #fff;
}

section.steps.one .counter .number.one::after,
section.steps.two .counter .number.two::after,
section.steps.three .counter .number.three::after {
         transition: all 1s ease-out 0s;
         -moz-transition: all 1s ease-out 0s;
         -o-transition: all 1s ease-out 0s;
         -webkit-transition: all 1s ease-out 0s;
         opacity: 1;
         top: -5px;
         left: -5px;
         width: calc(100% + 10px);
         height: calc(100% + 10px);
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {

                  section.steps .content {
                          top:270px;
                          width:calc(100% - 5%);
                          margin:0px 2.5% 0px 2.5%;
                  }

                  section.steps .content .counter {
                           width:300px;
                           margin:30px auto 0px auto;
                  }

                  section.steps .content .container {
                           width:100%;
                           position: absolute;
                           margin:80px 0% 0px 0%;
                  }

                  section.steps .content .container .text {
                           position: relative;
                           top:-30px;
                           left:0px;
                           width:100%;
                           margin:0px 0px 0px 0px;
                           padding:0px;
                           opacity: 0;
                           transition: all 0.5s ease-out 0s;
                           -moz-transition: all 0.5s ease-out 0s;
                           -o-transition: all 0.5s ease-out 0s;
                           -webkit-transition: all 0.5s ease-out 0s;
                           text-align:center;
                  }

                  section.steps .content .container .text span {
                           font-size: 20px;
                  }

                  section.steps .content .container .text.containerInner {
                          margin:-10px 0px 0px 0px;
                  }


                  section.steps .content .container .icon {
                           min-width: 70px;
                           min-height: 70px;
                           width: 70px;
                           height: 70px;
                           margin: 0px 0px 0px -35px;
                           position: relative;
                           top:0px;
                           left:50%;
                  }

                  section.steps .content .container .icon img {
                           min-width: 70px;
                           min-height: 70px;
                           width: 70px;
                           height: 70px;
                  }

                  section.steps.one .content .container.one .icon,
                  section.steps.two .content .container.two .icon,
                  section.steps.three .content .container.three .icon {
                           left:50%;
                           top:-30px;
                           box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.25);
                  }

                  section.steps.one .container.one .text,
                  section.steps.two .container.two .text,
                  section.steps.three .container.three .text {
                           transition: all 0.5s ease-out .4s;
                           -moz-transition: all 0.5s ease-out .4s;
                           -o-transition: all 0.5s ease-out .4s;
                           -webkit-transition: all 0.5s ease-out .4s;
                           opacity: 1;
                           top: 0px;
                           left:0px;
                  }
         }


/********** ROADMAP **********/
section.roadmap {
         width:100%;
         background:var(--hellblau);
         position:relative;
         top:0px;
         margin-top:-150px;
         padding:300px 0px 400px 0px;
}

section.roadmap .wrapper p.muted {
	text-align:center;
	position:relative;
	margin:0px auto 15px auto;
	width:100%;
	max-width:450px;
	}
	
/********** TIMELINE **********/
section.roadmap .wrapper#timeline {
	margin-top:100px;	
	}
	
section.roadmap .wrapper#timeline .center-line {
	position: absolute;
	height: calc(100% - 200px);
	width: 4px;
	background:var(--dunkellila);
	left: 50%;
	top: 50px;
	transform: translateX(-50%);
	}
	
section.roadmap .wrapper#timeline .row {
	display: flex;
	}
	
section.roadmap .wrapper#timeline .row-1 {
	justify-content: flex-start;
	text-align:right;
	}

section.roadmap .wrapper#timeline .row-1 .title {
	text-align:right;
	}
	
section.roadmap .wrapper#timeline .row-2 {
	justify-content: flex-end;
	text-align:left;
	}
	
section.roadmap .wrapper#timeline .row section {
	background:var(--dunkellila);
	width: calc(50% - 75px);
	padding: 30px 20px 20px 20px;
	margin:-10px 0px -10px 0px;
	position: relative;
	border-radius:10px;
	}
	
section.roadmap .wrapper#timeline .row section::before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	background:var(--dunkellila);
	top: 28px;
	z-index:1;
	transform: rotate(45deg);
	}

section.roadmap .wrapper#timeline .row-1 section::before {
	right: -7px;
	}
	
section.roadmap .wrapper#timeline .row-2 section::before {
	left: -7px;
	}

section.roadmap .wrapper#timeline .row section .icon {
	position: absolute;
	background:var(--pink);
	border:10px solid var(--hellblau);
	height: 20px;
	width: 20px;
	text-align: center;
	line-height: 20px;
	border-radius: 50%;
	}

section.roadmap .wrapper#timeline .row-1 section .icon {
	top: 15px;
	right: -55px;
	}
	
section.roadmap .wrapper#timeline .row-2 section .icon {
	top: 15px;
	left: -55px;
	}

section.roadmap .wrapper#timeline .row section .title span.p {
	font-size:15px;
	line-height:0px;
	color:#89cbaa;
	}

section.roadmap .wrapper#timeline .row section .title {
	color:var(--pink);
	padding:0px;
	margin:0px;
	font-size:20px;
	text-transform:uppercase;	
	font-weight:normal;
	font-family:"Anton";
	line-height:40px;	
	}

section.roadmap .wrapper#timeline .row section a {
	color:#fff;
}

section.roadmap .wrapper#timeline .row section a.btn {
	color:#fff;
	position:relative;
	text-decoration:none;
	background:rgba(255,255,255,0.1);
	padding:10px 20px;
	border-radius:5px;
	display:inline-block;
	margin-top:10px;
	font-size:12px;
	transition: background-color 0.8s ease;
}

section.roadmap .wrapper#timeline .row section a.btn span.emoji {
	margin-right:10px;
}

section.roadmap .wrapper#timeline .row section a.btn:after {
	position:absolute;
	top:3px;
	left:3px;
	border:1px solid var(--dunkellila);
	border-radius:4px;
	width:calc(100% - 8px);
	height:calc(100% - 8px);
	content:" ";
}

section.roadmap .wrapper#timeline .row section a.btn:hover {
	background:var(--pink);
}

section.roadmap .wrapper#timeline .row.highlight section a.btn {
	background:var(--gelb);
	text-transform:uppercase;
	color:var(--pink);
	font-weight:bold;
	margin-top:20px;
	text-shadow:none;
         -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
}

section.roadmap .wrapper#timeline .row.highlight section a.btn:hover {
	background:var(--dunkellila);
}

section.roadmap .wrapper#timeline .row.highlight section a.btn:after {
	position:absolute;
	top:3px;
	left:3px;
	border:1px solid var(--pink);
	border-radius:4px;
	width:calc(100% - 8px);
	height:calc(100% - 8px);
	content:" ";
}

section.roadmap .wrapper#timeline .row.highlight section {
	background:var(--pink);
	color:#ffffff;
	text-shadow:1px 1px 0px #000;
         -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
	}

section.roadmap .wrapper#timeline .row.highlight section .title,
section.roadmap .wrapper#timeline .row.highlight section .title span.p {
	color:var(--gelb);
	}

section.roadmap .wrapper#timeline .row.highlight section::before {
	background:var(--pink);
	}

section.roadmap .btn {
	
	}

	     /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width: 320px) and (max-width: 480px) {
				section.roadmap .wrapper#timeline .center-line {
					left: 0px;
					transform: translateX(0);
					}	
					
				section.roadmap .wrapper#timeline .row section {
					background:var(--dunkellila);
					border-radius: 10px;
					width: calc(100% - 40px);
					padding: 20px;
					margin:15px 0px 15px 0px;
					position: relative;
					}

				section.roadmap .wrapper#timeline .row-1 section .icon,
				section.roadmap .wrapper#timeline .row-2 section .icon {
					top: 15px;
					right: -0px;
					left:-58px;
					}	
					
				section.roadmap .wrapper#timeline .row section .title	{
					font-size:15px;	
					line-height:35px;
					} 

				section.roadmap .wrapper#timeline .row-1,
				section.roadmap .wrapper#timeline .row-1 .title {
					text-align:left;
					justify-content: flex-end;
					}

				.wrapper .row {
    					margin: 0px 0px 0px 40px;
  					}

  				.row-1 section::before {
    					left: -7px;
  					}

  				.row-1 section .icon {
    					left: -58px;
  					}
  
		 }

/********** WINNER **********/
section#farben {
         width:100%;
         height:733px;
         background:url('img/pink_bg.svg') no-repeat center top;
         position:relative;
         top:0px;
         margin-top:-255px;
	 padding-top:75px;
         z-index:2;
}

section#farben h2 {
	color:#ffffff;
}

 :root{
  --bg:#efefef; --text:#888; --head:#89cbaa; --accent:#e97791; --card:#fff; --line:#ddd;
}

.color-slider-wrap{background:var(--bg); padding:16px 0;}
.cs-title{color:var(--head); font-size:clamp(22px,3.2vw,32px); margin:0 0 6px;}
.cs-lead{color:#9a9a9a; margin:0 0 16px;}

.slickify{ visibility:hidden; }
.slick-initialized.slickify{ visibility:visible; }
.slick-list{ overflow:hidden; }
.slick-track{ display:flex; }

#farben .slick-slide {
		transition: all 0.2s ease;
		filter:blur(5px);
	    	transform: scale(0.75);
		transition: all 0.5s;
}

#farben .slick-slide.slick-current {
		filter:blur(0px);
	    	transform: scale(1.0);
} 

.color-slider .cs-card {
  background:var(--card);
  border-radius:10px;
  padding:12px;
  margin:8px 8px; /* optisches Gap zwischen Slides */
  height:auto; /* mit flex-track wichtig */
         -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
}


/* Hauptbild mit Ratio, damit nichts springt */
.cs-main{
  border-radius:10px;
  overflow:hidden;
  background:#fff;
  aspect-ratio: 4 / 3;   /* an deine Bilder anpassen */
  display:grid; place-items:center;
  margin-bottom:10px;
}
.cs-main img{ width:100%; height:100%; object-fit:cover; display:block; }

.cs-card.inactive {
		
}

.cs-card.inactive span.inactive-content {
	width:calc(100% - 50px);
	height:100%;
	padding:0px 25px 0px 25px;
	backdrop-filter: blur(6px);
	background:rbga(0,0,0,0.25);
	position:absolute;
	top:0px;
	left:0px;
	display:flex;
	border-radius:10px;
	justify-content:center;
	align-items:center;
	text-align:center;
	color:#888;
}

/* Thumbnails */
.cs-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.cs-thumb{
  border:1px solid var(--line); background:#fff; border-radius:8px; padding:0; overflow:hidden;
  cursor:pointer; outline-offset:3px;
  transition:transform .18s ease, border-color .18s ease;
}
.cs-thumb img{ width:100%; height:68px; object-fit:cover; display:block; }
.cs-thumb:hover, .cs-thumb:focus-visible{
  transform:translateY(-2px); border-color:#cfcfcf;
}
.cs-thumb.is-active{ border-color:var(--accent); }

/* Custom Farbnavigation */
.color-nav{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:14px;
}
.color-dot{
  background:#fff; color:var(--text);
	border:none;
	border-radius:10px;
  padding:8px 14px; cursor:pointer;
	text-transform:uppercase;
	font-size:10px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.color-dot:hover{ border-color:#cfcfcf; }
.color-dot.is-active{ background:var(--gruen); color:#fff; font-weight:bold;}

/* Pfeile */
.color-arrows{
  display:flex; justify-content:center; gap:12px; margin-top:10px;
}
.cs-prev,.cs-next{
  background:var(--accent); color:#fff; border:0; border-radius:10px;
  padding:8px 14px; cursor:pointer; font-weight:800;
}
.cs-prev:disabled,.cs-next:disabled{ opacity:.5; cursor:not-allowed; }

/* Center-Mode: mittleres Slide leicht hervorheben (optional) */
.color-slider .slick-center .cs-card{
  transform:translateY(-2px);
  transition:transform .2s ease;
}



         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  section.farben {
                           padding-top:100px;
                           margin-top:-150px;
                  }

         }

/************************************************************************************************************************
************************************************************************************************************************
         PREISE STARTS HERE
************************************************************************************************************************
************************************************************************************************************************/

section#preise {
	margin-top:-300px;
	padding-top:300px;
	background:url('img/bg_verlauf.svg') center -300px no-repeat;
}

	@media (max-width:900px) {
                  section#preise .wrapper {
                          width:calc(100% - 5%);
                          margin:0px 2.5% 0px 2.5%;
                  }
	}

section#preise .wrapper .pr-note {
	text-align:center;
}

section#preise .wrapper fieldset {
	text-align:center;
	background:rgba(255,255,255,0.15);
	border:1px solid rgba(255,255,255,0.35);
	border-radius:10px;
	padding:50px 20px 0px 20px;
	margin:50px auto 50px auto;
	position:relative;
}

section#preise .wrapper .pr-coupon legend {
	color:var(--pink);
	padding:0px 15px 0px 100px;
	margin-left:20px;
	line-height:0px;
	font-size:30px;
	text-shadow:3px 3px 0px #fff;
	font-family:"Anton";
	text-transform:uppercase;
}

section#preise .wrapper .pr-coupon span {
	background:var(--pink);
	display:inline-block;
	border-radius:100%;
	width:75px;
	height:75px;
	position:absolute;
	top:-40px;
	left:50%;
	transform: translateX(-100px);
	color:#fff;
	line-height:0px;
	font-size:40px;
	text-shadow:3px 3px 0px rgba(0,0,0, 0.25);
	font-family:"Anton";
	text-transform:uppercase;
	display:flex;
	justify-content:center;
	align-items:center;
	border:5px solid #fff;
	-webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
        -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
        box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
}

section#preise .wrapper fieldset#gutscheincode {
	text-align:center;
	background-color: rgba(var(--dunkellila-rgb), 0.15);
	border:2px dashed rgba(var(--dunkellila-rgb), 0.25);
	border-radius:10px;
	margin-left:0px;
	font-size:20px;
	padding:0px 0px 0px 0px;
	margin:50px auto 50px auto;
	width:300px;
	letter-spacing:10px;
	position:relative;
}

section#preise .wrapper fieldset#gutscheincode legend {
	color:var(--dunkellila);
	padding:0px 15px 0px 15px;
	line-height:0px;
	letter-spacing:0px;
	margin:0px;
	font-size:20px;
	text-shadow:3px 3px 0px rgba(var(--turkis-rgb), 0.95);
	font-family:"Anton";
	text-transform:uppercase;
}

section#preise .wrapper .pr-coupon img {
	width:100px;
	position:absolute;
	top:-30px;
	right:-30px;
	transform: rotate(15deg);
	display:none;
}

section#preise .wrapper .pr-grid article.pr-card p.muted {
	text-align:center;
}

section#preise .wrapper .pr-grid article.pr-card table.pr-table {
	width:100%;
	border-collapse:separate;
	border-spacing:0 8px
}
    
section#preise .wrapper .pr-grid article.pr-card table.pr-table th,
section#preise .wrapper .pr-grid article.pr-card table.pr-table td {
	padding:10px 12px;
	text-align:left;
}
    
section#preise .wrapper .pr-grid article.pr-card table.pr-table thead th {
	color:#fff;
	font-size:.9rem
}
    
section#preise .wrapper .pr-grid article.pr-card table.pr-table tbody tr {
	background:#fff;
	border:1px solid #fff;
}
    
section#preise .wrapper .pr-grid article.pr-card table.pr-table tbody td {
	border-top:1px solid #fff;
	border-bottom:1px solid #fff;
}

section#preise .wrapper .pr-grid article.pr-card table.pr-table tbody tr td:first-child {
	border-left:1px solid #fff;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

section#preise .wrapper .pr-grid article.pr-card table.pr-table tbody tr td:last-child {
	border-right:1px solid #fff;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
} 

section#preise .wrapper .pr-grid {
	display: grid;
  	gap: 16px;
  	grid-template-columns: 1.05fr 0.95fr;
}

	@media (max-width:900px) {
  		section#preise .wrapper .pr-grid { grid-template-columns: 1fr; }
	}

section#preise .wrapper .pr-grid article.pr-card {
  	border: 1px solid #fff;
  	border-radius: 14px;
	padding: 16px;
  	position: relative;
  	 -webkit-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
         box-shadow: 5px 5px 0px 0px rgba(0,0,0,0.25);
}

section#preise .wrapper .pr-grid article.pr-card.is-featured {
  	background:var(--gelb);
  	color: var(--pink);
  	border: none;
}

	@media (max-width:900px) {
		section#preise .wrapper .pr-grid article.pr-card {
			width:calc(100% - 32px);
		}

		section#preise .wrapper .pr-grid article.pr-card.is-featured {
    			margin-bottom: 10px;
  		}
	}

section#preise .wrapper .pr-grid article.pr-card.is-featured td.save {
  	color:#418b66;
	font-weight:bold;
}

section#preise .wrapper .pr-grid article.pr-card.is-featured table tbody tr {
  	background: rgba(255,255,255,0.35);
}

section#preise .wrapper .pr-grid article.pr-card.is-featured table tbody tr td span.tag-save {
	background:var(--gruen);
	color:#fff;
	border-radius:5px;
	font-weight:bold;
	font-size:10px;
	padding:5px 10px;
}

section#preise .wrapper .pr-grid article.pr-card.is-featured table td,
section#preise .wrapper .pr-grid article.pr-card.is-featured table th {
  	border-color: rgba(0,0,0,0.25);
}


section#preise .wrapper .pr-grid article.pr-card.is-secondary {
  	transform: scale(0.9);
  	background:#fff;
	color:#888;
}

section#preise .wrapper .pr-grid article.pr-card.is-secondary h2 {
	color:var(--dunkellila);
}

section#preise .wrapper .pr-grid article.pr-card.is-secondary table.pr-table thead th {
	color:#888888;
}

section#preise .wrapper .pr-grid article.pr-card.is-secondary table tbody tr {
  	background:#f2f2f2;
}

section#preise .wrapper .pr-grid article.pr-card.is-secondary table.pr-table tbody tr td.save {
	font-weight:bold;
	color:#418b66;
}

section#preise .wrapper .pr-grid article.pr-card-is-secondary table.pr-table tbody tr {
	background:#fff;
	border:1px solid #dedede;
}
    
section#preise .wrapper .pr-grid article.pr-card.is-secondary table.pr-table tbody td {
	border-top:1px solid #dedede;
	border-bottom:1px solid #dedede;
}

section#preise .wrapper .pr-grid article.pr-card.is-secondary table.pr-table tbody tr td:first-child {
	border-left:1px solid #dedede;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
}

section#preise .wrapper .pr-grid article.pr-card.is-secondary table.pr-table tbody tr td:last-child {
	border-right:1px solid #dedede;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
}

	@media (max-width:900px) {
  		.pr-card.is-secondary {
    			transform: none;
    			opacity: 1;
  		}
	}

/************************************************************************************************************************
************************************************************************************************************************
         FAQ STARTS HERE
************************************************************************************************************************
************************************************************************************************************************/
#faq {
	padding-top:300px;
	background:url('img/bg_verlauf.svg') center -300px no-repeat;
         width:768px;
         margin:-300px auto 0px auto;
         text-align:center;
}

ul.accordion {
        margin-bottom:50px;
        list-style:none;
        padding:0px;
        width:570px;
        text-align:left;
         margin:50px auto 50px auto;
}

ul.accordion li {
        list-style:none;
        width:100%;
        border-bottom:1px solid #fff;
        margin-bottom:20px;
        padding-bottom:20px;
}

ul.accordion li span.question {
        background:none;
        color:#fff;
        border:none;
        display:block;
        font-family:'Montserrat';
        text-transform:none;
        font-weight:400;
        font-size:14px;
        cursor:pointer;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        -o-transition: all 1s;
        transition: all 1s;
        margin:0px;
        padding:0px;
        position:relative;
}

ul.accordion li span.question span.number {
         margin-right:10px;
         font-weight:600;
}

ul.accordion li span.question.ui-state-active {
        font-weight:600;
}

ul.accordion li span.question span.ui-accordion-header-icon {
         display:none;
}

ul.accordion div.answer {
        color:#fff;
        padding-top:20px;
        padding-bottom:10px;
        padding-left:30px;
		border:none;
		background:none;
		font-family:"Montserrat";
		font-size:14px;
		line-height:28px;
}

         @media screen and (min-width:0px) and (max-width:768px) {
                  #faq {
                           width:100%;
                  }

                  ul.accordion {
                          width:100%;
                  }

                  ul.accordion li {
                         margin-bottom:15px;
                         padding-bottom:15px;
                  }

                  ul.accordion li span.question {
                          font-size:12px;
                  }

		  ul.accordion div.answer {
			padding-top:15px;
			padding-bottom:5px;
			padding-left:30px;
			font-size:12px;
			line-height:20px;
		 }
         }



/********** FOOTER **********/
footer {
         width:100%;
         text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
         color:#fff;
         font-size:11px;
         text-align:center;
}

footer #logo {
         width:100%;
         background:url('img/footer_bg_pink.svg') center top no-repeat;
         height:320px;
         position:relative;
}

footer #logo .wrapper #logoInner {
         justify-content:center;
         align-items: center;
         display:flex;
}

footer #logo .wrapper #logoInner #footerLogo {
         animation: logo 6s ease-in-out infinite;
         -webkit-animation: logo 6s ease-in-out infinite;
         -moz-animation: logo 6s ease-in-out infinite;
         -o-animation: logo 6s ease-in-out infinite;
         position:absolute;
         top:230px;
         width:75px;
         z-index:1;
}

@keyframes logo { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-moz-keyframes logo { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-webkit-keyframes logo { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-o-keyframes logo { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }
@-ms-keyframes logo { 0% {transform: translatey(0px);} 50% {transform: translatey(-10px);} 100% {transform: translatey(0px);} }

footer #logo .wrapper #logoInner #footerShadow{
         animation: shadow 6s ease-in-out infinite;
         -webkit-animation: shadow 6s ease-in-out infinite;
         -moz-animation: shadow 6s ease-in-out infinite;
         -o-animation: shadow 6s ease-in-out infinite;
         position:absolute;
         top:280px;
         z-index:0;
}

@keyframes shadow { 0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;} }
@-moz-keyframes shadow { 0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;} }
@-webkit-keyframes shadow { 0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;} }
@-o-keyframes shadow { 0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;} }
@-ms-keyframes shadow { 0% {opacity:1;} 50% {opacity:0.5;} 100% {opacity:1;} }

footer #footerPrimary {
         background:#fd295a;
         padding-bottom:25px;
}

footer #footerPrimary .countdown {
	max-width:400px;
	position:relative;
	margin:0px auto 30px auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-column-gap: 10px;
	grid-row-gap: 0px;
}

footer #footerPrimary .countdown .cd-box {
	background:rgba(255,255,255,0.15);
	border-radius:10px;  
	padding:20px 0px 10px 0px;	
}

footer #footerPrimary .countdown .cd-box .cd-value {
	font-size:30px;	
	font-weight:bold;
}

footer #footerPrimary .countdown .cd-box .cd-label {
	font-size:10px;	
	text-transform:uppercase;
}

footer #footerPrimary span.counter {
	max-width:calc(400px - 40px);
	padding:10px 20px;
	font-size:12px;
	display:block;
	position:relative;
	margin:0px auto 30px auto;
	background:rgba(255,255,255,0.15);
	border-radius:10px; 
}

footer #footerPrimary ul {
         padding:0px;
         margin:0px;
         width:100%;
}

footer #footerPrimary ul li {
         list-style:none;
         float:left;
         color:#fff;
         width:20%;
         margin:0px 2.5% 0px 2.5%;
         text-align:center;
         font-size:11px;
}

footer #footerPrimary ul li .img {
         margin:0px 0px 10px 0px;
}

footer #footerSecondary {
         width:100%;
         background:#fd295a;
         padding:25px 0px 20px 0px;
         border-top:1px solid #ff527f;
}

footer #footerSecondary ul#socialmedia {
         padding:0px;
         margin:0px 0px 25px 0px;
         justify-content:center;
         align-items: center;
         display:flex;
}

footer #footerSecondary ul#socialmedia li {
         float:left;
         list-style:none;
         background:#ff527f;
}

footer #footerSecondary ul#socialmedia li:first-child {
         border-radius: 5px 0px 0px 5px;
         -moz-border-radius: 5px 0px 0px 5px;
         -webkit-border-radius: 5px 0px 0px 5px;
         margin-right:1px;
}

footer #footerSecondary ul#socialmedia li:last-child {
         border-radius: 0px 5px 5px 0px;
         -moz-border-radius: 0px 5px 5px 0px;
         -webkit-border-radius: 0px 5px 5px 0px;
}

footer #footerSecondary ul#socialmedia li a {
         display:block;
         padding:5px 10px;
}

footer #footerSecondary #footer-navi {
         width:100%;
         padding:10px 0px;
         margin-top:0px;
         display: flex;
         justify-content: center;
}

footer #footerSecondary #footer-navi ul {
         margin:0px;
         padding:0px;
         max-width:1000px;
         position:relative;
         margin:0px auto 0px auto;
}

footer #footerSecondary #footer-navi ul li {
         list-style:none;
         float:left;
         margin-left:10px;
         padding-right:10px;
         border-right:1px solid #fff;
}

footer #footerSecondary #footer-navi ul li:last-child {
         border-right:none;
         padding-right:0px;
}

footer #footerSecondary #footer-navi ul li a {
         color:#fff;
         text-decoration:none;
         cursor:pointer;
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  footer {
                          margin-top:0px;
                  }

                  footer #footerPrimary {
                           background: rgb(255,82,127);
                           background: -moz-radial-gradient(center, ellipse cover, rgba(255,82,127,1) 0%, rgba(253,41,90,1) 80%);
                           background: -webkit-radial-gradient(center, ellipse cover, rgba(255,82,127,1) 0%,rgba(253,41,90,1) 80%);
                           background: radial-gradient(ellipse at center, rgba(255,82,127,1) 0%,rgba(253,41,90,1) 80%);
                           filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff527f', endColorstr='#fd295a',GradientType=1 );
                  }

                  footer #footerPrimary ul {
                          padding:0px;
                          margin:0px;
                          justify-content:center;
                          align-items: center;
                          display:inline-block;
                  }

                  footer #footerPrimary ul li {
                           width:100%;
                           margin:0px 0% 0px 0%;
                           text-align:left;
                           padding:10px 0px;
                           border-top:1px solid #ff527f;
                  }

                  footer #footerPrimary ul li .img {
                          float:left;
                          width:25%;
                          margin:0px;
                  }

                  footer #footerPrimary ul li .text {
                          float:right;
                          width:75%;
                  }

                  footer #footerSecondary {
                          padding-bottom:100px;
                  }

                  footer #footerSecondary #footer-navi ul li {
                          width:100%;
                          margin:0px;
                          padding:5px 0px;
                          border-right:none;
                  }
         }

/********** OVERLAY **********/
.overlay {
         width:100vw;
         height:100vh;
         background:rgba(23,12,87,0.6);
         -webkit-backdrop-filter: blur(10px);
         backdrop-filter: blur(10px);
         position:fixed;
         top:0px;
         left:0px;
         z-index:999999;
         display:none;
         overflow:auto;
}

.overlayContent {
         width:668px;
         position:relative;
         top:0px;
         left:0%;
         margin: 100px auto 100px auto;
         -webkit-border-radius: 25px;
         -moz-border-radius: 25px;
         border-radius: 25px;
         -webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
         -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
         box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
         display:none;
         background:#fff;
}

.overlayContent .overlayWrapper {
         width:calc(95% -  50px);
         margin:50px 2.5% 0px 2.5%;
         padding:25px;
         color:#343434;
}

.overlayContent .overlayWrapper h3 {
         text-transform:uppercase;
         color:#fd295a;
         font-family:'Anton';
         font-size:20px;
         font-weight:normal;
}

.overlayContent .close {
         width:30px;
         height:30px;
         background:#fd295a;
         border-radius:100%;
         border:4px solid #ffffff;
         display:block;
         position:absolute;
         top:-17px;
         left:50%;
         margin-left:-17px;
         -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
         -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
         box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
         cursor:pointer;
         transition: all 0.25s linear 0.25s;
         -moz-transition: all 0.25s linear 0.25s;
         -o-transition: all 0.25s linear 0.25s;
         -webkit-transition: all 0.25s linear 0.25s;
}

.overlayContent .close:hover {
         animation: shadow-pulse 1s infinite;
         -webkit-animation: shadow-pulse 1s infinite;
         -moz-animation: shadow-pulse 1s infinite;
         -o-animation: shadow-pulse 1s infinite;
}

.overlayContent .close:before,
.overlayContent .close:after {
         content: '';
         position:absolute;
         height:3px;
         width:15px;
         top:50%;
         left:26%;
         margin:-2px 0px 0px 0px;
         background:#fff;
         border-radius:4px;
}

.overlayContent .close:after {
         transform: rotate(-45deg);
}

.overlayContent .close:before {
         transform: rotate(45deg);
}

.overlayContent .overlayWrapper form input {
	border:1px solid #888;
	background:#efefef;
}

.overlayContent .overlayWrapper form a {
	color:#888;
}

         /********** MIN. 320px - MAX. 480px **********/
         @media screen and (min-width:320px) and (max-width:480px) {
                  .overlayContent {
                           width:95%;
                           margin: 50px 2.5% 0px 2.5%;
                  }
         }