/*******************************************************************************/
/* BASIS LAYOUT   */
/******************************************************************************/
html {
 height: 100%;
 scroll-padding: 50px; 
 scrollbar-gutter: stable;
}


body {
  width: 100%;
  height:100%; 
  margin: 0px;
  padding: 0px;
  overflow-x:hidden; 
  display: flex;
  flex-direction: column;
  background: var(--clr-default);
}

header,
nav,
section,
article,
aside,
footer {
  display: block;
}

#wrapper {
  flex: 1 0 auto;
  position:relative;
  width: 100%;
  margin: 0 auto 0 auto;
  height: auto !important;
}

#wrap-header {
  position:absolute;
  width: 100%;
  height:100px;
  z-index: 150;
  background:transparent;
  overflow:visible; 
}

#header {
  display: flex;
  flex-direction: row;
  height:100%;
  width:100%; 
}

#header .row {
  height:100%;
  width:100%; 
  position: relative;
}

#wrap-logo {
  width:339px;
  position:absolute;
  z-index:150;
  /* right:calc((100vw - var(--container)) / 2 - 12.5px); */
  right:-15px;
  top:0;
}

#wrap-logo a {
  width: 100%;
  height:auto; 
}

#wrap-logo img {
  max-width: 100%;
  height:auto; 
}

#wrap-stage {
  width:100%;
  height:100dvh;
  margin-top:0px; 
  position: relative;
}


#wrap-inhalt {
 margin-top:0px; 
}

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


#inhalt {
  padding: 0px;
  position: relative;
}




/* Section Backgrounds */
.bg-1 {
  background-color:var(--clr-prim);  /* rot */
}

.bg-2 {
  background: linear-gradient(95deg, rgba(255, 255, 255, 0.60) 0.25%, rgba(218, 218, 218, 0.40) 98.2%);
}






/* Cookie Consent */
.cc-window .powered-by, 
.cc-window-config .powered-by {
	display:none !important; 
}

.cc-window {
	font-size: 15px !important;
}



/* Fuzsszeile */
#wrap-footer {
  flex-shrink: 0;
  position:relative;
  z-index: 5;
  height:auto;
  min-height:auto; 
  width:100%;
  padding:60px 0px 50px 0px; 
  background-color:var(--clr-ter);
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Images/bg-footer-lg.svg');
  background-size:cover;
  background-position: top right;
  background-repeat: no-repeat;
}

.fr2-col2 {
  display: flex;
  justify-content: center;
  align-items: center;
}



.footer-some .ce-row {
	display: flex !important;
  flex-direction: row;
  gap:16px; 
}

.footer-some img {
  opacity:0.8;
  transition: all 0.3s ease;
}
.footer-some img:hover {
  opacity:1;
}

.footer-copyright {
  text-align: right;
  font-size: 15px;
}



#meguralink p,
#meguralink a {
  font-size: 14px;
  color: #9b9b9b;
}

#meguralink a:hover {
  color: #6f6f6f;
}

.fr1-col3  {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.fr1-col3 #c47  {
  align-content: flex-end;
  flex: 1 1 !important;
}


/* Megura Swissness Logo */
#megura-programmierung {
  position: relative;
}

#megura-swissness {
  width: 100px;
  height: 100px;
  position: absolute;
  bottom: 15px;
  right: 35%;
  /* transform: translateY(-70%); */
}

#megura-swissness svg {
  width: 100%;
  height: 100%;
}



/* Helper Classes */
.center-text {
  text-align: center;
  margin: 0 auto !important;
}
.center-element {
  margin: 0 auto !important;
}

span.empty {
  width:18px; 
  display:inline-block; 
}


img {
  outline: none !important;
}

main .row img {
  max-width: 100% !important;
  height: auto;
}

.img-rounded img {
  border-radius:12px; 
}




/* Sticky Div */
.sticky > div {
  position: sticky;
  top: 220px; 
}


/* SVG */
svg {
  visibility: visible; 
  max-width: 100%;
  height:auto; 

}


/* Flexbox Positon Flex End */
.flex {
  display:flex;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
  align-items: end;
}

.flex-end > div {
  display: inline-flex;
}

img {
  outline: none !important;
}


/* IE 10+ only */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  main .row img {
    width: 100% !important;
    height: auto;
  }
}



/********************/
/* GLOBALE ELEMENTE   */
/******************/
.bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}




/* CARDS */

/* Card Variant 1 */
.card-v1 {
  height:100%; 
  min-height:480px; 
}

.card-v1 a,
.card-v1 a:visited {
  display:block;
  background: linear-gradient(330deg,rgba(6, 182, 240, 1) 0%, rgba(0, 136, 181, 1) 75%);
  padding:30px 30px 80px 30px; 
  height:100%; 
  transition: all .3s ease;
}

.card-v1 .frame-inner {
  display:flex;
  flex-direction: column;
  height:100%; 
  flex: 1 1 100%;
}

.card-v1 .frame-inner .frame-default:first-of-type {
  flex: 0 0 38%;
}

.card-v1 .frame-inner .frame-default:nth-of-type(2) {
  flex: 1 0 30%;
}

.card-v1 .frame-inner .frame-default:nth-of-type(3) {
  flex: 1 1 auto;
  align-content: flex-end;
}

.arrow-flex-end p {
  margin-bottom:0px !important;
}

.card-v1 a, 
.card-v1 p,
.card-v1 a:hover,
.card-v1 a:hover p {
  color:initial !important;
  text-decoration: none !important;
}

.card-v1 a:hover {
  background: linear-gradient(330deg,rgba(35, 161, 103, 1) 0%, rgba(0, 136, 181, 1) 75%);
  /*margin-top:-15px; */
  transform: translateY(-20px);
  -moz-box-shadow: 0px 3px 8px rgb(150,150,150);
	-webkit-box-shadow: 0px 3px 8px rgb(150,150,150);
	box-shadow: 0px 3px 8px rgb(150, 150, 150);
}

.card-v1 .arrow-link {
	width: 95px;
	height: 95px;
}

.card-v1 a:hover .arrow-link {
	margin-left: 25px;
	background-color: var(--clr-default) !important;
}



/* Textboxen */
.textbox-450 {
  max-width:450px; 
  width:100%
}

.textbox-670 {
  max-width:670px; 
  width:100%
}

.textbox-1020 h2,
.textbox-1020 h5  {
  display:block;
  max-width:1020px; 
  width:100%
}

.textbox-1280 h5 {
  display:block;
  max-width:1280px; 
  width:100%
}




/********************/
/* INHALTSSEITEN   */
/******************/

/* STAGE HERO SECTION */
#uid-1 #stage {
  height:100%;
  background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
}

#uid-1 #stage > .frame-default,
#uid-1 #stage > .frame-default > .frame-inner,
#uid-1 #stage > .frame-default .bg-image,
#uid-1 #stage > .frame-default .bg-image > .container,
#uid-1 #stage > .frame-default .bg-image > .container .row,
#uid-1 #stage > .frame-default .bg-image > .container .row .stage-inner {
  height:100%;
  width:100% 
}

.elevator {
  height:100%;
  display:flex;
  flex-direction: column;
  height:100%;
}

.elevator > .frame-inner {
  margin-top:auto; 
  margin-bottom:25px;
}

.elevator-left {
  flex: 0 0 63%;
	width: 63%;
}

.elevator-right {
  flex: 1 1 37%;
	width: 37%;
  display:flex;
  flex-direction: column;
  align-items: end;
}

.elevator-txt {
  margin-top:auto; 
  margin-bottom:50px;
  padding-left:20px; 
}

.cta-whatsapp {
  position: fixed;
  z-index: 1000;
  bottom: 20px;
  right: 20px;
  display: block;
  width: 70px !important;
  height: 70px !important;
  opacity:0;
 }

 .mobtext {
  display:none; 
 }


.stage-some {
 /*  margin-bottom:0px;  */
}

.stage-some .ce-gallery .ce-row {
  display:flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap:14px !important;
}

.stage-some .ce-gallery .ce-row .ce-column {
 flex:1 1 40%;
 width: 40% !important; 
 margin-right: 0px !important;
  margin-bottom: 0px !important;
}

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




/* SECTION BERUFE & FREIE LEHRSTELLEN */
.berufe-background {
  position:absolute;
  z-index:0; 
  top:0;
  right:0;
  height:100%;
  width:calc(var(--container) / 2.35);
  display:flex;
  justify-content: center;
  align-items: flex-end;
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Images/vector-bg_hoeher.png');
  background-size:100% auto;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.berufe-background .ce-image {
  margin-bottom:6%; 
  margin-left:28%;
  position:relative;
}

.berufe-background .ce-image,
.berufe-background .ce-gallery {
	overflow: visible !important; 
}

.berufe-background .ce-column {
  position:relative;
  top:0;
  left:0;
  display:none;
  opacity:0;
}

.berufe-background .ce-column.img-active {
  display:block;
  opacity:1;
}

.berufe-content {
  /*  min-height:900px; */
  /* min-height:750px; */
  /* border:1px solid red; */
}

.berufe-content .col-nr-1 {
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
}

.berufe-title {
  flex: 0 0 100%;
}

.berufe-nav {
  flex: 0 0 25%;
  height:100%; 
  min-width:350px; 
}

.berufe-txt {
  flex: 0 1 65%;
  height:615px;
  overflow: hidden;
  display:flex;
  flex-direction: column;
}

.berufe-txt > div {
  display:flex;
  flex-direction: column;
  height:100%; 
}

.beruf {
  max-width:68%; 
}

.wrap-stellen {
  margin-top: auto;
  height:320px; 
}

.wrap-locations {
  position:relative;
  z-index:250;
  flex:1 1 100%;
  margin-right:34%;
  /* border:1px solid magenta; */
}

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

.location:after {
  content: '';
  position: absolute;
  bottom:-4px;
  left:0;
  width:95%;
  height:2.5px;
  background-color: #000;
}

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

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

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

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



.count {
  position:absolute;
  z-index:300;
  bottom:-7px;
  right:0;
  display:inline-flex;
  justify-content: center;
  align-items: center;
  width:60px;
  height:60px;
  border-radius:50%;
  color:#fff;
  text-align:center;
  line-height:100%;
  font-size:24px;
  font-family: var(--ff-ter);
}

.hidden {
  display: none;
  margin-right: -30px;
  opacity: 0;
  transition: all .5s ease;
}

.show {
  display: block;
}

.red {
  background-color: #ED1C24;
}

.green {
  background-color: #52A556;
}

.yellow {
  background-color: #FFDD00;
}


/* Freie Lehrstelle - Jahr */
.wrap-year {
  flex: 1 1 100%;
  /* margin-left: 25%; */
  margin-right: 29%;
}

.wrap-year span {
  font-family: var(--ff-ter);
  font-weight:900;
  text-transform:uppercase;
}

.year-switch {
  display:inline-flex;
  margin-left:20px;
}

.year-switch li {
  margin-left:10px;
  cursor:pointer;
  font-size:17px; 
  list-style:none;
  padding:4px 8px;
  background-color:transparent;
}

.year-switch li.active {
  background-color:#ccc;
}

.year-switch li:hover {
  background-color: #ccc;
}




/* Vorteile - Bubble Animation */
.canvas {
  position: relative;
  margin:0 auto; 
  width: 1000px;
  height: 700px;
  background: #ffffff;
  overflow: hidden;
}

/* Basis-Bubble-Styling */
.bubble {
  position: absolute;
  background: #9E0B0F;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  cursor: pointer;
  transform: translate(-50%, -50%); /* Fixer Pivot-Punkt in der Mitte der Kreise */
  transition: background 0.3s;
}

/* --- Die 4 fixen Layout-Slots (Kreisförmiger Radius um das Zentrum der grossen Bubble) --- */

/* Slot 1: Der grosse Fokus-Bereich links */
.bubble.pos-active-slot {
  top: 55%;
  left: 30%;
  width: 500px;
  height: 500px;
  z-index: 10;
}

/* Slot 2: Oben rechts (näher am Zentrum) */
.bubble.pos-slot-top {
  top: 25%;
  left: 68%;
  width: 220px;
  height: 220px;
}

/* Slot 3: Mitte rechts (nach aussen versetzt für den Bogen-Effekt) */
.bubble.pos-slot-mid {
  top: 52%;
  left: 83%; /* Weiter rechts! */
  width: 220px;
  height: 220px;
}

/* Slot 4: Unten rechts (wieder näher am Zentrum) */
.bubble.pos-slot-bottom {
  top: 78%;
  left: 67%;
  width: 220px;
  height: 220px;
}

/* --- Text-Sichtbarkeiten & Grössen --- */
.bubble h3 { font-size: 12px; margin: 5px 0; text-transform: uppercase; font-weight: bold; color: #fff; }
.bubble .detail-text {
  font-size: 16px;
  line-height: 1.4;
  color: #fff;
  max-width: 85%;
  margin: 0 auto;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
}
.bubble .detail-text span {
  opacity: 0;
  transition: opacity 0.1s ease;
}

.bubble .icon { margin-top:15px;}
.bubble .icon img, .bubble .icon svg { width: 45px; height: auto; } /* Falls du SVGs/Bilder nutzt */

/* Wenn aktiv im grossen Slot */
.bubble.pos-active-slot .icon img, .bubble.pos-active-slot .icon svg { width: 100px; }
.bubble.pos-active-slot h3 { font-size: 24px; margin-bottom: 15px; margin-top: 15px; }
.bubble.pos-active-slot .detail-text {
  max-height: 240px;
  margin: 0 auto 24px auto;
  pointer-events: auto;
}
.bubble.pos-active-slot.text-visible .detail-text span {
  opacity: 1;
  transition: opacity 0.3s ease;
}



/* Aktuelles */
.aktuelles-right {
  display:flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.aktuelles-right >  div {
  margin-top:auto; 
}


/* Prefooter Aarvia Bild */
.prefooter-image .ce-image,
.prefooter-image .ce-image img {
  aspect-ratio:16/6;
  overflow:hidden;
}

.prefooter-image .ce-image img {
  object-fit:cover;
  object-position: center;
  width:100%;
  height:calc(100vw / 16 * 6);
}



/* Bewerbungsformulare / siehe auch  Powermail.css */
/* Pill Switch */
.wrap-form-switch {
  display: flex;
  flex-direction: row;
  gap: 0;
  width: fit-content;
  background-color: var(--clr-prim);
  border: 2px solid var(--clr-default);
  position: relative;
}

.wrap-form-switch::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--bg-left, 0);
  width: var(--bg-width, 0);
  height: 100%;
  background-color: var(--clr-default);
  z-index: 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  clip-path: var(--bg-clip, polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%));
}

.wrap-form-switch a.open-ajax {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 18px 36px;
  font-family: var(--ff-ter);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--clr-default);
  /* Bootstrap .btn-primary neutralisieren */
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.wrap-form-switch a.open-ajax:hover,
.wrap-form-switch a.open-ajax:focus {
  color: var(--clr-default);
  background-color: transparent;
  border: none;
  box-shadow: none;
  opacity: .8;
}

/* Aktiver Tab: rote Schrift (Hintergrund kommt vom ::before Pseudo-Element) */
.wrap-form-switch a.open-ajax.active,
.wrap-form-switch a.open-ajax.active:hover,
.wrap-form-switch a.open-ajax.active:focus {
  color: var(--clr-prim);
  background-color: transparent;
  opacity: 1;
}


/* Fomular Hilfe */

#help {
  width:1060px; 
  padding:40px;
  background-color:var(--clr-prim);
}

#help > .frame-inner {
  display:flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: left;
  height:100%;
  width:100%;
  gap:50px; 
}

#c83 {
  flex: 0 0 50%;
}

#c84 {
  flex:1 1 auto; 
}






/********************/
/* ZUKUNFTSTAG     */
/******************/

/* Stage - HeroSection */
#uid-18 #stage {
  height:100%;
  background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

#uid-18 #stage > .frame-default,
#uid-18  #stage > .frame-default > .frame-inner,
#uid-18 #stage > .frame-default .bg-image,
#uid-18 #stage > .frame-default .bg-image > .container,
#uid-18 #stage > .frame-default .bg-image > .container .row,
#uid-18 #stage > .frame-default .bg-image > .container .row .stage-inner {
  height:100%;
  width:100% 
}

#uid-18 #stage .elevator-left {
  flex: 0 0 82%;
	width: 82%;
}

#uid-18 #stage .elevator-right {
  flex: 1 1 18%;
	width: 18%;
  display:flex;
  flex-direction: column;
  align-items: end;
}


/* Section 2 - Information */
.zukunftstag-info .col-nr-1 {
  display:flex;
  flex-direction: row;
}

.zukunftstag-background {
  position:absolute;
  z-index:0; 
  top:0;
  right:0;
  height:100%;
  width:calc(var(--container) / 2.35);
  display:flex;
  justify-content: center;
  align-items: flex-end;
  background-image: url('/typo3conf/ext/t3master/Resources/Public/Images/vector-bg_hoeher.png');
  background-size:100% auto;
  background-position: left bottom;
  background-repeat: no-repeat;
}

.zukunftstag-background .ce-image {
  margin-bottom:6%; 
  margin-left:28%;
  position:relative;
}


.zukunftstag-content {
	flex: 0 0 60%;
	height: 100%;
	min-width: 350px;
}

/*
.berufe-background .ce-image,
.berufe-background .ce-gallery {
	overflow: visible !important; 
}
  */


/* Section Prefooter */


/* Prefooter Aarvia Bild */
#uid-18  .prefooter-image .ce-image,
#uid-18  .prefooter-image .ce-image img {
  aspect-ratio:16/7.5;
  overflow:hidden;
}

#uid-18  .prefooter-image .ce-image img {
  object-fit:cover;
  object-position: center;
  width:100%;
  height:calc(100vw / 16 * 7.5);
}







/********************/
/* ZUKUNFTSTAG     */
/******************/

/* Stage - HeroSection */
#uid-4 #stage {
  height:100%;
  background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

  display:flex;
  justify-content:center;
  margin-top:auto;
}

#c129 {
  margin-top: auto;
  padding-bottom:40px; 
}