/* 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 mit figure ein img gelegt wird. Sobald der Conainer gehovert wird,
    wird mit figcaption die Bauchbinde über den Container gelegt.
    (Das Hovern wird absichtlich NICHT auf dem Bild ausgeführt (wie früher) , da sonst der Bildzoom unterbrochen würde,
    wenn man dabei mit der Maus auf die bauchbinde fasst.)
 
/* containerFIG - ist der Standard-Container, in dem figure und figcaption vorkommen
                  ... die Bauchbinde (figcaption) wird beim Hovern von unten nach oben geschoben
  .permFIG      - ist ein zugehöriger Wahlschalter, der die Bauchbinde ständig anzeigt 
                  Es wird also nichts eingeblendet, sondern ist immer sichtbar
    
  .permfadeFIG  - ist ein Wahlschalter, mit dem die ständig sichtbare Bauchbinde beim Hover
                  leicht abgeblendet wird.  
    
   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 */
.containerFIG, .containerFIG figure {
    margin: 0;
}
 
/* Container, in dem Bild und Bauchbinde (figure/figcaption) liegt*/
.containerFIG {
    position: relative;
    left: 0; width: 100%;
    margin-bottom: 0; padding: 0;
    -webkit-transition: left .8s ease-in-out; transition: left .8s ease-in-out;
}

/* für das Bild im Container */
.containerFIG img {
    width: 100%;
    height: auto;
}
 
/* Bildunterschrift im Container positionieren */
    .containerFIG figcaption {
        display: block;
        position: absolute;
        /*bottom: 0em; /* Am unteren Rand des Containers positionieren */
        padding: 0.6em; /*Innenrand*/
        left: 0;
        border-radius: 0 8px 7px 0; /*Kanten-Rundung*/
        background-color: rgba(0, 0, 0, 0.30); /* (Standard, wenn keine ID angegeben) 
                                             Halbtransparenter schwarzer Hintergrund */
        color: #fff;
        text-shadow: black 0.1em 0.1em 0.2em;
        /*opacity: 0; /* ausblenden...gesamtes Overlay standardmäßig unsichtbar */
        cursor: default;
        /* Sanfter Übergang für alle Transitions: */
        -webkit-transition: 1s ease-in-out;
        transition: 1s ease-in-out;
    }

/* Grundeinstellungen für die Sichtbarkeit beider Modelle:*/

/* für die Einblend-Version: standardmäßig unsichtbar und unten am Rand:*/
.containerFIG figcaption {opacity: 0;bottom:0;} /*gesamtes Overlay ist standardmäßig unsichtbar */
/* für die Dauersicht-Version: standardmäßig sichtbar und weiter oben vom Rand:*/
.permFIG .containerFIG figcaption{opacity: 1; bottom:1.5em;} /*gesamtes Overlay ist immer sichtbar */



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

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

.containerFIG img { transition: transform 6s;}
.containerFIG:hover img { transform: scale(1.1, 1.1) rotate(0.8deg);}

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

/*Einblend-Version: beim Hovern: figcaption einblenden und von unten nach oben ins Bild schieben... */
.containerFIG:hover figcaption{opacity:1; bottom:1.5em}

/*Dauersicht-Version: beim Hovern: braucht NIX, ist ja sichtbar... */
/*.permFIG .containerFIG:hover figcaption{opacity:0.50;} */

/*Dauersicht-Fade-Version: beim Hovern: figcaption leicht abblenden... */
.permfadeFIG .containerFIG:hover figcaption{opacity:0.50;}