/* ============================= */
/* ✅ ABOUT SECTION */
/* ============================= */

#about-content, #team-container, #studio-gallery {
  max-width: 90%;        /* 100% - (2 × 20%) = 60% */
  margin: 0 auto;        /* Zentriert den Container */
  text-align: justify;   /* Optional: Text ausrichten */
  padding: 20px;
  background: transparent;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.2);
  margin: auto;
}

/* 📍 Zentrierung für den gesamten "Über uns"-Bereich */
/* ✅ ABOUT CONTAINER */
#about-content {
  max-width: 90%;                      /* Gleiche Breite wie Team-Container */
  margin: 20px auto;                   /* Zentriert + Abstand */
  padding: 20px;                       /* Innenabstand reduziert */
  background: rgba(18, 18, 18, 0.95);  /* Dunkler Hintergrund */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.3); /* Leichter Schatten */
  text-align: center;                  /* Text + Logo zentrieren */
  display: flex;
  flex-direction: column;              /* Logo + Text untereinander */
  align-items: center;                 /* Alles in der Mitte */
}

/* 🗂️ Logo-Container – wie eine Team-Card */
#logo-card {
  background: rgba(41, 41, 41, 0.9);       /* Gleicher Hintergrund */
  border-radius: 10px 10px 0 0;            /* Nur oben abgerundet */
  padding: 15px 0;                         /* Nur oben/unten Padding */
  text-align: center;                      /* Inhalt zentrieren */
  box-shadow: 0 4px 8px rgba(192, 192, 192, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 100%;                          /* Gleiche maximale Breite */
  width: 100%;                             /* Volle Breite des Eltern-Containers */
  margin: 5px auto 0;   /* 🔽 Abstand nach oben verringert */
  box-sizing: border-box;                  /* Padding wird in die Breite einbezogen */
}

/* 🖼️ Logo */
#about-logo {
  margin-top: 10px;
  display: block;
  max-width: 120px;                     /* Logo-Größe */
  height: auto;                         /* Automatische Höhe */
  object-fit: contain;                  /* Verhindert Verzerrung */
  border-radius: 150%;                   /* Rundes Logo */
  border: 3px solid #C0C0C0;            /* Silberner Rand */
  box-shadow: 0 4px 10px rgba(192, 192, 192, 0.5);
  margin: 0 auto;                       /* Zentriert */
  padding-top: 10px;                        /* Leicht nach unten verschieben */
}

/* ✨ Hover-Effekt – wie bei den Team-Mitgliedern */
#about-logo:hover {
  transform: scale(1.05);                               /* Leichtes Vergrößern */
  box-shadow: 0 6px 15px rgba(192, 192, 192, 0.7);      /* Stärkerer Schatten */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Weiche Übergänge */
  cursor: pointer;                                     /* Zeigt an, dass es interaktiv ist */
}

/* ✅ TEXT-BLOCK */
#about-text {
  background: rgba(41, 41, 41, 0.9);
  border-radius: 0 0 10px 10px;         /* Nur unten abgerundet */
  padding: 15px 15px;               /* Gleiches Padding oben & unten */
  text-align: center;
  box-shadow: 0 4px 8px rgba(192, 192, 192, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 600%;
  margin: 0 auto;
  color: #C0C0C0;
  line-height: 1.6;                 /* Einheitlicher Zeilenabstand */
  box-sizing: border-box;           /* Sorgt dafür, dass Padding & Border korrekt gezählt werden */
}

/* Optional für Feintuning */
#about-text:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 15px rgba(192, 192, 192, 0.5);
}



/* ============================= */
/* ✅ TEAM SECTION */
/* ============================= */
#team-container {
  max-width: 80%;        /* 100% - (2 × 20%) = 60% */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.team-member {
  background: rgba(41, 41, 41, 0.9);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(192, 192, 192, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.team-member:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(192, 192, 192, 0.5);
}

.team-member img {
  max-width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #C0C0C0;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

.team-member img:hover {
  transform: scale(1.1);
}

.team-member h3 {
  margin: 10px 0 5px;
  font-size: 1.4em;
  color: #C0C0C0;
  text-shadow: 0 0 8px rgba(192, 192, 192, 0.7);
  transition: text-shadow 0.3s ease;
}

.team-member h3:hover {
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
}

.team-member p {
  color: #AAAAAA;
  font-style: italic;
}

/* ============================= */
/* =✅ POPUP (TEAM) */
/* ============================ */
#team-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background: #1e1e1e;
  color: #E0E0E0;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: none;
  transition: all 0.3s ease;
}

#team-popup h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #C0C0C0;
}

#team-popup p {
  font-size: 14px;
  color: #A0A0A0;
}

.close-team-btn {
  position: absolute;
  top: 10px;  /* Abstand von oben */
  right: 15px; /* Abstand von rechts */
  font-size: 20px;
  cursor: pointer;
  color: white;
  background: none;  /* Kein Hintergrund */
  border: none;
  padding: 5px;
  z-index: 10; /* Stellt sicher, dass er über allem liegt */
}

.close-team-btn:hover {
  color: #FFD700; /* Goldene Farbe beim Hover */
}

/* ============================= */
/* ✅ STUDIO GALLERY (SWIPER) */
/* ============================= */

#studio-gallery {
  box-shadow: none;
}

/* ✅ SWIPER-CONTAINER */
/* 🔹 Polaroid-Galerie bleibt gleich */
/* 🔹 Polaroid-Galerie */
.polaroid-gallery {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 30px 10px;
  margin-top: 40px;
  background: linear-gradient(to top, rgba(243, 243, 243, 0.95), transparent);
}

.polaroid {
  width: 180px;
  height: 230px;
  background-color: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border: 5px solid #fff;
  border-radius: 10px;
  text-align: center;
  transform: rotate(var(--rotation));
  transition: transform 0.5s;
  cursor: pointer;
}

.polaroid img {
  width: 100%;
  height: 80%;
  object-fit: cover;
  border-bottom: 5px solid #fff;
}

.caption {
  font-size: 14px;
  padding: 5px;
  color: #333;
  font-family: 'Courier New', Courier, monospace;
}

.polaroid:hover {
  transform: scale(1.2) rotate(0deg);
  z-index: 10;
}

/* 🔹 Lightbox-Styling */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  transition: opacity 0.5s ease;
  padding: 20px;
  box-sizing: border-box;
}

.lightbox.hidden {
  opacity: 0;
  pointer-events: none;
}

.lightbox-content {
  position: relative;
  max-width: 90%;
  max-height: 80vh; /* Maximal 80% der Bildschirmhöhe */
  text-align: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 70vh;
  border: 5px solid #fff;
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}

.lightbox img:hover {
  transform: scale(1.05);
}

.lightbox p {
  color: #fff;
  margin-top: 15px;
  font-size: 1.2em;
  font-family: 'Courier New', Courier, monospace;
}

.lightbox .close-btn {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
  user-select: none;
  transition: transform 0.3s;
}

.lightbox .close-btn:hover {
  transform: scale(1.3);
}


/* ✅ BESCHREIBUNG */
.studio-desc {
  background: #1e1e1e;
  color: #C0C0C0;
  font-size: 16px;                 /* Etwas größere Schrift */
  text-align: center;
  padding: 10px;
  border-radius: 0 0 10px 10px;
  width: 100%;
  box-sizing: border-box;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================= */
/* ✅ TIMELINE SECTION */
/* ============================= */
.timeline {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 20px 0;
}

.timeline-step {
  padding: 15px;
  background: rgba(41, 41, 41, 0.9);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #C0C0C0;
  box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
}

.timeline-step:hover {
  background: #8B0000;
  transform: scale(1.05);
  color: white;
}

/* ============================= */
/* ✅ MAP LINK */
/* ============================= */
.map-link {
  display: inline-block;
  padding: 10px 20px;
  background: #8B0000;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.3s ease;
  text-align: center;
}

.map-link:hover {
  background: #FF3D3D;
}

.show {
  display: block !important;
}

.hidden {
  display: none !important;
}

.polaroid {
  transition: transform 0.3s ease-in-out;
}

.rotated-1 {
  transform: rotate(-10deg);
}

.rotated-2 {
  transform: rotate(-5deg);
}

.rotated-3 {
  transform: rotate(5deg);
}

.rotated-4 {
  transform: rotate(10deg);
}

.hidden {
  display: none !important;
}

.show {
  display: block !important;
}

#about-popup-text p {
  text-align: center; /* Ersetzt das entfernte `style="text-align:center;"` */
}

#about-popup-text {
  font-size: 18px;
  line-height: 1.5;
}

#aboutPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 600px;
  max-height: 80vh; /* Popup darf nicht größer als 80% der Bildschirmhöhe sein */
  background: rgba(20, 20, 20, 0.95);
  color: white;
  padding: 20px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  border-radius: 10px;
  display: none; /* Standardmäßig versteckt */
  overflow-y: auto; /* ✅ Scrollbar machen */
  overscroll-behavior: contain;
}

/* Hintergrund für das Overlay */
#aboutOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  display: none;
}

.close-btn {
  position: absolute;
  top: 10px;   /* Setzt den Button oben */
  right: 15px; /* Setzt ihn rechts */
  font-size: 20px;
  cursor: pointer;
  color: white;
  background: none;
  border: none;
  padding: 5px;
  z-index: 100; /* Stellt sicher, dass er immer oben liegt */
}

.close-btn:hover {
  color: #FFD700; /* Goldene Farbe beim Hover */
}




/* ============================= */
/* ✅ RESPONSIVE DESIGN */
/* ============================= */
@media (max-width: 768px) {
  #faq, #team-container, #studio-swiper, #timeline {
    max-width: 90%;
  }

  .team-member img {
    max-width: 120px;
    height: 120px;
  }
}