@charset "utf-8";
/* CSS Document */

@font-face {
	font-family:'Cairo-Light'; 
	src: url('https://i.esv.info/webfonts/Cairo-Light.ttf') format('truetype');
	font-weight:normal;
}	
@font-face {
	font-family:'Cairo-Regular'; 
	src: url('https://i.esv.info/webfonts/Cairo-Regular.ttf') format('truetype');
	font-weight:normal;
}	
@font-face {
	font-family:'Cairo-SemiBold'; 
	src: url('https://i.esv.info/webfonts/Cairo-SemiBold.ttf') format('truetype');
	font-weight:bold;
}

body, .normal, .bibliotext, .buttontext, .vorteil, .zurueck-button, ul li, .nl-form-input, p { font-family: 'Cairo-Regular', Titillium, Open Sans, Arial, Helvetica, sans-serif }
/* { font-family: 'Cairo-Light', Titillium, Open Sans, Arial, Helvetica, sans-serif } */
.zwhead, .kleine-zwhead, .head, b, strong, a, a .normal { font-family: 'Cairo-SemiBold', Titillium, Open Sans, Arial, Helvetica, sans-serif }
.grau {color:#394957}

/* Cookie-Banner, u.a. auch alte Button-CSS überschreiben */
.button {border: none}
.button-stark, .button-stark:hover {background: none}
#cookieBannerModal .cookie-large {font-size: 22px}
#cookieBannerModal .custom-control-label {padding: 0px 0px 10px 30px}
#cookieBannerModal .custom-control-input {left: 15px;margin-top: 10px !important;}

body {background-color: #ffffff;}
.container-esvd {margin: 0px auto; max-width: 1260px;text-align: left;} /* 1260px = 3 Spalten à 420px (teilbar durch 3,4,10 ...) */

a, a:visited {color: #004E9F; text-decoration: none}
a:hover {color: #2789EE}

.purpur {color: #9717c6;}
a.purpur:hover, a:hover .purpur {color: #bc4fe3;}

.head {font-size:46px; line-height:50px; color: #004577; margin-bottom: 10px}
.zwhead {font-size:29px; line-height:35px; color: #000000;}
.normal {font-size:19px; line-height:27px; margin: 17px 0px 0px; hyphens: auto;}
.grosser-link {font-size:23px}
.bibliotext {font-size:15px; line-height: 22px}
ul {list-style-type: square;margin:0;padding:0 0 0 20px}
@-moz-document url-prefix() { ul {padding-left:15px}}
li {margin:0;padding:5px 0 0;}
ul li {text-indent: unset;}
ul li::before {content: unset;color: unset;padding-right: unset;}
.nobr {white-space: nowrap;}

.head-gross {font-size:54px; line-height: 54px}
.normal-groesser {font-size: 22px; line-height:31px; margin-top: 27px}
.normal-gross {font-size: 24px; line-height:33px; margin-top: 27px}

#infos .normal {hyphens: auto}

.header-esvd {min-height:78px; padding:27px 0px;}
.header-logo {float:left;}
.header-logo img {height:78px; width:auto}
.header-navi {float:right;padding:11px 27px;margin:9px 0px 0px 18px;position:relative; border-radius: 4px}
.header-blau + .header-weiss, .header-weiss + .header-blau {margin-right:9px}
#produkte-submenu {position:absolute;top:52px;left:0px;width:305px;background-color:#f6f6fc;border-top:2px solid white;}
#kontakt-submenu {position:absolute;top:52px;right:0px;width:305px;background-color:#f6f6fc;border-top:2px solid white;}
.navi-unterpunkt {margin: 0; padding:7px 20px}
.navi-first {padding-top:12px}
.navi-last {padding-bottom:15px}
.navi-unterpunkt:hover {background-color:#002c5c; color:#ffffff;}
.header-blau {background-color: #002c5c}
.header-blau a {color: #ffffff}
.header-blau:hover {background-color:#004E9F}
.header-weiss:hover {background-color:#eaecf4} 
#produkte-submenu {display:none; list-style-type:none; padding-left:0px;}
/* .header-weiss:hover #produkte-submenu, .header-weiss:focus #produkte-submenu {display:table} */

.intro-wrap, .intro-wrap-breiter {background-image:url(bilder/startseite-top.jpg); background-repeat:no-repeat; background-position:center top;height:410px;}
.intro-wrap-breiter {height: 440px}
.intro-container, .intro-container-breiter {display:flex;align-items:center;justify-content:flex-start;height:410px;}
.intro-index {height:620px;}
.intro-content {max-width: 60%}
.intro-content-breiter {max-width:750px;padding-right:50px; padding-top:35px}
.ailia-logo-box {margin-top: 36px}
.ailia-logo-box img {height:78px;width:auto}
.ailia-logo-box img.ailia-kleiner {height:55px;width:auto}

/* Kennenlernen-Seite */
.verlauf-wrap {background: #DEF0FF; background: linear-gradient(-95deg,rgba(228, 238, 255, 1) 10%, rgba(237, 246, 255, 1) 40%, rgba(241, 235, 255, 1) 65%, rgba(241, 235, 255, 1) 75%, rgb(208, 201, 255) 88%);}
.slides-content {width:100%; height: auto; padding-top:75px;padding-bottom:75px}
.slides-container {display:flex; justify-content: space-around; align-items: center; gap: 20px}
.slide {max-width: 1070px;}
.slides-img {padding:20px 0px 20px}
.slides-img img {width:100%;}
.bildunterschrift {margin-top:30px;}

#top-produkte {margin: 70px 0px 140px;}
.klickkarussell-container {display:flex; margin: 40px 0 20px; align-items:center}
.pfeil-links {flex: 0 0 5%}
.klickkarussell {flex: 0 0 90%; overflow:hidden;}
.pfeil-rechts {flex: 0 0 5%; text-align:right}
.klickkarussell-wrapper {display:flex; transition: transform 0.5s ease-in-out;}

#esv-lizenzen {margin: 110px 0px;}
@keyframes cycle { 0%, 33.33%, 100% {opacity:1} 38.33%, 95% {opacity:0} }
.ueberblendung-container {position:relative;height: 200px;}
.ueberblendung-wrapper {position:absolute; display:flex; animation: cycle 15s 0s linear infinite;width: 100%;max-width: 1140px;}
.ueberblendung-infos {max-width: 1140px;}
.ueberblendung-element {flex: 0 0 calc(100% / 3);}
.ueberblendung-element img {width:95%; height:auto; max-height:200px; max-width: 360px}
.ueberblendung-link {float:right; margin-top:0px; margin-right: 1.7%;}

.container-flex {display: flex; flex-wrap: wrap; align-content:space-between; gap:3.2%;}
.flexbox-bereiche {width: 31.2%; margin: 18px 0; height: 212px; background-color:#d3d7ee; font-size:23px; line-height: 29px; color: #002c5c; text-align:left; background-repeat: no-repeat; background-position: top left; display:inline-block}
.flexbox-bereiche:visited {color: #002c5c}
.flexbox-bereiche:hover, .flexbox-bereiche:hover .normal, .flexbox-bereiche:hover .zwhead {background-color: #002c5c; color:#ffffff}
#bereiche {margin-top:68px; margin-bottom:100px}
.bereiche-text {padding:16px; width:150px;}

#empfehlungen .container-flex {gap:1.6%}
#empfehlungen .flexbox-bereiche {max-width: 360px; height: 188px; margin-bottom:0px}
.empfehlungen-text {padding:6px 16px 16px; color: #000000;}
.empfehlungen-text .normal {color:#004E9F}

.container-produkte {padding-top: 25px; margin-top: 45px; margin-bottom:70px;} /* padding, damit die Anker-Links nicht oben am Rand kleben */
.flexbox-produkte {width: 31.2%; margin: 18px 0; text-align:left; display:inline-block}
.flexbox-breit {width: 65.6%; padding-bottom: 18px}
.mini-head {margin: -7px 0 10px}
.teilprodukte {float:left; width:345px; padding-right:10px}
.produkte-text {max-width:360px;}
.produkte-text img {width:100%;}
.link-produkte {text-align:right;margin-top:10px;margin-bottom:10px;}
#online-books, #empfehlungen {background-color: #e7ebff; padding: 1px 0 70px;}
.float-produkte a img:hover, .flexbox-produkte a img:hover, .flexbox-bereiche:hover {filter: drop-shadow(2px 2px 10px gray);}

.karussell-element {flex: 0 0 calc(100% / 9);text-align:center}
.karussell-element img {width:95.5%; height:auto; max-height:200px; max-width:360px; margin:10px 0;}
.karussell-element:hover img {filter: drop-shadow(1px 1px 6px gray);}
.karussell-element .normal { margin: 0 8px; padding: 4px 0;}/* background-color: #f5f6fb; */

.flexbox-haelfte {width:48.4%}
.flexbox-haelfte .normal {padding-right:15px}

/* Online-Books */
.float-produkte {width: 29%; margin:18px 18px 0 0; float:left; font-size: 15px;line-height: 22px;}
.float-ende {width: 8.5%; float:left; margin-top: 120px; font-size: 21px;line-height: 30px;}
.float-produkte img {width:100%; max-width:360px;}
.float-produkte .bibliotext {width:100%; max-width:360px; text-align: right; padding-top:2px}

#video {background-color: #002c5c; padding: 70px 0 70px;}
.container-video {}
.video-box {float:left; width:60%}
.video-content {width:90%}
.video-content img {width:100%; display:inline-block}
.video-text {float:left; width:40%;}
.video-text .zwhead, .video-text .normal {color: #ffffff}

#infos {background-color:#eaecf4; padding-top: 70px; padding-bottom: 170px}
.flexbox-infos {width: 31.2%; padding: 0; text-align:left; display:inline-block}
.bildbox-infos {width:100%; background-repeat: no-repeat; background-position: top center; overflow:hidden; height:212px; margin-bottom:20px;position:relative}
.bildbox-infos img {height: 100%; position: absolute; left: -234px; margin-left: 50%;}
.infohead {min-height:80px}

.footer-box {
  padding: 20px 0px 50px 0px;
  background-color: #002c5c;
  margin-top: 0px;
}
.agb-linkleiste {margin: 20px 0px 30px;}
.footer-box .bibliotext {color:#c2c7db;}
.footer-box .bibliotext a, #video a {color:#8fabee;}
.footer-box .bibliotext a:hover, #video a:hover {color:#c6d7ff;}

/* ------- Responsive Styles: ------- */

@media (max-width: 1340px) {
	.intro-wrap {background-size: auto 720px}
	.container-esvd {margin-left:40px; margin-right:40px; max-width: unset;}
	.float-produkte {width: 27%;}
	.float-ende {margin-top: 80px; font-size: 17px;line-height: 20px;}
	.header-navi {margin-left: 9px; padding: 11px 20px;}
}

@media (min-width: 1061px) {
	#einzelkarussell {display:none} 
	#dreierkarussell {display:flex}
}

@media (max-width: 1060px) {
	.header-esvd {height:140px; position:relative;}
	.navi-block {position: absolute;top: 125px;left:-10px}
	.navi-block .header-navi {margin: 0px;padding:10px}
	.navi-block .header-blau {background-color: #ffffff}
	.navi-block .header-blau a {color: #004E9F}
	.navi-block .header-blau a:hover {color: #2789EE}
	.navi-block .header-blau:hover {background-color:#eaecf4} 
	.navi-unterpunkt {padding:7px 10px}
	#produkte-submenu, #kontakt-submenu {top:45px;width:285px}
	#einzelkarussell {display:flex}
	#dreierkarussell {display:none}
	/* #infos .container-flex {justify-content:center} */
	.intro-wrap, .intro-container {height: 480px}
	.intro-wrap {background-size: auto 480px}
	.intro-content {width:100%;max-width: 480px}
	.flexbox-infos {margin-bottom:70px}
	.flexbox-bereiche, .flexbox-produkte, .flexbox-infos {width: 48.4%}
	.float-produkte {width: 42%;}
	.video-box, .video-text {float:none;width:80%}
	.head-gross {font-size: 50px;line-height: 50px;}
	.normal-gross {font-size: 21px;line-height: 29px;}
	.ailia-logo-box img {height: 64px;}
	.ueberblendung-container {height: 150px}
}

@media only screen and (max-width: 949px) {
	.intro-content .head {max-width:70%; min-height:78px}
	.head {font-size: 40px; line-height: 45px;}
	.head-gross {font-size: 50px; line-height: 50px}
	.normal-groesser {font-size: 20px;line-height: 26px;margin-top: 17px;}
	.ailia-logo-box {margin-top: 26px;}
}

@media (max-width: 830px) {
	.ueberblendung-element {flex: 0 0 calc(100% / 2);}
	.ueberblendung-ausblenden {display:none}
	.ueberblendung-container {height: 170px}
	.flexbox-haelfte {width: 100%}
}

@media (max-width: 730px) {
	.container-esvd {margin-left:25px; margin-right:25px;}
	.header-blau {padding: 5px 8px;min-width: 55px;text-align:center}
	.intro-container {display:inline}
	.intro-wrap {background-size: auto 250px; height:auto}
	.intro-content {padding-top: 80px}
	.intro-content .normal {margin-top: 120px}
	/* #bereiche {justify-content:center} */
	.flexbox-bereiche, .flexbox-produkte, .flexbox-infos {width: 100%; max-width:468px}
	.float-produkte, .float-ende {float:none; width:auto;margin-top:30px}
	.head-gross {font-size:48px}
	.ueberblendung-container {height: 400px}
	.ueberblendung-wrapper {flex-direction: column}
	.ueberblendung-element img {width:360px}
	.ueberblendung-link {float: none}
}

@media (max-width: 530px) {
	.intro-content-breiter {padding-right: 0px}
	.klickkarussell {flex: 0 0 80%;}
	.pfeil-links, .pfeil-rechts {flex: 0 0 10%;}
	.slides-container {display: inline !important;}
	.slides-container a {cursor: default;}
	.slide {display: table !important}
	.slide-pfeil {display: none}
}

@media (max-width: 480px) {
	.intro-content {padding-top: 95px}
	.container-esvd {margin-left:15px; margin-right:15px;}
}