/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* --------------- FONT --------------- */
.heading-thin{
    font-weight: 300 !important;
    font-size: clamp(24px, 4vw, 40px);
    display: flex;
    line-height: 1;
}

strong{
    font-weight: 800;
}

.txt-split-column-wrapper {
    display: flex;
    gap: 20px;
}

.txt-split-column {
    width: 50%;
}

@media (max-width: 650px) {
    .txt-split-column {
        width: 100%;
    }
    
    .txt-split-column-wrapper {
        flex-wrap: wrap;
    }
    
}

.clamp-8 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}

.word-breake{
     hyphens: auto;https://avada.com/help-center/
}

.link-extern-icon:after{
    content: "\ef45";
    font-family: 'FA-Regular' !important;
    color: inherit;
    margin-left: 5px;
}

strong{
    font-weight: 800 !important;
}

.fusion-text ul{
  padding-left: 20px;
}
/* --------------- MENU --------------- */

.navbar_menu{padding-right: 20px; position: relative;}
.navbar_menu_iserv{padding-left: 20px;}

.navbar_menu:after{
    content: "";
    background: red;
    border-right: 1px solid;
    position: absolute;
    right: 0;
    bottom: -18px;
    width: 0px;
    height: 200px;
    opacity: .1;
}


.navbar_menu .awb-menu__sub-ul{
    margin-top:17px !important;
}

.navbar-logo-box{
  display: grid;
  align-items: center;
}



/* beide Wrapper übereinander stapeln */
.navbar-logo-desk,
.navbar-logo-mob{
  grid-area: 1 / 1;
}

.navigation-cont .nav-dekt-logo{
  opacity: 1;
  max-height: 200px;
  overflow: hidden;
  transition: max-height .3s ease-in-out, opacity .3s ease-in-out !important;
  padding: 15px 0 8px 0;
}

.navigation-cont .nav-mobile-logo{
  opacity: 0;
  max-height: 0px;
  overflow: hidden;
  transition: max-height .3s ease-in-out, opacity .3s ease-in-out !important;
}

.navigation-cont.fusion-sticky-transition .nav-dekt-logo{
  max-height: 0px;
  opacity: 0;
}

.navigation-cont.fusion-sticky-transition .nav-mobile-logo{
  max-height: 200px;
  opacity: 1;
}


.mobile-nav-toggle{border: none !important;}
.mobile-nav-toggle:before, .mobile-nav-toggle:after{outline: none !important;}

.wvs-desktop-menu{display: flex !important;}
.wvs-mobile-menu{display: none !important;}

@media (max-width: 1100px) {
.wvs-desktop-menu{display: none !important;}
.wvs-mobile-menu{display: flex !important;}
}

/* --------------- HERO ------------- */

.hero-wrapper {
    position: relative;
    overflow: hidden; /* wichtig: Bewegung bleibt "im Container" */
    display: flex;
}

.hero-item{
    width: 33%;    
    max-height: 604px;
}

.hero-item img {
    display: block;
    width: 100%;
    min-height: 150%;
    object-fit: cover;
    scale: 1.1;
    will-change: transform;
    transform: translateY(0);
    animation: floatY 5s ease-in-out infinite;
}

/* Kleine Variationen pro Bild */
.hero-item:nth-child(1) img {
    animation-duration: 10s;
    animation-delay: -2s;
}

.hero-item:nth-child(2) img {
    animation-duration: 8s;
    animation-delay: -4s;
}

.hero-item:nth-child(3) img {
    animation-duration: 9s;
    animation-delay: -6s;
}

@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-20px); }
}

/* -------------- ÜBERSICHT GRID --------------- */
:root {
  --radius: 12px;
  --hover-color: rgba(26, 167, 161, 0.92);
  --focus-ring: 0 0 0 3px rgba(26, 167, 161, 0.35);
  
  --overlay-blue: #155386;
  --overlay-green: #169F8B;
  --overlay-gray: #8D9892;
}

.wvs-overview {
  display: grid;
  gap: 20px;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);

  grid-template-areas:
    "abitur abitur fh fh"
    "abitur abitur technik haupt"
    "beruf beruf noclue noclue";

  aspect-ratio: 4 / 3;
}
.wvs-overview-weiche {
  display: grid;
  gap: 15px;

  grid-template-columns: repeat(4, minmax(0, 1fr));
  /*grid-template-rows: repeat(1, 1fr);*/

  grid-template-areas:
    "abitur fh technik haupt"

  /*aspect-ratio: 5 / 1;*/
}

.wvs-hovertext i{
  flex-grow: 1;
  position: relative;
  opacity: 0;
  left: -10px;
  font-size: 30px;
  transition: all .3s ease-in-out;
}


.wvs-tile:hover .wvs-hovertext i{
    opacity: 1;
    left: 0px;
}

.wvs-tile {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  min-width: 0;
  outline: none;
}

.wvs-tile:focus-visible {
  box-shadow: var(--focus-ring);
}

.wvs-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.01);
  transition: opacity .3s ease;
}

/* Standard Lesbarkeits Overlay */
.wvs-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity .3s ease;
  z-index: 1;
  mix-blend-mode: multiply;
}

.overlay-blue.wvs-tile::before{background: var(--overlay-blue);}
.overlay-green.wvs-tile::before{background: var(--overlay-green);}
.overlay-gray.wvs-tile::before{background: var(--overlay-gray);}

/* Einfarbiges Hover Overlay */
.wvs-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}

.overlay-blue.wvs-tile::after{background: var(--overlay-blue);}
.overlay-green.wvs-tile::after{background: var(--overlay-green);}
.overlay-gray.wvs-tile::after{background: var(--overlay-gray);}

.wvs-label {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 20px !important;
  z-index: 1;
  line-height: 1.15;
  font-size: 24px;
  transition: opacity .3s ease;
  font-weight: 300;
}

.wvs-label strong{
  font-weight: 800;
}

.wvs-label-big{
    font-size: 40px;
}

.wvs-label strong {
  text-transform: uppercase;
  letter-spacing: 0;
}

/* Text, der beim Hover erscheint */
.wvs-hovertext {
  color: #fff;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 20px;
  opacity: 0;
  /*transform: translateY(6px);*/
  transition: opacity .3s ease;
  display: flex;
  align-items: end;
  flex-direction: column;
}

.wvs-hovertext .title {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 20px 0;
}

.wvs-hovertext .sub {
  font-size: 18px;
  line-height: 24px;
  margin: 0;
}

/* Hover und Fokus Verhalten */
.wvs-tile:hover::after,
.wvs-tile:focus-visible::after {
  opacity: 1;
}

.wvs-tile:hover::before,
.wvs-tile:focus-visible::before {
  opacity: 0;
}

.wvs-tile:hover img,
.wvs-tile:focus-visible img {
  opacity: 0.12;
}

.wvs-tile:hover .wvs-label,
.wvs-tile:focus-visible .wvs-label {
  opacity: 0;
}

.wvs-tile:hover .wvs-hovertext,
.wvs-tile:focus-visible .wvs-hovertext {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .wvs-tile img,
  .wvs-tile::before,
  .wvs-tile::after,
  .wvs-label,
  .wvs-hovertext {
    transition: none;
  }
  .wvs-hovertext {
    transform: none;
  }
}

/* Grid Areas */
.wvs-abitur {
  grid-area: abitur;
}
.wvs-fh {
  grid-area: fh;
}
.wvs-technik {
  grid-area: technik;
}
.wvs-it {
  grid-area: it;
}
.wvs-haupt {
  grid-area: haupt;
}
.wvs-beruf {
  grid-area: beruf;
}
.wvs-integration {
  grid-area: integration;
}
.wvs-noclue {
  grid-area: noclue;
}

@media (max-width: 900px) {
  .wvs-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, 1fr);

    grid-template-areas:
      "abitur fh"
      "technik haupt"
      "beruf noclue";
      

    aspect-ratio: 2 / 5;
  }
   .wvs-overview-weiche {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);

    grid-template-areas:
      "abitur fh"
      "technik haupt";

    aspect-ratio: 2 / 2;
  }
  
  /*.wvs-hovertext{
      display:none !Important;
  }
  
  .overlay-green.wvs-tile::after{
      display:none !Important;
  }
  
  .wvs-tile:hover::before, .wvs-tile:focus-visible::before {
      opacity: 1 !important;
    }
    
    .wvs-tile:hover .wvs-label, .wvs-tile:focus-visible .wvs-label {
    opacity: 1 !important;
}*/
}

@media (max-width: 520px) {
  .wvs-overview {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-rows: 210px;

    grid-template-areas:
      "abitur"
      "fh"
      "technik"
      "haupt"
      "beruf"
      "noclue";
     

    aspect-ratio: auto;
  }
  .wvs-overview-weiche {
    grid-template-columns: 1fr;
    grid-template-rows: none;


    grid-template-areas:
      "abitur"
      "fh"
      "technik"
      "haupt";

    aspect-ratio: auto;
  }

 /* .wvs-label {
    font-size: 15px;
  }*/

  .wvs-hovertext .title {
    font-size: 20px;
  }
}






/* --------------- BUTTON ------------------- */

.fusion-button-default:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    outline: 2px solid #169F8B;;
    outline-offset: 0px;
    transition: all 0.4s ease-in-out;
    opacity:0;
    border-radius: 50px;
    transform: scale(1.1, 1.28);
}


.fusion-button-default:hover:after {
    outline: 2px solid #169F8B;;
    outline-offset: 0px;
    opacity:1;
    transform: scale(1, 1);
}

.fusion-button-default:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    outline: 1px solid #169F8B;
    outline-offset: 0px;
    transition: all 0.4s ease-in-out;
    opacity:1;
    border-radius: 50px;
    transform: scale(1, 1);
}

.fusion-button-default:hover:before {
    outline: 1px solid #169F8B;
    opacity:0;
    border-color: red !important;
    transform: scale(0.95, 0.8);
}


/* ---------------- FOOTER ------------------ */

/* --- Logos --- */
.foo-carousel {
  overflow: hidden;
  width: 100%;
}

.foo-carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 150px;
  width: max-content;
  will-change: transform;
  animation: foo-scroll var(--foo-duration, 28s) linear infinite;
}

.foo-carousel-wrapper img {
  max-height: 80px;
  width: auto;
  flex: 0 0 auto;
  display: block;
  opacity: 0.5;
}

.foo-carousel:hover .foo-carousel-wrapper {
  animation-play-state: paused;
}

@keyframes foo-scroll {
  to {
    transform: translateX(calc(-1 * var(--foo-scroll-distance)));
  }
}

/* --- Bars --- */
.foo-bars{ display: flex; height:10px; width: 100%;}
.foo-bar-green{width: 33.5%; background: #169F8B;}
.foo-gray{width: 33.5%; background: #8D9892;}
.foo-blue{width: 33.5%; background: #155386;}

/* --- Socials --- */

.foo-links{
    display: flex;
    gap: 20px 50px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.foo-socials{
    display: flex;
    gap: 30px;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .foo-socials{
        justify-content: flex-start;
    }
    
    .foo-links {
        margin-bottom: 20px;
    }

}


/* ----- LOGOS  ----- */

  .foo-logos-carussell {
    width: 100%;
  }

  .foo-logos-carussell .swiper-wrapper {
    transition-timing-function: linear;
  }

  .foo-logos-carussell .swiper-slide {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .foo-logos-carussell .swiper-slide img {
    max-height: 70px;
    width: auto;
    display: block;
    object-fit: contain;
    filter: grayscale(1);
    transition: all .3s ease-in-out;
    opacity: 0.5;
    
  }

  .foo-logos-carussell .swiper-slide img:hover {
    filter: grayscale(0);
    opacity: 1;
  }

/* ---------------- TOGGLE ------------------ */

@media (max-width: 650px) {
    .wvs-toggle .fusion-toggle-icon-wrapper .fa-fusion-box:before{
        font-size: 18px !important;
    }
    
     .wvs-toggle .fusion-toggle-heading{
        margin-right: 20px !important;
        font-size: 22px;
        hyphens: auto;
     }
}

/* ------------ AKTUELLES CARD --------------- */
.aktuelles-card .fusion-builder-row{
    display:flex !important;
    flex-grow: 1 !important;
}

.news-socials{
    display:flex;
    gap: 20px;
    margin-bottom: 30px;
}

.news-socials i{
    color: #26262680;
    transition: all .3s ease-in-out;
}

.news-socials i:hover {
    color: #169F8B;
}

.aktuelles-card img, .aktuelles-card .fusion-title h2{
    transition: all 0.3s ease-in-out !important;
}

.aktuelles-card:hover img{
    scale: 1.05;
}

.aktuelles-card:hover .fusion-title h2{
    color: #169F8B !important;
}

.aktuelles-card-date{
    display: flex;
    gap: 20px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}


.aktuelles-card-date:after{
    content: "\e9a3";
    font-family: 'FA-Regular' !important;
    position: relative;
    left: -10px;
    transition: all 0.3s ease-in-out !important;
    font-size: 30px;
    height: 0;
    display: flex;
    align-items: center;
    color:#169F8B;
    opacity:0;
}

.aktuelles-card:hover .aktuelles-card-date:after{
    left: 0px;
    opacity:1;
}

/* ---------------------------------- */

.box-hover:hover{}


.box-hover-img{
    position: relative; 
    transition: all 0.3s ease-in-out !important;
    top:0px;
}
    
.box-hover:hover .box-hover-img{top:-20px;}




.box-hover-arrow:after{
    content: "\e9a3";
    font-family: 'FA-Regular' !important;
    position: relative;
    left: -10px;
    transition: all 0.3s ease-in-out !important;
    font-size: 30px;
    display: flex;
    align-items: center;
    color:#ffffff;
    opacity:0;
}

.box-hover-arrow{
    display: flex !important;
    gap: 20px;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start !IMPORTANT;
}

    
.box-hover:hover .box-hover-arrow:after{
    left: 0px;
    opacity:1;
}
/* ---------------------------------- */

/*------------ Container als  Toggles -------------*/
:root {--content-width: 1400px;}


.gd-container-toggle-head {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
}


.gd-container-toggle-item {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 30px !important;
  background: var(--awb-background-color)!important;
}

.gd-container-toggle-content{
  max-width: 1400px;
  margin: auto;
}

.gd-container-toggle-head h2 {
  transition: all 0.3s ease-in-out !important;
}

.gd-container-toggle-head:hover h2 {
    color: #fff!important;
}

.gd-container-toggle-sep {
    margin:0 auto;
    border-bottom: 1px solid;
    color: #ffffff;
}

.gd-container-toggle-icon i {
    font-size: 40px;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gd-container-toggle {
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    margin: 0 auto !important;
}
.gd-container-toggle-head.is-open h2 {
color: #fff!important;}