/* CSS Document */

/* karla-500 - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/karla-v22-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/karla-v22-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/karla-v22-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/karla-v22-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/karla-v22-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/karla-v22-latin-500.svg#Karla') format('svg'); /* Legacy iOS */
}
/* karla-700 - latin */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/karla-v22-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/karla-v22-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/karla-v22-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/karla-v22-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/karla-v22-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/karla-v22-latin-700.svg#Karla') format('svg'); /* Legacy iOS */
}
/* karla-500italic - latin */
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/karla-v22-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/karla-v22-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/karla-v22-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/karla-v22-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/karla-v22-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/karla-v22-latin-500italic.svg#Karla') format('svg'); /* Legacy iOS */
}
/* karla-700italic - latin */
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/karla-v22-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/karla-v22-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/karla-v22-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/karla-v22-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/karla-v22-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/karla-v22-latin-700italic.svg#Karla') format('svg'); /* Legacy iOS */
}
* {
	margin: 0;
	padding: 0;
}


lottie-player {
	box-sizing: content-box;
	margin-left: -30vw;
	width: 160vw;
	height: 130vh;
}

.hoch {
	display: none;
}

.quer {
	display: block;
	box-sizing: content-box;
	margin-left: -30vw;
	width: 160vw;
	height: 130vh;
	opacity: 1;
}

body {
	background: #eae9e3;
	font-family: 'Karla',sans-serif;
	font-size: 20px;
	overflow-x: hidden;
}

a {
	color: #000;
	
}

span {
	font-style: italic;
}

.accordion {
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.static_shapes {
	display: block;
	width: 100%;
	height: 86vh;
	background: url("../img/shapes_static_1920.svg");
	background-position: bottom;
    background-size: 100%;
    background-repeat: no-repeat;
	transition: background-size 4.5s ease;
}

.static_shapes:hover {
	background-size: 105%;
	transition: background-size 4.5s ease;
}


.accordion label {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	background: #eae9e3;
	padding: 0.1vh 0.5% 0.1vh 0.5%;
	line-height: 5vh;
	font-size: 6vh;
	text-transform: uppercase;
	border-bottom: 3px solid #000;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.accordion input:checked + label {
	justify-content: flex-start;
}

h1 {
	font-weight: 500;
	font-style: normal;
	width: auto;
	text-transform: uppercase;
	font-size: 6vh;
	margin: 0;
	font-feature-settings: "ss01", "ss02";
}

h2 {
	font-weight: 700;
	font-size: 1.5em;
	line-height: 1.3em;
	margin-bottom: 2.5rem;
	letter-spacing: -0.02em;
}

h3 {
	font-size: 1.2em;
	margin-bottom: 1rem;
}

.accordion .faq label {
	position: relative;
	display: block;
	background: #F7F6F2;
	border-bottom: 3px solid #000;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}

.faq h3 {
	font-size: 1.2em;
	line-height: 80px;
	margin-bottom: 0;
}

.cta {
	margin-bottom: 0;
}

p {
	line-height: 1.3em;
	margin-bottom: 0.5em;
}

.last {
	line-height: 1.3em;
	margin-bottom: 2.5em;
}

ul {
  list-style-type: '•';
  margin: 0;
  padding: 0;
}

ul li {
	margin-left: 15px;
    padding-left: 20px;
    line-height: 1.3;
    margin-bottom: 0.5em;
}

.portrait {
	grid-area: bild;
	position: fixed;
    max-width: calc(80vw * 0.3 - 3em);
}

/*.portrait img {
	mask: url("../img/image_mask.png");
	-webkit-mask-size: 300px 300px;
	mask-image: url("../img/image_mask.png");
	-webkit-mask-image: url("../img/image_mask.png");
	-webkit-mask-repeat: no-repeat;
  	mask-repeat: no-repeat;
	
}*/

img {
	width: 100%;
	max-width: 100%;
}

.links {
	text-align: left;
}

footer {
	position: fixed;
	bottom: 0px;
	border-top: 3px solid #000;
}


.Titelkasten {
	border-top: 3px solid #000;
}

.accordion .impressum {
	display: flex;
    flex-direction: row;
    justify-content: space-between!important;
	line-height: 25px;
	padding-top: 0;
	text-transform: none;
}

.impressum h4 {
	font-size: 1rem;
	margin: 0;
	display: inline-flex;
	padding: 0.4vh 0.3% 0.1vh 0.3%;
}

.accordion_LA1 {
	width: 98%;
	margin: 0 auto;
	padding: 2em 0;	
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 2em;
	grid-template-areas: 
		"bild bild bild . inhalt inhalt inhalt inhalt inhalt inhalt . ."
		". . . . . copy copy copy copy copy . ."
		". . . . zitat zitat zitat zitat zitat zitat . ."
		". . . . faq faq faq faq faq faq . ."
		". . . . tes tes tes tes tes tes . .";
}

.accordion_LA2 {
	grid-template-areas: 
		"bild bild bild . inhalt inhalt inhalt inhalt inhalt inhalt . ."
		". . . . . copy copy copy copy copy . ."
		". . . . inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 . ."
		". . . . . copy2 copy2 copy2 copy2 copy2 . ."
		". . . . zitat zitat zitat zitat zitat zitat . ."
		". . . . faq faq faq faq faq faq . ."
		". . . . tes tes tes tes tes tes . .";
}

.clamp_marg {
	margin-bottom: clamp(72px, 20vh, 180px);
}

.anleser {
	grid-area: inhalt;
}

.copybereich {
	grid-area: copy;
	margin-bottom: 2em;
}

.anleser2 {
	grid-area: inhalt2;
}

.copybereich2 {
	grid-area: copy2;
}

.zitat {
	grid-area: zitat;
	font-style: italic;
	font-weight: 500;
}


.faq {
	grid-area: faq;
	border-bottom: 3px solid #000;
}

.testimonial-bereich {
	grid-area: tes;
}

.mobile_cta {
	display: none;
}

.portrait_recall {
	display: none;
}


.impressum_container {
	width: 98%;
	margin: 0 auto;
	padding: 2em 0;	
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 2em;
	grid-template-areas: 
		"imp imp imp imp imp . dat dat dat dat dat ."
}

.impressum_container h2, .impressum_container h3 {
	margin-top: 1rem;
	margin-bottom: 0.5rem;
}

.impressum_text {
	grid-area: imp;
}

.datenschutz_text {
	grid-area: dat;
}

/*
* Accordion
*/
/* Basic Accordion Styles */

.accordion input[name=panel] {
  display: none;
}

.accordion input[name=faq-pan] {
  display: none;
}




.accordion .accordion__content {
  overflow: hidden;
  height: 0px;
	background: #eae9e3;
  position: relative;
  transition: all 0.4s cubic-bezier(0.865, 0.14, 0.095, 0.87);
}


dd { display:none; }

dt {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
	cursor: pointer;
	border-top: 3px solid #000;
}

dt h3 {
	display: inline-flex;
}

dd {
	margin-bottom: 2em;
}

.closed { 
	width: 1.6em;
    display: inline-flex;

}

.open { 
	width: 1.6em;
	transform: rotate(-180deg);
    display: inline-flex;
}

/***

h4 {
  font-family: "Lato", sans-serif;
  font-size: 2em;
}
@media (min-width: 768px) {
  h4 {
    font-size: 3em;
  }
}

.lnr-arrow-right-circle::before {
	content: url('img/chevron-down.svg');
}

.callout-text {
  text-align: left;
	width: 100%;
	grid-area: sli;
}

.testimonial-carousel {
  overflow: hidden;
  height: 500px;
  position: relative;
  padding: 20px 0px;
  display: flex;
}
.testimonial-carousel .icon-container {
  position: relative;
  padding: 0 5px;
  max-width: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 9999;
}
@media (min-width: 768px) {
  .testimonial-carousel .icon-container {
    max-width: 50px;
    padding: 0 10px;
  }
}
.testimonial-carousel .icon-container span.lnr {
  color: #dadada;
  font-size: 1.6em;
	font-style: normal;
  cursor: pointer;
  transition: color 0.3s linear;
}
@media (min-width: 768px) {
  .testimonial-carousel .icon-container span.lnr {
    font-size: 2.6em;
  }
}
.testimonial-carousel .icon-container span.lnr:hover {
  color: #000;
}
.testimonial-carousel p {
  font-family: 'Karla';
  font-size: 1em;
}
@media (min-width: 768px) {
  .testimonial-carousel p {
    font-size: 1.4em;
	  padding: 0 1em;
  }
}

.testimonial-items {
  position: relative;
  flex: 1;
	margin: 0 3em;
  overflow: hidden;
  color: #000;
}

.testimonial-item {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

}
.testimonial-item p.testimonial-author {
	border-top: 3px solid #000;
	margin-top: 0.5em;
	font-size: 1rem;
	line-height: 1.2rem;
 	font-style: italic;
	padding: 0 1em;
}

.testimonial-item.first {
  left: 0;
}
.testimonial-item.second {
  left: 100%;
}
.testimonial-item.third {
  left: 200%;
}
.testimonial-item.fourth {
  left: 300%;
}
.testimonial-item.fifth {
  left: 400%;
}

*/


.testimonial:nth-child(even){
	margin-right:16%;
} 
.testimonial:nth-child(odd){
	margin-left:16%;
} 

.testimonial {
	width: 83%;
	margin-bottom: 4em;
}

.testimonial-zitat {
	font-size: 1.2em;
	line-height: 1.3em;
	font-style: normal;
	margin-bottom: 1em;
}



.testimonial-urheber {
	width: 90%;
	border-top: 2px solid #000;
	padding-top: 0.5em;
	line-height: 1.1em;
	font-style: italic;
}



/* 
* Size Variations
*/
input[name=panel]:checked ~ .accordion__content.accordion__content--none {
  height: 0px;
}


input[name=panel]:checked ~ .accordion__content.accordion__content--expand {
  height: 75vh;
	border-bottom: 3px solid #000;
	overflow-y: scroll;
}



@media screen and (max-width: 1300px) {
	body {
	background: #eae9e3;
	font-family: 'Karla', sans-serif;
	font-size: 17px;
}
	
.portrait {
	grid-area: bild;
	position: fixed;
    max-width: calc(98vw * 0.3 - 3em);
}
	
	.accordion_LA1 {
	width: 98%;
	margin: 0 auto;
	padding: 2em 0;	
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-template-areas: 
		"bild bild bild . inhalt inhalt inhalt inhalt inhalt inhalt inhalt ."
		". . . . . copy copy copy copy copy copy ."
		". . . . zitat zitat zitat zitat zitat zitat zitat ."
		". . . . faq faq faq faq faq faq faq ."
		". . . . tes tes tes tes tes tes tes .";
}
	
	.accordion_LA2 {
	grid-template-areas: 
		"bild bild bild . inhalt inhalt inhalt inhalt inhalt inhalt inhalt ."
		". . . . . copy copy copy copy copy copy ."
		". . . . inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 ."
		". . . . . copy2 copy2 copy2 copy2 copy2 copy2 .";
}
	
	
}

@media screen and (max-width: 780px) {
	.static_shapes {
		background: url("../img/shapes_static_360.svg");
		background-position: bottom;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.quer {
		display: none;
		opacity: 0;
	}
	
	.hoch {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		
	}
}


@media screen and (max-width: 500px) {
	
	body {
		background: #eae9e3;
		font-family: 'Karla',sans-serif;
		font-size: 18px;
	}
	
		.portrait, .anleser, .copybereich, .mobile_cta {
		margin-bottom: 2em;
	}
	
	.accordion {
		height: 100vh;
		height: calc(var(--vh, 1vh) * 100);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	
}
	
	.static_shapes {
		display: block;
		width: 100%;
		height: 83vh;
		height: calc(var(--vh, 1vh) * 83);
		background: url("../img/shapes_static_360.svg");
		background-position: bottom;
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
/*#anim_mobile {
	display: block;
	margin: 0 auto;
	width: 100%;
}

#anim_desk {
		display: none;
	}'/'
*/
	
	
	
	input[name=panel]:checked ~ .accordion__content.accordion__content--expand {
	  	height: 70vh;
		height: calc(var(--vh, 1vh) * 70);
		border-bottom: 3px solid #000;
		overflow-y: scroll;
}
	
	
	.accordion_LA1 {
		width: 94%;
		margin: 0 auto;
		padding: 2em 0;	
		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto;
		grid-column-gap: 0;
		grid-template-areas: 
			"bild bild bild bild bild bild bild bild . . . ."
			"inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt"
			". copy copy copy copy copy copy copy copy copy copy copy"
			"zitat zitat zitat zitat zitat zitat zitat zitat zitat zitat zitat zitat"
			"faq faq faq faq faq faq faq faq faq faq faq faq"
			"cah cah cah cah cah cah cah cah cah cah cah cah"
			"sli sli sli sli sli sli sli sli sli sli sli sli"
			"tes tes tes tes tes tes tes tes tes tes tes tes"
			"prc prc prc prc prc cta cta cta cta cta cta cta";
	}
	
	.accordion_LA2 {
		grid-template-areas: 
			"bild bild bild bild bild bild bild bild . . . ."
			"inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt inhalt"
			". copy copy copy copy copy copy copy copy copy copy copy"
			"inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2 inhalt2"
			". copy2 copy2 copy2 copy2 copy2 copy2 copy2 copy2 copy2 copy2 copy2"
			"prc prc prc prc prc cta cta cta cta cta cta cta";
	}
	
	.impressum_container {
	width: 94%;
	margin: 0 auto;
	padding: 2em 0;	
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	grid-column-gap: 0;
	grid-template-areas: 
		"imp imp imp imp imp imp imp imp imp imp imp imp"
		"dat dat dat dat dat dat dat dat dat dat dat dat";
}
	
	.clamp_marg {
		margin-bottom: 72px;
	}
	
	.impressum h4 {
		font-size: 14px;
	}
	
	.accordion label {
		line-height: 40px;
		padding: 0.4vh 1.5% 0.1vh 1.5%;
	}
	
	.testimonial {
		width: 92%;
	}
	
	.testimonial:nth-child(even){
	margin-right:8%;
	} 
	.testimonial:nth-child(odd){
		margin-left:8%;
	} 
	
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.3rem;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
	h2, h3 {
		margin-bottom: 0.5em;
	}
	
	
	
	.portrait {
		position: relative;
		grid-area: bild;
		max-width: 100%;
		margin-left: -6px;
		margin-bottom: 1em;
	}

	.desktop_cta {
		display: none;
	}
	
	.mobile_cta {
		display: block;
		grid-area: cta;
		margin-left: 0.5em;
		margin-top: 1.5em;
	}
	
	.portrait_recall {
		display: block;
		grid-area: prc;
		/*margin-top: 1.5em;*/
	}
	

	

	
	
	.last {
		margin-bottom: 0;
	}
	
	
	.faq h2 {
		margin-bottom: 1em;
	}
	
	.faq h3 {
		font-size: 1em;
		line-height: 1.2em;
		margin-bottom: 0;
		padding: 0.8em 0;
	}
	
}