/*  Diese CSS-Datei bewegt eine Bauchbinde in 6 verschiedenen Farben (je ID) von unten überein Bild,
    während das Bild leicht heranzoomt und leicht dreht.  

    Es wird ein Container benutzt, in den ein normales img gelegt wird. Sobald der Conainer gehovert wird
    wird eine Overlay über den Container gelegt.
    (Das Hovern wird absichtlich NICHT auf dem Bild ausgeführt, da sonst der Bildzoom unterbrochen würde,
    wenn man dabei mit der Maus auf die bauchbinde fasst.) 
*/

/*Belly-Band-Image - abgekürzt BBI*/

/* containerBBI - ist der Standard-Container
                  ... die Bauchbinde wird beim Hovern von unten nach oben geschoben
  .bottomfixBBI - ist ein zugehöriger Wahlschalter, der die Bauchbinde beim Einblenden
                  unten annagelt und das hochschieben verhindert. 
    
   containerBBIperm  
                - ist der Container, der die Bauchbinde ständig anzeigt.
                  ...sie wird also NICHT eingeblendet, sondern ist immer da.                   
   .permfadeBBI - ist eine zugehöriger Wahlschalter, der die permanente Bauchbinde
                  beim Hover leicht abblendet, aber dennoch sichtbar lässt.  
    
   ID   - ...bestimmen die Farben, ansonsten ist die Bauchbinde schwarz
                
*/

/*...um die Class-Worte mehrfach in verschiedenenen CSS gebrauchen zu können,
    kann zur Verwechslungsfreiheit die Gesamtklasse in eine umrahmende <div> geschrieben werden.
    So können die Class-Worte dann verwechslungsfrei benutzt werden.*/
/* Gesamt-Klasse, in der das BBI ausgeführt wird/werden kann */

.cssBBI {overflow: hidden;}
/*...darin enthaltene Classes:*/

.containerBBI {
    position: relative;
    left: 0;
    width: 100%;
    overflow: hidden;
}

/*für das Bild im Container: */
    .containerBBI img {
        display: block;
        width: 100%;
        height: auto;
        /*-webkit-transition: 2s ease-in-out;*/
        /*transition: 2s ease-in-out;*/
    }



/*----------------------------------------------------*/
/*----------------------------------------------------*/

/* normale Overlay-Version:*/
/*----------------------------------------------------*/
/*für die Bauchbinde : */
.overlayBBI, .overlayBBIperm {
    position: absolute;
    bottom: 0; /* Am unteren Rand des Containers positionieren */
    left: 0;
    width: 100%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.30); /* (Standard, wenn keine ID angegeben) 
                                             Halbtransparenter schwarzer Hintergrund */
    padding: 3%; /*Innenrand*/
    color: white; /*Schriftfarbe*/
    text-shadow: black 0.1em 0.1em 0.2em; /*leichter schwarzer Schatten*/
    text-align: center; /*Schrift-Ausrichtung*/
    /* Sanfter Übergang für alle Transitions: */
    -webkit-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
}

/* Grundeinstellungen für die Sichtbarkeit beider Modelle:*/
.overlayBBI {opacity: 0;} /*gesamtes Overlay ist standardmäßig unsichtbar */
.overlayBBIperm {opacity: 1;} /*gesamtes Overlay ist immer sichtbar */




/* IDs für die Farben:*/
.overlayBBI#bleen, .overlayBBIperm#bleen {background: rgba(0, 200, 100, 0.60);}
.overlayBBI#green, .overlayBBIperm#green {background: rgba(43, 193, 7, 0.60);}
.overlayBBI#markergreen, .overlayBBIperm#markgreen {background: rgba(204, 255, 0, 0.60);}
.overlayBBI#blue, .overlayBBIperm#blue {background: rgba(0, 252, 244, 0.46);}
.overlayBBI#lightblue, .overlayBBIperm#lightblue  {background: rgba(114, 214, 242, 0.60);}
.overlayBBI#orange, .overlayBBIperm#orange  {background: rgba(255, 84, 0, 0.60);}
.overlayBBI#yellow, .overlayBBIperm#yellow  {background: rgba(255, 175, 0, 0.60);}
.overlayBBI#red, .overlayBBIperm#red  {background: rgba(238, 40, 0, 0.60);}
.overlayBBI#coral, .overlayBBIperm#coral  {background: rgba(255, 112, 96, 0.70);}
/* white: soll keinen Schatten haben und die Schriftfarbe muss dunkelgrau sein:*/
.overlayBBI#white, .overlayBBIperm#white  {background: rgba(255, 255, 255, 0.60); color: #404040; text-shadow: black 0 0 0;}



/*----------------------------------------------------*/
/*----------------------------------------------------*/


/* für das Bild im Container:  */
.containerBBI img {transition: transform 6s;}   /* ...Zoom-Zeitdauer des Bildes:*/

/* ...wenn Hover über dem Container: dann Bild zoomen   */
.containerBBI:hover img {transform: scale(1.1) rotate(0.8deg);} /* Zoom des Bildes, Bild wird leicht vergrößert und gedreht*/

/*----------------------------------------------------*/
/* für den Standard-Funktion: Einblenden und Schieben der Bauchbinde:*/
/* ...Einblenden des Overlays und Schieben von unten nach oben*/
.containerBBI:hover .overlayBBI {opacity: 1; bottom: 10%;} /* Wird beim Hovern sichtbar */
/* ...Einblenden des Overlays, aber KEIN Schieben, also nur unten*/
.containerBBI:hover .bottomfixBBI {opacity: 1; bottom: 0%;} /* Wird beim Hovern sichtbar */

/*----------------------------------------------------*/
/* für den Sonder-Funktion: es muss nicht eingeblendet werden, das Ding ist Immer da.*/
/*.containerBBI:hover .overlayBBIpermanent {opacity: 1;} */

/* ...Zusatzfunktion für die permanente Binde: leicht abdunkeln beim Hovern*/
.containerBBI:hover .permfadeBBI {opacity: 0.60;} /* Wird beim Hovern leicht abgedunkelt */