/* css für Album Anzeige */


html {
    /* Scrollbar ausblenden, ist in w3.css aber standard */
    overflow-x:hidden;
}

/* Backgrund klappt nur hier */
body, st-body {
    font-size: 100%;
    color: black;
    padding: 10px;
    background-color: lightgrey;
}

/* Underline für Link abschalten */
a {
    text-decoration:none;
}

/* Page */
.st-page {
    max-width:3840px;
}


/* Überschrift */
.st-top, .st-bottom {
    color:#fff;
    /* w3 hat nur 16px Rand */
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 0px;
    padding-bottom: 0px;
    /* w3-teal */
    background-color:#009688;
}

/* linke Sidebar-Navigation auf index_start.html */
.st-sidebar {
    margin-left:8px;
    height:25%;
    background-color:light-grey;
}

/* rechter Home-Bottom */
.st-home {
    /* margin-bottom: 200px; */
}

/* Korrektur Cursor */
.st-cursor-default {
    cursor: default;
}

.st-info {
    color:black;
    background-color:rgba(255,255,255,0.8);
    
}

.st-album {
    /* w3-white */
    color:#000;
    /* background-color:#fff; */
}

.st-album h3 {
    /* w3-text-grey */
    color:#757575;
    color: black;
}

.st-album h5 {
    /* w3-text-grey */
    color:#757575;
    font-weight:bold;
}

.st-album h6 {
    /* w3-teal */
    color:#009688;
}

.st-album h6 a {
    font-weight:bold;
}

.st-album i {
    /* w3-teal */
    color:#009688;
}

.st-index-tab {
    background-color: white;
    /* background-color:rgba(255,255,255,0.8); */
}

.st-index-img {
    max-height:30px;
    width:50px;
}

.st-index-background {
    background-color: lightgrey;
    background-size: cover;
    /*background-size: contain;*/
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
}

.st-text::first-letter {
    color:red;
    font-size:150%;
}

.st-bold {
    font-weight:bold;
}


/* Bilder-Zoom per "Checkbox-Hack" für Detail-Anzeige */

.st-pic {
    position: relative;
    width:auto;
    border: 7px solid #ffe;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.7);
    background-color:#ffe;
    /*transform: rotate(-3deg); */
}



.st-pic img {
    /* object-fit: contain; */
    opacity: 1.0;   /* nicht aktives Bild mit 0.8 etwas schwächer */
    /* auch Ausblenden animieren */
    transition: all 0.2s ease-in-out;
}

.st-pic video {
    /* object-fit: contain; */
    opacity: 1.0;   /* nicht aktives Bild mit 0.8 etwas schwächer */
    /* auch Ausblenden animieren */
    transition: all 0.2s ease-in-out;
	max-height:38em;
}


/* Sichtbarkeit der Zoom-Lupe */
.st-pic img:hover {
    opacity: 1;
    cursor: zoom-in;
}

.st-picdesc {
    font-weight:bold;
    font-size:80%;
    background-color:#ffe;
}


/* um den Hintergrund abzudunkeln */
.abdunkeln {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,.8);
    z-index: 1;
}

input[type=checkbox] {
    display: none;
}

/* das aufgezoomte Bild */
/* Animation beim Verkleinern funktioniert hier nicht */
input[type=checkbox]:checked ~ label img {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 95%;
    max-height: 95%;
    /* Größenbeschränkung auf 90%, weglassen -> 100% */
    width: 90%;
    margin: auto;
    overflow: auto;
    /* Leider Rand nicht um Bild, sondern um Checkbox */
    border: 8px solid #fff;
    z-index: 2;
    animation: fadeIn .6s linear;
    opacity: 1;
    cursor: zoom-out;
}


/* das aufgezoomte Bild, alte Variante */
/* mit Animation beim verkleinern */
input2[type=checkbox]:checked ~ label img {
    position: fixed;
    height: 80%;
    width: auto;
    top: 50%;
    left: 25%;
    margin-top: -20%;
    margin-left: -15%;
    /* border: 5px solid #fff; */
    z-index: 2;
    animation: fadeIn .6s linear;
    opacity: 1;
}


/* um den Hintergrund über .abdunkeln (.overlay) abzudunkeln */
input[type=checkbox]:checked ~ .abdunkeln {
    display: block;
}


/* Einzoomen */
@keyframes fadeIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}