/* ############### */
/* ## BRAND HUB ## */
/* ############### */

.bh-section{
	height: 100vh;
  display: flex;
  position: relative;
} 
.bh-section-brand-base{
  z-index: 1;
	position: sticky;
  top: 0;
}
.bh-section-first-grid{
  z-index: 2;
}
.bh-section-pause{
	height:100vh;
}
.bh-section-video-grid{
	z-index:1;
}
.bh-section-second-grid{
  z-index: 7;
}
.bh-section-we-are{
	position:relative;
	  z-index: 25;
	width:100vw;
}
/* Abstand für menü Links schaffen */
#brandhub-main-content{
	margin-left:60px !important;
}


ul{
    margin-left: 1.2rem !important;
}



/*  ### VIDEO SKALIEREN UND ABSPIELEN */


.video-wrapper-bh {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; 
  overflow: hidden;
}
.video-wrapper-bh video,
.video-wrapper-bh .video-cover-bh {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Stack-Reihenfolge */
.video-wrapper-bh video {
  z-index: 1;
}
.video-cover-bh {
  z-index: 2;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.video-cover-bh.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Video POP UP */
.video-popup-bh {
  position: fixed;
  inset: 0;
  background: #333;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.video-popup-bh.is-active {
  display: flex;
}

.video-popup-inner {
  width: 90%;
  max-width: 1500px;
  position: relative;
}

.video-popup-inner video {
  width: 100%;
  height: auto;
  display: block;
}

.video-popup-close {
  position: absolute;
  top: -45px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

/* optional: Cursor auf Cover & Play */
.video-cover-bh,
.play-button {
  cursor: pointer;
}









/* ### BRAND EXELLENCE YOU ANIMATION ### */
.brand-wrapper {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: white;
        flex-direction: column ;
}

.brand-container {
  display: flex;
  align-items: center;
  width: 80%;
  max-width: 1400px;
	max-height: 66vh;
	margin-top:-10vh;
}
.you-container {
  position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
  display: block;
  width: 80%;
  max-width: 1400px;
  aspect-ratio: 16 / 8.7;

}        
.left-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.brand {
  height: 30vh;
  width: 100%;
}
.excellence {
  height: 30vh;
  width: 100%;
  display: flex;
  align-items:flex-end;
}
.powered {
  width: 13%;
  height: 60vh;
  flex-shrink: 0;
  display: flex;
  justify-content:flex-end;
}
.you {
position: absolute;
top: 0vh;
left: 0vw;
	width:100%;
}
.you-welcome {
  position: absolute;
top: 0vh;
right: 0vw;
}
.you-welcome p, .you-spin p{
	font-size:1.63rem;
}


.you-spin {
position: absolute;
bottom: 0vh;
left: 16.3%;
color:#298fc2;
font-weight:600;
display:flex;
}
        
        
/* BRAND */
    .brand img {
      transform: translate(0%, 0%) scale(1);
      animation:
        brandIn 1s ease-out forwards,
        brandOut 0.6s ease-in 5s forwards;
    }

    @keyframes brandIn {
      0% {
        opacity: 1;
        transform: translate(-40vw, 100%) scale(3.2);
      }
			26% {
        transform: translate(10vw, 100%) scale(3.2);
      }
			30% {
        transform: translate(11vw, 100%) scale(3.2);
      }
			60% {
        transform: translate(60vw, 100%) scale(3.2);
      }
      100% {
        transform: translate(0, 0) scale(1);
      }
    }
    @keyframes brandOut {
      100% {
        transform: translate(0, -200vh) scale(1);
        opacity: 0;
      }
    }        

/* excellence */
    .excellence img {
      transform: translate(0%, 0%) scale(1);
        opacity: 0;
      animation:
        excellenceIn 1s ease-out 1.4s forwards,
        excellenceOut 1s ease-in 5s forwards;
    }

    @keyframes excellenceIn {
      0% {
        opacity: 0;
        transform: translate(110vw, 70%) scale(2.5);
      }
       1% {
        opacity: 1;
      }  
			26% {
     transform: translate(60vw, 70%) scale(2.5);
      }
			30% {
     transform: translate(61vw, 70%) scale(2.5);
 }
      60% {
      transform: translate(-10vw, 70%) scale(2.5);
      }
      100% {
        transform: translate(0, 0) scale(1);
          opacity: 1;
      }
    }
    @keyframes excellenceOut {
      100% {
        transform: translate(0, 200vh) scale(1);
        opacity: 0;
      }
    } 
        
/* powered */
    .powered img {
      transform: translate(0%, 0%) scale(1);
        opacity: 0;
      animation:
        poweredIn 1s ease-out 3s forwards,
        poweredOut 1s ease-in 5s forwards;
    }

    @keyframes poweredIn {
      0% {
        opacity: 0;
        transform: translate(10vw, -90vh) scale(3.0);
      }
       1% {
        opacity: 1;
      }  
			26% {
        transform: translate(10vw, -40vh) scale(3.0);
			}	
      30% {
        transform: translate(10vw, -39vh) scale(3.0);
				}
      60% {
        transform: translate(10vw, 0vh) scale(3.0);
      }
      100% {
        transform: translate(0, 0) scale(1);
          opacity: 1;
      }
    }
    @keyframes poweredOut {
      100% {
        transform: translate(150vw, 0) scale(1);
        opacity: 0;
      }
    }
        
        
/* YOU */
.you img {
  opacity: 0;
  width:100%;
  transform: translate(0%, 0%) scale(1);
  transform-origin: center center;
  animation: youIn 1s ease-out 5.3s forwards;
}

@keyframes youIn {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.01); /* fast unsichtbar klein */
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1); /* auf Originalgröße */
}
}

/* YOU WELCOME */
.you-welcome {
  opacity: 0;
  animation: youWelcomeIn 1s ease-out 6s forwards;
}

@keyframes youWelcomeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* YOU Spin */
.you-spin {
  opacity: 0;
  animation: youSpinIn 1s ease-out 6s forwards;
}

@keyframes youSpinIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
        
  

.arrow-spin{
height:80px;
	display:block; 
	margin-top:-9px;
animation: pulseMove 3.5s ease-in-out infinite;
transform-origin: center;
    }
    @keyframes pulseMove {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(-11%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }
.brand-animation-img{
	  position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
  display: block;
  width: 80%;
  max-width: 1200px;
}

.bh-section-animation-html.hide, .bh-section-animation-final{
	 display:none;
}
.bh-section-animation-final.show{
  display:block;
} 











/* ### FIRST GRID  ---------- erste Reihe KACHELN ### */

.container {
      display: flex;
      height: 100vh;
      width: 100vw;
}
.column {
      display: flex;
      flex-direction: column;
      flex: none;
      height: 100vh;
    }
.left {
      width: 41%;
    }
.center {
      width: calc(29% - 60px);
    }
.right {
      width: 30%;
}
.box {
    padding:3rem;
    }
.right .bottom, .left .top {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.center, .right .top {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* CONTENT BOXEN */
.left .top { 
	background-color:#2d92c2;
    color:#fff;
    height: 100%;
    }
.left .top h2{ 
    font-size: 3.5rem;
}
.leftboxtop{
        position: relative;
        z-index: 2;
    overflow: hidden;
    }
    
.leftboxtop-hover {
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
      transition: opacity 0.4s ease;

    }
.leftboxtop-hover img {
    width:50%;
    margin-bottom: 50px;
  transition: transform 1s ease, opacity 0.4s ease;
  transform: scale(4);
  opacity: 0;
    }
    
.leftboxtop.hover-enabled:hover .leftboxtop-hover{
     opacity:1;
    }
.leftboxtop.hover-enabled:hover .leftboxtop-hover img {
  transform: scale(1);
  opacity: 1;
}    
.leftboxtop-hover .fade-in-a {
  opacity: 0;
  transition: opacity 0.5s ease 1s;
    color:#333;
}
.leftboxtop.hover-enabled:hover .leftboxtop-hover .fade-in-a.show {
  opacity: 1;
    color: #333;
}
.fade-in-a:hover {
color:#333;
}

a.fade-in-a.show::after {
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:5px;
  margin-top:4px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.fade-in-a.show:hover::after{
  transform: scale(1.4);
}      
    
    
.box h2, .center h2 {
    font-size: 2.9rem;
    color:#fff;
    }
.box h3, .center h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color:#fff;
    }    
.box p, .center p{
    font-weight: 600;
    color:#fff;
    }
.box a, .center a{
        color: #fff;
        text-decoration: none;
        font-weight: 600;
  position: relative;
    } 
    .leftboxtop-hover a{
        color:#000;
    }  
.center a:hover, .rightboxtop a:hover, .rightboxbottom .spalten a:hover{
    color:#fff !important;
}
a.arrow-link::after{
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:5px;
  margin-top:4px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.arrow-link:hover::after {
  transform: scale(1.4);
}  
   
.subline-over{
    margin-bottom: -20px;
    }
.left .bottom { 
    position:relative;
    width: 100%;
    padding:0rem;
}
.left .bottom img{
   width: 100%;
  height: auto;
  display: block;
    position: relative;
    z-index: 2;
}
.left .bottom h3{
  position: absolute;
  padding:3rem;
  color: #fff;
    z-index:3;
    top:0;
    left:0;
}
    
    
.center {
  position: relative;
  overflow: hidden;
  padding: 3rem;
  z-index: 1;
}
    .center img{
        width: 95px;
    }
.center::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("/wp-content/uploads/2025/07/Wald.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
  animation: rotateBackground 9s infinite alternate;
}

@keyframes rotateBackground {
  0% {
    transform: scale(1.2) rotate(-2deg);
  }
  100% {
    transform: scale(1.1) rotate(1deg);
  }
}    
    
    
.right .top { 
	position: relative;
  background: #333;
  flex-grow: 0.41;
  overflow: hidden;

}
.right .top::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left: 0 */
  background-image: url("/wp-content/uploads/2025/12/Management-img.jpg");
  background-size: cover;
  background-position: top center !important;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}    
.right .top > * {
  position: relative;
  z-index: 1;
}
/* Hover: Bild langsam einblenden */
.right .top.hover-enabled:hover::before {
  opacity: 1;
}   
    
    
    

/* Container der alles enthält */
.box.bottom.rightboxbottom {
  display: flex;
  flex-direction: column;
  justify-content: center; /* zentriert img vertikal */
  align-items: center;      /* zentriert img horizontal */
  position: relative;
  padding: 3rem;
  box-sizing: border-box;
  background: #2d92c2;
  flex-grow: 0.59;
  overflow: hidden;    
}

   

/* spalten am unteren Rand positionieren */
.box.bottom.rightboxbottom .spalten {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 3rem 1rem 3rem;
  box-sizing: border-box;
}
.spalten a{
padding-right:2.5rem;
	margin-bottom:14px;
}

/*
.right .bottom::before {
  content: "";
  position: absolute;
  inset: 0; 
  background-image: url("/wp-content/uploads/2025/07/Artwork-cAI-Brain-inverse-neu.png");
  
  background-size: 90% auto; 
  background-position: center center; 
  background-repeat: no-repeat;

  opacity: 0;
  transition: opacity 1s ease;
  z-index: 0;
}    
.right .bottom > * {
  position: relative;
  z-index: 1;
}
.right .bottom:hover::before {
  opacity: 1;
}     
    
    */
    
    
 .brain-animation{
	display:block;
	width:100%;
}
.box.bottom.rightboxbottom .brain-animation .cai-logo-brain img{
	width:60%;
	margin:-4.5rem auto 0 auto;
	display:block;
	transition: transform 1s ease; }

.box.bottom.rightboxbottom.hover-enabled:hover .brain-animation .cai-logo-brain img{
	  transform: scale(0.35);
}
.box.bottom.rightboxbottom .brain-animation .cai-brain img{
	opacity:0;
	position:absolute;
	top:2.65rem;
	left:3rem;
	width:80%;
	transition: opacity 1s ease; }

.box.bottom.rightboxbottom.hover-enabled:hover .brain-animation .cai-brain img{
	opacity:1;
}
   
    
    
    

/* BRANDHUB -------------- VIDEO BOX */

.box-to-video-left { 
   z-index:5;
	position:fixed;
	bottom:0px;
     width: 41%;
    opacity: 0;
  visibility: hidden;
  pointer-events: none;
   transition: opacity 0.0s ease, visibility 0.0s ease !important;
	transform-origin: top center;
}
.box-to-video-left img{
   width: 100%;
  height: auto;
  display: block;
    position: relative;
    z-index: 4;
}

.box-to-video-left.show {
    opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.play-button {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  width: 130px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

.play-button.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: width 0.6s ease;
}

.play-button.show:hover {
  width: 155px;
  cursor: pointer;
}










/* ### BRANDHUB ---------------- HORIZONTAL SCROLLING */

.bh-section-horizontal {
      height: 900vh; /* Scrollhöhe, damit alle Animationen ausgelöst werden */
    }
    .section {
      width: 100vw;
      height: 100vh;
      position: relative;
      z-index: 10;
    }
.section h2 {
    position: absolute;
    top: 5rem;
    left: -29.1rem;
    transform: rotate(-90deg);
    transform-origin: top right;
    color: #fff !important;
    text-align: right;
    width: 500px;
    font-size: 1.8rem !important;
}


    .section-1 {
      background: #1abc9c;
      position: relative;
      z-index: 11;
    }

    /* Alle horizontalen Sections sind fixiert und starten rechts außerhalb */
    .section-2, .section-3, .section-4, .section-5, .section-6, .section-7,  .section-8,  .section-9,  .section-10 {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      transform: translateX(100vw);
    }
    .section-2, .section-3, .section-4, .section-5, .section-6, .section-7,  .section-8,  .section-9, .section-10 {
  margin-left: 60px !important;
}

    .section-2 { background: #298fc2; z-index: 12; }
    .section-3 { background: #78be21; z-index: 13; }
    .section-4 { background: #326295; z-index: 14; }
    .section-5 { background: #ff9425; z-index: 15; }
    .section-6 { background: #fedd00; z-index: 16; }
    .section-7 { background: #d00070; z-index: 17; }
    .section-8 { background: #298fc2; z-index: 18; }  
    .section-8 { background: #298fc2; z-index: 18; }  
    .section-9 { background: #78be21; z-index: 19; }  
    .section-10 { background: #333333; z-index: 21; }  

.horiz-content{
	display:flex;
	color:#fff;
	width:480px;
}
.horiz-content h3{
	font-size:4rem !important;	
	margin-bottom:50px;
	min-width:250px;
}

    .section-2 .horiz-content { margin-left:15rem !important; }
    .section-3 .horiz-content { margin-left:14.5rem !important; }
    .section-4 .horiz-content { margin-left:14rem !important; }
    .section-5 .horiz-content { margin-left:13.5rem !important; }
    .section-6 .horiz-content { margin-left:13rem !important; }
    .section-7 .horiz-content { margin-left:12.5rem !important; }
    .section-8 .horiz-content { margin-left:12rem !important; }
    .section-9 .horiz-content { margin-left:11.5rem !important; }
    .section-10 .horiz-content { margin-left:16rem !important; }





a.button-link {
	margin-top:50px;
  display: inline-block;
  background-color: transparent;
  color: white;
	width:180px !important;
	padding:4px 8px;
  text-decoration: none;
  border: 1px solid #fff;
	font-size:1rem;
	font-weight: 600;
  text-align: center;  
}
.section-2 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#298fc2 !important;
}
.section-3 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#78be21 !important;
}
.section-4 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#326295 !important;
}
.section-5 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#ff9425 !important;
}
.section-6 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#fedd00 !important;
}
.section-7 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#d00070 !important;
}
.section-8 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#298fc2 !important;
}
.section-9 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#78be21 !important;
}
.section-10 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#326295 !important;
}
.section-11 .horiz-content .button-link:hover {
  background-color: #fff;
	color:#333333 !important;
}

.farbuebersicht{
	display:flex;
	width:70vw;
	justify-content:flex-start;
	flex-wrap:wrap;
}

.farbuebersicht .square {
  aspect-ratio: 1 / 1; 
  width: 11vw;        
	margin-right:3vw;
	margin-bottom:3vh;
  display: flex;        
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  text-align: center;
}
.farbuebersicht .square span {
	display:inline-block;
}
.farbe-1{
	background-color:#298fc2;
}
.farbe-2{
	background-color:#78be21;
}
.farbuebersicht .farbe-2{
	border:1px solid #fff;
} 
.farbe-3{
	background-color:#326295;
}
.farbe-4{
	background-color:#ff9425;
}
.farbe-5{
	background-color:#fedd00;
}
.farbe-6{
	background-color:#d00070;
}
.farbe-7{
	background-color:#333333;
}
.farbe-8{
	background-color:#cccccc;
}
.farbe-9{
	background-color:#f7f7f7;
}
.farbuebersicht .farbe-9 span{
	color:#333;
}
.fontuebersicht {
	display:flex;
	justify-content:space-between;
	width:55vw;
	flex-wrap:wrap;
}
.fontuebersicht img{
	width:44%;
	margin-right:2vw;
	margin-bottom:7vh;
}
.section-6 .horiz-content img{
	width:300px;
}
.section-7 .horiz-content img{
	width:350px;
}
.section-8 .horiz-content img{
	max-width:420px;
    width:90%;
}
.brandsuebersicht{
	width:200px;
}
.section-6 div{
	width:10vw;
}
.iconset-dreier{
	display:flex;
}








/* ### Section cAi ### */

.brandsuebersicht {
  background-color: #fff;
  padding: 20px 50px;
  display: block;
  width: 400px !important;
  height: 250px !important;
  margin-bottom: 50px;
  position: relative;
  transition: background-color 0.6s ease;
}

/* Beide Logos exakt übereinander positionieren */
.brandsuebersicht img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease;
}

/* Sichtbarkeit */
.brandsuebersicht .cai-one {
  opacity: 1;
  z-index: 2;
}

.brandsuebersicht .cai-two {
  opacity: 0;
  z-index: 1;
}

/* Hover-Effekt */
.brandsuebersicht:hover {
  background-color: #298fc2;
}

.brandsuebersicht:hover .cai-one {
  opacity: 0;
}

.brandsuebersicht:hover .cai-two {
  opacity: 1;
}


.brandsuebersicht-zwo {
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #fff;
  overflow: hidden;
  padding: 15px; /* Abstand innen */
  box-sizing: border-box;
}

/* Zentrierte und kleinere Logos */
.brandsuebersicht-zwo img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeSlider 6.4s infinite;
  object-fit: contain;
}

@keyframes fadeSlider {
  0%, 24.9%   { opacity: 1; }
  25%, 100%   { opacity: 0; }
}
/* Die Delay-Zeit berechnet sich aus: (img-Index * Dauer) */
.brandsuebersicht-zwo img:nth-child(1) { animation-delay: 0s; }
.brandsuebersicht-zwo img:nth-child(2) { animation-delay: 1.6s; }
.brandsuebersicht-zwo img:nth-child(3) { animation-delay: 3.2s; }
.brandsuebersicht-zwo img:nth-child(4) { animation-delay: 4.8s; }




/* #### SECTION Templates ### */
.spin-animation .download-spin{
	display:block; 
	height:290px;
  transform-origin: center;
  animation: pulseTemplates 3.5s ease-in-out infinite;
}
.spin-animation img.download-bottom{
	max-width:300px !important;
	display:block; 
	height:290px;
	margin-top:-250px;
}
@keyframes pulseTemplates {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(-11%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }



.template-flex{
	display:flex;
	width:60vw;
	justify-content:space-between;
	 align-items:flex-start;
}

.template-flex div{
	display:flex;
	flex-direction:column;
	justify-content:space-between;	
	flex:1.4;
	min-height:280px;
}
.template-flex div.spin-animation{
	flex:1;
	display:block;
	padding-left:7rem;
}
.template-flex div p a{
	position:relative;
	bottom: 0;
}



/* STYLEGUIDE FLÄCHEN CONTENT */
.horiz-content{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	margin-left:15rem;
	margin-top:7rem;
}
.horiz-content h3{
color:#fff;
	font-weight:600;
	font-size:6rem;
}
.horiz-content button{
	width:300px;
	font-size:1.5rem;
  border:2px solid #fff;
	background:transparent;
}  











/* ### BRANDHUB ------------------ SECOND GRID - KACHELN zweite Reihe ### */

.container-zwo {
      display: flex;
      height: 100vh;
      width: 100vw;
    position: relative;
    z-index: 6;
    
}
.column-zwo {
      display: flex;
      flex-direction: column;
      flex: none;
      height: 100vh;
    }
.left-zwo {
      width: 50%;
    }
.center-zwo {
      width: 25%;
    }
.right-zwo {
      width: 25%;
}
.left1-3-zwo{
       width: 33.33%; 
    }   
.left2-3-zwo{
       width: 66.66%; 
    }       
.left-zwo .boxzwo, .right-zwo .bottom-zwo, .right-zwo .top-zwo, .left-zwo .top-zwo{
    height: 50vh !important;
    }  
    .left-zwo .top-zwo, .left2-3-zwo, .left1-3-zwo, .center-zwo-top, .right-zwo .top-zwo, .right-zwo .bottom-zwo{
      padding:3rem;
    }    
.left-zwo .top-zwo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.right-zwo .bottom-zwo, .center-zwo-top, .right-zwo .top-zwo, .left1-3-zwo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* CONTENT BOXEN */
.boxzwo h2, .center-zwo h2 {
    font-size: 2.9rem;
    color:#fff;
    }
.boxzwo h3, .center-zwo h3 {
    font-size: 1.8rem;
    color:#fff;
    font-weight: 600;
    }    
.boxzwo p, .center-zwo-top p{
    font-weight: 600;
    color:#fff;
    }
.boxzwo a, .center-zwo-top a{
        color: #fff;
        text-decoration: none;
        font-weight: 600;
  position: relative;
    } 
        
a.arrow-link-zwo::after{
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:5px;
  margin-top:4px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.arrow-link-zwo:hover::after {
  transform: scale(1.4);
}         
    
    
    
.left-zwo .top-zwo { 
	background-color:#ebebeb;
    overflow: hidden;
    }
.left-zwo .top-zwo h2,.left-zwo .top-zwo a { 
	color:#333;
    }  


/* ###  LINKS  BOTTOM BOX  ###  */    
  
.left-zwo .bottom-zwo { 
	 display: flex;
    padding:0rem;
    }
.left1-3-zwo{
       background-color:#333;
    }   
.left1-3-zwo a .download-spin{
	display:block; 
	    margin:0 auto;

	height:130px;
transform-origin: center;
    }
.left1-3-zwo:hover a .download-spin{
		display:block; 
animation:  pulsePressDownload 3.5s ease-in-out infinite;
transform-origin: center;
    }
    @keyframes pulsePressDownload {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(-11%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }
.download-bottom{
	max-width:170px !important;
}


.left1-3-zwo a .download-bottom{
	display:block;
    margin:0 auto;
	margin-top:-150px;
}
.left1-3-zwo h3{
    margin-top:40px;
}


    
.left2-3-zwo{
    background-color:#2b90c2;
    padding:3rem;
    }    
.left2-3-zwo img{
    display: block;
    width:80%;
    max-width: 420px; 
    margin:2rem auto 0 auto;
    transition: transform 0.5s ease;
    }    
.left2-3-zwo:hover img{
    transform: scale(1.2);
}     




/* ### CENTER BOX ### */
.center-zwo {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #333;
	display:flex;
}
.center-zwo-top, .center-zwo-bottom{
        height:50%;
    }
.rocket-launch{
	position:absolute;
	left:-20%;
	top:50%;
	width:90%;
	opacity:0;
}
.rocket-launch.rocket-go{
	  animation: rocket-slide-in 1.5s ease-out 1s forwards;	
}

/* Keyframes für die Animation */
@keyframes rocket-slide-in {
  from {
    transform: translate(-150%, 100%) rotate(35deg);
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.do-value{
	display:block;
	width:80%;
	margin-bottom:25px;
}





.right-zwo .top-zwo { 
	position: relative;
  background: #2b90c2;
  flex-grow: 0.41;
  overflow: hidden;
}

.right-zwo .top-zwo .logo-zwo {
  width: 170px;
  height: 115px;
  background-image: url('/wp-content/uploads/2025/07/Signet-CFN-invers.svg');
  background-size: contain;
  background-repeat: no-repeat;
/*  transition: background-image 1s ease-in-out; */
}
/*.right-zwo .top-zwo h3, .right-zwo .top-zwo a, .right-zwo .top-zwo {
transition: background 0.3s ease-in-out;     
    }*/

.right-zwo .top-zwo.hover-enabled:hover .logo-zwo {
  background-image: url('/wp-content/uploads/2025/07/Signet-CFN.svg');
}
.right-zwo .top-zwo.hover-enabled:hover h3 {
color:#333;
    }
.right-zwo .top-zwo.hover-enabled:hover a {
color:#333;
    }
 .right-zwo .top-zwo.hover-enabled:hover { 
  background: #fff;
    }
.right-zwo .top-zwo.hover-enabled:hover a.arrow-link-zwo::after{
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:5px;
  margin-top:4px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
.right-zwo .top-zwo.hover-enabled:hover a.arrow-link-zwo:hover::after {
  transform: scale(1.4);
} 


a.arrow-link-zwo:hover{
    color:#fff !important;
}
    
a.arrow-link-black-zwo:hover{
    color:#333 !important;
}
.right-zwo .top-zwo.hover-enabled a.arrow-link-zwo:hover{
    color:#333 !important;
}

a.arrow-link-black-zwo::after{
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:5px;
  margin-top:4px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.arrow-link-black-zwo:hover::after {
  transform: scale(1.4);
} 



    
  
.right-zwo .bottom-zwo {
  position: relative;
  overflow: hidden;
}

/* Pseudo-Element mit dem Hintergrundbild */
.right-zwo .bottom-zwo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("/wp-content/uploads/2025/07/coeo-Hemd-Model.jpg");
  background-size: cover;
  background-position: center;
  transition: transform 1.5s ease;
  transform: scale(1.3);
  z-index: 0;
}

/* Skalierung beim Hover */
.right-zwo .bottom-zwo:hover::before {
  transform: scale(1.1);
}
.right-zwo .bottom-zwo > * {
  position: relative;
  z-index: 1;
}
   .right-zwo .bottom-zwo h3,.right-zwo .bottom-zwo a { 
	color:#333;
    }

    
    
    .leftboxtop-zwo {
        position: relative;
        
    }
    .inhalt-zwo{
        position: relative;
        z-index: 2;
    }    
    .bg-video-zwo {
  position: absolute;
  top: 50%;
  left: 72%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: none;
}
  



.locked-icon, .rightboxbottom-zwo .locked-icon{
  position: absolute !important;
  width: 1.0em !important;
  height: 1.0em !important;
	margin:5px 0px 0px 0px !important;
	display:inline-block !important;
  transform: scale(1);
  transform-origin: bottom left;
  transition: margin 0.3s ease !important;
}  
.locked-icon{
	left:176px;
}
.rightboxbottom-zwo .locked-icon{
	left:222px;
	margin:3px 0px 2px 0px !important;
}
.inhalt-zwo img.locked-icon{
	left:197px !important;
}
.left2-3-zwo:hover img.locked-icon {
  transform: scale(1.0);
} 
.left2-3-zwo a.arrow-link-zwo:hover ~ img.locked-icon, .inhalt-zwo a.arrow-link-black-zwo:hover ~ img.locked-icon{
	margin:5px 0px 0px 10px !important;
}
.rightboxbottom-zwo a.arrow-link-black-zwo:hover ~ img.locked-icon {
	margin:3px 0px 2px 10px !important;
}
  

/* ### BRANDHUB Footer ### */
.brandhub-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: white;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  z-index: 1000;

  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}

.brandhub-footer.einblenden {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: calc(60px + 2rem);
  padding-right: 1.4rem;
  margin: 0 auto;
}

.footer-content a {
  color: white;
  text-decoration: none;
  margin-left: 0.5rem;
}

.footer-content a:first-child {
  margin-left: 0;
}




/* ### GO TO TOP BUTTON  ###  */

.go-to-top {
  position: fixed;
  bottom: 3rem; /* über dem Footer */
  right: 2rem;
  z-index: 1001;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
}
.go-to-top.einblenden {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.go-to-top a {
  display: inline-block;
  transition: transform 0.3s ease;
}
.go-to-top a:hover {
  transform: scale(1.05);
}
.go-to-top img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}








/* ### WE are READY TO ### */

	#we-are-coeo{
		z-index:29;
		
	}   

.scroll-page {
      height: calc(300vh - 20px); 
    }
.sticky-wrapper {
	position:sticky;
	top:0;
      height: 100vh;
      overflow: hidden;
    }
    .fake-horizontal {
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    .layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .layer-yellow {
      background: linear-gradient(to top right, #298FC2, #48A9C5);
      z-index: 1;
    }
    .layer-green {
      background-color: #fff;
      z-index: 2;
      clip-path: inset(0 0 0 100%); /* ANFANG: von links weggeschnitten */
    }
.svg-wrapper {
  position: relative;  /* Bezugspunkt für den Button */
  display: inline-block; /* passt sich an die Bildgröße an */
}
    .svg {
      width: 90vw;
		max-width:1600px;
	margin-top:0;
      height: auto;
			display: block;
    }
#space-footer-reveal{
	display:block;
	height:250px;
}



	
@media only screen and (max-width:1280px) {
.layer-yellow {
      background:#333;
    }
.scroll-page {
      height: 480vh; 
    }
.svg {
    width: 76vw;
    margin-top: 15vh;
}
	.layer {
      align-items: flex-start;
    }
#space-footer-reveal{
	display:none;
	height:0px;
}

}



	.bh-we-small{
	 display:none;
		opacity:0;
	}
	.bh-we-big{
		display:block;
		opacity:1;
	}






/* ### BRANDHUB  WORTE ANIMATION MOBIL ### */
@media only screen and (max-width:1400px) {
	.brand {
        height: 25vh;
    }
	.excellence {
        height: 25vh;
    }
	.powered {
        height: 50vh;
	}
}








@media (max-width:1280px) {

/* ############### */
/* ## BRAND HUB ## */
/* ############### */


	.bh-we-small{
	 display:block;
		opacity:1;
	}
	.bh-we-big{
		display:none;
		opacity:0;
	}
/*
// ### BRANDHUB ---------------- HORIZONTAL SCROLLING 

	.m-sections-wrapper {
		margin-top:-71px;
		z-index:25;
		background-color:#fff;
    position: relative;
}

	
.m-section {
  width: 100vw;
  height: 10vh; // kleine Sections, scrollen normal weiter
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.m-section a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.m-section h2 {
  margin: 0;
  font-size: 1.2rem;
  padding: 0.5rem;
}


// Farben
.m-section-2  { background: #298fc2; }
.m-section-3  { background: #78be21; }
.m-section-4  { background: #326295; }
.m-section-5  { background: #ff9425; }
.m-section-6  { background: #fedd00; color:#000; }
.m-section-7  { background: #d00070; }
.m-section-8  { background: #298fc2; }
.m-section-9  { background: #78be21; }
.m-section-10 { background: #333; color:#fff; }
.m-section-10 a h2 {color:#fff; }


*/

		#second-grid{
		margin-bottom:-71px;
	}
	

.bh-section{
	height: 100vh;
  display: flex;
  position: relative;
} 
.bh-section-brand-base{
  z-index: 1;
	position: sticky;
  top: 0;
}
.bh-section-first-grid{
}
.bh-section-pause{
	height:100vh;
}
.bh-section-video-grid{
	z-index:1;
}
.bh-section-second-grid{
  z-index: 7;
}
.bh-section-we-are{
	position:relative;
	  z-index: 25;
	width:100vw;
}
/* Abstand für menü Links schaffen */
#brandhub-main-content{
	margin-left:0px !important;
}


ul{
    margin-left: 1.2rem !important;
}











/* ### BRAND EXELLENCE YOU ANIMATION ### */
.brand-wrapper {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: white;
        flex-direction: column ;
}

.brand-container {
  display: flex;
  align-items: center;
  width: 80%;
  max-width: 1400px;
	max-height: 30vh;
	margin-top:-10vh;
}
.you-container {
  position: fixed;
top: 48vh;
left: 50vw;
transform: translate(-50%, -50%);
  display: block;
  width: 80%;
  max-width: 1400px;
  aspect-ratio: 16 / 8.7;

}        
.left-column {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.you {
position: absolute;
top: 0vh;
left: 0vw;
	width:100%;
}
.you-welcome {
  position: absolute;
top: -13vh;
left: 0vw;
}
.you-welcome p, .you-spin p{
	font-size:1.0rem;
}


.you-spin {
    position: absolute;
    bottom: -8vh;
    left: 50%; 
    transform: translateX(-50%);
    width: 80vw !important;
    color: #298fc2;
    font-weight: 600;
    display: flex;
    justify-content: center;
}

        
        
/* BRAND */
    .brand img {
      transform: translate(0%, 0%) scale(1);
      animation:
        brandIn 1s ease-out forwards,
        brandOut 0.6s ease-in 5s forwards;
    }

    @keyframes brandIn {
      0% {
        opacity: 1;
        transform: translate(-40vw, 100%) scale(3.2);
      }
			26% {
        transform: translate(10vw, 100%) scale(3.2);
      }
			30% {
        transform: translate(11vw, 100%) scale(3.2);
      }
			60% {
        transform: translate(60vw, 100%) scale(3.2);
      }
      100% {
        transform: translate(0, 0) scale(1);
      }
    }
    @keyframes brandOut {
      100% {
        transform: translate(0, -200vh) scale(1);
        opacity: 0;
      }
    }        

/* excellence */
    .excellence img {
      transform: translate(0%, 0%) scale(1);
        opacity: 0;
      animation:
        excellenceIn 1s ease-out 1.4s forwards,
        excellenceOut 1s ease-in 5s forwards;
    }

    @keyframes excellenceIn {
      0% {
        opacity: 0;
        transform: translate(110vw, 70%) scale(2.5);
      }
       1% {
        opacity: 1;
      }  
			26% {
     transform: translate(60vw, 70%) scale(2.5);
      }
			30% {
     transform: translate(61vw, 70%) scale(2.5);
 }
      60% {
      transform: translate(-10vw, 70%) scale(2.5);
      }
      100% {
        transform: translate(0, 0) scale(1);
          opacity: 1;
      }
    }
    @keyframes excellenceOut {
      100% {
        transform: translate(0, 200vh) scale(1);
        opacity: 0;
      }
    } 
        
/* powered */
    .powered img {
      transform: translate(0%, 0%) scale(1);
        opacity: 0;
      animation:
        poweredIn 1s ease-out 3s forwards,
        poweredOut 1s ease-in 5s forwards;
    }

    @keyframes poweredIn {
      0% {
        opacity: 0;
        transform: translate(10vw, -90vh) scale(3.0);
      }
       1% {
        opacity: 1;
      }  
			26% {
        transform: translate(10vw, -40vh) scale(3.0);
			}	
      30% {
        transform: translate(10vw, -39vh) scale(3.0);
				}
      60% {
        transform: translate(10vw, 0vh) scale(3.0);
      }
      100% {
        transform: translate(0, 0) scale(1);
          opacity: 1;
      }
    }
    @keyframes poweredOut {
      100% {
        transform: translate(150vw, 0) scale(1);
        opacity: 0;
      }
    }
        
        
/* YOU */
.you img {
  opacity: 0;
  width:100%;
  transform: translate(0%, 0%) scale(1);
  transform-origin: center center;
  animation: youIn 1s ease-out 5.3s forwards;
}

@keyframes youIn {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.01); /* fast unsichtbar klein */
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1); /* auf Originalgröße */
}
}

/* YOU WELCOME */
.you-welcome {
  opacity: 0;
  animation: youWelcomeIn 1s ease-out 6s forwards;
}

@keyframes youWelcomeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* YOU Spin */
.you-spin {
  opacity: 0;
  animation: youSpinIn 1s ease-out 6s forwards;
}

@keyframes youSpinIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
        
  

.arrow-spin{
height:50px;
	display:block; 
	margin-top:-9px;
animation: pulseMove 3.5s ease-in-out infinite;
transform-origin: center;
    }
    @keyframes pulseMove {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(-11%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }
.brand-animation-img{
	  position: fixed;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
  display: block;
  width: 85%;
  max-width: 1200px;
}

.bh-section-animation-html.hide, .bh-section-animation-final{
	 display:none;
}
.bh-section-animation-final.show{
  display:block;
} 











/* ### FIRST GRID  ---------- erste Reihe KACHELN ### */

.container {
      display: flex;
      height: 100vh;
      width: 100vw;
}
.column {
      display: flex;
      flex-direction: column;
      flex: none;
      height: 100vh;
    }
.left {
      width: 50%;
    }
.center {
      width: calc(29% - 60px);
    }
.right {
      width: 50%;
}
.box {
    padding:1.4rem;
    }
.right .bottom, .left .top {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.center, .right .top {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* CONTENT BOXEN */
.left .top { 
	background-color:#2d92c2;
    color:#fff;
    height: 100%;
    }
.left .top h2{ 
    font-size: 1.3rem;
}
	.left .top p{
		margin-top:15px;
		font-size:0.9rem;
	}
.leftboxtop{
        position: relative;
        z-index: 2;
    overflow: hidden;
    }
    
.leftboxtop-hover {
    opacity: 0;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1;
      transition: opacity 0.4s ease;

    }
.leftboxtop-hover img {
    width:50%;
    margin-bottom: 50px;
  transition: transform 1s ease, opacity 0.4s ease;
  transform: scale(4);
  opacity: 0;
    }
    
.leftboxtop.hover-enabled:hover .leftboxtop-hover{
     opacity:1;
    }
.leftboxtop.hover-enabled:hover .leftboxtop-hover img {
  transform: scale(1);
  opacity: 1;
}    
.leftboxtop-hover .fade-in-a {
  opacity: 0;
  transition: opacity 0.5s ease 1s;
    color:#333;
}
.leftboxtop.hover-enabled:hover .leftboxtop-hover .fade-in-a.show {
  opacity: 1;
    color: #333;
}
.fade-in-a:hover {
color:#333;
}

a.fade-in-a.show::after {
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:5px;
  margin-top:4px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.fade-in-a.show:hover::after{
  transform: scale(1.4);
}      
    
    
.box h2, .center h2 {
    font-size: 1.3rem;
    color:#fff;
    }
.box h3, .center h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color:#fff;
    }    
.box p, .center p{
    font-weight: 600;
    color:#fff;
    }
.box a, .center a{
        color: #fff;
        text-decoration: none;
        font-weight: 600;
  position: relative;
    } 
    .leftboxtop-hover a{
        color:#000;
    }  
.center a:hover, .rightboxtop a:hover, .rightboxbottom .spalten a:hover{
    color:#fff !important;
}
	
.arrow-link h2 {
  display: inline; 
  margin: 0;
}
a.arrow-link::after{
  content: "";
  display:inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left:4px;
  margin-top: 8px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.arrow-link:hover::after {
  transform: scale(1.3);
}  
  	.left .box, .right .box{
		height:50%;
	}     
.subline-over{
    margin-bottom: -20px;
    }
.left .bottom { 
    position:relative;
    width: 100%;
    padding:1.4rem;
	overflow:hidden;
	display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.left .bottom img {
    width: 100px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
    z-index: 2;
}
	
.left .bottom h3{
  position: relative;
  padding:auto;
  color: #fff;
    z-index:3;
    top:0;
    left:0;
}
	
.left .bottom::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("/wp-content/uploads/2025/07/Wald.jpg");
  background-size: cover;
  background-position: center;
  z-index: 0;
  animation: rotateBackground 9s infinite alternate;
}
.rightboxbottom-zwo{
		overflow:hidden;
	padding:1.4rem;
	display:flex;
	justify-content:flex-end;
	flex-direction:column;
	}
	
	.rightboxtop-zwo{
		justify-content:flex-end !important;
		background-color:#2b90c2 !important;
		flex-direction: column !important;
	}
	.leftboxtop-zwo{
		justify-content:flex-end !important;
	}
		.leftboxtop a p{
		font-size:0.85rem;
		margin-top:15px;
	}
	.rightboxtop-zwo h2{
	color:#fff !important;
	}
	
.rightboxbottom-zwo::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: url("/wp-content/uploads/2025/07/coeo-Hemd-Model.jpg");
  background-size: cover;
  background-position: center;
  z-index: -1;
  animation: rotateBackground 9s infinite alternate;
}

@keyframes rotateBackground {
  0% {
    transform: scale(1.2) rotate(-2deg);
  }
  100% {
    transform: scale(1.1) rotate(1deg);
  }
}	

    
.center {
  display:none;
}
   
    
    
.right .top { 
	position: relative;
  background: #333;
  flex-grow: 0.41;
  overflow: hidden;
  background-image: url("/wp-content/uploads/2026/01/Leadership-Mobile.jpg");
  background-size: cover;
  background-position: top center !important;
}
.right .top::before {
  content: "";
  position: absolute;
  inset: 0; /* top, right, bottom, left: 0 */
  background-image: url("");
  background-size: cover;
  background-position: top center !important;
  opacity: 0;
  transition: opacity 1.2s ease;
  z-index: 0;
}    
.right .top > * {
  position: relative;
  z-index: 1;
}
/* Hover: Bild langsam einblenden */
.right .top.hover-enabled:hover::before {
  opacity: 0;
}   
    
    
    

/* Container der alles enthält */
.box.bottom.rightboxbottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; 
  position: relative;
  padding: 1.4rem;
  box-sizing: border-box;
  background: #2d92c2;
  flex-grow: 0.59;
  overflow: hidden;    
  align-items: flex-start;
}
.box.bottom.rightboxbottom img {
    width: 120px;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -90%);
    z-index: 2;
}
   

/* spalten am unteren Rand positionieren */
.box.bottom.rightboxbottom .spalten {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 3rem 1rem 3rem;
  box-sizing: border-box;
}
.spalten a{
padding-right:2.5rem;
	margin-bottom:14px;
}


    
    
 .brain-animation{
	display:block;
	width:100%;
}
.box.bottom.rightboxbottom .brain-animation .cai-logo-brain img{
	width:60%;
	margin:-4.5rem auto 0 auto;
	display:block;
	transition: transform 1s ease; }

.box.bottom.rightboxbottom.hover-enabled:hover .brain-animation .cai-logo-brain img{
	  transform: scale(0.35);
}
.box.bottom.rightboxbottom .brain-animation .cai-brain img{
	opacity:0;
	position:absolute;
	top:2.65rem;
	left:3rem;
	width:80%;
	transition: opacity 1s ease; }

.box.bottom.rightboxbottom.hover-enabled:hover .brain-animation .cai-brain img{
	opacity:1;
}
   
    
    
    

/* BRANDHUB -------------- VIDEO BOX */

.box-to-video-left { 
   z-index:5;
	position:fixed;
	bottom:0px;
     width: 41%;
    opacity: 0;
  visibility: hidden;
  pointer-events: none;
   transition: opacity 0.0s ease, visibility 0.0s ease !important;
}
.box-to-video-left img{
   width: 100%;
  height: auto;
  display: block;
    position: relative;
    z-index: 4;
}

.box-to-video-left.show {
    opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99;
  width: 140px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
    transition: opacity 0.7s ease,
}

.play-button.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: width 0.6s ease;
}

.play-button.show:hover {
  width: 155px;
  cursor: pointer;
}


	.video-wrapper-bh-mobil{
		display:flex;
		flex-direction:column;
		height:100vh;
		width:100vw;
		position: relative;
    z-index: 5;
	}
	.video-bg-mobil{
		background-color:#333;
		flex: 1;
	}	
	.video-frame-mobil{
		background-color:#333;
	}













 

a.button-link {
	margin-top:50px;
  display: inline-block;
  background-color: transparent;
  color: white;
	width:180px !important;
	padding:4px 8px;
  text-decoration: none;
  border: 1px solid #fff;
	font-size:1rem;
	font-weight: 600;
  text-align: center;  
}


/* ### Section cAi ### */

.brandsuebersicht {
  background-color: #fff;
  padding: 20px 50px;
  display: block;
  width: 400px !important;
  height: 250px !important;
  margin-bottom: 50px;
  position: relative;
  transition: background-color 0.6s ease;
}

/* Beide Logos exakt übereinander positionieren */
.brandsuebersicht img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180px;
  transform: translate(-50%, -50%);
  transition: opacity 0.6s ease;
}

/* Sichtbarkeit */
.brandsuebersicht .cai-one {
  opacity: 1;
  z-index: 2;
}

.brandsuebersicht .cai-two {
  opacity: 0;
  z-index: 1;
}

/* Hover-Effekt */
.brandsuebersicht:hover {
  background-color: #298fc2;
}

.brandsuebersicht:hover .cai-one {
  opacity: 0;
}

.brandsuebersicht:hover .cai-two {
  opacity: 1;
}


.brandsuebersicht-zwo {
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #fff;
  overflow: hidden;
  padding: 15px; /* Abstand innen */
  box-sizing: border-box;
}

/* Zentrierte und kleinere Logos */
.brandsuebersicht-zwo img {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: fadeSlider 6.4s infinite;
  object-fit: contain;
}

@keyframes fadeSlider {
  0%, 24.9%   { opacity: 1; }
  25%, 100%   { opacity: 0; }
}
/* Die Delay-Zeit berechnet sich aus: (img-Index * Dauer) */
.brandsuebersicht-zwo img:nth-child(1) { animation-delay: 0s; }
.brandsuebersicht-zwo img:nth-child(2) { animation-delay: 1.6s; }
.brandsuebersicht-zwo img:nth-child(3) { animation-delay: 3.2s; }
.brandsuebersicht-zwo img:nth-child(4) { animation-delay: 4.8s; }




/* #### SECTION Templates ### */
.spin-animation .download-spin{
	display:block; 
	height:290px;
  transform-origin: center;
  animation: pulseTemplates 3.5s ease-in-out infinite;
}
.spin-animation img.download-bottom{
	max-width:300px !important;
	display:block; 
	height:290px;
	margin-top:-250px;
}
@keyframes pulseTemplates {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(-11%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }



.template-flex{
	display:flex;
	width:60vw;
	justify-content:space-between;
	 align-items:flex-start;
}

.template-flex div{
	display:flex;
	flex-direction:column;
	justify-content:space-between;	
	flex:1.4;
	min-height:280px;
}
.template-flex div.spin-animation{
	flex:1;
	display:block;
	padding-left:7rem;
}
.template-flex div p a{
	position:relative;
	bottom: 0;
}



/* STYLEGUIDE FLÄCHEN CONTENT */
.horiz-content{
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	margin-left:15rem;
	margin-top:7rem;
}
.horiz-content h3{
color:#fff;
	font-weight:600;
	font-size:6rem;
}
.horiz-content button{
	width:300px;
	font-size:1.5rem;
  border:2px solid #fff;
	background:transparent;
}  











/* ### BRANDHUB ------------------ SECOND GRID - KACHELN zweite Reihe ### */

.container-zwo {
      display: flex;
	flex-direction:column;
      height: 100vh;
      width: 100vw;
    position: relative;
    z-index: 6;
    
}
.left-zwo {
      width: 100%;
	    height:40%;
	display: flex;
      flex-direction: row;
    }
.center-zwo {
      width: 100%;
	    height:20%;
    }
.bottom-zwo {
      width: 100%;
	    height:41%;
		display: flex;
      flex-direction: row;
}
  
     
  
    .left-zwo .top-zwo, .left2-3-zwo, .left1-3-zwo, .center-zwo-top, .right-zwo .top-zwo, .right-zwo .bottom-zwo{
      padding:1.3rem;
    }    
	    .left-zwo {
        margin-top: -2px;
    }
.left-zwo .top-zwo {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
	.left-zwo .boxzwo{
		width:50%;
		height: auto !important;
	}


/* CONTENT BOXEN */
.boxzwo h2, .center-zwo h2 {
    font-size: 1.3rem;
    color:#fff;
    }
.boxzwo h3, .center-zwo h3 {
    font-size: 1.4rem;
    color:#fff;
    font-weight: 600;
    }    
.boxzwo p, .center-zwo-top p{
    font-weight: 600;
    color:#fff;
    }
.boxzwo a{
        color: #333;
        text-decoration: none;
        font-weight: 600;
  position: relative;
    } 
.boxzwo a:hover {
	color: #333;
	}	
	.center-zwo-top a{
        color: #fff;
        text-decoration: none;
        font-weight: 600;
  position: relative;
    } 
        
a.arrow-link-zwo::after{
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:4px;
  margin-top:8px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
a.arrow-link-zwo:hover::after {
  transform: scale(1.3);
}         
    
    
    
.left-zwo .top-zwo { 
	background-color:#ebebeb;
    overflow: hidden;
    }
.left-zwo .top-zwo h2,.left-zwo .top-zwo a { 
	color:#333;
    }  


/* ###  LINKS  BOTTOM BOX  ###  */    
  
.left-zwo .bottom-zwo { 
	 display: flex;
    padding:0rem;
    }
.left1-3-zwo{
		background-color: #2b90c2;
	}	
.left1-3-zwo a .download-spin{
	display:block; 
	    margin:0 auto 40% auto;
	height:95px;
transform-origin: center;
    }
.left1-3-zwo:hover a .download-spin{
		display:block; 
animation:  pulsePressDownload 3.5s ease-in-out infinite;
transform-origin: center;
    }
    @keyframes pulsePressDownload {
      0% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      50% {
        transform: translateY(-11%) scale(1.05);
        opacity: 1;
      }
      100% {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
    }
.download-bottom{
	max-width:110px !important;
}


.left1-3-zwo a .download-bottom{
	display:block;
    margin:0 auto;
	margin-top:auto;
}
.left1-3-zwo h3{
    margin-top:40px;
}


    
.left2-3-zwo{
    background-color:#2b90c2;
    padding:3rem;
    }    
.left2-3-zwo img{
    display: block;
    width:80%;
    max-width: 420px; 
    margin:2rem auto 0 auto;
    transition: transform 0.5s ease;
    }    
.left2-3-zwo:hover img{
    transform: scale(1.2);
}     




/* ### CENTER BOX ### */
.center-zwo {
  position: relative;
  overflow: hidden;
  z-index: 1;
  background-color: #326295;
	display:flex;
}
.center-zwo-top, .center-zwo-bottom{
        height:100%;
    }
	
	.center-zwo div{
		width:40%;
	}
	.center-zwo .center-zwo-top{
		width:60%;
	}	
	.rocket-launch {
   position: relative;
   width: 170px;
   opacity: 1;
	 top:10px;
		left:10px;
  }
.do-value{
	display:block;
	width:90px;
	margin-bottom:10px;
}
	.center-zwo-top p{
		margin: 0 0 9px;
	}
.animate-zwo {
  will-change: transform;
}


	.logo-zwo-cfn {
		width:90px;
		margin-bottom:10px
	}


.right-zwo .top-zwo { 
	position: relative;
  background: #2b90c2;
  flex-grow: 0.41;
  overflow: hidden;
}

.right-zwo .top-zwo .logo-zwo {
  width: 170px;
  height: 115px;
  background-image: url('/wp-content/uploads/2025/07/Signet-CFN-invers.svg');
  background-size: contain;
  background-repeat: no-repeat;
/*  transition: background-image 1s ease-in-out; */
}
/*.right-zwo .top-zwo h3, .right-zwo .top-zwo a, .right-zwo .top-zwo {
transition: background 0.3s ease-in-out;     
    }*/

.right-zwo .top-zwo.hover-enabled:hover .logo-zwo {
  background-image: url('/wp-content/uploads/2025/07/Signet-CFN.svg');
}
.right-zwo .top-zwo.hover-enabled:hover h3 {
color:#333;
    }
.right-zwo .top-zwo.hover-enabled:hover a {
color:#333;
    }
 .right-zwo .top-zwo.hover-enabled:hover { 
  background: #fff;
    }
.right-zwo .top-zwo.hover-enabled:hover a.arrow-link-zwo::after{
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  margin-left:4px;
  margin-top:8px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   
.right-zwo .top-zwo.hover-enabled:hover a.arrow-link-zwo:hover::after {
  transform: scale(1.3);
} 


a.arrow-link-zwo:hover{
    color:#fff !important;
}
	.a.arrow-link-black-zwo {
		position:relative;
	}    
a.arrow-link-black-zwo:hover{
    color:#333 !important;
}
.right-zwo .top-zwo.hover-enabled a.arrow-link-zwo:hover{
    color:#333 !important;
}

a.arrow-link-black-zwo::after{
  content: "";
	position:absolute;
  display: inline-block;
  width: 1.0em;
  height: 1.0em;
  margin-left:4px;
  margin-top:8px;
  background-image: url("/wp-content/uploads/2025/07/arrow-up-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 0.3s ease;
}   

a.arrow-link-black-zwo:hover::after {
  transform: scale(1.3);
} 

	.rightboxbottom-zwo, .left1-3-zwo{
		width:50% !important;
	}	

    .rightboxbottom-zwo a h2{
 			color:#333;
	}
  
.right-zwo .bottom-zwo {
  position: relative;
  overflow: hidden;
}

/* Pseudo-Element mit dem Hintergrundbild */
.right-zwo .bottom-zwo::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("/wp-content/uploads/2025/07/coeo-Hemd-Model.jpg");
  background-size: cover;
  background-position: center;
  transition: transform 1.5s ease;
  transform: scale(1.3);
  z-index: 0;
}

/* Skalierung beim Hover */
.right-zwo .bottom-zwo:hover::before {
  transform: scale(1.1);
}
.right-zwo .bottom-zwo > * {
  position: relative;
  z-index: 1;
}
   .right-zwo .bottom-zwo h3,.right-zwo .bottom-zwo a { 
	color:#333;
    }

    
    
    .leftboxtop-zwo {
        position: relative;
        
    }
    .inhalt-zwo{
        position: relative;
        z-index: 2;
    }    
.bg-video-zwo {
        position: absolute;
        top: 40%;
        left: 50%;
        width: 60%;
        height: 50%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index: 1;
        pointer-events: none;
    }
  



.locked-icon, .rightboxbottom-zwo .locked-icon{
  position: absolute !important;
  width: 1.0em !important;
  height: 1.0em !important;
	margin:5px 0px 0px 0px !important;
	display:inline-block !important;
  transform: scale(1);
  transform-origin: bottom left;
  transition: margin 0.3s ease !important;
}  
.locked-icon{
	left:176px;
}
.rightboxbottom-zwo .locked-icon{
	left:222px;
	margin:3px 0px 2px 0px !important;
}
.inhalt-zwo img.locked-icon{
	left:197px !important;
}
.left2-3-zwo:hover img.locked-icon {
  transform: scale(1.0);
} 
.left2-3-zwo a.arrow-link-zwo:hover ~ img.locked-icon, .inhalt-zwo a.arrow-link-black-zwo:hover ~ img.locked-icon{
	margin:5px 0px 0px 10px !important;
}
.rightboxbottom-zwo a.arrow-link-black-zwo:hover ~ img.locked-icon {
	margin:3px 0px 2px 10px !important;
}
	
	.container, .container-zwo {
  height: calc(100vh - 70px);
	margin-top:-70px;
}

}  /*  ENDE MOBIL */


@media only screen and (max-width:1100px) {
	.brand {
        height: 20vh;
    }
	.excellence {
        height: 20vh;
    }
	.powered {
        height: 40vh;
	}
	.brand-container {
        margin-top: -15vh;
    }	
}



@media only screen and (max-width:790px) {
	.brand {
        height: 10vh;
    }
	.excellence {
        height: 10vh;
    }
	.powered {
        height: 20vh;
	}
.brand-container {
        margin-top: -25vh;
    }	
}