@charset 'UTF-8';
* { box-sizing:border-box }
a.Vor, a.Weiter { cursor:pointer; position:absolute; top:50%; width:auto; margin-top:-22px; padding:16px; color:white; font-weight:bold; font-size:18px; transition:0.8s ease; border-radius:0px 3px 3px 0px; user-select:none; text-decoration:none; }
a.Weiter { right:0px; border-radius: 3px 0px 0px 3px; }
a.Vor { left:0px; border-radius: 3px 0px 0px 3px; }
a.Vor:hover, a.Weiter:hover { background-color: rgba(0,0,0,0.8 ); }
div.FolienBehälter { width:650px; height:auto; position:relative;  } /* margin:auto; */
div.Folie { display:none; }
div.Beschriftung { background-color: rgba(200,255,255,0.6); color:#000000; font-size:15px; padding:8px 12px; position:absolute; bottom:12px; width:50%; text-align:center; border-radius:20px; left:25%; right:25%; }
div.Nummer { background-color: rgba(255,255,255,0.6); color:#000000; font-size:12px; padding:8px 12px; position:absolute; top:16px; border-radius:20px; right: 16px; }
div.EinAusBlenden { animation-name: EinAusBlenden; animation-duration: 3.5s; }
@keyframes EinAusBlenden { from { opacity: .4; } to { opacity: 1; } }
img.Bild { width:100%; height:auto; border:4px solid red; border-radius:40px; }
span.Kreis { cursor:pointer; height:15px; width:15px; margin:0px 2px; background-color:#BBB; border-radius:50%; display:inline-block; transition:background-color 0.8s ease; }
span.Aktiv, span.Kreis:hover { background-color: #717171; }
div.KreiseBehaelter { text-align:center; }