@charset "utf-8";

/* Farben Allgemeines*/
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
} 
:root {
    --primary-color: hsla(253, 40%, 41%, 0.662);
    --secondary-color: #513F92;
    --secondary-trans-color: hsla(253, 25%, 67%, 0.9);
    --bg-trans-color: hsla(0,0%,100%,0.75);
    --bg-color: hsla(0,0%,100%,0.90);
    --bg-black-color: #000;
    --highlight-color: rgb(143, 5, 5);
    --highlight-sec-color: #0C0;
    --shadow-color: #9aa0a8;
}
.black{
	background:var(--bg-black-color);
	color: var(--bg-color);
}
html {
    scroll-behavior: smooth;
  }
body{
	margin: 0;
	overflow-x: hidden;
}
figure {
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
}
blockquote{
	position: relative;
}
blockquote p{
	text-align: center;
}
.frame-layout-6 blockquote{
	margin-inline-start: 0;
    margin-inline-end: 0;
}
blockquote p::after{
	content: '';
	position: absolute;
	height: 6px;
	border-radius: 3px;
	width: 240px;
	background-color: var(--secondary-trans-color);
	left: calc(50% - 120px);
	bottom: -15px;
}
.form-label{
	display: none;
}
.container{
	max-width: 933px;
	margin: 0 auto;
}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
  }
/* Definition der Schriften */

h1, h2, h3, h4{
	font-family: "dita-wd", sans-serif;
    font-weight: 500;
    font-style: normal;
	color: var(--secondary-color);
	hyphens: auto;
}
p, label, li, td, a, input, textarea, figcaption, button.btn, option, select{
	font-family: "stolzl", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 18px;
}
.start-hero__title{
	hyphens: auto;
}
a,
button.btn{
	text-decoration: none;
	color: var(--secondary-color);
	cursor: pointer;
}
 /* Schriftgößen */
 .ce-headline-center{
	text-align: center;
 }
 h1{
    font-size: 48px;
}
h1.ce-headline-center:first-letter{
	font-size: 52px;
}
h2{
    font-size: 40px;
}
h3{
    font-size: 32px;
}
h4{
    font-size: 24px;
}
h5{
    font-size: 21px;
}
video{
	width: 100%;
	border-radius: 8px;
}
/* Menu Phone */
.logo{
	position: absolute;
	left: 20px;
	z-index: 100;
}
.menu_container_fix{
	position: fixed;
	width: 100%;
	top: 0;
    left: 0;
	height: 50px;
	background: var(--bg-color);
	box-shadow: 0 0 5px var(--shadow-color);
	z-index: 99;
}
nav {
    position: relative;
    /*height: 50;*/
    z-index: 450;
}
.ex{
	display: none;
}

/* Heros */
.hero {
    position: relative;
    display: block;
    width: 100%;
}
.hero::before{
	content: '';
    position: absolute;
    left: 0; top: 0;
	width: 100%;
	height: 100%;
    background: hsla(247,40%,40%,0.3);
}
.hero__title {
    position: absolute;	
	text-shadow: var(--shadow-color);
	width: 100%;
    z-index: 4;
    opacity: 0;
    color: white;
    text-align: center;
	margin: 0;
  }
.hero__last{
	opacity: 0;
	transform: scale(0);
}
.animation--title-in {
    animation: title-in 800ms forwards ease-in-out 750ms;
 }
.animation--last-in {
	animation: last-in 2200ms forwards ease-in-out 450ms;
}
.hero-full{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: -1;
}
.hero-full::before{
	content: '';
    position: absolute;
    left: 0; top: 0;
	width: 100%;
	height: 100vh;
    background: hsla(247,40%,40%,0.2);
}
.insert-bevore{
	display: block;
	width: 100%;
	height: 400px;
	z-index: 99;
}
.insert-bevore::before{
	content: '';
    position: absolute;
    left: 0; top: 0;
	width: 100%;
	height: 400px;
    background: hsla(247,40%,40%,0.2);
}
.hero-full-img{
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.start{
	display: flex;
	justify-content: center;
	position: relative;
	height: 100vh;
}
.start-hero{
	position: relative;
	display: flex;
	width: 100%;
}
.start-hero__title{
    position: absolute;
	text-shadow: 0.07em 0.07em 0.15em var(--shadow-color);
	width: 100%;
	top: calc(52vh - 68px);
    /*z-index: 324;*/
    opacity: 0;
    color: white;
	font-family: "dita-wd", sans-serif;
    font-weight: 500;
    font-size: 60px;
    text-align: center;
	margin: 0;
}

.scrollToNext{
    display: none;
}
.ce-full{
	height: 400px;
}

/* Button */


/* header */
.heder-diskription{
	position: absolute;
	display: flex;
	align-items: flex-end;
	width: 100%;
	text-align: center;
	z-index: 133;
}
.heder-diskription h1{
	width: 100%;
	font-size: 42px;
	color: #FFFFFF;
	background: hsla(0,0%,0%,0.3);
	padding: 21px;
	margin: 0 auto;
}

/* Frames */

.frame-layout-1,
.frame-layout-0{
	position: relative;
}
.frame:nth-child(even),
.frame-1:nth-child(even),
.frame-2:nth-child(even),
.frame-3:nth-child(even),
.frame-4:nth-child(even),
.frame-5:nth-child(even),
.frame-6:nth-child(even),
.frame-7:nth-child(even),
.frame-8:nth-child(even){
	height: 100%;
	width: 100%;
	background: var(--bg-trans-color);
	backdrop-filter: blur(4px);

}
.frame:nth-child(odd),
.frame-1:nth-child(odd),
.frame-2:nth-child(odd),
.frame-3:nth-child(odd),
.frame-4:nth-child(odd),
.frame-5:nth-child(odd),
.frame-6:nth-child(odd),
.frame-7:nth-child(odd),
.frame-8:nth-child(odd){
	height: 100%;
	width: 100%;
	background: var(--bg-color);
}
.frame-10{
	background: var(--bg-black-color);
	color: var(--bg-color);
}
.clearfix .frame{
	background: none;
}
.frame-default{
	margin-left: 12px;
	margin-right: 12px;
}
.frame-layout-2 figure,
.frame-layout-6 figure,
.frame-layout-7 figure,
.frame-layout-3 figure{
	position: relative;
	margin: 1em 0;
	border-radius: 6px;
	overflow: hidden;
}

.frame-layout-2 figcaption,
.frame-layout-6 figcaption,
.frame-layout-7 figcaption,
.frame-layout-3 figcaption{
	position: absolute;
	bottom: 0px;
	background: hsla(0,0%,86%,0.60);
	padding: 0.5em;
	width: 100%;
}
/*Frame Layout 6 Default*/
.frame-layout-6,
.frame-layout-7{
	position: relative;
	z-index: 3;
}
.frame-8{
	overflow: hidden;
}


/* Grid */
.grid-row,
.row{
	display: flex;
	justify-content: space-between;
}
.grid-container-1 .grid-column,
.grid-row > .form-group,
.row > div{
	width: 49%;
}
.grid-container .frame{
	border-radius: 6px;
}

/* Space */
.frame-space-after-extra-large{
	padding-bottom: 90px;
}
.frame-space-after-large{
	padding-bottom: 60px;
}
.frame-space-after-medium{
	padding-bottom: 40px;
}
.frame-space-after-small{
	padding-bottom: 30px;
}
.frame-space-after-extra-small{
	padding-bottom: 20px;
}
.frame-space-before-extra-large{
	padding-top: 95px;
}
.frame-space-before-large{
	padding-top: 65px;
}
.frame-space-before-medium{
	padding-top: 45px;
}
.frame-space-before-small{
	padding-top: 35px;
}
.frame-space-before-extra-small{
	padding-top: 25px;
}

/* Slidebox für Typo3*/
.frame-layout-0 .ce-textpic,
.frame-layout-10 .ce-textpic{
	position: relative;
	display: flex; 
	border-radius: 6px;
	z-index: 49;

}
.frame-layout-0 .ce-textpic{
	box-shadow: 5px 5px 15px rgb(202, 202, 202);
}
.frame-layout-10 .ce-textpic{
	box-shadow: 0px 0px 5px rgb(202, 202, 202);
}
.frame-layout-0 .ce-gallery,
.frame-layout-10 .ce-gallery{
	position: relative;
	width: 300px;
	height: 299px;
	overflow: hidden;
	border-radius: 6px 0 0 6px;
}
.frame-layout-0 .ce-bodytext,
.frame-layout-10 .ce-bodytext{
	position: relative;
	display: block;
	padding: 1.7em 60px 0.7em ;
	width: calc(100% - 300px);
	min-width: 270px;

}
.frame-layout-0 .ce-inner,
.frame-layout-10 .ce-inner{
	display: flex;
	flex-direction: row;
}
.frame-layout-0 .ce-gallery > div,
.frame-layout-10 .ce-gallery > div{
  position: absolute;
  top: 0;
  left: 0px;
  opacity: 0;
  margin: 0;
  animation: display 20s infinite;
  z-index: 100;
}
.frame-layout-0 div:nth-child(2) {
  animation-delay: 4s;
}
.frame-layout-0 div:nth-child(3) {
  animation-delay: 8s;
}
.frame-layout-0 div:nth-child(4) {
  animation-delay: 12s;
}
.frame-layout-0 div:nth-child(5) {
  animation-delay: 16s;
}
.frame-layout-0 .image,
.frame-layout-10 .image{
	margin: 0;
	z-index: 37;
}



audio {
    width: 250px;
    height: 40gapx;
	margin-block-start: 0.5em;
	margin-block-end: 0.5em;
	border-radius: 10px;
}
.audio-caption{
	font-size: 14px;
}
/* Images*/


.ce-full img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 50%;
}

/* Cards */
.card p{
	font-size: 16px;
}
.card h4{
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
}
.card-abstract{
	padding-bottom: 35px;
}
/*.card-start{
	display: flex;
	list-style: none;
	flex-wrap : wrap;
	justify-content : center;
}*/
.slide-container{
	max-width: 1120px;
	width: 100%;
	/*padding: 40px 0;*/
}
.slide-content{
	margin: 0 40px 25px 40px;
	overflow: hidden;
	padding: 10px;
}
/*.swiper-navBtn{
	color: var(--secondary-color);
	transition: color 0.3s ease;
  }*/
  .swiper-navBtn:hover{
	color: var(--secondary-trans-color);
  }
  .swiper-button-next, 
  .swiper-button-prev {
	color: var(--secondary-color);
	transition: color 0.3s ease;
  }
.swiper-pagination-bullet{
	background-color: var(--secondary-trans-color);
	opacity: 1;
  }
  .swiper-pagination-bullet-active{
	background-color: var(--secondary-color);
  }
.card{
	min-height: 580px;
	padding: 15px;
	border-radius: 6px;
	border: 1px solid var(--primary-color);
	box-shadow: 2px 2px 7px var(--shadow-color);
}
 .card img{
	width: 100%;
	height: auto;
	margin-top: 10px;
	border-radius: 4px;
}
/* Button */
.button-in-text{
	margin-top: 1.7em;
	text-align: center;
}
.button-in-text a,
button.btn{
	padding: 0.23em 1em 0.3em;
	background-color: var(--bg-trans-color);
	border-radius: 1.2em;
	border: 1px solid var(--primary-color);
	box-shadow: 2px 2px 10px var(--shadow-color);
}
button.btn:hover,
.button-in-text a:hover{
	background:hsla(0, 0%, 93%, 0.261);
	color:#fff
}
.card .button-in-text{
	position: absolute;
	bottom: 10px;
	left: calc(50% - 60px);
}

/* Form */
.form-style-2{
	display: flex;
	flex-wrap: wrap;
	padding: 32px; 	
}
/*.form-group{
	min-width: 350px;
}
.form-style-2 input.input-field,
.form-style-2 .tel-number-field,
.form-style-2 .textarea-field,
.form-style-2 .select-field,*/
.form-input,
.input input,
.input textarea,
select{
	border:1px solid #C2C2C2;
	background-color: var(--bg-trans-color);
	-moz-box-shadow:1px 1px 4px var(--shadow-color);
	-webkit-box-shadow:1px 1px 4px var(--shadow-color);
	box-shadow:1px 1px 4px var(--shadow-color);
	border-radius:6px;
	padding: 7px 7px;
	outline:none
}
input:not([type=checkbox]),
textarea{
	width: 100%;
}
.block{
	margin-bottom: 1em;
}
/*.form-style-2 .input-field:focus,
.form-style-2 .textarea-field:focus,*/
.form-input:focus,
.input input:focus,
.input textarea:focus{
	border:1px solid var(--highlight-sec-color)
}
.form-style-2 .textarea-field{
	height:100px;
	width:100%
}
/*.form-style-2 input[type=submit],
.form-style-2 input[type=button],*/
.form-input input[type=submit]:hover,
.form-input input[type=button]:hover{
	border:none;
	background:var(--bg-trans-color);
	color:var(--bg-black-color);
	-moz-box-shadow:1px 1px 4px var(--shadow-color);
	-webkit-box-shadow:1px 1px 4px var(--shadow-color);
	box-shadow:1px 1px 4px var(--shadow-color);
	border-radius:3px
}
/*.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover,*/
.form-input input[type=submit]:hover,
.form-input input[type=button]:hover{
	background:var(--bg-color);
	color: var(--bg-color);
}
/*.input-field:focus::placeholder,
.textarea-field:focus::placeholder,*/
.form-input:focus::placeholder,
.input input:focus::placeholder,
.input textarea:focus::placeholder{
	color:hsla(0,0%,0%,0.2);
	transition: 0.5s;
}
.form-group{
	padding-bottom: 1.2em;
}

/* Footer */
footer{
	background-color: var(--bg-black-color);
}
.footer{
	display: flex;
	padding: 1.7em 2em;
	min-height: 170px;
}
.footer p{
	width: 50%;
	margin: 0;
	padding: 0;
	color: var(--bg-color);
}
.footer a,
.fonts_withe{
	color: var(--bg-color);
	text-decoration: none;	
}
.fonts_vio{
	color: var(--secondary-trans-color);
}
.footer ul,
.footer li{
	padding: 0;
	margin: 0;
}
.footer ul{
	text-align: right;
	width: 50%;
}
/* Cookie */
.cookie-set.script , .cookie-set-direct.script{
    cursor: pointer;
    position: relative;
    top: 20px;
    width: 70%;
    left: 17%;
    min-height: 0%;
	height: 0%;
    background: #ffffff;
    text-align: center;
	border-radius: 6px;
}
.cookie-set{
    position: fixed;
    bottom: 20px;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    font-size: 0pt;
    background-color: var(--bg-trans-color);
    opacity: 0.5;
    background-image: url("https://music.energiewerk.at/fileadmin/img/fing.svg");
    background-size: cover;
    z-index: 48;
}
.cookie-set .frame{
	position: relative;
}
.cookie-set:hover{
    opacity: 0.2;
}
.cookie-btn{
    font-size: 20px;
    color: var(--primary-color);
}
.cookie-btn{
    padding: 0.23em 1em 0.3em;
    background-color: var(--bg-trans-color);
    border-radius: 1.2em;
    border: 1px solid var(--primary-color);
    box-shadow: 2px 2px 10px var(--shadow-color);
    margin: 1.7em 0;
}
.cookie-btn:hover{
    opacity: 0.7;
}
.cookie-set.script p , .cookie-set-direct.script p{
    position: absolute;
    top: 50%;
    color: #333333;
    text-align: center;
    background-color: rgb(255, 255, 255, 0.8);
    margin: 0 auto;
    padding: 40px;
    border-radius: 5px;
	z-index: 49;
}
@media only screen and (max-width: 775px){
    #CookieBox .intro p {
        width: 95%;
    }
	.cookie-set{
		right: 20px;
	}

	.slide-content{
		margin: 0 10px 25px 10px;
	}
	.swiper-navBtn{
		display: none;
	}

    .footer{
        flex-direction: column;
    }
    .footer ul{
        text-align: left;
        padding: 15px 0;
    }

	/* Grid Container*/

	.grid-row,
	.row{
        display: flex;
        flex-direction: column;
    }
	.grid-container-1 .grid-column,
	.grid-row > .form-group,
	.row > div{
		width: 100%;
	}
	.grid-container,
	.grid-column .frame-default{
		margin: 0;
	}

	/* Menu */
    #menu span{
        display: none;
    }
    

    #menu ul {
        padding: 0;
        list-style-type: none;
    }
    /*nav {
        position: relative;
        height: 50;
        z-index: 450;
    }*/
	/* Toggle */
	#menuToggle {
		display: flex;
		flex-direction: column;
		position: relative;
		top: 15px;
		align-items: flex-end;
		right: 0;
		z-index: 453;
		-webkit-user-select: none;
		user-select: none;
	}
	#menuToggle input{
		display: flex;
		right: 12px;
		top: -12px;
		width: 50px;
		height: 42px;
		position: absolute;
		cursor: pointer;
		opacity: 0;
		z-index: 456;
	}
	#menuToggle span{
		display: flex;
		right: 25px;
		width: 29px;
		height: 2px;
		margin-bottom: 5px;
		position: relative;
		background: var(--bg-black-color);
		border-radius: 3px;
		z-index: 454;
		transform-origin: 5px 0px;
		transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
					background 0.2s cubic-bezier(0.77,0.2,0.05,1.0),
					opacity 0.25s ease;
	}
	#menuToggle span:first-child{
		transform-origin: 0% 0%;
	}
	#menuToggle span:nth-last-child(2){
		transform-origin: 0% 100%;
	}
	#menuToggle input:checked ~ span{
		opacity: 1;
		transform: rotate(45deg) translate(-3px, -1px);
		background: #36383F;
	}
	#menuToggle input:checked ~ span:nth-last-child(3){
		opacity: 0;
		transform: rotate(0deg) scale(0.2, 0.2);
	}
	#menuToggle input:checked ~ span:nth-last-child(2){
		transform: rotate(-45deg) translate(0, -1px);
	}
	#menuToggle input:checked ~ ul{
		transform: none;
		z-index: 420;
	}
	#menu{
        position: absolute;
        /*z-index:450;*/
        width: 100%;
        text-align: center;
        min-height: 400px;
        box-shadow: 0 0 5px var(--shadow-color);
        margin: -50px 0 0 0;
        padding: 0px;
        padding-top: 105px;
        background-color: rgba(255,255,255,0.90);
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(0, -100%);
        transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    #menu a{
        border-bottom: solid;
    }
    #menu li{
        padding: 10px 0;
        transition-delay: 0.2s;
    } 
    #menu ul li a{
        border-bottom: hidden;
    }
    #menu ul li{
        padding: 5px 0 0;
    }
    #menu{
        color: hsla(0,0%,27%,0.00);
    }
		/* Slidebox für Typo3*/
		.frame-layout-0 .ce-textpic,
		.frame-layout-10 .ce-textpic{
			flex-flow: column; 
			width: 300px;
			overflow: hidden;
			margin: 0 auto;
		}
		.frame-layout-10 .ce-bodytext,
		.frame-layout-10 .ce-bodytext{
			padding: 10px 1em;
			width: 300px;
		}
		.frame-layout-0 .ce-gallery,
		.frame-layout-10 .ce-gallery{
			border-radius: 6px 6px 0 0;
		}
		.frame-layout-0 img,
		.frame-layout-10 img{
			width: 300px;
		}
}

@media only screen and (max-width: 530px){
	.cookie-set{
		display: none;
	}

	/* Frames */
	.frame-layout-1{
		width: 100%;
	}
	.frame-layout-2 .ce-right,
	.frame-layout-2 .ce-left,
	.frame-layout-6 .ce-right,
	.frame-layout-6 .ce-left,
	.frame-layout-7 .ce-right,
	.frame-layout-7 .ce-left,
	.frame-layout-3 .ce-right,
	.frame-layout-3 .ce-left{
		display: flex; 
		flex-direction: column;
	}
	.frame-layout-2 figure,
	.frame-layout-3 figure{
		width: 100%;
		height: 300px;
	}
	
	.frame-layout-6 img,
	.frame-layout-7 img{
		width: 100%;
		max-width: 510px;
		height: auto;
		object-fit: cover;
		object-position: 50%;
		border-radius: 6px;
	}
	.frame-layout-6 .ce-bodytext,
	.frame-layout-7 .ce-bodytext{
		position: relative;
		display: flex;
		top: -40px;
		left: 40px;
		width: calc(100% - 80px);
		min-height: 140px;
		padding: 1em 1.5em;
		border-radius: 6px;
		background: var(--bg-trans-color);
		backdrop-filter: blur(10px);
	}
	.frame-layout-2 img,
	.frame-layout-3 img{
		width: 100%;
		object-fit: cover;
		object-position: 50%
	}
 .frame-indent{
		width: 100%;
		padding: 1em;
	}
}

@media only screen and (min-width: 530px) and (max-width: 774.98px){
	.frame-layout-1{
		width: 80%;
	}
	.frame-layout-6 .ce-textpic,
	.frame-layout-7 .ce-textpic{
		
		align-items: flex-end;
	}
	.frame-layout-2 figure,
	.frame-layout-3 figure{
		width: 200px;
		height: 200px;
	}
	.frame-layout-6 figure,
	.frame-layout-7 figure{
		width: auto;
		height: 300px;
		margin-left: 1em;		
	}
	.frame-layout-6 img,
	.frame-layout-7 img{
		width: auto;
		height: 300px;
		object-fit: cover;
		object-position: 50%
	}
	.frame-layout-6 .ce-bodytext,
	.frame-layout-7 .ce-bodytext{
		position: relative;
		display: flex;
		top: -40px;
		left: 150px;
		width: calc(100% - 200px);
		min-height: 140px;
		padding: 1em 1.5em;
		border-radius: 6px;
		background: var(--bg-trans-color);
		backdrop-filter: blur(10px);
	}
	.frame-layout-2 img,
	.frame-layout-3 img{
		width: 200px;
		height: 200px;
		object-fit: cover;
		object-position: 50%
	}

	.frame-layout-2 .ce-right,
	.frame-layout-2 .ce-left,
	.frame-layout-3 .ce-right,
	.frame-layout-3 .ce-left{
			display: flex; 
	}
	.frame-layout-2 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-2 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-3 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-3 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-6 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-6 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-7 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-7 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-2 .ce-right .ce-bodytext,
	.frame-layout-3 .ce-right .ce-bodytext,
	.frame-layout-6 .ce-right .ce-bodytext,
	.frame-layout-7 .ce-right .ce-bodytext{
		padding-right: 1em;
	}
	.frame-layout-2 .ce-left .ce-bodytext,
	.frame-layout-6 .ce-left .ce-bodytext,
	.frame-layout-7 .ce-left .ce-bodytext,
	.frame-layout-3 .ce-left .ce-bodytext{
		padding-left: 1em;
	}
	.frame-indent{
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}

}

@media only screen and (min-width: 774.99px){
	.scrollToNext{
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: calc(5vh);
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: hsla(0,0%,100%,0.30);
		animation-name: insert;
		animation-duration: 3s;
	}
	.scrollToNext i{
		font-size: 40px;
		opacity: 0.7;
		cursor: pointer;
	}
	.scrollToNext i:hover{
		animation: 2s hoppel 0.1s ease;
	}
	.backg{
		height: 100%;
		width: 100%;
		background: var(--bg-color);
		/*padding-top: 3em;
		padding-bottom: 3em;*/
	}

	/* Menu */
	.menu_container_fix > nav,
    .menu_container > nav{
        position: relative;
        text-align: right;
        height: 50px;
		bottom: 0px;
        /*margin: 0 20px 0;*/
    }
    #menuToggle input{
        display: none;
    }
    #menuToggle{
        position: relative;
        top: 15px;
    }
    nav ul {
        position: relative;
        display: inline-block;
        bottom: 0px;
        padding: 0;
        margin: 0;
        
    }
    nav li{
        display: inline-flex;
        position: relative;
        padding: 4px 20px 4px;
        cursor: pointer;
        z-index: 5;
        min-width: 4em;
        
    }
    #menu{z-index: 460;}
    nav ul ul{
        position: absolute;
        display: none;
        margin: 0;
        height: fit-content;
		width: fit-content;
        padding: 7px 0;
        top: 28px;
        right: 0;
        box-shadow: 0 0 5px var(--shadow-color);
        background: rgba(255,255,255,0.90);
        border-radius: 4px;
        animation-name: insert;
        animation-duration: 1s;
        animation-iteration-count: 1;
        text-align: left;
        z-index: 450;
    }
	nav ul ul li{
		white-space: nowrap;
	}
	a:hover{
		color: var(--primary-color);
	}
    nav ul li:hover ul{
        display: block;
    }


	.cookie-set{
		left: 20px;
	}
	/* Frames */
	.frame-layout-6 .ce-textpic,
	.frame-layout-7 .ce-textpic{
		
		align-items: flex-end;
	}
	.frame-indent{
		width: 80%;
		
		margin-left: auto;
		margin-right: auto;
	}

	/*fram 66/33 33/66*/
	.frame-indent-right,
	.frame-indent-left{
		width: 66%;
		min-width: 600px;
		padding: 0 1em;
	}
	.frame-indent-left{
		margin-left: auto;
	}
	.frame-indent-right{
		margin-right: auto;
	}
	.frame-layout-2 figure,
	.frame-layout-3 figure{
		width: 300px;
		height: 300px;
	}
	.frame-layout-6 figure,
	.frame-layout-7 figure{
		width: 400px;
		height: 400px;
	}
	.frame-layout-6 img,
	.frame-layout-7 img{
		width: 400px;
		height: 400px;
		object-fit: cover;		
	}
	.frame-layout-6 .ce-bodytext,
	.frame-layout-7 .ce-bodytext{
		position: relative;
		display: flex;
		top: -40px;
		left: 250px;
		width: calc(100% - 350px);
		min-height: 140px;
		padding: 1em 1.5em;
		border-radius: 6px;
		background: var(--bg-trans-color);
		backdrop-filter: blur(10px);
	}
	.frame-layout-2.frame-indent-right,
	.frame-layout-6.frame-indent-right,
	.frame-layout-7.frame-indent-right,
	.frame-layout-3.frame-indent-right{
		background-image: linear-gradient(90deg, hsla(0,0%,86%,0.00) 20%, hsla(0,0%,86%,1.00) 77%);
		box-shadow: 5px 5px 15px rgb(202, 202, 202);
		border-radius: 6px;
	}
	.frame-layout-2.frame-indent-left,
	.frame-layout-2.frame-indent-left,
	.frame-layout-3.frame-indent-left{
		background-image: linear-gradient(90deg, hsla(0,0%,86%,1.00) 20%, hsla(0,0%,86%,0.00) 77%);
		box-shadow: 5px 5px 15px rgb(202, 202, 202);
		border-radius: 6px;
	}
	.frame-layout-2 .ce-right,
	.frame-layout-2 .ce-left,
	.frame-layout-3 .ce-right,
	.frame-layout-3 .ce-left{
			display: flex; 
	}
	.frame-layout-2 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-2 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-3 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-3 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-6 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-6 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-7 .ce-right div:nth-child(1) {order: 2}
	.frame-layout-7 .ce-right div:nth-child(2) {order: 1}
	.frame-layout-2 .ce-left .ce-bodytext,
	.frame-layout-3 .ce-left .ce-bodytext{
		padding-left: 1em;
	}
	.frame-layout-2 .ce-right .ce-bodytext,
	.frame-layout-3 .ce-right .ce-bodytext{
		padding-right: 1em;
	}
	.frame .frame-layout-1, .frame .frame-layout-2,
	.frame .frame-layout-3{
		padding: 1.7em 2em;
	}	
	.frame-layout-4 .ce-textpic{
		display: flex;
		gap: 1.2em;
	}
	.frame-layout-4 .ce-textpic.ce-right{
		flex-direction: row-reverse;
	}
	.frame-layout-4 .ce-gallery{
		width: 250px;
		margin-block-start: 1em;
		margin-block-end: 1em;
	}
	.frame-layout-4 .ce-bodytext{
		width: auto;
	}
}

/* keyframes */
@keyframes insert {
    0%   {opacity: 0; }
    100% {opacity: 1; }
  }
  @keyframes hoppel {
      0%  {transform: translateY(0);}
      20%	{transform: translateY(-2px);}
      30%	{transform: translateY(4px);}
      50% {transform: translateY(0);}
      60%	{transform: translateY(3);}
      75%	{transform: translateY(0);}
      88%	{transform: translateY(2);}
      100%{transform: translateY(0);}
  }
  @keyframes title-in {
      0% {
          visibility: hidden;
          opacity: 0;
          transform: translateY(-35%);
      }
      100% {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
      }
  }
  @keyframes background-in{
      0% {opacity: 0; transform: scalex(0);}
      40% {transform: scalex(1);}
      100% {opacity: 1; }
  }
  @keyframes last-in{
      0% {opacity: 0; color: hsla(0,0%,100%,1.00); transform: scale(0)}
      80% {opacity: 1;color: #513F92;transform: scalex(1.2)}
      100% {opacity: 1; color: hsla(254,39%,70%,1.00);transform: scale(1)}
  }
  @keyframes display {
		0% {
		  transform: translateX(0);
		  opacity: 1;
		}
		10% {
		  transform: translateX(0);
		  opacity: 1;
		}
		22% {
			transform: translateX(-300px);
			opacity: 1;
		  }		
		32% {
			transform: translateX(-300px);
			opacity: 1;
		  }
		44% {
			transform: translateX(-600px);
			opacity: 1;
		}
		54% {
			transform: translateX(-600px);
			opacity: 1;
		}
		66% {
			transform: translateX(-900px);
			opacity: 1;
		} 
		76% {
			transform: translateX(-900px);
			opacity: 1;
		} 
		88% {
			transform: translateX(-1200px);
			opacity: 1;
		} 
		98% {
			transform: translateX(-1200px);
			opacity: 1;
		} 
		100% {
			transform: translateX(-1200px);
			opacity: 1;
		} 

  }