/* Diese Fotoshow ist ein MoveSlider, die mit Thumbnails gesteuert wird.
   Grundsätzlich ist die Verlinkung der Bilder (zu einem Ziel) möglich - irgendwie aber überflüssig
   
   Der MoveSlider hat parallel eine Bildunterschrift, die eingeblendet wird.
  
   Zusätzlich dazu werden Begleittexte unter der Fotoshow eingeblendet.
   */
    


/* Gesamt-Klasse, in der die Fotoshow ausgeführt wird */ 
.cssThumbSliderShow { overflow: hidden; padding: 2% 2% 2% 2%;} /* links und rechts etwas Rand lassen, um Schatten zu ermöglichen... */

.tapete, .tapete figure, .btnControls { margin: 0;}
 
.bildTVxxxxxx:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}

.tapete {
    position: relative;
    left: 0; width: 400%;
    margin-bottom: .8em; padding: 0;
    -webkit-transition: left .8s ease-in-out; transition: left .8s ease-in-out;
}

.tapete#pivier{width:400%;}
.tapete#pifünf{width:500%;}
.tapete#pisechs{width:600%;}
.tapete#piacht{width:800%;}
.tapete#pizehn{width:1000%;}
.tapete#pisechzehn{width:1600%;}

/* Fensterausschnitt der Fotoshow */ 
.tapete > .bildausschnitt {position: relative; width: 25%;}

.tapete#pivier > .bildausschnitt {position: relative; float: left; width: 25%;}
.tapete#pifünf > .bildausschnitt {position: relative; float: left; width: 20%;}
.tapete#pisechs > .bildausschnitt {position: relative; float: left; width: 16.667%;}
.tapete#piacht > .bildausschnitt {position: relative; float: left; width: 12.5%;}
.tapete#pizehn > .bildausschnitt {position: relative; float: left; width: 10%;}
.tapete#pisechzehn > .bildausschnitt {position: relative; float: left; width: 6.25%;}
 
/* Bildunterschrift auf dem Bild positionieren */
.tapete figcaption {display:block; position: absolute;
    color: #fff; left: 0;
    bottom: 0em; padding:  0.5em 1em;
    background: rgba(255,84,0,.7); border-radius:  0 50px 50px 0; text-shadow: black 0.1em 0.1em 0.2em;   
    opacity:0;	/* ausblenden... */
    cursor:default;
    -webkit-transition: 1s ease-in-out;  transition:  1s ease-in-out;
}
/* Bilder responsive */
.tapete img { width: 100%; height: auto;}
.tapete.tapetezoom img { transition: transform 6s;}
.tapete.tapetezoom img:hover { transform: scale(1.1, 1.1) rotate(0.8deg);}

/* beim Hoovern Bild abblenden... */ 
/*.bildTV img:hover {opacity: 0.3;} */

/*beim Hovern: figcaption einblenden und von unten nach oben ins Bild schieben... */
.tapete:hover figcaption{opacity:1; bottom: 4em;}



/* ##################################################################### */
/*   Thumbnails:   */
 .thumbbox{	             /*Aussenrahmen der Thumbs */
    list-style:none;	
    margin: auto;
    padding:0;
    text-align:center;
    position:relative;
}

.thumbbox .thumbbild{   /*Ausrichten der Thumb-Bilder */
    margin:0;
    padding:0;
    display:inline-block;
}
/* Aura-Rahmen beim Hoovern: */
.thumbbox a{    
	display:block;
    text-decoration:none;
    width:100px;	/* Grösse eines Thumbbildes */
    padding: 0px; /*Randbreite, der später aufleuchten soll... */
    border:2px #909090 solid;
    margin: 15px 5px 10px 5px;	/* Ausglichs-Ränder zwischen den Bildern / oben und unten zum Außenrahmen */
    border-radius:3px; /* Rundung des Aufblitz-Randes */
    -webkit-transition:0.5s; transition:0.5s; 
    /* Farbe bleibt durchsichtig - erst beim Hovern!!! */
   /* background: darkgray;  /* ständig sichtbarer Rand */
}
/* Aura-Rahmen beim Hoovern: */
.thumbbox.typ80 a{    
	display:block;
    text-decoration:none;
    width:80px;	/* Grösse eines Thumbbildes */
    padding: 0px; /*Randbreite, der später aufleuchten soll... */
    border:2px #909090 solid;
    margin: 15px 5px 10px 5px;	/* Ausglichs-Ränder zwischen den Bildern / oben und unten zum Außenrahmen */
    border-radius:3px; /* Rundung des Aufblitz-Randes */
    -webkit-transition:0.5s; transition:0.5s; 
    /* Farbe bleibt durchsichtig - erst beim Hovern!!! */
   /* background: darkgray;  /* ständig sichtbarer Rand */
}
/* Aura-Rahmen beim Hoovern: */
.thumbbox.typ70 a{    
	display:block;
    text-decoration:none;
    width:70px;	/* Grösse eines Thumbbildes */
    padding: 0px; /*Randbreite, der später aufleuchten soll... */
    border:2px #909090 solid;
    margin: 15px 5px 10px 5px;	/* Ausglichs-Ränder zwischen den Bildern / oben und unten zum Außenrahmen */
    border-radius:3px; /* Rundung des Aufblitz-Randes */
    -webkit-transition:0.5s; transition:0.5s; 
    /* Farbe bleibt durchsichtig - erst beim Hovern!!! */
   /* background: darkgray;  /* ständig sichtbarer Rand */
}
/* Aura-Rahmen beim Hoovern: */
.thumbbox.typ60 a{    
	display:block;
    text-decoration:none;
    width:60px;	/* Grösse eines Thumbbildes */
    padding: 0px; /*Randbreite, der später aufleuchten soll... */
    border:2px #909090 solid;
    margin: 15px 5px 10px 5px;	/* Ausglichs-Ränder zwischen den Bildern / oben und unten zum Außenrahmen */
    border-radius:3px; /* Rundung des Aufblitz-Randes */
    -webkit-transition:0.5s; transition:0.5s; 
    /* Farbe bleibt durchsichtig - erst beim Hovern!!! */
   /* background: darkgray;  /* ständig sichtbarer Rand */
}

/*.thumbbox a:hover{box-shadow: 0px 0px 5px 5px #ffefe2;} /* GELB: Rand beim Hovern endlich anzeigen: */
.thumbbox a:hover{box-shadow: 0px 0px 5px 5px #ff8f35;} /* GELB: Rand beim Hovern endlich anzeigen: */
/*.thumbbox a:hover{box-shadow: 0px 0px 5px 5px #6ccf70;} /* GRÜN: Rand beim Hovern endlich anzeigen: */
/*.thumbbox a:hover{box-shadow: 0px 0px 5px 5px #ff6356;} /* GELB: Rand beim Hovern endlich anzeigen: */

/* Ausrichtung der Bilder innerhalb eines Thumbnails */
.thumbbox a img{display:block; width:100%; margin:0 auto;}

/* ##################################################################### */
/* Container, in dem die Texte gestapelt werden */
.bildtextrahmen{overflow:auto; 
				box-sizing:border-box; position:relative; 
				height:150px; text-align:center;}
/* alle Texte "absolute" stapeln und "opacity"=0 ... */
.bildtextrahmen .bildtext {
				box-sizing:border-box; position:absolute; 
				width:100%; opacity:0; 
				padding: 0.5em  1em; text-align: justify;}
/* Text 1 dennoch sichtbar machen (Erstanzeige) */
.bildtextrahmen .bildtext#txeins {opacity: 1;}

/*bei jedem Click das entsprechende Bild sichtbar machen (opacity) - und gleichzeitig Bild 1 (Daueranzeige) ausmachen...*/
#t01:target ~ .bildtextrahmen .bildtext#txeins {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t02:target ~ .bildtextrahmen .bildtext#txzwei {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t02:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t03:target ~ .bildtextrahmen .bildtext#txdrei {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t03:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t04:target ~ .bildtextrahmen .bildtext#txvier {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t04:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t05:target ~ .bildtextrahmen .bildtext#txfünf {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t05:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t06:target ~ .bildtextrahmen .bildtext#txsechs {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t06:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t07:target ~ .bildtextrahmen .bildtext#txsieben {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t07:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t08:target ~ .bildtextrahmen .bildtext#txacht {opacity: 1;  -webkit-transition:2s;  transition: 2s;}
#t08:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t09:target ~ .bildtextrahmen .bildtext#txneun {opacity: 1;  -webkit-transition:2s;  transition: 2s;}
#t09:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t10:target ~ .bildtextrahmen .bildtext#txzehn {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t10:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t11:target ~ .bildtextrahmen .bildtext#txelf {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t11:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t12:target ~ .bildtextrahmen .bildtext#txzwölf {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t12:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t13:target ~ .bildtextrahmen .bildtext#txdreizehn {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t13:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t14:target ~ .bildtextrahmen .bildtext#txvierzehn {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t14:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t15:target ~ .bildtextrahmen .bildtext#txfünfzehn {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t15:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }
#t16:target ~ .bildtextrahmen .bildtext#txsechzehn {opacity: 1; -webkit-transition:2s;  transition: 2s;}
#t16:target ~ .bildtextrahmen .bildtext#txeins {opacity: 0; }

/*bei jedem Click die tapete weiter-scrollen...*/
#t01:target ~ .rahmenTV .tapete {left: 0%;}
#t02:target ~ .rahmenTV .tapete {left: -100%;}
#t03:target ~ .rahmenTV .tapete {left: -200%;}
#t04:target ~ .rahmenTV .tapete {left: -300%;}
#t05:target ~ .rahmenTV .tapete {left: -400%;}
#t06:target ~ .rahmenTV .tapete {left: -500%;}
#t07:target ~ .rahmenTV .tapete {left: -600%;}
#t08:target ~ .rahmenTV .tapete {left: -700%;}
#t09:target ~ .rahmenTV .tapete {left: -800%;}
#t10:target ~ .rahmenTV .tapete {left: -900%;}
#t11:target ~ .rahmenTV .tapete {left: -1000%;}
#t12:target ~ .rahmenTV .tapete {left: -1100%;}
#t13:target ~ .rahmenTV .tapete {left: -1200%;}
#t14:target ~ .rahmenTV .tapete {left: -1300%;}
#t15:target ~ .rahmenTV .tapete {left: -1400%;}
#t16:target ~ .rahmenTV .tapete {left: -1500%;}

/* ...offensichtlich für die Bekanntmachung der #t01 IDs... */
.top{position:absolute;left:0;top:0;display:none;}

/*.test ~ .bildTV {border:1px aque solid;}
.test ~ .thumbbox { background-color:red;}
*/
.test ~ .bildtextrahmen .bildtext#null {opacity:0;}
.test ~ .bildtextrahmen .bildtext#eins {opacity:1;}