/* Base styles for banners */
.banner-relaxed {
  width: 120vw;
  font-size: clamp(2rem, 4vw, 4rem);
  color: #fff;
  position: absolute;
  top: clamp(120rem, 180rem, 200rem);
  left: -10vw;
  width: clamp(120vw, 150vw, 180vw);
  max-height: clamp(150px, 20vh, 200px);
  font-family: 'Apexbrush';
  transform-origin: top left;
  transform: rotate(-12deg);
  z-index: 1000;
  pointer-events: none;
  min-width: 1500px !important;
}

.banner-intoaction {
  width: 120vw;
  min-width: 1500px !important;

  font-size: clamp(2rem, 4vw, 4rem);
  color: #fff;
  position: absolute;
  top: clamp(180rem, 250rem, 280rem);
  left: -10vw;
  width: clamp(140vw, 180vw, 200vw);
  max-height: clamp(150px, 20vh, 200px);
  font-family: 'Apexbrush';
  transform-origin: top left;
  transform: rotate(8deg);
  z-index: 1000;
  pointer-events: none;
}

.banner-gray-second {
  position: relative;
  top: 10rem;
  left: -30vw;
  width: 140vw;
  /* Breite wie gewünscht */
  height: 100px;
  /* Höhe wie gewünscht */
  background: #212121;
  transform-origin: top right;
  transform: rotate(10deg);
  /* Rotation des Banners */
  z-index: 1000;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* Damit Text nicht abgeschnitten wird */
}

.banner-gray-second ul {

  list-style: none;
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  /* große Schrift */
  text-align: center;
  white-space: nowrap;
  /* keine Zeilenumbrüche */

  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
  pointer-events: auto;
}

.banner-white-second {
  position: relative;
  top: 10rem;

  left: -10vw;
  /* horizontale Position */
  width: 200vw;
  /* Breite wie gewünscht */
  height: 100px;
  /* Höhe wie gewünscht */
  background: #ffffff;
  transform-origin: top left;
  transform: rotate(-7deg);
  z-index: 1001;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: visible;
}

.banner-white-second ul {

  list-style: none;
  padding-left: 20vw;
  margin: 0;
  color: black;
  font-family: 'Gilroy', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  /* große Schrift */
  text-align: center;
  white-space: nowrap;
  /* keine Zeilenumbrüche */

  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
  pointer-events: auto;
  align-items: center;
}

/* Large screens (above 1200px) */
@media (max-width: 1200px) {
  .banner-relaxed {
    font-size: 3rem;
    top: 200rem;
    width: 160vw;
    max-height: 220px;
  }

  .banner-intoaction {
    font-size: 3rem;
    top: 270rem;
    width: 190vw;
    max-height: 220px;
  }
}

@media (max-width: 1000px) {
  .banner-relaxed {
    font-size: 2.75rem;
    top: 200rem;
    width: 160vw;
    max-height: 220px;
  }

  .banner-intoaction {
    font-size: 2.75rem;
    top: 270rem;
    width: 190vw;
    max-height: 220px;
  }
}

@media (max-width: 734px) {
  .banner-relaxed {
    font-size: 2.5rem;
    top: 200rem;
    width: 160vw;
    max-height: 220px;
  }

  .banner-intoaction {
    font-size: 2.5rem;
    top: 270rem;
    width: 190vw;
    max-height: 220px;
  }
}

@media (max-width: 600px) {
  .banner-relaxed {
    font-size: 2rem;
    top: 200rem;
    width: 160vw;
    max-height: 220px;
  }

  .banner-intoaction {
    font-size: 2rem;
    top: 270rem;
    width: 190vw;
    max-height: 220px;
  }
}



/* Base Desktop Styles */
.huge-exclemation-right {
  font-size: 12rem !important;
  text-align: right !important;
  padding-top: 2rem;
  padding-right: 2rem;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  display: block;
}

.huge-exclemation-center {
  font-size: 12rem !important;
  text-align: center !important;
  padding-top: 2rem;
  padding-left: 0 !important;
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  display: block;
}

/* Tablet Styles (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
  .huge-exclemation-right {
    font-size: 10rem !important;

    padding-top: 1.5rem;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
  }

  .huge-exclemation-center {
    font-size: 10rem !important;
    padding-top: 1.5rem;
  }
}

/* Mobile Styles (320px - 767px) */
@media (max-width: 767px) {
  .huge-exclemation-right {
    font-size: 6rem !important;
    text-align: center !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    text-align: center !important;
    padding-top: 1rem;
  }

  .huge-exclemation-center {
    font-size: 6rem !important;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #about-banner {
    margin-bottom: 10rem;
  }
}

/* Small Mobile Styles (320px - 480px) */
@media (max-width: 480px) {
  .huge-exclemation-right {
    font-size: 4.5rem !important;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
  }

  .huge-exclemation-center {
    font-size: 4.5rem !important;
    padding-top: 0.5rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Large Desktop Styles (1200px+) */
@media (min-width: 1200px) {
  .huge-exclemation-right {
    font-size: 14rem !important;
    padding-right: 3rem;
    padding-top: 3rem;
  }

  .huge-exclemation-center {
    font-size: 14rem !important;
    padding-top: 3rem;
  }
}




.banner-gray-third {
  position: relative;

  left: -30vw;
  width: 140vw;
  /* Breite wie gewünscht */
  height: 100px;
  /* Höhe wie gewünscht */
  background: #333333;
  transform-origin: top right;
  transform: rotate(5deg);
  /* Rotation des Banners */
  z-index: 1000;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  /* Damit Text nicht abgeschnitten wird */
}

.banner-gray-third ul {

  list-style: none;
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'Gilroy', sans-serif;
  font-weight: 700;
  font-size: 3rem;
  /* große Schrift */
  text-align: center;
  white-space: nowrap;
  /* keine Zeilenumbrüche */

  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
  pointer-events: auto;
}

.banner-white-third {
  position: relative;


  left: -10vw;
  /* horizontale Position */
  width: 200vw;
  /* Breite wie gewünscht */
  height: 100px;
  /* Höhe wie gewünscht */
  background: #ffffff;
  transform-origin: top left;
  transform: rotate(-7deg);
  z-index: 1001;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: left;
  overflow: visible;
}

.banner-white-third ul {

  list-style: none;
  padding-left: 20vw;
  margin: 0;
  color: black;
  font-family: 'Gilroy', sans-serif;
  font-weight: 900;
  font-size: 2.5rem;
  /* große Schrift */
  text-align: center;
  white-space: nowrap;
  /* keine Zeilenumbrüche */

  display: flex;
  gap: 1em;
  flex-wrap: nowrap;
  pointer-events: auto;
  align-items: center;
}