/* -------------------------------------------------- */
/*    GLOBAL STUFF                                    */
/* -------------------------------------------------- */

* {
	margin: 0;
	padding: 0;
	border: 0 none;
	outline: 0 none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
	font-family: 'Nunito Sans', sans-serif;
	text-align: left;
	font-size: 62.5%;  /* 1em = 10px , 1.4em = 14px */
	line-height: 1.1;
	color: #000;
	-webkit-font-smoothing: antialiased;
	position: relative;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}


textarea,
input {
	font-family: inherit;
	/* for i0S */
	 border-radius: 0;
	 -webkit-appearance: none;
}


a {
	text-decoration: none;
	color: #FFF;
}

a .frame-default{
	text-decoration: none;
	color: #000;
}


.frame-default a{
	text-decoration: none;
	color: #de0000;
}

.frame-default a:hover{
	text-decoration: underline;
}


a:hover {
	/* color: #FFF; */
}

article,
nav,
aside {
	display: block;
}


/* -------------------------------------------------- */
/*    POSITIONING                                     */
/* -------------------------------------------------- */

.row {
	text-align:center;
}

.rowmax {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	max-width: 104em;
	overflow: hidden;
	position: relative;
	background-color: #fff;
}

.layout1 .rowmax{
	background-color: transparent;
}

.rowmax.bledoff{
	/* padding: 0; */
	/* max-width: 104em; */
	/* background-color: transparent; */
}

#head {
	/* display: none; */
	position: relative;
	width: 100%;
	z-index: 3;
}

#head .rowmax{
	overflow: visible;
	background-color: rgba(255, 10, 117, 1)
}

#head img.logo{
	display: none;
}
img.logo{
	width: 22.5%;
	padding: 1.25%;
}
#pid1 #head img.logo{
	display: block;
}

#claim {
	color: #fff;
	font-weight: 900;
	position: absolute;
	top: 10px;
	left: 50%;
	width: 280px;
	font-size: 7.7vw;
	line-height: 0.9em;
}

#main {
	/* background: #f6f8f9; */
}
#footer .rowmax {
	padding-top: 3em;
}


/*  #####  HEAD ELEMENTS  #####  */

#nav{
	display: none;
	position: absolute;
	box-sizing: border-box;
	top: 0;
	width: 66vw;
	right: 0;
	background-color: #FFF;
	z-index: 3;
	padding: 6vw 5vw;
}

#blend{
	opacity: 0;
}

.shownav #blend{
  background-color: rgba(255, 10, 117, 0.5);
  opacity: 1;
  z-index: 2;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  filter: saturate(2) brightness(2) contrast(10);
  /* transition: opacity 0.5s ease; */
}

#navtoggle {
	cursor: pointer;
	width: 4.5em;
	height: 3.5em;
	right: 3em;
	position: absolute;
	top: 2em;
	z-index: 4;
}

#navtoggle .bar {
	position: absolute;
	left: 0;
	top: 1.3em;
	background: #000;
	border-radius: 4px;
	height: 7px;
	width: 4.5em;
	transform: rotate(0deg);
}

#navtoggle .bar.n1{
	top: 0.3em;
	transition: transform 0.3s, top 0.3s ease 0.3s;
}
#navtoggle .bar.n2{
	opacity: 1;
	transition: opacity 1ms linear 0.3s;
}
#navtoggle .bar.n3{
	top: 2.3em;
	transition: transform 0.3s, top 0.3s ease 0.3s;
}

.shownav #navtoggle .bar.n1{
	top: 1.3em;
	transform: rotate(45deg);	
	transition: top 0.3s, transform 0.3s ease 0.3s;
}
.shownav #navtoggle .bar.n2{
	opacity: 0;	
}
.shownav #navtoggle .bar.n3{
	top: 1.3em;
	transform: rotate(-45deg);	
	transition: top 0.3s, transform 0.3s ease 0.3s;
}

.a2a_kit{
	position: absolute;
	right: 3em;
	top: 8.5em;
	z-index: 2;
	display: flex;
	flex-direction: row-reverse;
}

.a2a_kit .toggle {
	display: block;
	background: url('../img/share.svg') no-repeat;
	background-size: 33px 40px;
	line-height: 1 !important;
	height: 40px !important;
	width: 33px !important;
	overflow: hidden;
	text-indent: -99em;
	cursor: pointer;
	margin: 0 5px;
}
.a2a_kit > a{
	display: none;
	border-radius: 10em;
	margin: 0 0.5em;
	padding: 0 !important;
	overflow: hidden;
	width: 32px;
	height: 32px;
	overflow: hidden;
	text-align: center;
	background-color: #000;
	border:4px solid #000;
}

.a2a_kit.open a{
	display: block;
}

#searchicon {
	position: absolute;
	width: 4em;
	right: 3em;
	top: 15em;
	z-index: 1;
	cursor: pointer;
}
#pid90 #searchicon {
	display: none;
}



/*  #####  PAGE ELEMENTS  #####  */

#main .col {
	float: left;
}

#leftcol {
	width: 25%;
	padding-left: 2%;
	padding-right: 2%;
}

#maincol {
	padding-top: 4vw;
	width: 100%;
}

#leftcol + #maincol {
	width: 70%;
}

#leftcol + #maincol.rightcol {
	padding-right: 4%;
	width: 55%;
}

#leftcol,
#maincol,
#rightcol
{
	box-sizing: border-box;
	padding-top: 4vw;
}

.layout1 #maincol{
	padding-top: 0;
	padding: 0;
}

#leftcol + #maincol + #rightcol{
	width: 20%;
}

#related, #abonnieren{
	padding-top: 3vw;
	clear: left;
	padding-left: 25%;
}

#related > h3, #abonnieren h3{
	border-top: 4px solid black;
	font-size: 3vw;
	padding-top: 1vw;
	padding-bottom: 3vw;
	font-weight: 900;
	display: block;
}

#related .ce-bodytext p{
	display: none;
}

#related .ce-bodytext h2{
	font-size: 2.4vw;
	font-weight: 900;
}

#related .ce-bodytext h3{
	font-size: 1.8vw;
}

/* box */
.frame-layout-2{
	background-color: #d6d6d6;
	padding: 1.5em 2em 0.2em 2em;
}

/*	accordion  (raziq) */
.frame-layout-1 .ce-textpic {
	display: none;
}
.frame-layout-1 header{
/*	padding-left: 10em;*/
	padding-left: 6em;
	cursor: pointer;
}
.frame-layout-1 header::before{
	content: "+";
	font-size: 6em;
	margin-left: -62px;
	font-weight: bold;
	display: block;
/*	left: 30em; */

	margin-bottom: -0.85em;
}
.frame-layout-1 header.accOpen::before{
	content:"–";

}

/* -------------------------------------------------- */
/*    NAVIGATION                                      */
/* -------------------------------------------------- */

ul.nav {
	list-style:none;
}
ul.nav li{

}
.nav a {
	display: inline-block;
	font-size: 1.8em;
	text-decoration: none;
	padding: 0.2em 0;
	/* margin-left:1.2em; */
}

.nav a:hover {
	text-decoration: none;
}


a.act,
#nav .nav .tit a{
	font-weight: bold;
}
#nav .nav .tit a:hover {
	color: #000;
}



#footer a{
	color: #333;
}

#pid1 #footer,
#pid1 #footer #footerclaim,
#pid1 #footer a{
	color: #FFF;
}
#pid1 #footer {
	mix-blend-mode: difference;
}

#footer ul.nav li a{
	color: #000;
	font-weight: 900;
}

#footer ul.nav li a::before{
  content: "> ";
}

#footer a[href^='https'] {
	overflow: hidden;
	width: 1.5em;
	height: 1.5em;
	margin: 0 0.7em 0.5em 0;
	position: relative;
	top: 2px;
	background: no-repeat center;
	background-size: contain;	
	display: inline-block;
	text-indent: -999px;
	overflow: hidden;
}
#footer a[href*='twitter'] {
	background-image: url('../img/twitter.svg');
}
#footer a[href*='facebook'] {
	background-image: url('../img/fb.svg');
}
#footer a[href*='instagram'] {
	background-image: url('../img/insta.svg');
}
#footer a[href*='linkedin'] {
	background-image: url('../img/linkedin.svg');
}


#pid1 #footer a[href*='twitter'] {
	background-image: url('../img/twitter-white.svg');
}
#pid1 #footer a[href*='facebook'] {
	background-image: url('../img/fb-white.svg');
}
#pid1 #footer a[href*='instagram'] {
	background-image: url('../img/insta-white.svg');
}
#pid1 #footer a[href*='linkedin'] {
	background-image: url('../img/linkedin-white.svg');
}



/* ---- Mainnav -----*/

#mainnav,
#infonav{
	border-bottom: 0.3vw solid #000;
	padding-bottom: 3em;
}
#infonav{
	padding-top: 3em;
}

#mainnav a,
#infonav a{
	font-size: 3vw;
	color: #000;
}

#mainnav a:hover,
#infonav a:hover,
#metanav a:hover{
	color: #999;
}

#metanav{
	margin-top: 3em;
	margin-bottom: 3em;
}

#metanav a{
	font-size: 2vw;
	font-weight: normal;
	color: #000;
}

#metanav a.act{
		font-weight: 900;
}

#mainnav li ul,
#infonav li ul{
	display: none;
	padding-left: 2em;
}


#subnav a {
	color: #000;
	font-weight: 900;
}
#subnav li,
#leftcol p {
	line-height: 1.1em;
	background-position: left 0.3em;
}


/* -------------------------------------------------- */
/*    CONTENT DESIGN                                  */
/* -------------------------------------------------- */

body.level3,
body.level2,
body.level1,
body#pid1{
	background: url('../img/bg-zuerchermittelschulen.jpg'); 
	background-attachment: fixed;
	background-size: 100%;
}


#campaign{
	 overflow: hidden;
	 display: none;
}

body.be-1 #campaign{
	 display: block;
}

@keyframes slideuppp{
	from{
		height: 100vh;
	}
		to{
		height: 0;

	}
}

@keyframes moveup{
	from{
		margin-top: 0;
	}
		to{
		margin-top: -100vh;
	}
}

.dce-header{
	height: 31vw;
	background-size: cover, cover;
}

#headerzone{
	/* margin-bottom: 4em; */
}

#headerzone img.logo {
	position: absolute;
}

#campaign .dce-campaign{
	display: block;
	position: relative;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	min-height: 40vw;
	background-size: cover;
}

#campaign.anim .dce-campaign{
	animation: moveup 1s cubic-bezier(.86,0,.07,1) 0s forwards;
}


#campaign .dce-campaign h2{
	position: absolute;
	font-size: 8vw;
	left: 2vw;
	top: 15vh;
	right: 2vw;
	width: 96vw;
	height: 57vh;
	font-weight: 900;
	-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

#campaign .dce-campaign h3{
       position: absolute;
       font-size: 4vw;
       width: 60vw;
       right: 2vw;
       bottom: 23vh;
       text-align: right;
}
@media (min-aspect-ratio: 10/4){
	#campaign .dce-campaign h2{
		top: 25vh;
	}
	#campaign .dce-campaign h3{ 
		bottom: auto;
		top: 65vh;
	}
}

@media (max-aspect-ratio: 2/3){
	#campaign .dce-campaign h3{ 
		font-size: 6vw;
		width: 80vw;
		/*
		bottom: auto;
		top: 60vh;
		width: 40vw;
		*/
	}
}


#campaign .dce-campaign .anim{
	position: absolute;
	font-size: 15vh;
	left: 0;
	bottom: 1vh;
	cursor: pointer;
	color: #FFF;
	height: 20vh;
	width: 100%;
	background: url('../img/down.svg') center top;
	background-size: auto 50%;
}


#campaign .dce-campaign img.logo{
	position: absolute;
	top: 0;
	left: 2.5vw;
	height: 5vh;
	background-color: white;
	padding: 2vw;
}

#campaign .dce-campaign .txt{
	position: absolute;
	font-size: 1vw;
	left: 5vw;
	bottom: 5vw;
}

.dce-portrait img.logo{
	position: absolute;
	left: 0;
	top: 5%;
	width: 50%;
	background-color: white;
	padding: 2%;
	cursor: default;
}


.dce-portrait h2{
	position: absolute;
	padding-right: 2.5%;
	padding-bottom: 2.5%;
	bottom: 0;
	/* width: 90%; */
}

.dce-number h2{
	font-weight: bold;
	position: absolute;
	font-size: 3vw;
	left: 10%;
	width: 60%;
	top: 10%;
	line-height: 0.9;
}

.dce-number h3{
	position: absolute;
	font-size: 10vw;
	left: 10%;
	bottom: 10%;
	width: 90%;
}

.dce-number .box-size{
	background-position-x: 15%;
	background-size: contain;
}


.dce-navigation .txt{
	position: absolute;
	padding: 5% 5%;
	/* left: 5%; */
	/* top: 10%; */
	/* width: 90%; */
}

.dce-navigation .txt ul{
	list-style: none;
	list-style-position: outside;
}


.dce-navigation .txt li{height: 3.5vw;}

.dce-navigation .txt li a{
	color: inherit;
	font-weight: 900;
	padding-left: 1vw;
	font-size: 3vw;
	/* line-height: 1; */
}

.dce-navigation .txt li:before {
	content:'';
	display: inline-block;
	/* line-height: 1; */
	height: 2.6vw;
	width: 2.6vw;
	background-image: url('../img/pfeil_inverse.svg');
	background-size: contain;
	background-repeat: no-repeat;
}

.eapps-instagram-feed{

}
#eapps-instagram-feed-1{
	max-height: none;
}

.dce-band {
	position: relative;
}
.dce-band::before,
.dce-band::after {
    content:'';
    display:block;
    height:100%;
    width:40px;
    background:no-repeat left center;
    /* mit pfeil:
	background-image:url('data:image/svg+xml,<svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 15L2 8.93407L7.88235 3" stroke="%23000000" stroke-width="2" /></svg>'),linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.8) 40%,rgba(255,255,255,0)); */
    background-image: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0.9) 40%, rgba(255,255,255,0));
    position:absolute;
    top:0;
    z-index:1;
}
.dce-band::after {
    right:0;
    transform:rotateY(180deg);
}

.dce-band > div {
	white-space: nowrap;
	overflow-x: scroll;
	background-color: #fff;
}

.dce-band > div {
	scrollbar-width: thin;
	scrollbar-color: #ff0a75 #fff;
}

/* Works on Chrome, Edge, and Safari */
.dce-band > div::-webkit-scrollbar {
	width: 12px;
}

.dce-band > div::-webkit-scrollbar-track {
	background: #fff;
}

.dce-band > div::-webkit-scrollbar-thumb {
	background-color: #ff0a75;
	border-radius: 20px;
	border: 5px solid #fff;
}
.dce-band a,
.dce-band a:hover {
	color: inherit;
}
.dce-band .frame-box {
	padding: 1.25% 2.5%;
}
.dce-band p > *:last-child{
	padding-right: 1em;
}

.fontcolor-black{
	color: #000;
}

.fontcolor-red{
	color: #AF3233;
}

.fontcolor-olive{
	color: #C3BC53;
}

.fontcolor-white{
	color: #FFF;
}


.grey{
	background-color: #8e7979;
}

.olive{
	background-color: #c2bb52;
}

.red{
	background-color: #ad3232;
}

.coldgrey{
	background-color: #d6d6d6;
}

.lightgrey{
	background-color: #ededed;
}

.green{
	background-color: #45926d;
}

.white{
	background-color: #fff;
}

.w2.h2 .subbox{
	position: absolute;
}

.w2.h2 .subbox.topbox{
	width: 50%;
	height: 50%;
	left: 0;
}

.w2.h2 .subbox.rightbox{
	right: 0;
	width: 50%;
	height: 100%;
	background-size: cover;
}

.w2.h2 .subbox.botbox{
	width: 50%;
	height: 50%;
	bottom: 0;
}

.w2.h2.grey,
.w2.h2.olive,
.w2.h2.red,
.w2.h2.coldgrey,
.w2.h2.lightgrey,
.w2.h2.green{
	background: none;
}

.browsenav a{
	font-size: 2.8vw;
}

/*a.browsetitle::before{
	display: block;
	content: "mehr davon";
	color: black;
	margin-bottom: 0.5em;
}*/

a.browsetitle{
	display: inline-block;
	width: 100%;
	color: transparent;
	background: url('../img/parent.svg') no-repeat bottom left;
}

#main .frame a[href^="http"] {
	background: url('../img/externerlink.svg') no-repeat left center;
	background-size: auto 60%;
	padding-left: 1em;
	margin-left: 0.2em;
}

#main #eapps-instagram-feed-1 a{
	background-image: none;
	padding-left: 0;
	margin-left: 0;
}


.section .rowmax{
	padding-left: 2%;
	padding-top: 3em;
}

.section .ce-left .ce-bodytext p{
		padding-right: 2%;
}
.section a:hover {
	text-decoration: none;
}

.section .ce-bodytext p:after{
	margin-top: 0.5em;
	content: "";
	font-weight: bold;
	display: inline-block;
	height: 24px;
	width: 100%;
	background: url('../img/parent.svg') no-repeat;
	background-position: 0 5px;
}

/*.section .ce-bodytext p:after:after{
	content: "Weiterlesen";
	display: block;
	text-decoration: underline;
	width: 100%;
	background: url('../img/parent.svg') no-repeat bottom left;
}*/

.sectiontitel{
	font-size: 3em;
}

#main .loadmore {
	display: inline-block;
	color: #fff;
	background: #000;
	padding: 0.2em 1em;
}
.loadmore img{
	vertical-align: bottom;
}


#pid13 .sectiontitel{
	 display: none;
}



#footer .wrap {
	margin-left: 2%;
	margin-right: 2%;
	padding: 2% 0;
	border-top: 1px solid #000;
	display: flex;
	justify-content: space-between ;
	gap: 2%;
	row-gap: 1em;
	flex-wrap: wrap;
}
#pid1 #footer .wrap {
	margin: 0;
	border-color: #fff;
}
#footer label{
	display: none;
}
#pid1 #footer button{
	background: #fff;
	color: #000;
}
#footer input{
	background: transparent;
	color: #000;
	border-color: #000;
}
#footer input::placeholder {
	opacity: 1;
}
#pid1 #footer input{
	background: #000;
	color: #fff;
	border-color: #fff;
}
#footer form * {
	font-family: inherit;
}
#footer button{
	font-weight: 900;
	margin-top: 0.5em;
}

#footer h3 {
	font-weight: 900;
	padding-bottom: 0.5em;
}
#footerclaim{
	font-weight: 900;
	line-height: 1.1;
	color: #45926d;
}

#footernav {
	padding-bottom: 2%;
	overflow: hidden;
}




#footer .wrap {
	font-size: 1.6vw;
}
#footer .wrap * {
	font-size: 1em;
}

#footernav .nav a{
	padding: 0;
}

.frame h1, .frame h2, .frame h3, .frame h4 {
	font-size: 3.6vw;
	line-height: 1.1;
	font-weight: normal;
	padding-bottom: 0.4em;
}

.frame h1, .frame h2{
	font-size: 3.6vw;
}
.frame h3, .frame h4 {
	font-size: 2.6vw;
}

.frame h1, .frame h3{
	font-weight: 900;
}

.frame h1, .frame h2 {
	color: #000;
}
.frame h3 {
	/* color: #888; */
}

#main h1, #main h2, #main h3 {
	overflow-wrap: break-word;
}


span.spamprotection{
	display: none;
}

#footer .frame-default {
	margin-bottom: unset;
}

.frame-default{
	margin-bottom: 3vw;
}

.frame.gallery-below + .frame header {
	padding-top: 2rem;
}

.frame p,
.frame li {
	font-size: 1.8vw;
	line-height: 1.5;
	padding-bottom: 0.8em;
}

.frame p.lead{
	font-size: 2vw;
	font-weight: bold;
}

.frame p.footer, .frame p.date {
	font-style: italic;
}

.frame ul {
	list-style: none;
	padding-bottom: 0.4em;
}

p.question {
	font-weight: bold;
	padding-bottom: 0;
}
p.answer {
    padding-left: 1.5em;
}

.frame li{
	padding-left: 1.2em;
	padding-bottom: 0em;
	margin-bottom: 0.5em;
	background: url('../img/bullet-ecke.svg') left 0.4em no-repeat;
	background-size: 0.6em;
}

blockquote {
	padding: 0.8em 2em 0.4em 3em;
	margin-bottom: 1.5em;
	position: relative;
	font-size: 1.8vw;
}

.frame blockquote p {
	font-size: 1.2em;
	line-height: 1.2em;
}
blockquote:before,
blockquote:after {
	display: block;
	font-size: 6em;
	line-height: 0.4em;
	color: rgba(0,0,0, 0.5);
	position: absolute;
}
blockquote:before {
	content: '«';
	top:0;
	left:0;
}
blockquote:after { 
	content: '»';
	bottom: 0;
	right: 0;
}
blockquote p:last-child{
	padding-bottom: 0;
}
cite {
	font-size: 0.8em;
	display: block;
	text-align: right;
}
blockquote cite {
	font-size: 0.6em;
	line-height: 1em;
	padding-right: 2em;
}


blockquote.long {
	border-left: 0.5em solid #999;
	padding: 0em 2em 0 1.5em;
	margin-left: 1em;
}
blockquote.long p { 
	font-size: 1em;
	line-height: 1.3em;
}
blockquote.long cite {
	text-align: left;
}
blockquote.long::before, blockquote.long::after {
	content: none;
}
blockquote.long cite {
    font-size: 0.7em;
	padding: 0.4em 0 0 0;
}
textarea,
input,
label,
button {
	font-size: 1.8vw;
	line-height: 1.5;
}
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
	border: 1px solid #DDD;
}
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
	border-color: #888;
}

button,
label,
input,
textarea {
	padding: 0.25em 1em;
}
button {
	cursor: pointer;
	color: #fff;
	background: #000;
	margin: 1em 0;
}
label {
	padding-left: 0;
}

.form-group {
	padding-bottom: 1em;
}
.control-label {
	float: left;
	width: 7em;
	clear: left;
}
.control-label + div * {
	width: calc(100% - 8em);
	box-sizing: border-box;
}


.ce-intext .ce-gallery{
	max-width: 47.5%;
}

.ce-intext.ce-left .ce-gallery{
	margin-right: 5%;
}

.ce-intext.ce-right .ce-gallery{
	margin-left: 5%;
}

.ce-left.ce-above .ce-gallery,
.ce-left.ce-below .ce-gallery{
	float: none;
}

.ce-gallery.swipebox .ce-row{
	display: none;
}

.ce-gallery.swipebox figcaption{
	background: url('../img/parent.svg') no-repeat center center;
	height: 2em;
	display: block; 
	color: transparent;
	/* position: relative; */
}

.ce-gallery.swipebox .ce-row:first-child{
	display: block; 
	margin-bottom: 0;
}

.ce-gallery figcaption{
	padding: 0.5vw 0;
	font-size: 1.4vw;
	color: #555;
	font-style: italic;
}

.frame p.footer, .frame p.date{
	font-size: 1.4vw;
}

.ce-gallery img {
	max-width: 100%;
	height: auto;
}

.ce-gallery[data-ce-columns="2"] .ce-column,
.ce-gallery[data-ce-columns="3"] .ce-column {
	float: left;
	margin-right: 5%;
}

.ce-gallery[data-ce-columns="3"] .ce-column {
	width: 30%;
}

.ce-gallery[data-ce-columns="3"] .ce-column:nth-child(3n) {
	margin-right: 0;
}

.ce-gallery[data-ce-columns="3"] .ce-column:nth-child(3n+1) {
	clear: left;
}


.ce-gallery[data-ce-columns="2"] .ce-column {
	width: 47.5%;
}

.ce-gallery[data-ce-columns="2"] .ce-column:nth-child(2n) {
	margin-right: 0;
}
.ce-gallery[data-ce-columns="2"] .ce-column:nth-child(2n+1) {
	clear: left;
}

.ce-row {
    margin-bottom: 5%;
}
.ce-row:last-child {
    margin-bottom: 0;
}

/* gallery */
.lg-actions .lg-next, .lg-actions .lg-prev {
	z-index: 2000;
	top: 100%;
	margin-top: -34px;
	width: 105px;
	height: 29px;
	padding: 0;
	background: no-repeat center rgba(0,0,0,.45);
}
.lg-actions .lg-next:before, .lg-actions .lg-prev:after {
	content: none;
}
.lg-actions .lg-next {
	background-image:url("/fileadmin/Resources/Public/img/next.svg");
}
.lg-actions .lg-prev {
	background-image:url("/fileadmin/Resources/Public/img/prev.svg");
}

.lg-toolbar .lg-icon {
	padding: 5px 0;
	height:37px;
}
/*.lg {
	top: 47px !important;
}*/
.lg-sub-html {
	padding: 10px 130px; 
}

a.lightbox {
	position: relative;
	display: block;
}
.galinfo {
	color: #000;
	text-decoration: none;
	position: absolute;
	bottom: -8px;
	width: 100%;
}
.galicon {
	width: 32px;
	height: 24px;
	background: #000;
	float: right;
	margin-top: 1px;
	display: block;
}

/* -------------------------------------------------- */
/* 	SEARCH 											*/
/* -------------------------------------------------- */


ul.tx-indexedsearch-browsebox {
	display: flex;
	justify-content: space-between;
}
.tx-indexedsearch-res {
	position: relative;
}
.tx-indexedsearch-res a:hover{
	text-decoration: none;
}
#tx-indexedsearch-searchbox-sword {
	padding: 0;
	margin-bottom: 1em;
	width: 100%;
	border: 0 none;
	border-bottom: 2px solid #000;
	background: url('../img/search.svg') right  center no-repeat transparent;
	background-size: contain;
}
#tx-indexedsearch-searchbox-sword::placeholder {
  color: rgba(0,0,0, 0.3);
}
#tx-indexedsearch-searchbox-sword:focus::placeholder {
  color: transparent;
}
.tx-indexedsearch-searchbox-sword,
.tx-indexedsearch-result-number {
	font-size: 8em;
	font-weight: 700;
}

.tx-indexedsearch-result-number {
	position: absolute;
	left: -2em;
	text-align: right;
	width: 1.5em;
}
.tx-indexedsearch-description {
	color: #000;
}

.tx-indexedsearch-search-submit,
.tx-indexedsearch-form label {
	display: none;
}

#searchformoverlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 80%;
	padding: 0 10%;
	height: 100vh;
	background: rgba(255, 80, 156, 0.9);
	z-index: 5;
	cursor: pointer;
}
#searchformoverlay #tx-indexedsearch-searchbox-sword{
	margin-top: 1em;
	border-bottom-width: 4px;
}
#searchformoverlay .tx-indexedsearch-searchbox {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

/* -------------------------------------------------- */
/*    Box DESIGN                                  */
/* -------------------------------------------------- */

.box{
	float: left;
	color: #FFF;
}

.box a{
	color: #FFF;
} 

.box.w1{
	width: 25%;
}

.box.w2{
	width: 50%;
}


.leftbox{
	width: 50%;
	height: 100%;
	position: absolute;
	background-size: cover;
}

.rightbox{
	width: 50%;
	height: 100%;
	right: 0;
	position: absolute;
}

.frame-box h2{
	font-size: 3.0vw;
	font-weight: 900;
}

.frame-box h3{
	font-size: 2.4vw;
	font-weight: bold;
	line-height: 1.2;
	padding-bottom: 1vw;
}

.frame-box .txt{
	font-size: 1.5vw;
}

.frame-box .box-text{
	padding-top: 5%;
	padding-left: 5%;
}

.box.w2 .frame-box .box-text{
	padding-top: 2.5%;
	padding-left: 2.5%;
}

.box.w2 .frame-box .subbox .box-text{
	padding-top: 5%;
	padding-left: 5%;
}

.frame-box .box-text-body{
	bottom: 0;
	padding-right: 5%;
	padding-bottom: 10%;
	position: absolute;
}

.box.w2 .frame-box .box-text-body{
	bottom: 0;
	padding-left: 0;
	padding-right: 10%;
	padding-bottom: 5%;
	position: absolute;
}

.frame-box .box-link{
	bottom: 5%;
	right: 5%;
	width: 10%;
	height: 10%;
	background: url('../img/pfeil.svg') no-repeat right;
	background-size: contain;
	position: absolute;
}

.box.w2.h1 .frame-box .box-link{
	bottom: 5%;
	right: 2.5%;
	width: 5%;
	height: 10%;
	/* background-size: 80%; */
}

.box.w2.h1 .frame-box .subbox .box-link{
	bottom: 5%;
	right: 2.5%;
	width: 10%;
	height: 10%;
	/* background-size: 80%; */
}

.box-measure{
	width: 25%;
}

.box-size {
	position: relative;
	height: 0;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.box-size.w1.h1{
	padding-bottom: 100%;
}

.box-size.w2.h1{
	padding-bottom: 50%;
}

.box-size.w2.h2{
	padding-bottom: 100%;
}


.ce-left.ce-above .ce-column:only-child {
	float: none;
}
.ce-gallery figure.audio{
	display: block;
	width: 100%;
}
.ce-gallery audio {
	display: block;
	width: 100%;
}


@media (min-width: 1060px){

	#claim {
		font-size: 8em;
	}

	#leftcol, #leftcol + #maincol, #rightcol{
		padding-top: calc(4em * 1.05);
	}

	#related, #abonnieren{
		padding-top: calc(3em * 1.05);
	}

	#related > h3, #abonnieren h3{
		border-top: 4px solid black;
		font-size: calc(3em * 1.05);
		padding-top: calc(0.33em * 1.05);
		padding-bottom: calc(1em * 1.05);
	}

	#related .ce-bodytext h2{
		font-size: calc(2.4em * 1.05);
	}

	#related .ce-bodytext h3{
		font-size: calc(1.8em * 1.05);
	}

	/* box */
	.frame-layout-2{
		padding: calc(1.5em * 1.05) calc(2em * 1.05)  calc(0.2em * 1.05)  calc(2em * 1.05) ;
	}

	#maincol {
		/* width: 100vw; */
	}

	.dce-navigation .txt li{
    	height: 36px;
 	}

	.dce-navigation .txt li a{
		padding-left: 10px;
		font-size: 30px;
	}

	.dce-navigation .txt li:before {
		height: calc(1em * 1.05);
		width: calc(1em * 1.05);
	}

	.dce-header {
		height: calc(31em * 1.05);
	}
	
	#nav {
		width: calc(66em * 1.05);
	}

	#mainnav a,
	#infonav a{
		font-size: calc(3em * 1.05);
	}
	#mainnav,
	#infonav{	
		border-bottom-size: calc(0.3em * 1.05);
	}


	#metanav a{
		font-size: calc(2em * 1.05);
	}

	#footer .wrap{
		font-size: calc(1.6em * 1.05);
	}

	.frame-default{
		margin-bottom:  calc(3em * 1.05);
	}

	.frame-box h2 {
    	font-size: calc(3em * 1.05);
    }
    
	.frame-box h3 {
		font-size: calc(2.4em * 1.05);
	}

	.frame-box .txt {
		font-size: calc(1.5em * 1.05);
	}

	.dce-navigation .txt{
		font-size: calc(2.4em * 1.05);
	}
	.dce-portrait h3{
			font-size: calc(2em * 1.05);
	}

	.frame h1, .frame h2{
		font-size: calc(3.6em * 1.05);
	}

	.frame h3, .frame h4 {
		font-size: calc(2.6em * 1.05);
	}

	.frame p, .frame li, blockquote,
	label, input, textarea, button {
		font-size: calc(1.8em * 1.05);
	}

	.frame p.lead{
		font-size: calc(2em * 1.05);
	}

	.ce-gallery figcaption{
		padding: calc(0.5em * 1.05) 0;
		font-size: calc(1.4em * 1.05);
	}

	.frame p.footer, .frame p.date {
		font-size: calc(1.4em * 1.05);		
	}

	.browsenav a{
		font-size: calc(2.8em * 1.05);
	}

	.browsetitle{
		font-size: calc(2.4em * 1.05);
	}
}


@media (max-width: 980px){ 

	#campaign .dce-campaign .anim{
		font-size: 3.5vh;
	}

	#campaign .dce-campaign .anim span{
		display: inline;
	}


	#navtoggle {
		/* width: 9vw; */
		/* display: block; */
	}

	#mainnav {
		/* display: none; */
		/* float: none; */
		/* padding-top: 2em; */
	}
	#mainnav li,
	#infonav li {
		float: none;
		border-top: 1px solid #FFF;
	}
	#mainnav li li,
	#infonav li li {
		border-top: 0 none;
	}
	#mainnav li ul,
	#infonav li ul {
		display: none;
	}
	#mainnav a,
	#infonav a {
		background: transparent;
		border-radius: 0px;
		margin: 0.2em 0;
	}
	.tx-indexedsearch-searchbox-sword,
	.tx-indexedsearch-result-number {
		font-size: 6em;
	}

	.lg-sub-html {
		padding: 10px 20px 35px 20px; 
	}
	
}


@media (min-width: 641px){ 

	.dce-header.mobile{
		display: none;
	}
}


@media (max-width: 640px){ 


	body.level3, body.level2, body.level1{
		background: none;
	}

	#headerzone a{
		position: absolute;
		width: 100%;
		top: 2vw;
		background-color: #fff;
		display: block;
	}

	#headerzone img.logo{
		width: auto;
    	height: 9vw;
		padding: 2%;
		position: static;
	}
	#pid1 #head .rowmax{
		top: 0;
	}
	#head .rowmax{
		top: 3vw;
		position: relative;
		z-index: 1;
	}
	#claim {
		font-size: 9vw;
		padding-top: 19vw;
		width: 50vw;
		left: 55%;
	}

	.dce-portrait .frame-box h2{
		font-size:	calc(3vw * 2);
	}


	.dce-header.desktop.withmobile{
		display: none;
	}

	#mainnav a,
	#infonav a {
    		font-size: 6vw;
	}

	#metanav a {
    		font-size: 5vw;
	}

	#navtoggle{
		top: 2vw;
		right: 8vw;
		width: 6vw;
		height: 6vw;
	}

	#navtoggle .bar.n1{
		top: 1vw;
	}
	#navtoggle .bar.n2{
		top: 3.5vw;
	}
	#navtoggle .bar.n3{
		top: 6vw;
	}

	#navtoggle .bar{
		width: 9vw;
		height: 1.2vw;
		border-radius: 1vw;
		top: 6vw;
	}

	img.logo{
		width: 40%;
		padding: 5%;
	}

	.a2a_kit{
		width: 7vw;
		top: 2.5vw;
		right: 16vw;
		flex-direction: column;
	}
	.a2a_kit .toggle {
		margin: 0;
		margin-bottom: 5px;
	}
	.a2a_kit a{
		margin: 0.5em 0;
		margin-left: calc((7vw - 40px) / 2);
	}
	#searchicon{
		width: 7vw;
		height: 7vw;
		top: 2.5vw;
		right: 26vw;
	}

	.a2a_kit .toggle{
		background-size: contain;
		line-height: 1 !important;
		height: 7vw !important;
		width: 6vw !important;
		/* padding-bottom: 1vw; */
	}

/*
	#head img.logo {
		width: auto;
		height: 9vw;
		position: absolute;
		top: 1.5vw;
		left: 2vw;
		display: block;
	}
	#head .rowmax{
		top: 3vw;
		position: relative;
		height: 12vw;
		z-index: 1;
		background-color: #FFF;
	}
*/
	#nav {
		/* left: 0; */
		/* right: 0; */
		width: 100vw;
		padding-top: 10vw;
		/* box-shadow: none; */
	}

	.rowmax {
		padding: 0;
		background-color: #f1f1f147;
	}

	.frame-default {
		margin-bottom: 6vw;
	}
	.box.w2,
	.box.w1{
		width: 100%;
	}

	.box-size.w1.h1.insta{
		padding-bottom: 100%;
	}

	.box-size.w1.h1{
		padding-bottom: 50%;
	}

	.box-size.w2.h1{
		padding-bottom: 50%;
	}

	.box-size.w2.h2{
		padding-bottom: 50%;
	}

	.dce-portrait .box-size.w2.h2{
		padding-bottom: 100%;
	}

	.dce-portrait .box-size.w2.h2{
		padding-bottom: 100%;
	}

	.box-size{
		background-size: 100%;
		background-position-y: center;
	}
	.dce-box{
		width: 100%;
	}

	.dce-navigation {
		background-color: #ff0074b5;
	}

	.dce-navigation .txt li{
	    	height: 7vw;
	  }

	.dce-navigation .txt li a{
		padding-left: 2vw;
		font-size: 6vw;
	}

	.dce-navigation .txt li:before {
		height: 5.2vw;
		width: 5.2vw;
	}

	.box-size.empty{
		display: none;
	}

	.dce-number .box-size{
		/* background-size: contain; */
		/* background-position-x: 15%; */
	}

	.box.w2 .frame-box .box-text,
	.frame-box .box-text {
	    padding-top: 5%;
	    padding-left: 5%;
	}

	/* .frame-box .box-text-body {
	    bottom: 0;
	    padding-left: 45%;
	    padding-bottom: 5%;
	}*/

	.rightbox {
	    width: 100%;
	}
	.frame-box h2{
		font-size: calc(3vw * 3);
	}

	.frame-box h3{
		font-size: calc(2.4vw * 2);
	}

	.frame-box .txt {
	    font-size: calc(1.5vw * 2);
	}

	.box.w2.h1 .frame-box .box-link,
	.frame-box .box-link,
	.box.w2.h1 .frame-box .subbox.rightbox .box-link {
	    top: 5%;
	    right: 5%;
	    width: 15%;
	    height: 15%;
	    bottom: auto;
	}

	.w2.h2 .subbox.rightbox,
	.w2.h2 .subbox.botbox{
		display: none;
	}

	.w2.h2 .subbox.topbox {
	    width: 100%;
	    height: 100%;
	    left: 0;
	}

	.dce-band .frame-box {
		padding: 5%;
	}

	.dce-header{
		height: 59vw;
	}
	#main .col{
		float: none;
		padding-left: 2vw;
		padding-right: 2vw;
	}

	#leftcol,
	#leftcol + #maincol,
	#leftcol + #maincol.rightcol,
	#leftcol + #maincol + #rightcol{
		width: 100%;
	}

	.browsenav a{
		font-size: calc(1.8vw * 2.5);
	}

	.browsetitle{
		font-size: calc(2.4vw * 2.5);
		line-height: 1.3;
	}

	#related, #abonnieren {
		padding-top: calc(3vw * 2.5);
		padding-left: 2vw;
    	padding-right: 2vw;
	}

	#related > h3, #abonnieren h3{
		font-size: calc(3vw * 2.5);
		padding-top: calc(1vw * 2.5);
		padding-bottom: calc(3vw * 2.5);
	}

	#related .ce-bodytext h2{
		font-size: calc(2.4vw * 2.5);
	}

	#related .ce-bodytext h3{
		font-size: calc(1.8vw * 2.5);
	}

	.frame-layout-2{
		padding: calc(1.5vw * 2.5) calc(2vw * 2.5)  calc(0.2vw * 2.5)  calc(2vw * 2.5) ;
	}

	.frame h1, .frame h2{
		font-size: calc(3.6vw * 2.5);
	}

	.frame h3, .frame h4 {
		font-size: calc(2.6vw * 2.5);
	}

	.frame p, .frame li, blockquote,
	label, input, textarea, button{
		font-size: calc(1.8vw * 2.5);
	}
	
	.frame p.lead{
		font-size: calc(2vw * 2.5);
	}

	.ce-gallery figcaption{
		padding: calc(0.5vw * 2.5) 0;
		font-size: calc(1.4vw * 2.5);
	}
	.frame p.footer, .frame p.date {
		font-size: calc(1.4vw * 2.5);		
	}

	.ce-intext.ce-right .ce-gallery{
		 margin-left: 0; 
	}

	.ce-intext.ce-left .ce-gallery{
		 margin-right: 0; 
	}
	
	.ce-left .ce-gallery,
	.ce-right .ce-gallery{
		 float: none; 
	}

	.ce-gallery figure{
		/* display: block; */
	}

	.ce-intext .ce-gallery{
		max-width: 100%;
	}

	#footer	.rowmax {
		padding: 5%;
	}


	#footer .wrap{
		font-size: calc(2.4vw * 2);
	}

	#footer a[href^='https'] {
		width: 2em;
		height: 2em;
	}


	.tx-indexedsearch-searchbox-sword, .tx-indexedsearch-result-number {
		font-size: calc(3.6vw * 3);
	}
	.tx-indexedsearch-result-number {
		position: static;
		left: 0;
		text-align: left;
		float:left;
		width: auto;
		font-size: calc(3.6vw * 6);
		padding-right: 5vw;
	}

	#searchformoverlay {
		width: 90%;
		padding: 0 5%;
	}
}