body {
  font-family: 'Montserrat', sans-serif;
  background-color: #AFB1B0;
  color: #333;
  transition: background-color 0.5s ease;
}

:root {
  --primary-brand-color: #FF0000;
  --secondary-brand-color: #958F80;
  --custom-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  --home-staging: #635448;
  --light-work: #906c4c;
  --light-sculpture: #958F80;
  --architecture: #2e546f;
  --himmel-blau: #3b6493;
  --brown: #6f5b4a;
  --logo: #8b6c49;
}

/* Corporate Main Section */
.corporate-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  height: 100vh;
  margin: 0 auto;
  gap: 10px;
  padding: 0 0%;
  box-sizing: border-box;
  overflow: hidden;
  margin-top: 0.3% !important;
}



.header-container {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 3%;
width: 100%;
height: 30%;
overflow: hidden;
z-index: 0;
background-color: #e7e8ea;
}

.header-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('../assets/Corporate Design/logos/team.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: 100% center;
transform: translateX(0) scale(0.85) rotate(0deg);
transform-origin: center;
z-index: -10;
}


.corporate-heading {
  position: relative;
  display: inline-block;
  flex-basis: 50%;
  text-align: left;
  font-size: clamp(2rem, 3vw, 3rem);
  color: #AFB1B0;
  font-family: 'Abnes', sans-serif;
  padding-top: 15%;
  padding-bottom: 5%;
  padding-left: 1%;
  margin: 0;

  transition: 
  transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
  opacity   0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* Toggle‑Button (Pfeil) */
.toggle-btn {
  position: absolute;                /* bezieht sich auf .corporate-heading */
  top: 18%;                          /* vertikal zentriert */
  left: 48%;                        /* direkt rechts an der H2-Kante */
  transform: translate(0, -50%) rotate(0deg);
  margin-left: 0.5rem;               /* Abstand zur Headline */
  font-size: 3rem;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;                        /* über dem Hintergrundbild */
  transition: transform .4s ease;
  color: #AFB1B0;
}

/* Slide‑Text, zunächst unsichtbar und unten */
.slide-text {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 50%;
  padding: 1rem 3%;
  box-sizing: border-box;
  transform: translateY(100%);
  opacity: 0;
  transition: transform .4s ease, opacity .4s ease;
  background: transparent;
  pointer-events: none;
  line-height: 1.6;              /* angenehme Zeilenhöhe */
  text-align: justify;           /* Blocksatz */
  hyphens: auto;
}

/* --- State: aktiv (nach Klick) --- */
.header-container.active .corporate-heading {
  transform: translateY(-100%);
  opacity: 0;
}

.header-container.active .toggle-btn {
  transform: translate(0, -50%) rotate(180deg);
}

.header-container.active .slide-text {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}




.corporate-section {
  position: relative;
  flex: 1 1 15%;
  background-color: transparent;
  border-right: 1px solid #fff;
  height: 77%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 0.4s ease-in-out;
  overflow: hidden;
  cursor: pointer;
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.corporate-section:first-child {
  padding-left: 3.7% !important;
}





.section-number {
font-size: 8rem;
color: #ffffff;
font-weight: 100;
opacity: 0.3;
position: absolute;
bottom: 15%;
right: 5%;
font-weight: lighter;
pointer-events: none;
z-index: 1;
transform: rotate(-90deg);
transform-origin: right center;
}


.corporate-section.active {
  flex: 3 1 65%;
  padding: 20px;
  padding-left: none !important;
}

.corporate-section:not(.active) {
  flex: 1 1 10%;
  transition: all 0.4s ease-in-out;
}

.corporate-content {
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.corporate-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  opacity: 0;
  transform: translateX(-100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  height: 100%;
  padding: 20px;
}

/* Wenn der Container vergrößert wurde, passe das Layout an */
.corporate-content.enlarged {
  justify-content: flex-start; /* Inhalt links ausrichten */
}

/* Verstecke den Text und Button */
.corporate-content.enlarged .text-container {
  display: none;
  transform: translateX(-200px);
}

/* Mache das Bild größer und entferne eventuell vorhandene Transformationen */
.corporate-content.enlarged .strategy-image {
  max-width: 85%;         /* Bild füllt max. 85% der Containerbreite */
  max-height: 100%;       /* Höhe nicht überschreiten */
  width: auto;            /* Safari soll Breite proportional berechnen */
  height: auto;           /* Proportionen bleiben */
  object-fit: contain;    /* Verhindert reinzoomen */
  object-position: center;
  transform: none;
  border-radius: 8px;
  z-index: 5;
  position: relative;
  cursor: pointer;
  transition: max-width 0.5s ease, max-height 0.5s ease;
}


.corporate-content .text-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 40%;
  padding: 2%;
  border-radius: 10px;
  transition: opacity 1s ease, transform 1s ease;
  opacity: 1;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  margin-left: -4% !important;
}

/* Headline, description, and button styles */
.corporate-content h3 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  text-align: left;
  padding-right: 18%;
  font-weight: 100;
  color: #fff;
  margin: 0;
  padding-bottom: 6%;
  white-space: nowrap;
}



.corporate-content p {
  font-size: 1.6rem !important;
  color: #adadad !important;
  padding-right: 15%;
  text-align: left;
  margin-bottom: 10px;
  line-height: 1.2
}



/* View More Button */
.corporate-content .view-more {
  margin-top: 12px;
  align-self: flex-end;
  margin-right: 45%;
  padding: 8px 12px;
  background-color: #fff;
  width: 10em;
  color: var(--logo);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

#corporate-messedesign .view-more{
  margin-right: 50%;
}

.corporate-content .view-more:hover {
  background-color: #fff;
}

.corporate-content .view-more:active {
  background-color: #fff;
}


.corporate-content img {
  width: 60%;
  height: auto;
  padding: 0;
  margin: 4%;
  border-radius: 8px;
  object-fit: cover;
  transform: perspective(1000px) rotateY(30deg);
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  background-color: #fff;
}


.corporate-content img.rotate-270 {
transform: perspective(1000px) rotateY(270deg);
transition: transform 0.6s ease;
}

.corporate-content img.reset-rotation {
transform: perspective(1000px) rotateY(0deg);
transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}



.corporate-content img:hover {
  transform: perspective(1000px) rotateY(0deg);
}

.corporate-section.active .corporate-content {
  opacity: 1;
  transform: translateX(0);
}

.corporate-section h2 {
  font-size: 1.8rem;
  color: #fff !important;
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: left center;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  bottom: 30%; /*38%*/
  left: 5em;
}

.down-arrow {
  position: absolute;
  top: 10%;
  left: 80%;
  transform: rotate(-90deg);
  transform-origin: left center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Pulsier-Effekt */
@keyframes pulse {
0%, 100% {
  transform: scale(1);
}
50% {
  transform: scale(1.2);
}
}

.close-button {
animation: pulse 1.5s infinite ease-in-out;
}

/* Hover-Effekt */
.close-button:hover {
transform: scale(1.3) rotate(90deg);
transition: transform 0.3s ease;
}



/* When section is active, hide both h2 and arrow */
.corporate-section.active h2,
.corporate-section.active .down-arrow {
  transform: translateY(-200%);
  opacity: 0;
}


.corporate-section.active .section-number {
transform: translateY(-200%);
opacity: 0;
}



.corporate-section p {
  font-size: 1rem;
  margin-bottom: 10px;
  line-height: 1.6;
  color: #fff !important;
}

.corporate-content img {
  width: 55%;
  height: auto;
  max-height: 100%;
  border-radius: 8px;
  object-fit: contain;
}


/* Specific Corporate Sections */
#corporate-strategy h2 { color: #fff;font-family: 'Abnes';padding-top: 3%;font-weight: 100;word-spacing: 1em;letter-spacing: 0.25em; }
#corporate-branding h2 { color: #fff;font-family: 'Abnes';padding-top: 3%;font-weight: 100;word-spacing: 1em;letter-spacing: 0.25em; }
#corporate-marketing h2 { color: #fff;font-family: 'Abnes';padding-top: 3%;font-weight: 100;word-spacing: 1em;letter-spacing: 0.25em; }
#corporate-planning h2 { color: #fff;font-family: 'Abnes';padding-top: 3%;font-weight: 100;word-spacing: 1em;letter-spacing: 0.25em; }
#corporate-messedesign h2 { color: #fff;font-family: 'Abnes';padding-top: 3%;font-weight: 100;word-spacing: 1em;letter-spacing: 0.25em; }



.strategy-image {
  transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  transform-origin: center center; /* Ensure rotation is around the center */
}



/* Responsive Design */
@media (max-width: 1200px) {
.corporate-section {
    flex: 1 1 20%;
    height: 60%;
}
}

@media (max-width: 900px){
  .container-footer .logo-footer-main{
    display: none;
  }
}


@media (max-width: 485px) {
  .corporate-section.active {
    max-height: 100vh;
    overflow: hidden;
  }
}


@media (max-width: 768px) and (min-width: 486px) {
  .corporate-section.active {
    max-height: 115vh;
    overflow: hidden;
  }
}

@media (max-width: 900px) and (min-width: 769px) {
  .corporate-section.active {
    max-height: 130vh;
    overflow: hidden;
  }
}


/*Header Container*/

@media (max-width: 1167px) {
  .toggle-btn {
    display: none !important;
  }

  .header-container {
    flex-direction: column;      /* Stapeln statt nebeneinander */
    align-items: center;         /* zentriert */
    justify-content: flex-start; /* oben beginnen */
    height: auto;                /* Höhe wieder automatisch */
    padding: 2rem 3%;            /* optional etwas mehr Luft */
  }

  .header-container::before {
    position: relative;
    inset: auto;
    width: 105%;
    aspect-ratio: 16/9;     /* Höhe automatisch im 16:9‑Verhältnis */
    margin: 1.5rem 0;       /* Abstand über/unter dem Bild */
    transform: none;
    background-size: cover;
    background-position: center;
    transform: translateX(-3%);
    z-index: 0;
  }

  /* Damit der Text immer über dem Bild bleibt: */
  .corporate-heading {
    position: relative;
    z-index: 1;
    text-align: left;
    align-self: flex-start;
    /* 3.7% Abstand vom Viewport‑Rand (bzw. Container‑Rand) */
    margin-left: 2.5%;
    text-align: left;         /* noch mal sicherstellen */
    /* ggf. Breiten‑Angaben zurücksetzen: */
    flex-basis: auto;
    width: auto;
  }
  

  .slide-text {
    position: relative;        /* im normalen Flow */
    transform: none !important;/* keine Verschiebung */
    opacity: 1 !important;     /* immer sichtbar */
    max-height: none;          /* keine Höhenbegrenzung */
    overflow: visible;         /* kein Scrollen */
    margin-top: 1rem;
    bottom: auto;
    left: auto;
    width: 100%;
    background: transparent;    /* falls du keinen weißen Hintergrund willst */
    box-shadow: none;          /* Schatten entfernen */
    padding: 0;
    padding-right: 10%;
  }

  .slide-text p {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    line-height: 1.6;
    margin-left: 3.7%;
  }
}





/* Smaller screen adjustments */
@media (max-width: 900px) {
  .corporate-wrapper {
      flex-direction: column;
      height: auto;
  }

  @media (max-width: 900px) {
    .corporate-section:not(.active) {
      max-height: 200px;
      overflow: hidden;
    }
  }

  .corporate-section > * {
    margin-left: -3% !important;
  }
  

  .corporate-section {
      flex: 1 1 50%;
      height: auto;
      border-right: none;
      margin-bottom: 10px;
      border-top: 1px solid #fff;
  }

  .corporate-section.active .corporate-content {
    margin-bottom: 0% !important;
}

  .corporate-section:not(.active) {
    flex: 1 1 10%;
}

@media (max-width: 900px) {
  .corporate-section h2 {
    transform: rotate(0deg);
    margin-left: 8% !important;
    top: 10% !important;
    left: auto;
    text-align: right;
  }
  .corporate-section:first-child h2 {
    margin-left: 4% !important;
}

}

.section-number {
  font-size: 8rem;
  color: #ffffff;
  font-weight: 100;
  opacity: 0.3;
  position: absolute;
  bottom: 15%;
  right: 5%;
  font-weight: lighter;
  pointer-events: none;
  z-index: 1;
  margin-bottom: 3% !important;
  transform: rotate(-90deg);
  transform-origin: right center;
  }
  


  .down-arrow {
      display: none;
  }

  .corporate-section:first-child {
      padding-top: 10%;
      border: none;
  }

  .corporate-content {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
  }
  .corporate-content .text-container {
      width: 100%;
      padding: 10px 5%;
      text-align: center;
      margin-bottom: 5px;
      line-height: 1.6;
      text-align: justify;
      hyphens: auto;
  }

  .corporate-content h3 {
      text-align: left;
      padding: 0 10px;
      margin-bottom: 15px;
  }

  .corporate-content p {
      text-align: left;
      margin: 0;
      padding: 0 10px;
      padding-bottom: 20px;
  }

  .corporate-content .view-more {
      margin: 0 auto;
      display: inline-block;
  }

  .corporate-content img {
      width: 75%;
      margin: 10px auto 0;
      margin-bottom: 20px;
  }

  .corporate-section.active .corporate-content {
      gap: 5px;
      padding: 10px;
      justify-content: flex-start;
  }

  .corporate-section.active .text-container {
      margin-bottom: 0;
      padding: 5px;
      text-align: center;
      padding-bottom: 30px;
      line-height: 1.6;
      text-align: justify;
      hyphens: auto;
  }

  .corporate-section.active img {
      margin-top: 5px;
  }
}


@media (max-width: 480px) {
  .corporate-content .strategy-image {
    width: 95%;
    height: auto;
    max-height: 100%;
    border-radius: 8px;
    object-fit: contain;
  }
}

.image-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

/* Zeige Navigation nur bei enlarged Modus */
.corporate-content.enlarged .image-navigation {
    opacity: 1;
    pointer-events: auto;
}

/* Pfeil-Buttons Styling */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 2.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    pointer-events: auto;
    z-index: 11;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.nav-arrow:hover {
    color: #fff;
    transform: translateY(-50%) scale(1.2);
}

.nav-arrow:active {
    transform: translateY(-50%) scale(1.1);
}

/* Positionierung der Pfeile */
.nav-arrow-left {
    left: -15px;
}

.nav-arrow-right {
    right: 30px;
}

/* Responsive Anpassungen für Mobile */
@media (max-width: 768px) {
    .nav-arrow {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .nav-arrow-left {
        left: -20px;
    }
    
    .nav-arrow-right {
        right: -20px;
    }
}

@media (max-width: 480px) {
    .nav-arrow-left {
        left: 5px;
    }
    
    .nav-arrow-right {
        right: 5px;
    }
}