/*ALLGEMEINES*/
*{padding:0;margin:0;font-family: 'Helvetica', 'Arial', sans-serif;}
.content__wrapper{width: calc(100% - 4rem);max-width: 1640px;margin: 0 auto;padding-left: 2rem;padding-right: 2rem;}
section{position: relative;display: block;}
.social__media{position: absolute;top: 5rem;left: 5rem;}
.social__media img{width: 50px; height: auto;}
.svg-insert{text-align: center;margin-bottom: 5rem;margin-top: 10rem;}
.svg-insert img{max-width: 1180px;}
.svg-smaller img{max-height: 68px;max-width: 100%;}
.less-marg{margin-top: 0;margin-bottom: 30px;}
.less-marg img{max-height: 85px;max-width: 100%;}

/*FONTS*/
@font-face {
  font-family: 'Plak';
  src: url('../font/plak.woff2') format('woff2');
}	

/*LOGO*/
.logo__wrapper{display: flex;align-items: center;justify-content:flex-end;}
.logo{width:44%;height: auto;position: relative;display: flex;justify-content: flex-start;align-items: stretch; }
.logo img,.headline img{width: 100%;height: auto;max-width: 400px;}
.claim{margin-top: 50px;}
.claim__heart{display: inline-flex;width: 27px;height: auto;}
.claim img{height: 37px;}

/*AZUBIWELT______________________________________________________________________________________________________________________________________________________________*/

.bg_text{display: inline-block;width: 100%;}
.bg_text span{color: rgba(252, 229, 50, .85);font-family: 'Plak',sans-serif;}
.vid-text-container{display: flex;justify-content: space-between;flex-wrap: wrap;align-items: center;}
.vid-text-container .vid{width: 55%;}
.vid-text-container .text{width: 42%;}

.vid__elastic2{position: relative;padding-bottom: 52.25%;padding-top: 30px;height: 0;overflow: hidden;}
.vid__elastic2 iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.vid__elastic{position: relative;padding-bottom: 100%;padding-top: 30px;height: 0;overflow: hidden;}
.vid__elastic iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.header__main.azubi{padding: 30px 0;}
.headline__norm{font-size: 50px;font-weight: 400;line-height: 60px;margin-bottom: 5rem;margin-top: 10rem;text-align: center;font-family: 'Plak',sans-serif;}
.headline__norm.enlarged{font-size: 100px;line-height: 110%;}
.header__main.azubi .text{color: #4a4a4a; color: rgba(74, 74, 74, 1.0);padding: 30px 0;}
.header__main.azubi .text strong{color: #4a4a4a;font-size: 18px;font-weight: bold;line-height: 27px;display: block;margin-bottom: 10px;}
.header__main.azubi .text h3{font-size: 43px;font-weight: 400;line-height: 45.15px;letter-spacing: 1.075px;font-family: 'Plak',sans-serif;margin-bottom: 30px;}


.positions{display: block;padding-left: 30px;list-style: none;font-size: 15px;line-height: 30px;margin-bottom:30px;}
.positions li{color: #4A4A4A;color: rgba(74, 74, 74, 1.0);}
.positions li::before {content: "\2022";color:#4A4A4A; display: inline-block; width: 1em; margin-left: -2em;}



.azubi a.btn{font-family: 'Plak',sans-serif;font-weight: 400; background-color: #FCE532;background-color: rgba(252, 229, 50, 1);color: #4A4A4A;color: rgba(74, 74, 74, 1);text-decoration: none;font-size: 21px;line-height: .6em;letter-spacing: 0.025em;padding-left: 3rem;padding-right: 3rem;display: inline-block;padding-top: 1.25rem;padding-bottom: 1rem;text-transform: uppercase;transition: all .3s ease;}
.azubi__vids{display: flex;justify-content: space-between;flex-wrap: wrap;}
.azubi__vids .single__vid{width: 32%;margin-bottom: 30px;}
.unsere__azubis{text-align: center;}
.headline.medium{max-width: 745px;width: auto;height: auto;text-align: center;}
.headline.medium img{height: auto;width: auto;max-width: 100%;max-height: 100%;}
.deine__ausbildung-vids{display: flex;justify-content: space-between;align-items: stretch;}
.deine__ausbildung-vids .single__vid{width: 45%;margin-bottom: 30px;}
.single__vid-text{padding: 1.25rem;}
.single__vid-text h3{font-size: 43px;line-height: 1.05em;letter-spacing: 0.025em;font-family: 'Plak',sans-serif;font-weight: 400;text-align: center;margin-bottom: 30px;}
.single__vid-text p{font-size: 15px;line-height: 150%;letter-spacing: 0.025em;color: #fff;text-align: center;}
.single__vid-text .positions{max-width: 230px;margin: 0 auto;padding-left: 0;}
.single__vid-text .positions li{color: #fff;text-align: center;}
.single__vid-text .positions li::before{display: none;}
.single__vid-text strong{color: #fff;text-align: center;display: block;margin-bottom: 20px;}


.stoerer{margin-top: 10rem;min-height: calc(100vw * 1/2);display: flex;align-items: flex-end;}
.stoerer h2{color: #4A4A4A;margin-bottom: 50px;font-size: 50px;line-height: 1.05em;letter-spacing: 0.025em;font-family: 'Plak',sans-serif;font-weight: 400;}
.stoerer .steps{text-align: left;width: auto;position: relative;margin: 0 auto;display: inline-block;list-style: none;}
.stoerer .steps li{color: #4A4A4A;font-size: 15px;line-height: 17px;font-weight: 700;margin-bottom: 30px; }
.stoerer .steps li span{background-color: rgba(252, 229, 50, 1.0);color: #4A4A4A;width: 20px;padding: 10px 15px;border-radius: 50%;margin-right: 20px;}
.stoerer strong{display: block;font-size: 32px;line-height: 44px;color: #4A4A4A;margin-bottom: 30px;}
.stoerer .inner__wrap{display: inline-block;padding: 2% 20%;background: rgba(242, 242, 242, 1.0);margin-bottom: 30px;}

.locations{display: flex;justify-content: space-between;flex-wrap: wrap;}
.single__location{max-width:31.5%;width:100%; background: #fff;background: rgba(255, 255, 255, 1.0);box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);margin-bottom: 3rem;}
.locations .single__location-img{padding-bottom: calc(100% * 2/5);background-size: cover;background-repeat: no-repeat;background-position: center;}
.single__location-content{display: grid;grid-template-rows: repeat(3, minmax(0, 1fr));grid-gap: 0;gap: 0;align-content: space-between;padding: 1.25rem;color: #4A4A4A;color: rgba(74, 74, 74, 1.0);text-align: center;}
.single__location-content h3{margin-bottom: .5rem;font-size: 43px;line-height: 1.05em;letter-spacing: .025em;font-family: 'Plak', sans-serif;font-weight: 400;}
.single__location-content p{font-size: 15px;line-height: 1.15em;letter-spacing: 0.025em;}
.single__location-content a{font-family: 'Plak', sans-serif; background-color: #FCE532;text-decoration: none; background-color: rgba(252, 229, 50, 1);color: #4A4A4A;color: rgba(74, 74, 74, 1);font-size: 21px;line-height: .6em;letter-spacing: 0.025em;padding-left: 3rem;padding-right: 3rem;display: inline-block;padding-top: 1.25rem;padding-bottom: 1rem;text-transform: uppercase;transition: all .3s ease;font-weight: 400;}

.solo__btn{text-align: center;}
footer{display: flex;justify-content: space-between;padding: 0 50px;color: #fff;margin-top: 50px;}
footer .left{display: flex;justify-content: center;}
footer .right ul{display: flex;justify-content: space-between;list-style: none;}
footer .right ul li a{color: #fff;margin: 0 20px;text-decoration: none;}

/*FOOTBALLWOCHEN______________________________________________________________________________________________________________________________________________________________*/

.vid__wrapper{max-width: 60%;width: 100%;position: relative;margin: 0 auto;}
.vid__wrapper .vid__elastic{padding-bottom: 52.25%;}
.vid-text-container .vid.vid__resized{width: 48%;}
.no-gap-top{margin-top: 0;}
.no-gap-bot{margin-bottom: 0;}
.vid__claim{color: #fff;text-align: center;}
.sticky{position: absolute;}
.left__sticky{left: 0;top: 45%;}
.right__sticky{right: 0;top: 45%;}
.grid{display: flex;justify-content: space-between;align-items: stretch;margin-bottom: 5rem;margin-top: 5rem;}
.grid .item{width: 19%;display: flex;align-items: center;flex-wrap: wrap;}
.grid .item img{width: 100%;height: auto;}
.gap-5{margin-bottom: 5rem;}
.vid-text-container.equal{display: flex;justify-content: center;}
.talignc{text-align: center;}
.talignc img{width: 100%;height: auto;}



/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 20%;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s;
  background: #fff;
  max-width: 480px;

	box-shadow: 0 8px 8px rgba(0,0,0,1);
}

/* Modal Content */
.modal-content {
  position: fixed;
  bottom: 20px;
  background-color: #fefefe;
  width: 100%;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s;
  height:80%;
  overflow-y: scroll;
  max-width: 480px;
}

/* The Close Button */
.close {
  color: #1A0D46;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.modal-header {
  padding: 5px 20px;
  background-color: #0CE7CD;
  color: #1A0D46;
  font-size: 16px;
  position: fixed;
  left: 0; right: 0;
  bottom:calc(80% + 20px);
  box-sizing: border-box;
}

.modal-body {padding: 10px 16px; margin-bottom:20px;}

.modal,
.modal-content,
.modal-header,
.modal-body{
  	max-width: 480px;
	left: calc(50% - 240px);
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}





/*RESPONSIVE*/
@media all and (max-width: 1200px) {
  .bg_text img{z-index: 10;}
  .sticky{display: none;}
}

@media all and (max-width: 980px) {
  .single__location{max-width: 48%;}
  .stoerer .inner__wrap{margin-top: 30px;}
  .vid__wrapper,.vid-text-container .vid.vid__resized{max-width: 100%;width: 100%;}
  .svg-insert{margin-top: 5rem;}
  .headline__norm.first{margin-top: 0;}
}

@media all and (max-width: 860px) {

	.vid-text-container .vid, .vid-text-container .text{width: 100%;}
	.vid-text-container .vid{margin-bottom: 30px;}
	.vid-text-container .text{text-align: center;}
	footer{flex-wrap: wrap;text-align: center;box-sizing: border-box;}
	footer .left,footer .right{width: 100%;display: block;margin-bottom: 30px;}
  .stoerer{max-width: 100vw;}
  .positions li::before{display: none;}
  .social__media{position: absolute;top: 4rem;left: 3rem;}
  .social__media img{width: 40px; height: auto;}
  .logo{width: 50%;}
  .claim img{height: auto;width: 120px;}
}



@media all and (max-width: 680px) {
	.deine__ausbildung-vids{flex-wrap: wrap;}
	.azubi__vids .single__vid,.deine__ausbildung-vids .single__vid{width: 100%;margin-bottom: 30px;}
	.deine__ausbildung-vids .single__vid{text-align: center;}
	.stoerer{ margin-left:-20px; margin-right:-20px; }
	.stoerer h2{font-size: 30px;}
	.stoerer .steps li,.stoerer strong{font-size: 16px;}

  

}

@media all and (max-width: 600px) {
	.stoerer h2 {line-height: 42px;}
	.azubi a.btn{font-size: 21px;}
	.content{padding: 50px 20px;}
	.stoerer .content{padding: 50px 0;}
	.stoerer .steps li, .stoerer strong{font-size: 16px;}
	.stoerer .steps li span{padding: 14px 18px}
	.stoerer{ margin-left:-20px; margin-right:-20px; }
	.content__wrapper.azubi{border-left: 0;border-right: 0;border-bottom: 0;}
	.bg__wrapper{width: 100%;}
	footer{padding: 0;}
	.locations .single__location{ margin-left: 10px; margin-right: 10px; max-width: 100%; }
  .stoerer .inner__wrap{width: 90%;padding: 2%;}
  .stoerer .steps li, .stoerer strong{font-size: 15px;}
  .claim{font-size: 20px;}
  .claim__heart{width: 17px;}
  .social__media{position: absolute;top: 3rem;left: 2rem;}
  .social__media img{width: 40px; height: auto;}
  .grid{flex-wrap: wrap;}
  .grid .item{width: 100%;}
  .grid .item img{margin-bottom: 20px;}
}

@media all and (max-width: 480px) {

	.modal,
	.modal-content,
	.modal-header,
	.modal-body{
		left: 0;
	}

}