:root {
  --z-index-header-footer: 9999;

  --font-family-main: 'Poppins', sans-serif;

  --font-size-body: 2vw;
  --font-size-small: 1.2vw;
  --font-size-large: 2.4vw;
  --font-size-opening-heading: 4vw;

  --bg-color: #000;
  --text-color: #fff;
  --petrol-color: #004d4d;
  --bg-SwiperSlide: linear-gradient(108.1deg, rgba(220,245,250,1) 11.2%, rgba(245,255,255,1) 88.9%);


}

/* Fix für alle Boxen */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Grundlayout */
html, body {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-family-main);
  background: var(--bg-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* verhindert horizontales Scrollen */
  overflow-y: hidden; /* verhindert horizontales Scrollen */

}


/* Main Content */
.main-content {
  margin-top: 0.5rem; /* Steuerbarer Abstand */
  flex: 1 1 auto;
  overflow: hidden;
}

/* Swiper */
.swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.swiper-slide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(7, auto);
  gap: 1rem;
  padding: 0;
  background-image:var(--bg-SwiperSlide);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

/* Container mit voller Breite innerhalb des Grids */
.full-width {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

/* Container mit voller Höhe innerhalb des Grids */
.full-height {
  grid-row: 1 / 8;     /* Zeilenhöhe auf volle 100% (7 Reihen hier, oder anpassen) */
  display: flex;
  align-items: center;  /* Für vertikale Ausrichtung */
  justify-content: center; /* Für horizontale Ausrichtung */
  height: 100%; /* Nimmt die gesamte Höhe des Slides ein */
}

/* Inhalte je nach Slide-Position */
  /* Container-Basisfarben */
    .container-1 { grid-row: 1;  }
    .container-2 { grid-row: 2;  }
    .container-3 { grid-row: 3;  }
    .container-4 { grid-row: 4;  }
    .container-5 { grid-row: 5;  }

    /* Slide-spezifische Abstände */
    .container-2.s1 { margin-bottom: 2vw; }
    .container-2.s2 { margin-bottom: 0.5vw; }
    .container-2.s3 { margin-bottom: 0.5w; }
    .container-2.s4 { margin-bottom: 0.5vw; }
    .container-1.s6 { margin-top: 10vw; }


    .container-3.s1 { margin-bottom: 1vw; }
    .container-3.s2 { margin-bottom: 2vw; }
    .container-3.s3 { margin-bottom: 3vw; }

    .container-4.s1 { margin-bottom: 2vw; }
    .container-4.s2 { margin-bottom: 1vw; }
    .container-4.s3 { margin-bottom: 2vw; }

/*********************************/

.width-1-3 {
      flex: 3; /* 1 von 4 Teilen */
      display: flex;
      align-items: center;
      font-size: 1.3rem;
      font-weight: bold;
      justify-content: center;   /* horizontal zentriert */
      align-items: center;       /* vertikal zentriert */


    }

    .width-3-4 {
      flex: 1; /* 3 von 4 Teilen */
      display: flex;
    
      justify-content: center;   /* horizontal zentriert */
      align-items: center;       /* vertikal zentriert */
    }
/*   IMAGE IM CONTAINER-1*/
    .width-3-4 img {
      height: 100px; /* oder z.B. max-height: 100% für flexible Höhe */
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    }








.slide-image-S1 {
 width: 100%;
  height: 100%;
  object-fit: cover;     /* Deckt Slide komplett ab */
  object-position: center;
  display: block;
}