/* =============================================================
   Slider‑Plugin – plugin.css  (Version 1.6 – Aspect‑Ratio 2:1)
   -------------------------------------------------------------
   • Optimiert für Bilder im Verhältnis 2 : 1
   • Container nutzt CSS aspect-ratio statt fester Höhen
   • Dark‑Mode, Accessibility & Responsive beibehalten
   • Zusätzliche Empfehlungen umgesetzt:
       – max-height: 60vh
       – margin-inline:auto
       – leichte Schattenkante
       – fallback‑Höhen für ältere Browser ohne aspect‑ratio
   ============================================================= */

/*****************************************************************
 * 1.  Globale Farb‑Variablen
 *     – ermöglichen Dark‑Mode ohne doppelten Code
 *****************************************************************/
:root {
  /* Hintergrund der Bild‑Caption */
  --mr-bg:  rgba(0, 0, 0, 0.70);
  /* Textfarbe (Caption + Buttons) */
  --mr-text: #f2f2f2;
  /* Hintergrund der Navigations‑Buttons */
  --mr-btn-bg: rgba(0, 0, 0, 0.40);
}

/* Dark‑Mode übernimmt automatisch das OS‑Theme */
@media (prefers-color-scheme: dark) {
  :root {
    --mr-bg:  rgba(255, 255, 255, 0.20);
    --mr-text: #ffffff;
    --mr-btn-bg: rgba(255, 255, 255, 0.30);
  }
}

/*****************************************************************
 * 2.  Grund‑Reset nur innerhalb des Sliders
 *****************************************************************/
.mr-slider, .mr-slider * {
  box-sizing: border-box; /* saubere Größenberechnung */
  margin: 0;
  padding: 0;
}

/*****************************************************************
 * 3.  Container – hält alle Slides & Buttons
 *     • aspect‑ratio erzeugt automatisch 2 : 1‑Höhe
 *     • max-height verhindert übermäßige Höhe auf Ultra‑Wide
 *****************************************************************/
.mr-slider {
  position: relative;      /* für absolut positionierte Buttons */
  max-width: 100%;         /* skaliert mit dem Elternelement */
  margin-inline: auto;     /* horizontal zentriert, auch in RTL */
  overflow: hidden;        /* verhindert Scrollbars bei Animationen */

  aspect-ratio: 2 / 1;     /* ► 2 : 1 – passt zu 1024×512 & 800×400 */
  max-height: 60vh;        /* ► begrenzt Höhe auf 60 % der Viewport‑Höhe */
  box-shadow: 0 0 8px rgba(0,0,0,.15); /* dezente Schattenkante */
}

/*****************************************************************
 * 4.  Einzelne Slide (per JS umgeschaltet)
 *****************************************************************/
.mr-slider .mr-slides {
  display: none;           /* nur aktive Slide wird per JS sichtbar */
  position: absolute;      /* stapelt Slides übereinander */
  inset: 0;                /* füllt den gesamten Container */
}

/* Bild innerhalb der Slide */
.mr-slider .mr-slides img {
  width: 100%;             /* füllt die volle Containerbreite */
  height: 100%;            /* Höhe kommt vom Eltern‑Aspect‑Ratio */
  object-fit: cover;       /* skaliert & beschneidet, Verhältnis bleibt */
}

/*****************************************************************
 * 5.  Bildunterschrift (Caption)
 *****************************************************************/
.mr-slider .text {
  position: absolute;      /* liegt über dem Bild */
  bottom: 0;
  width: 100%;
  padding: 8px 12px;
  font-size: 0.75rem;
  text-align: center;
  background: var(--mr-bg);
  color: var(--mr-text);
}

/*****************************************************************
 * 6.  Navigations‑Buttons (vor / zurück / pause)
 *****************************************************************/
.mr-slider button {
  position: absolute;
  top: 50%;                /* vertikal zentriert */
  transform: translateY(-50%);
  background: var(--mr-btn-bg);
  color: var(--mr-text);
  border: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
}

/* Tastatur‑Fokus gut sichtbar */
.mr-slider button:focus {
  outline: 2px solid var(--mr-text);
}

/* Positionierung der einzelnen Buttons */
.mr-slider .mr-prev  { left: 0;  }
.mr-slider .mr-next  { right: 0; }
.mr-slider .mr-pause {
  top: auto;                  /* überschreibt "top:50%" */
  bottom: 20px;               /* am unteren Rand zentriert */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
}

/*****************************************************************
 * 7.  Punkt‑Leiste (Dots)
 *****************************************************************/
.mr-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  list-style: none;
  padding: 3px 16px;
}
.mr-dots li {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mr-btn-bg);
  cursor: pointer;
}
.mr-dots li[aria-selected="true"],
.mr-dots li:hover {
  background: var(--mr-text);
}

/*****************************************************************
 * 8.  Animationen – Klassen + Keyframes
 *****************************************************************/
/* Jede Klasse wird vom JS nur für die aktive Slide gesetzt */
.mr-slider .fade         { animation: fade 2s; }
.mr-slider .slideInRight { animation: slideInRight 2s both; }
.mr-slider .flip         { animation: flip 1s cubic-bezier(.25,.46,.45,.94) both; }
.mr-slider .zoomIn       { animation: zoomIn 1s both; }
.mr-slider .fadeInLeft   { animation: fadeInLeft 1s both; }

/* Fade – einfache Einblendung */
@keyframes fade {
  from { opacity: 0.4; }
  to   { opacity: 1;   }
}

/* Slide in von rechts */
@keyframes slideInRight {
  from { transform: translateX(100%); visibility: visible; }
  to   { transform: translateX(0);    }
}

/* 3D‑Flip */
@keyframes flip {
  from { transform: rotateY(80deg); opacity: 0; }
  to   { transform: rotateY(0);     opacity: 1; }
}

/* Zoom‑In */
@keyframes zoomIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Fade‑In von links */
@keyframes fadeInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/*****************************************************************
 * 9.  Fehlermeldung (falls Galerie leer / nicht gefunden)
 *****************************************************************/
.mr-slider-error {
  color: #c00;           /* gut sichtbar rot */
}

/*****************************************************************
 * 10.  Responsive Zusatz – größere Caption‑Schrift ab 36 rem
 *****************************************************************/
@media (min-width: 36rem) {
  .mr-slider .text { font-size: 0.9rem; }
}

/*****************************************************************
 * 11.  Fallback für Browser **ohne** CSS aspect‑ratio
 *      – setzt wieder feste Höhen, damit Slider sichtbar bleibt
 *****************************************************************/
@supports not (aspect-ratio: 2 / 1) {
  .mr-slider { height: 200px; }
  @media (min-width: 36rem) {
    .mr-slider { height: 400px; }
  }
}