/* MEDIA QUERIES - RESPONSIVE CSS
-------------------------------------------------- */


/* Stage Heroimage Homepage */
@media screen and (min-width: 1281px) {

	#stage {
		background-image: url('/fileadmin/user_upload/Dokumente/03_Heroimage/Teambild_16-7.jpg');
	}
}

@media  screen and (min-width: 601px) and (max-width: 1280.5px)  {
	
	#stage {
		background-image: url('/fileadmin/user_upload/Dokumente/03_Heroimage/Teambild_4-3.jpg');
	}
}

@media screen and (max-width: 600.5px) and (orientation:portrait) {

	#stage {
		background-image: url('/fileadmin/user_upload/Dokumente/03_Heroimage/Teambild_9-16_v2.jpg');
	}
}



/* Stage Heroimage Zukunftstag */
@media screen and (min-width: 1281px) {

	#uid-18 #stage {
		background-image: url('/fileadmin/user_upload/Dokumente/07_Zukunftstag/aarvia_zukunftstag.jpg');
	}
}


/*
@media  screen and (min-width: 601px) and (max-width: 1280.5px)  {
	
	#stage {
		background-image: url('/fileadmin/user_upload/Dokumente/03_Heroimage/Teambild_4-3.jpg');
	}
}

@media screen and (max-width: 600.5px) and (orientation:portrait) {

	#stage {
		background-image: url('/fileadmin/user_upload/Dokumente/03_Heroimage/Teambild_9-16_v2.jpg');
	}
}
*/



/* Prefooter Aarvia Bild */
@media screen and (max-width: 1900px) {
	.prefooter-image .ce-image,
	.prefooter-image .ce-image img {
	  aspect-ratio:16/7.5;
	}
	
	.prefooter-image .ce-image img {
	  height:calc(100vw / 16 * 7.5);
	}
}


@media screen and (max-width: 1400px) {
	.prefooter-image .ce-image,
	.prefooter-image .ce-image img {
	  aspect-ratio:16/9;
	}
	
	.prefooter-image .ce-image img {
	  height:calc(100vw / 16 * 9);
	}
}

@media screen and (max-width: 767.5px) {
	.prefooter-image .ce-image,
	.prefooter-image .ce-image img {
	  aspect-ratio:16/11;
	}
	
	.prefooter-image .ce-image img {
	  height:calc(100vw / 16 * 11);
	}
}

@media screen and (max-width: 575.5px) {
	.prefooter-image .ce-image,
	.prefooter-image .ce-image img {
	  aspect-ratio:16/12.5;
	}
	
	.prefooter-image .ce-image img {
	  height:calc(100vw / 16 * 12.5);
	}
}




@media screen and (max-width: 1600px) {
		
	.berufe-background {
		width:calc(var(--container) / 2.6);
	}

	.berufe-txt {
		flex: 1 1 65%;
	}

	.beruf {
		max-width: 65%;
	}

	.wrap-locations {
		margin-right:35%;
	}
}


@media screen and (max-width: 1440px) {

	.elevator-txt {
		padding-left: 0px;
	}

	.wrap-locations {
		margin-right: 35.6%;
	}
	

	.stage-some .ce-gallery .ce-row .ce-column img {
		max-width:48px;
	}
}


@media screen and (max-width: 1280px) {

	#wrap-header {
		height: 100px;
	}


	#wrap-inhalt.notb {
		margin-top: 160px;
	}
}


@media screen and (max-width: 1200px) {

	/* Berufe & Lehrstellen - Mobile */
	#berufe-mobile {
		display:block;
	}

	.berufe-nav,
	.berufe-txt,
	.berufe-background {
		display:none;
	}

	.beruf {
		min-height: auto;
		max-width: 90%;
		margin-bottom: 40px;
	}

	.hidden {
		display: block;
		margin-right:initial;
		opacity:1;
	}

	.wrap-stellen {
		position: relative;
	}

	.wrap-stellen::before {
		content: '';
		position: absolute;
		z-index: -1;
		bottom: 0;
		right: 0;
		width: 45%;
		height: 90%;
		background-image: url('/typo3conf/ext/t3master/Resources/Public/Images/vector-bg.png');
		background-size: 100% auto;
		background-position: right bottom;
		background-repeat: no-repeat;
	}

	.wrap-stellen > .frame-default {
		position: relative;
	}

	.wrap-year {
		margin-right:0%;
	}

	.wrap-locations {
		margin-right: 30%;
		padding-bottom: 1px;
	}

	.location {
		position: relative;
		margin-bottom: 40px;
		text-transform: uppercase;
	}

	.location:last-of-type {
		margin-bottom: 25px;
	}

	.location:nth-of-type(1) {
		margin-right: 2.5%;
	}
	
	.location:nth-of-type(2) {
		margin-right: 6.5%;
	}

	.location:nth-of-type(3) {
		margin-right: 10.6%;
	}

	.location:nth-of-type(4) {
		margin-right: 2.5%;
	}

	.location::after {
		height: 2px;
		width:96%;
	}

	.count {
		width: 40px;
		height: 40px;
		font-size: 21px;
	}

	.mobile-beruf-descr {
		margin-bottom: 15px;
	}

	.mobile-prof-image {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 30%;
		height: 100%;
		/* max-height:350px; */
		transition: transform 0.5s, opacity 0.5s;
	} 

	.mobile-prof-image figure {
		position: absolute;
		bottom:0;
		right:30%;
		margin:0px !important; 
	} 

	main .row .mobile-prof-image img {
		max-width: initial !important;
		height: initial !important;
		max-height:350px !important;
		width: auto !important;
	}

	.fr1-col3 {
		align-items: flex-start;
	}

	.fr1-col3 div {
		flex:1 1 auto; 
	}

	.cta-whatsapp {
		position: fixed;
		z-index: 1000;
		bottom: 15px;
		right: 15px;
		width: 60px !important;
		height: 60px !important;
	}

}



@media screen and (max-width: 1100px) {

	#help {
		width: 100% !important; 
	}
}



@media screen and (max-width: 1060px) {

	.wrap-locations {
		margin-right: 28%;
	}
}


@media screen and (max-width: 991.5px) {

	body {
		overflow-x:hidden;
	}

	.stage-some .ce-gallery .ce-row .ce-column img {
		max-width:44px;
	}
	
	/* Stage Elevator */
	.elevator-left {
		flex: 1 1 100%;
		width: 100%;
	}
	
	.elevator-right {
		flex: 1 1 100%;
		width: 100%;
	}

	.elevator-txt {
		margin-bottom: 0px;
		padding-left: 0px;
	}

	.mobile-prof-image figure {
		right: 22%;
	}

	main .row .mobile-prof-image img {
		max-width: initial !important;
		height: initial !important;
		max-height:300px !important;
		width: auto !important;
	}



	/* Vorteile - Bubble Mobile Fallback
	   1 grosse Active-Bubble oben, 3 Icon-Bubbles darunter in einer Reihe */
	.canvas {
		position: relative;
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		justify-items: center;
		align-items: start;
		gap: 28px 22px;
		width: 100%;
		max-width: 100%;
		height: auto;
		min-height: 0;
		padding: 8px 12px 32px;
		overflow: visible;
		border: none;
		background: transparent;
	}

	.bubble {
		position: relative;
		top: auto !important;
		left: auto !important;
		transform: none;
		padding: 12px;
		box-sizing: border-box;
	}

	/* Aktive Bubble: volle Breite der Grid-Zeile, Kreis zentriert */
	.bubble.pos-active-slot {
		order: -1;
		grid-column: 1 / -1;
		width: min(90vw, 380px);
		height: min(90vw, 380px);
		padding: 28px 24px 22px;
		z-index: 2;
	}

	.bubble.pos-active-slot .bubble-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}

	.bubble.pos-active-slot h3 {
		font-size: clamp(16px, 4.6vw, 21px);
		line-height: 1.2;
		margin: 0 0 12px;
	}

	.bubble.pos-active-slot .detail-text {
		font-size: clamp(13px, 3.4vw, 15px);
		line-height: 1.3;
		max-width: 88%;
		max-height: 180px;
		margin: 0 auto 16px;
	}

	.bubble.pos-active-slot .icon {
		margin-top: 4px;
	}

	.bubble.pos-active-slot .icon img,
	.bubble.pos-active-slot .icon svg {
		width: clamp(56px, 14vw, 72px);
	}

	/* Kleine Nav-Bubbles: nur Icon */
	.bubble.pos-slot-top,
	.bubble.pos-slot-mid,
	.bubble.pos-slot-bottom {
		width: clamp(64px, 18vw, 88px);
		height: clamp(64px, 18vw, 88px);
		padding: 10px;
		z-index: 1;
	}

	.bubble.pos-slot-top { order: 1; }
	.bubble.pos-slot-mid { order: 2; }
	.bubble.pos-slot-bottom { order: 3; }

	.bubble:not(.pos-active-slot) h3,
	.bubble:not(.pos-active-slot) .detail-text {
		display: none;
	}

	.bubble:not(.pos-active-slot) .icon {
		margin-top: 0;
	}

	.bubble:not(.pos-active-slot) .icon img,
	.bubble:not(.pos-active-slot) .icon svg {
		width: clamp(34px, 8vw, 42px);
	}

	.footer-some .ce-gallery img {
		max-width:40px;
		height:auto; 
	}

	.footer-copyright {
		text-align: left;
		margin-top:30px; 
	}

}




@media screen and (max-width: 880px) {

	.wrap-locations {
		margin-right: 27%;
	}
}


@media screen and (max-width: 840px) {

	.wrap-locations {
		margin-right: 25%;
	}
}




@media screen and (max-width: 767.5px) {

	
	#wrap-logo {
		width: 310px;
	}

	.mobile-prof-image figure {
		right: 15%;
	}

	.elevator-txt {
		/* margin-bottom: 40px; */
	}

	.mobile-beruf-descr {
		margin-bottom: 0px;
	}

	.wrap-stellen::before {
		height: 75%;
	}
	
	.wrap-stellen {
		margin-top: auto;
		height: 300px;
	}

	.wrap-year {
		padding-top:50px;
	}

	.wrap-locations {
		margin-right: 25%;
	}

	.location:nth-of-type(1) {
		margin-right: 7%;
	}

	.location:nth-of-type(2) {
		margin-right: 13%;
	}

	.location:nth-of-type(3) {
		margin-right: 18.5%;
	}

	.location:nth-of-type(4) {
		margin-right: 7%;
	}

	#help {
		padding: 30px;
	}

	#help > .frame-inner {
		gap: 35px;
	}

	.fr1-col2,
	.fr1-col3 {
		margin-top:25px; 
	}


	.cta-whatsapp {
		position: fixed;
		display: block;
		z-index: 1000;
		bottom: 0px;
		right: 0px !important;
		width: 100% !important;
		height: 50px !important;
		opacity:0;
		background-color: var(--clr-default);
		box-shadow: 0 -5px 5px -3px rgba(0, 0, 0, 0.1);

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.call-whatsapp {
		position: relative;
		display:flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 10px;
		width:100%; 
		height:50px; 
		padding:5px 0px;
		text-decoration: none !important;
	}

	.call-whatsapp::after {
		display:none;
	}

	.whatsapp-svg {
		display:inline-block; 
		width:40px; 
		height:40px; 
	}

	.mobtext {
		display:inline-block; 
		font-family:var(--ff-sec);
		font-size:15px;
		color:var(--clr-quar);
	}


}


@media screen and (max-width: 720px) { 
	
	/* Berufe & Lehrstellen */
	.wrap-locations {
		margin-right: 29.5%;
	}

	.location:nth-of-type(1) {
		margin-right: 1%;
	}

	.location:nth-of-type(2) {
		margin-right: 6.5%;
	}

	.location:nth-of-type(3) {
		margin-right: 13%;
	}

	.location:nth-of-type(4) {
		margin-right: 1%;
	}

}


@media screen and (max-width: 680px) { 

	.beruf {
		max-width: 100%;
		margin-bottom: 30px;
	}
}




@media screen and (max-width: 660px) { 
	
	.beruf {
		margin-bottom: 10px;
	}
	.wrap-stellen {
		height: 280px;
	}

	.wrap-year {
		padding-top: 25px;
	}

	.wrap-locations {
		padding-top: 20px;
	}

	.location:nth-of-type(1) {
		margin-right: -0.3%;
	}

	.location:nth-of-type(4) {
		margin-right:-0.3%;
	}


	.mobile-prof-image figure {
		right: 8%;
	}
		
	.stage-some {
		/* margin-bottom:15px;  */
	 }

	.stage-some .ce-gallery .ce-row .ce-column img {
		max-width:40px;
	}

	.wrap-form-switch a.open-ajax {
		padding: 12px 8px;
		font-size: 14px;
		font-family: var(--ff-sec);
		letter-spacing:0;
	}
	
	.wrap-form-switch a.open-ajax:first-of-type {
		width:218px; 
	}

	.wrap-form-switch a.open-ajax:last-of-type {
		width:126px; 
		text-align:right;
	}

	#help {
		padding: 22px;
	}

	#help > .frame-inner {
		flex-direction: column;
		align-items: flex-start;
		gap:20px; 
	  }
	  
	  #c83 {
		flex: 1 1 100%;
	  }
	  
	  #c84 {
		flex:1 1 100%; 
	  }

}



@media screen and (max-width: 575.5px) { 

	html,body {
		scrollbar-width: none;
	}

	::-webkit-scrollbar { display: none; }

	#wrap-logo {
		width: 240px;
    	right: -45px;
    	top: -18px;
	}

	.elevator-txt {
		/* margin-bottom: 20px; */
	}

	/* Berufe & Lehrstellen */
	.wrap-stellen::before {
		width: 56%;
	}

	.wrap-year span {
		display:block;
	}

	.year-switch {
		margin-left: 0px;
	}

	.year-switch li {
		margin-left: 0px;
		font-size: 16px;
		padding: 3px 7px;
	}
	
	.location {
		margin-bottom: 30px;
		font-size:16px; 
	}

	.location::after {
		height: 1.5px;
	}

	.count {
		width: 32px;
		height: 32px;
		font-size: 19px;
	}

	.wrap-locations {
		margin-right: 38%;
	}
	
	.location:nth-of-type(1) {
		margin-right: 3%;
	}

	.location:nth-of-type(2) {
		margin-right:10%;
	}

	.location:nth-of-type(3) {
		margin-right: 18%;
	}

	.location:nth-of-type(4) {
		margin-right: 3%;
	}

	/* Team - Lerne uns kennen */
	main .row .team img {
		max-width:88% !important;
		height: auto;
	}

	.wrap-form-switch::before {
		clip-path: var(--bg-clip, polygon(0 0, 100% 0, calc(100% - 0px) 100%, 0 100%));
	}

	.wrap-form-switch a.open-ajax:first-of-type {
		width: auto;
	}

}




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


	/* Berufe & Lehrstellen */
	.mobile-prof-image {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 50%;
		height: 100%;
		max-height:260px;
		transition: transform 0.5s, opacity 0.5s;
	} 

	.mobile-prof-image figure {
		position: absolute;
		bottom:0;
		right:-8px;
	} 

	main .row .mobile-prof-image img {
		max-height: 250px !important;
	}

	.wrap-locations {
		margin-right: 34%;
	}

	.location {
		margin-bottom: 25px;
		font-size: 15px;
	}

	.location::after {
		height: 1.3px;
	}

	.location:nth-of-type(1) {
		margin-right: 0%;
	}

	.location:nth-of-type(4) {
		margin-right: 0%;
	}

	
	.stage-some {
		display:none; 
	 }

}



@media screen and (max-width: 400px) { 


}