/* Container vorbereiten */
.slides-container {
    position: relative;
    display: grid;
    grid-template-areas: "stack"; /* Stapelt alle Bilder übereinander */
    overflow: hidden;
    height: auto;
}

.slide {
    grid-area: stack;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    /* Übergang für das Verschwinden (Fade-Out) */
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
    z-index: 1;
}

/* Wenn das Bild aktiv ist */
.slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    /* Übergang für das Erscheinen (Fade-In) */
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
}

.slide img {
    display: block;
    width: 100%;
    height: auto;
}
button {
	padding: 0.8rem 1.2rem; 
	cursor: pointer; 
	border: 1px solid #333; 
	background: #fff;
	/* 1. Entfernt das graue/orange Highlight beim Antippen (iOS) */
  -webkit-tap-highlight-color: transparent;
  
  /* 2. Verhindert, dass das System den Button-Style überschreibt */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
button:focus { outline: none;}

.caption { 
  position: relative;
  bottom: 71px;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 16px;
  text-align: right;
  font-weight: bold;
  width: fit-content;
  float: right;
}
#btnText {
    transition: opacity 0.6s ease-in-out; /* Geschwindigkeit des Blendens */
    opacity: 1;
    display: inline-block; /* Wichtig für die Animation */
}

/* Die Klasse, die per JS kurz hinzugefügt wird */
.text-hidden {
    opacity: 0 !important;
}

/* Optional: Feste Breite für den Button, damit er nicht zuckt */
#playPauseBtn {
    /* min-width: 193px; /* Anpassen an deine längste Textbreite */
    text-align: center;
}
@media (max-width: 600px) {
.slides-container {
  top: 64px;
  }
.slider-nav {
	margin-bottom: 60px;
	bottom: -25px;
    height: 30px;
}
.slider-nav button {
	padding: 0;
	height: auto
}

.slides-container img {
    /* Setze eine Mindesthöhe, damit das Bild nicht zu dünn wird */
    height: 200px; 
    
    /* Das Bild füllt den Raum aus und schneidet Ränder ab */
    object-fit: cover;
    
    /* Zentriert das Bild, damit links und rechts gleichmäßig geschnitten wird */
    object-position: center;
    
    /* Sorgt dafür, dass es die volle Breite behält */
    width: 100%;
  }

.caption { 
padding: 0px 10px;
bottom: 39px;
}
}