/* 
   Tooltip / Bildtitel (Flyer)
   ----------------------------
   #bild:hover #flyer  ->  Wenn die Maus über dem Bereich #bild ist,
   wird der dazugehörige #flyer sichtbar.
*/
#bild:hover #flyer {        /* hover muss in dem Bereich definiert sein wo die Maus hinkommt ! */
  display:block;
}

/* Standardzustand: Beschreibung (Flyer) ist unsichtbar */
#flyer  {
  display: none;
} 

/*
   Slideshow-Container
   -------------------
   - feste Breite/Höhe für die Demo
   - zentriert über margin: auto
   - position: relative, damit das innere Positionieren sauber funktioniert
*/
.sl-container{
  width: 500px;
  height: 400px;
  margin: auto;
  position: relative;
}

/*
   Direkte Kinder des Containers sind die einzelnen Slides (DIVs)
*/
.sl-container > div{
  width: 100%;
  height: 100%;
}

/*
   Inneres DIV: enthält Bild + Beschreibungsbox
*/
.sl-container > div > div{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/*
   Bild im Slide
   -------------
   - füllt den gesamten Container
   - absolut positioniert
*/
.sl-container > div > div > img{
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

/*
   Box für die Bildbeschreibung (Flyer)
   ------------------------------------
   Dieses DIV enthält 2 weitere DIVs:
   1) graues Feld
   2) Text im grauen Feld
*/
.sl-container > div > div > div{
  width: 100%;
  /*height: 1em;*/
  position: absolute;
  bottom: 0px;
  left: 0px;
  text-align:center;  
}

/* 
   Graues Feld der Beschreibung
   ----------------------------
*/
.sl-container > div > div > div:nth-of-type(1){
  opacity: 0.5;
  height:20px;                                     /* Höhe des grauen Feldes */
  background-color: gray;
}

/* 
   Text im grauen Feld
   -------------------
*/
.sl-container > div > div > div:nth-of-type(2){
  color: white;
  height:20px;                                     /* oder 1.2em */
}

/* --------------------------------------------------
   Steuerzeile UNTER dem Bild:  <  II  >
   --------------------------------------------------
   NEU:
   - immer sichtbar (wird im JS nicht mehr versteckt)
   - kleinere Schrift
   - grau
*/
.sl-controls {
  text-align: center;
  margin-top: 10px;
  font-size: 15px;             /* kleiner als vorher */
  font-family: Arial, sans-serif;
  color: #666666;              /* graue Schrift für < und II */
}

/* Elemente in der Zeile */
.sl-controls span {
  display: inline-block;
  margin: 0 6px;               /* etwas kleinerer Abstand */
  cursor: pointer;             /* Mauszeiger als Hand */
}

/* Mittleres Symbol (II oder ▶) leicht hervorheben */
.sl-pause-icon {
  font-weight: bold;
}

/* Pfeile links/rechts */
.sl-arrow {
  font-weight: bold;
}

/* Kleine optische Rückmeldung beim Darüberfahren */
.sl-controls span:hover {
  text-decoration: underline;
}

/*
   NEU: Play-Symbol (schwarzes Dreieck)
   ------------------------------------
   Wenn die Slideshow gestoppt ist, erhält das mittlere
   Element zusätzlich die Klasse .sl-play-icon und wird
   dadurch schwarz dargestellt.
*/
.sl-play-icon {
  color: #000000;  /* schwarz für ▶ */
}