/* =========================
   Overlay Startseite
   in eArchiv-Vereine-CH brauche ich kein Startseiten-Overlay, ist in index.html auskommentiert
========================= */

/* Hintergrund für Startseiten-Overlay */
#start-overlay {
  display: block;
  position: fixed;
  top: 60px;              /* Abstand nach unten, Höhe des Headers */
  left: 0;
  width: 100%;
  height: calc(100% - 60px);  /* Höhe anpassen, damit unten nicht abgeschnitten wird */
  z-index: 1000;
  transform: none !important; /* falls ein Elternteil transform hat */
}

/* Fenster-Inhalt im Startseiten-Overlay */
#start-overlay .overlay-content {
  width: 300px;
  margin: 10% auto;
  padding: 20px;
  border-radius: 8px;
  position: relative;
  text-align: center;
  background-color: var(--home-overlay);
  border: 2px solid var(--home-overlay-borderline);
  color: var(--home-overlay-text);   /* Textfarbe zentral gesteuert */
}

/* Schließen-Knopf im Startseiten-Overlay */
#start-overlay .close-btn {
  position: absolute;
  top: 5px;
  right: 10px;
  color: var(--color-cross-close);
  text-shadow: 
    0 0 3px var(--color-cross-shadow),
    0 0 6px var(--color-cross-shadow),
    0 0 12px var(--color-cross-shadow);
  font-size: 30px;
  cursor: pointer;
  font-weight: bold;
  color: var(--home-overlay-text);   /* auch hier Variable statt festem Wert */
}

html, body {
  height: 100%;
  margin: 0;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* volle Höhe */
}

/* =========================
   Auto-Slider mit Fade-Effekt
========================= */

/* Container für mehrere Slider nebeneinander */
.slider-row {
  display: flex;
  flex-direction: row; /* sicherstellen, nicht row-reverse */
  direction: ltr;      /* falls global RTL aktiv ist, lokal LTR */
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Nur für den Slider-Container (äußere Box des Sliders) */
.slider-box {
  flex: 1 1 400px;           /* jeder Slider mindestens 400px breit */
  max-width: 400px;          /* wie bisher */
  margin: 0px auto;          /* mittig */
  padding: 0.1rem;           /* Rahmen-Innenabstand wie gewohnt */
}

/* Der eigentliche Slider */
.slider {
  position: relative;
  width: 100%;               /* flexibel: füllt die verfügbare Breite der slider-box */
  max-width: 400px;          /* kompakt auf kleineren Screens */
  aspect-ratio: 5 / 4;       /* Breite 25% mehr als Höhe */
  margin: 1rem auto;         /* zentriert */
  overflow: hidden;
  border: 2px solid var(--color-borderline2);
  border-radius: 12px;
  background: var(--color-background2);
}

/* Optional: eigenes Positioning für die Slides */
.slides {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Bilder im Overlay, per Fade eingeblendet */
.slider .slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeAnimation 48s infinite;
}

/* Verzögerung pro Bild (8 Bilder × 10.5s = 84s) (8 Bilder x 6s = 48s */
.slides img:nth-child(1) { animation-delay: 0s; }
.slides img:nth-child(2) { animation-delay: 6s; }
.slides img:nth-child(3) { animation-delay: 12s; }
.slides img:nth-child(4) { animation-delay: 18s; }
.slides img:nth-child(5) { animation-delay: 25s; }
.slides img:nth-child(6) { animation-delay: 30s; }
.slides img:nth-child(7) { animation-delay: 36s; }
.slides img:nth-child(8) { animation-delay: 42s; }

/* Fade-Animation mit 3s Einblendung, 6s sichtbar, 1.5s Ausblendung */
@keyframes fadeAnimation {
  0%   { opacity: 0; }
  3.5% { opacity: 1; }
  10.5% { opacity: 1; }
  12.5% { opacity: 0; }
  100% { opacity: 0; }
}

/* Slider 1 */
.slider-box:nth-child(1) .slides img {
  animation-name: fadeAnimation1;
}

/* Slider 2 */
.slider-box:nth-child(2) .slides img {
  animation-name: fadeAnimation2;
}

/* Slider 3 */
.slider-box:nth-child(3) .slides img {
  animation-name: fadeAnimation3;
}

@keyframes fadeAnimation1 {
  0% { opacity: 0; }   /* Start: unsichtbar */
  4% { opacity: 1; }   /* nach nn% der Dauer eingeblendet */
  12% { opacity: 1; }  /* bleibt sichtbar bis  */
  16% { opacity: 0; }  /* danach wieder ausgeblendet */
  100% { opacity: 0; }   /* bleibt unsichtbar bis Ende */
}

@keyframes fadeAnimation2 {
  0% { opacity: 0; }   /* unsichtbar am Anfang */
  8% { opacity: 1; }   /* startet später  */
  16.0% { opacity: 1; }  /* bleibt sichtbar bis  */
  20.0% { opacity: 0; }  /* blendet aus */
  100% { opacity: 0; }   /* bleibt unsichtbar */
}

@keyframes fadeAnimation3 {
  0% { opacity: 0; }
  12% { opacity: 1; }   /* noch später eingeblendet */
  20% { opacity: 1; }
  24% { opacity: 0; }  /* blendet aus */
  100% { opacity: 0; }
}