body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: #161618;
  color: #fff;
}

/* Layout */
.about-hero-centered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5vw;
  max-width: 78vw;
  margin: 0 auto 1vw auto;
  padding: 6vw 2vw;
}
.about-hero-content {
  flex: 1 1 36vw;
  min-width: 21vw;
}
.about-hero-centered h1 {
  color: #ffe761;
  font-weight: 900;
  margin-bottom: 1.2vw;
  letter-spacing: -0.03em;
  line-height: 1.07;
}
.about-hero-centered p {
  color: #fff;
  font-size: 1.1vw;
  line-height: 1.75;
  font-weight: 400;
  margin: 0 0 2vw 0;
}

.accent-cyan {
  color: #4bf1f7;
  font-weight: 700;
  font-size: 1.1vw;
}

.highlight-flex {
  color: #4bf1f7;
  font-weight: 700;
  background: #202c3044;
  padding: 0 0.6vw;
  border-radius: .8vw;
  margin-right: 0.6vw;
}

/* Bild */
.about-hero-img-container {
  flex: 1 1 47vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.about-hero-img-large {
  width: 38vw;
  height: 27vw;
  border-radius: 2.2vw;
  object-fit: cover;
  background: #bbb;
  box-shadow: 0 0.2vw 3vw #4bf1f7a2;
  transition: transform 0.18s, border-color 0.18s;
  margin-left: 4vw;
  /* Kein cursor:pointer und kein onclick */
}

.highlight-videografie {
  background: linear-gradient(90deg, #fff79a 0%, #ffe761 100%);
  color: #232323;
  font-weight: 700;
  font-size: 1.2vw;
  border-radius: 0.6vw;
  padding: 0.2vw 1vw;
  box-shadow: 0 0.3vw 0.9vw #ffe76110 inset;
  letter-spacing: -0.01em;
  transition: background 0.17s;
}

.about-hero-centered h1 {
  color: #ffe761;
  font-size: 3.5vw;
  font-weight: 900;
  margin-bottom: 3.2vw;
  letter-spacing: 0.02em;
  line-height: 1.07;
  text-shadow: 0 0.5vw 2vw #fff68514;
}

/* --- MOBILE --- */
@media (orientation: portrait) {
  .about-hero-centered {
    flex-direction: column;
    align-items: center;
    gap: 3.5vw;
    padding: 7vw 2vw 7vw 2vw;
    max-width: 98vw;
  }
  .about-hero-content,
  .about-hero-centered h1 {
    text-align: center;
    align-items: center;
    margin-bottom:4vw;
  }
  .about-hero-img-container {
    width: 100%;
    justify-content: center;
    order: 2;
    margin-left: 0;
    margin-bottom:4vw;
  }
  .about-hero-content {
    order: 1;
    max-width: 98vw;
  }
  .about-hero-img-large {
    width: 90vw;
    height: 50vw;
    border-radius: 2vw;
    margin-left: 0;
    margin-right: 0;
  }
  .about-hero-centered h1 { font-size: 6vw; margin-bottom: 7vw; }
  .about-hero-centered p, .about-hero-content p , .highlight-videografie, .accent-cyan{ font-size: 2.9vw; }
}


/* ab hier beginnt unsere kunden css code */


.about-customers {
  margin: 0 auto 0 auto;
  max-width: 78vw;
  border-radius: 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top:8vw;
  overflow: hidden;
}

.about-customers h2 {
  padding-bottom:5vw;
  color: #ffe761;
  font-size: 3.8vw;
  font-weight: 800;
  margin-bottom: 2.7vw;
  letter-spacing: -0.01em;
  text-align: center;
  text-shadow: 0 0.5vw 2vw #ffe76122;
}

/* Banner Wrap: versteckt Overflow */
.customer-banner-wrap {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 1vw 0;
  /* Keine Scrollbar */
  background: black;
  border-radius:2vw;
  margin-bottom:10vw;
}

/* Die eigentliche Bannerzeile */
.customer-banner {
  display: flex;
  flex-direction: row;
  gap: 3vw;
  align-items: center;
  animation: banner-slide 15s linear infinite;
  will-change: transform;
}

/* Banner Animation */
@keyframes banner-slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Logos */
.customer-logos img {
  width:auto;
  height:5vw;
  object-fit: contain;
  border-radius: 1vw;
  padding: 0;
  background: none;
  filter: grayscale(0.08) brightness(1.12);
  transition: transform 0.18s, filter 0.18s;
  box-shadow: none;
}
@media (orientation: portrait) {
  .about-customers {
    max-width: 99vw;
    border-radius: 3vw;
    padding: 6vw 1vw 7vw 1vw;
  }
  .about-customers h2 {
    font-size: 6vw;
    margin-bottom: 7vw;
    padding-bottom: 0;
  }
  .customer-banner-wrap {
    width: 90vw;
    min-height: 32vw;          /* Höher für größere Logos */
    padding: 3vw 0 3vw 0;
    overflow-x: auto;
    scrollbar-width: none;
    border-radius: 3vw;
    margin-bottom: 8vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-left:2vw;
    margin-right:2vw;
  }
  .customer-logos img {
    height: 15vw !important;    /* Deutlich größer! */
    max-width: 36vw !important;
    min-width: 17vw !important;
    margin: 0 2vw 0 0;         /* etwas Luft */
    border-radius: 3vw;
    box-shadow: none;
  }
}



/* ab hier beginnt der teil für behind the scenes */

.about-bts-simple {
  max-width: 78vw;
  margin: 8vw auto 0 auto;
  padding: 3vw 2vw 5vw 2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-bts-simple h2 {
  color: #ffe761;
  font-size: 3.8vw;
  font-weight: 900;
  margin-bottom: 1vw;
  text-align: center;
  text-shadow: 0 0.5vw 2vw #ffe76122;
  letter-spacing: -0.01em;
}

.about-bts-simple p {
  color: #fff;
  font-size: 1.5vw;
  font-weight: 400;
  margin-bottom: 3vw;
  text-align: center;
  max-width: 50vw;
  line-height: 1.6;
}

/* Bild-Galerie */
.about-bts-gallery-simple {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2vw;
  width: 100%;
  margin-bottom: 2.8vw;
}

.about-bts-gallery-simple img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 1.4vw;
  box-shadow: 0 0.7vw 2vw #4bf1f743;
  transition: transform 0.16s, box-shadow 0.18s;
  cursor: pointer;
  background: #222;
  border: 0;
}

.about-bts-gallery-simple img:hover {
  transform: scale(1.045);
  box-shadow: 0 1vw 3vw #ffe76126, 0 0.4vw 2vw #4bf1f7a6;
}

/* Info-Pills (hellblau) */
.about-tags-simple {
  margin-top: 1vw;
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
  justify-content: center;
}

.about-tags-simple span {
  color: #18181b;
  background: #4bf1f7;
  font-size: 1.1vw;
  font-weight: 700;
  border-radius: 1vw;
  padding: 0.5vw 2.3vw 0.44vw 2.3vw;
  box-shadow: 0 1px 11px #4bf1f731;
  letter-spacing: 0.02em;
  margin-bottom: 0.6vw;
  display: flex;
  align-items: center;
  gap: 1vw;
}

/* Optional: Emojis in den Info-Pills */
.about-tags-simple span[data-icon="kamera"]::before {
  content: "🎥 ";
}
.about-tags-simple span[data-icon="hands"]::before {
  content: "🤝 ";
}
.about-tags-simple span[data-icon="emotion"]::before {
  content: "✨ ";
}

/* MODAL */
.bts-modal {
  display: none;
  position: fixed;
  z-index: 1001;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(16,19,22, 0.93);
  align-items: center;
  justify-content: center;
}
.bts-modal.open {
  display: flex;
  animation: modalFadeIn 0.17s;
}
.bts-modal img {
  max-width: 98vw;
  max-height: 91vh;
  width: 55vw;
  border-radius: 1.7vw;
  box-shadow: 0 6px 60px #4bf1f7a2;
  background: #bbb;
  display: block;
}
.modal-close {
  position: fixed;
  top: 2vw;
  right: 2vw;
  color: #ffe761;
  background: #23272b;
  font-size: 2.8vw;
  font-weight: 900;
  border-radius: 10vw;
  padding: 0.19em 0.19em;
  height: 3.5vw;
  width: 3.5vw;
  min-width: 2.3rem;
  min-height: 2.3rem;
  max-width: 4vw;
  max-height: 4vw;
  cursor: pointer;
  z-index: 1002;
  box-shadow: 0 0.2vw 1vw #4bf1f70c;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.14s, box-shadow 0.18s;
}
.modal-close:hover {
  background: #ffe761;
  color: #23272b;
  box-shadow: 0 0.3vw 1vw #ffe76133;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (orientation: portrait) {
  .about-bts-simple {
    max-width: 99vw;
    padding: 7vw 1vw 8vw 1vw;
    border-radius: 3vw;
    margin-bottom:25vw;
  }
  .about-bts-simple h2 {
    font-size: 6vw;
    margin-bottom: 3vw;
  }
  .about-bts-simple p {
    font-size: 4vw;
    max-width: 96vw;
    margin-bottom: 7vw;
  }
  /* Galerie: 2 Spalten, mehrere Reihen, Abstand kompakter */
  .about-bts-gallery-simple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw 0; /* vertikal horizontal */
    width: 98vw;
    max-width: 99vw;
    margin-bottom: 3vw;
    justify-content: center;
    align-items: center;
    padding: 0;
    overflow: visible;
    margin-left:5vw;
  }
  .about-bts-gallery-simple img {
    width: 100%;
    max-width: 44vw;
    aspect-ratio: 4/3;
    border-radius: 2.5vw;
    margin: 0;
    object-fit: cover;
  }
  /* Badges/Tags kompakter */
  .about-tags-simple {
    gap: 1.2vw;
    margin-top: 2vw;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  .about-tags-simple span {
    font-size: 2.8vw;
    border-radius: 2vw;
    padding: 0.7vw 2vw;
    margin-bottom: 0;
    gap: 0.8vw;
    min-width: unset;
    white-space: nowrap;
  }
  /* Modal Bild & Close Button */
  .bts-modal img {
    width: 92vw;
    max-height: 56vh;
    border-radius: 3vw;
  }
  .modal-close {
    top: 10vw;
    right: 6vw;
    font-size: 15vw;
    border-radius: 50vw;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/*hier beginnen die Meilensteine */


.timeline-section {
  width: 100%;
  max-width: 65vw;
  margin: 0 auto;
  padding-top: 6vw;
  padding-bottom: 2vw;
}

.timeline-section h2 {
  color: #ffe761;
  font-size: 3.5vw;
  font-weight: 900;
  text-align: center;
  margin-bottom: 5vw;
  text-shadow: 0 1vw 3vw #ffe76144;
}

.timeline-vertical {
  position: relative;
  margin: 0 auto;
  padding: 0;
  min-height: 60vw;
}

.timeline-vertical::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 0.6vw;
  background: linear-gradient(to bottom, #4bf1f7 95%, #4bf1f74a 100%);
  border-radius: 1vw;
  z-index: 1;
  transform: translateX(-50%);
}

.timeline-label {
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
  background: #19191a;
  color: #ffe761;
  font-size: 2.1vw;
  font-weight: 900;
  letter-spacing: 0.11em;
  margin: 4vw 0 2vw 0;
  padding: 0.3vw 2vw 0.3vw 2vw;      /* SCHMALER */
  z-index: 10;
  box-shadow: 0 0.4vw 2vw #ffe76122;
  text-align: center;
  border-radius: 1vw;
  min-width: 9vw;        /* NEU: min-width */
  max-width: 13vw;       /* NEU: max-width */
}

.milestone-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin: 0;
  position: relative;
  min-height: 7vw;
  margin-bottom: 2vw;
}

.milestone-row.right {
  flex-direction: row;
}

.milestone-row.left {
  flex-direction: row-reverse;
}

.milestone-box {
  background: #18191b;
  color: #fff;
  border-radius: 1vw;
  box-shadow: 0 2px 5vw #4bf1f731, 0 0.5vw 2vw #ffe76120;
  padding: 1vw 2.4vw 0.8vw 2.4vw;
  min-width: 18vw;
  max-width: 30vw;          /* Weit genug entfernt */
  text-align: left;
  font-size: 1.18vw;
  font-weight: 600;
  margin: 2vw 0;
  position: relative;
  z-index: 2;
  word-break: break-word;
  /* weiter von der Timeline wegspringen */
}

.milestone-title {
  font-size: 1.35vw;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.4vw;
}

.milestone-date {
  font-size: 1vw;
  color: #ffe761;
  margin-top: 0.2vw;
  opacity: 0.91;
}

.milestone-point {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  width: 2.2vw;
  height: 2.2vw;
  background: #ffe761;
  border: 0.33vw solid #191a1c;
  border-radius: 50%;
  box-shadow: 0 0 2vw #ffe761cc, 0 0.7vw 2vw #ffe76166;
  display: block;
}

.milestone-row.right .milestone-box {
  margin-left: 2vw;   /* Weiter weg */
  width:22vw;
}

.milestone-row.left .milestone-box {
  margin-right: 2vw;  /* Weiter weg */
  width:22vw;
}

/* MOBILE */
@media (orientation: portrait) {
  .timeline-section { max-width: 98vw; padding-top: 6vw; padding-bottom: 3vw;}
  .timeline-section h2 { font-size: 7vw; margin-bottom: 7vw; }
  .timeline-label { font-size: 6vw; margin: 9vw 0 5vw 0; min-width: 22vw; max-width: 40vw; }
  .timeline-vertical::before { width: 1.7vw; border-radius: 3vw; }
  .milestone-row { min-height: 18vw; margin-bottom: 4vw;}
  .milestone-box {
    font-size: 3.7vw;
    min-width: 38vw;
    max-width: 74vw;
    border-radius: 3vw;
    padding: 2.5vw 4vw;
  }
  .milestone-title { font-size: 4.2vw; }
  .milestone-date { font-size: 3vw; }
  .milestone-point { width: 5vw; height: 5vw; border-width: 1vw; }
  .milestone-row.right .milestone-box { margin-left: 1vw; }
  .milestone-row.left .milestone-box { margin-right: 1vw; }
}