/* BRAND BUILDING */ /* BRAND BUILDING */ /* BRAND BUILDING */
/* BRAND BUILDING */ /* BRAND BUILDING */ /* BRAND BUILDING */
/* BRAND BUILDING */ /* BRAND BUILDING */ /* BRAND BUILDING */
/* BRAND BUILDING */ /* BRAND BUILDING */ /* BRAND BUILDING */
/* BRAND BUILDING */ /* BRAND BUILDING */ /* BRAND BUILDING */

.header-section {
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: visible;
  margin-bottom: 5rem;
}

.section-wrapper {
  
  padding: 4rem 0;
  margin: 0 auto;
  max-width: 1200px;
  overflow: visible;
}

.container {
  padding: 0 clamp(1rem, 5vw, 2rem);
  color: #6b7280;
  margin: 0 auto;
}

.content-wrapper {
  position: relative;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 8px;
  overflow: visible;
}

.customizable {
  grid-column: span 2 / span 2;
   grid-row: span 3 / span 3;
 }
 
 .secure {
    grid-column: span 2 / span 2;
   grid-row: span 3 / span 3;
   grid-column-start: 3;
 }
 
 .faster {
   grid-column: span 2 / span 2;
   grid-row: span 3 / span 3;
   grid-column-start: 5;
 }
 
 .larger {
   grid-column: span 3 / span 3;
   grid-row: span 3 / span 3;
   grid-row-start: 4;
 }
 
 .keep-safe {
   grid-column: span 3 / span 3;
   grid-row: span 2 / span 2;
   grid-column-start: 4;
   grid-row-start: 4;
 }
 
 .branding-cta {
   grid-column: span 3 / span 3;
   grid-column-start: 4;
   grid-row-start: 6;
 }



/* Card Styles */
.card {
  /* Hintergrund & Glas-Effekt */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
 

  /* Rahmen & Schatten */
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.75rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);

  /* Layout */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 400px;
  padding: 2rem;
  position: relative;

  /* Übergänge & Interaktion */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.card::before {
  content: '';
  position: relative;           /* für ::before und absolut positionierte Inhalte */
  overflow: hidden;  
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, 
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 40%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(255, 255, 255, 0.1) 100%
  );
  opacity: 1;
  z-index: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.75rem;
  pointer-events: none;
}

.card:hover {
  box-shadow: 
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.card:hover::before {
  background: linear-gradient(315deg, 
    rgb(255, 255, 255) 0%,
    rgb(224, 224, 224) 50%,
    rgba(155, 155, 155, 0.3) 100%
  );
}




 
  .card-content {
    position: absolute;           /* statt fixed */
    inset: auto 2rem 2rem 2rem; /* unten innen andocken */
    width: auto;
    height: auto;
  z-index: 2;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Dosis', sans-serif;
  align-items: flex-end;
}

.card-content .title {
  z-index: 2;
  font-family: 'Nippo', sans-serif;
  font-size: clamp(2rem, 2.5rem, var(--max-desktop-font));
  font-weight: 800;
  width: 100%;
  color: #ffffff;
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}


.card-content .description {
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(0.75rem, 1.25rem, var(--max-desktop-font));
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  
}

.card:hover .title,
.card:hover .description {
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}





/* Individuelle Hintergrundbilder und Farben für jede Card */
.card.customizable {
  background-image: url('../images/branding.png');
  background-color: rgba( 0, 0, 0, 0.55 );
}

.card.secure {
  background-image: url('../images/communication.png');
  background-color: rgba(107, 114, 128, 0.2);
}

.card.faster {
  background-image: url('../images/strategy.png');
  background-color: rgba(63, 45, 225, 0.1);
}

.card.larger {
  background-image: url('../images/content.png');
  background-color: rgba(177, 15, 15, 0.4);
}

.card.keep-safe {
  background-image: url('../images/campaings.png');
  background-color: rgba(255, 255, 255, 0.3);
}

/* Bild füllt den Bereich komplett */
.card img {
  flex: 0 0 auto;
  object-fit: cover;
}

/* Button Styles */
.card-cta,
.branding-cta,
.shiny-cta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Card Text Colors für Light/Night Mode */
.card .title,
.card .description {
  color: #ffffff;
  transition: color 0.3s ease;
}





/* Verbesserte Responsive Breakpoints */
@media screen and (max-width: 768px) {
/* Seite selbst niemals horizontal scrollen */
html, body { overflow-x: hidden; }

.grid-layout::-webkit-scrollbar {
  display: none; /* Scrollbar ausblenden */
}

/* Card-Scroller */

  .container {
    padding: 2rem 0 0 0;
    margin: 0 auto;
    max-width: 100%!important;
  }

  .grid-layout{
    display: flex;
    flex-flow: row nowrap;
    gap: 16px;
    
    padding: 1rem calc(env(safe-area-inset-right,0) + 12px)
             1rem calc(env(safe-area-inset-left,0) + 12px);

    scroll-padding-left: calc(env(safe-area-inset-left,0) + 12px); /* Start bündig */
    scroll-padding-right: 0; /* Ende bündig */

    overflow-x: auto;            /* HIER wird geswiped */
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* verhindert „Mitziehen“ der Seite */
    touch-action: pan-x;              /* Fingerwisch nach links/rechts */
  }

  /* Grid-Positionen neutralisieren, weil jetzt Flex */
  .customizable,.secure,.faster,.larger,.keep-safe,.branding-cta{
    grid-column: auto !important;
    grid-row: auto !important;
    grid-column-start: auto !important;
    grid-row-start: auto !important;
  }

  /* jede Card als „Slide“ */
  .card{
    flex: 0 0 100vw;             /* sichtbare Breite; adjust: 70–90vw */
    max-width: 90vw;           /* optionales Cap */
    height: 70vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;                  /* Abstand kommt über gap */
    position: relative;         /* wichtig für ::before */
    overflow: hidden;
  }

 

  /* Inhalt nicht fixed! */
  .card-content{
    
    z-index: 2;
    position: absolute;           /* statt fixed */
    inset: auto 2rem 2rem 2rem; /* unten innen andocken */
    width: auto;
    height: auto;
  z-index: 2;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: clamp(3.25rem, 6vw, 4rem);

  }

  /* lange Headlines umbrechen */
  .card-content .title{
    white-space: normal;
    font-size: clamp(3.25rem, 6vw, 4rem);
  }


/* iOS: Scrollbar ausblenden (optional) */
.grid-layout::-webkit-scrollbar{ display:none; }


  .header-group {
      margin-bottom: 0.5rem;
  }

  .title {
      font-size: 1.25rem;
  }

  .description {
      font-size: 0.9rem;
      margin-bottom: 1rem;
  }

  .card-cta {
      padding: 0.5rem 1rem;
      font-size: 0.8rem;
  }
}
  


@media screen and (max-width:720px) { 
  header {
      margin-bottom: 3rem;
  }
  
  .heading {
      margin: 3rem 0;
  }
}
@media screen and (max-width: 480px) {
  .section-wrapper {
      padding: 2rem 0;
  }

  .container {
      padding: 0 1rem;
  }

  .card {
      padding: 1rem;
  }

  .toggle-group {
      gap: 0.5rem;
  }

  .header-top .top-container {
      padding: 10px;
  }

  .logo {
      height: 40px;
  }
}





/* GRID GALLERY */ /* GRID GALLERY */ /* GRID GALLERY */ /* GRID GALLERY */
/* GRID GALLERY */ /* GRID GALLERY */ /* GRID GALLERY */ /* GRID GALLERY */
/* GRID GALLERY */ /* GRID GALLERY */ /* GRID GALLERY */ /* GRID GALLERY */ 
.noscroll {
  height: 100vh!important;
  width: 100%!important;
}

.intro {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: skewY(var(--angle));
}

.grid {
  flex: none;
  position: relative;
  width: 200vw;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  grid-template-columns: 100%;
  transform-origin: center center;
}

.row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  will-change: transform, filter;
}

.row__item {
  position: relative;
  padding: 0.5rem;
}

.row__item-inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.row__item-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  top: 0;
  left: 0;
}




/* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */
/* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */
/* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */
/* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */ /* Creative Problem Solving */


.cps-card {
  position: sticky;
  top: 40%;               /* Statt top: 0; */
  transform: translateY(-40%); /* Damit die Cards exakt zentriert sind */
  
}

.cps-card__inner {
  will-change: transform;
  background: white;
  border-radius: 14px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px hsla(265.3, 20%, 10%, 35%);
  transform-origin: center top;
  min-height: 450px;
  max-height: max-content;
}

.cps-cards {
  width: 100%;
  max-width: 80vw;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(var(--cards-count), var(--card-height));
  gap: 40px 0;
}

.cps-card__image-container {
  display: flex;
  width: 40%;
  flex-shrink: 0;
}

.cps-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 1;
}

.cps-card__content {
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
}

.cps-card__title {
  padding: 0;
  margin: 0;
  font-size: clamp(2rem, 2.5rem, var(--max-desktop-font));

  font-weight: 600;
  color: #16263a;
}

.cps-card__description {
  line-height: 1.4;
  font-size: 24px;
  color: #16263a;
}

@media (max-width: 600px) {
  .cps-card__inner {
    flex-direction: column;
  }

  .cps-card__image-container {
    width: 100%;
  }

  .cps-card__image {
    aspect-ratio: 16 / 9;
  }

  .cps-card__title {
    font-size: 32px;
  }

  .cps-card__description {
    font-size: 16px;
  }

  .cps-card__content {
    padding: 30px 20px;
  }
}


/* Stay tuned */ /* Stay tuned */ /* Stay tuned */ /* Stay tuned */ /* Stay tuned */ /* Stay tuned */
.c-u {
  display: block;
  margin-top: 20vh;
  margin-bottom: -10rem;
}

.c-u h4 {
  font-size: clamp(8px, 4vw, var(--max-desktop-font));
  font-weight: 300;
  color: hsl(0 0% 90%);
  text-align: center;
  white-space: nowrap;
  mix-blend-mode: difference;
  margin: 0 auto;
}

.no-blend {
  
    all: unset; /* Reset alle vererbten Styles */
    mix-blend-mode: normal!important; /* Hebt 'multiply' auf */
    background: none!important;
    color: inherit!important;
    -webkit-background-clip: unset!important;
    background-clip: unset!important;;
  
}