@charset "utf-8";
/* CSS Document */



/* ====================================================================================================================================
                ----- BODY -----
    ==================================================================================================================================== */

/* Seiteninhalte */

/* Level 1 - Inhalte - Galerien mit Lightboxen */

input {display: none;}

.Register-Container {
    position: sticky;
    top: 98px;
    padding-bottom: 15px;
    margin-bottom: 10px;
    background-color: rgba(255,251,255,1);
    z-index: 1;}

.Register {
    display: flex;
    width: min-content;
    flex-wrap: nowrap;
    margin: 0px auto 0 auto;
    justify-content: center;
    border-bottom: 1px solid black;}

.Register h4 {margin-bottom: 5px; color: black;}
.Register h4:focus, .Register h4:hover, .Register h4:active {color: rgba(13,0,130,1); font-weight: 500; font-style: normal;}

label {
    margin: 0px 10px;
    display: block;
    flex: none;
    white-space: nowrap;
    cursor: pointer;}

.Register label::after {display: block; content: attr(name); font-weight: 500; font-style: normal; overflow: hidden; height: 0px;} 


.gallery {
    width: 92%;
    max-width: 2000px;
    margin: 0px auto;
    position: sticky;
    top: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;}

.gallery_thumbnail {
    flex: none;
    width: 20vw;
    height: 20vw;
    max-width: 300px;
    max-height: 300px;
    min-width: 175px;
    min-height: 175px;
    overflow: hidden;
    margin: 5px;
    cursor: url("/icons_und_logo/GPU01-Zoom_In.png"), zoom-in;}
.thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;}


/* Die Register-Funktion für die Galerie */

#check-1:checked ~ .gallery .gallery_thumbnail {transform: scale(1); transition: 0.5s; position: relative;}
#check-1:checked ~ .Register-Container .Register #checked-1 {font-style: italic; color: rgba(13,0,130,1.00);}

#check-2:checked ~ .gallery .portrait {transform: scale(1); transition: 0.5s; position: relative;}
#check-2:checked ~ .Register-Container .Register #checked-2 {font-style: italic; color: rgba(13,0,130,1.00);}
#check-2:checked ~ .gallery .wedding, #check-2:checked ~ .gallery .people, #check-2:checked ~ .gallery .family, #check-2:checked ~ .gallery .architecture, #check-2:checked ~ .gallery .showcase {transform: scale(0); transition: 0.5s; position: absolute;}

#check-3:checked ~ .gallery .wedding {transform: scale(1); transition: 0.5s; position: relative;}
#check-3:checked ~ .Register-Container .Register #checked-3 {font-style: italic; color: rgba(13,0,130,1.00);}
#check-3:checked ~ .gallery .portrait, #check-3:checked ~ .gallery .people, #check-3:checked ~ .gallery .family, #check-3:checked ~ .gallery .architecture, #check-3:checked ~ .gallery .showcase {transform: scale(0); transition: 0.5s; position: absolute;}

#check-4:checked ~ .gallery .family {transform: scale(1); transition: 0.5s; position: relative;}
#check-4:checked ~ .Register-Container .Register #checked-4 {font-style: italic; color: rgba(13,0,130,1.00);}
#check-4:checked ~ .gallery .wedding, #check-4:checked ~ .gallery .portrait, #check-4:checked ~ .gallery .people, #check-4:checked ~ .gallery .architecture, #check-4:checked ~ .gallery .showcase {transform: scale(0); transition: 0.5s; position: absolute;}

#check-5:checked ~ .gallery .people {transform: scale(1); transition: 0.5s; position: relative;}
#check-5:checked ~ .Register-Container .Register #checked-5 {font-style: italic; color: rgba(13,0,130,1.00);}
#check-5:checked ~ .gallery .wedding, #check-5:checked ~ .gallery .family, #check-5:checked ~ .gallery .portrait, #check-5:checked ~ .gallery .architecture, #check-5:checked ~ .gallery .showcase {transform: scale(0); transition: 0.5s; position: absolute;}

#check-6:checked ~ .gallery .showcase {transform: scale(1); transition: 0.5s; position: relative;}
#check-6:checked ~ .Register-Container .Register #checked-6 {font-style: italic; color: rgba(13,0,130,1.00);}
#check-6:checked ~ .gallery .wedding, #check-6:checked ~ .gallery .people, #check-6:checked ~ .gallery .family, #check-6:checked ~ .gallery .portrait, #check-6:checked ~ .gallery .architecture {transform: scale(0); transition: 0.5s; position: absolute;}

#check-7:checked ~ .gallery .architecture {transform: scale(1); transition: 0.5s; position: relative;}
#check-7:checked ~ .Register-Container .Register #checked-7 {font-style: italic; color: rgba(13,0,130,1.00);}
#check-7:checked ~ .gallery .wedding, #check-7:checked ~ .gallery .people, #check-7:checked ~ .gallery .family, #check-7:checked ~ .gallery .portrait, #check-7:checked ~ .gallery .showcase {transform: scale(0); transition: 0.5s; position: absolute;}



/* ====================================================================================================================================
                ----- Body - Media-Queries und Responsiv-Design -----
    ==================================================================================================================================== */

/* BREAKPOINTS AND RESPONSIVE-DESIGN für die Galerie */

@media (max-width: 2000px) {.Register h4 {font-size: 17px;}}

@media (max-width: 1500px) {.Register h4 {font-size: 16px;}}

@media (max-width: 965px) {.Register-Container {top: 95px;}}

@media (max-width: 900px) {.Register h4 {font-size: 15px;}}

@media (max-width: 820px) {
    .gallery {width: 97%;}
    .gallery_thumbnail {
        width: 28vw;
        height: 28vw;
        min-width: 150px;
        min-height: 150px;
        max-width: 300px;
        max-height: 300px;}
    .Register h4 {font-size: 14px;}}

@media (max-width: 800px) {.Register-Container {top: 70px;}}

@media (max-width: 750px) {.Register {width: 75%; max-width: 400px; flex-wrap: wrap;}}

@media (max-width: 650px) {
    .Register-Container {top: 64px;}
    .Register {width: 60%;}
    .gallery_thumbnail {min-width: 100px; min-height: 100px;}
    label {margin: 0px 5px;}}

@media (max-width: 540px) {
    .gallery {width: 98%;}
    .gallery_thumbnail {
        width: 42vw;
        height: 42vw;
        max-width: 350px;
        max-height: 350px;}
    .Register h4 {font-size: 13px;}}

@media (max-width: 476px) {
    .Register {width: 80%;}}



/* ====================================================================================================================================
                ----- THUMBNAIL - BILD-POSITIONIERUNG -----
    ==================================================================================================================================== */

#thumb-1 {object-position: 40% 50%;}
#thumb-2 {object-position: 50% 50%;}
#thumb-3 {object-position: 50% 50%;}
#thumb-4 {object-position: 50% 50%;}
#thumb-5 {object-position: 50% 50%;}
#thumb-6 {object-position: 50% 50%;}
#thumb-7 {object-position: 50% 50%;}
#thumb-8 {object-position: 50% 50%;}
#thumb-9 {object-position: 50% 50%;}
#thumb-10 {object-position: 50% 50%;}
#thumb-11 {object-position: 50% 50%;}
#thumb-12 {object-position: 50% 50%;}
#thumb-13 {object-position: 50% 50%;}
#thumb-14 {object-position: 50% 50%;}
#thumb-15 {object-position: 50% 50%;}
#thumb-16 {object-position: 50% 50%;}
#thumb-17 {object-position: 50% 50%;}
#thumb-18 {object-position: 50% 50%;}
#thumb-19 {object-position: 50% 50%;}
#thumb-20 {object-position: 50% 50%;}
#thumb-21 {object-position: 50% 50%;}
#thumb-22 {object-position: 50% 50%;}
#thumb-23 {object-position: 50% 50%;}
#thumb-24 {object-position: 50% 50%;}
#thumb-25 {object-position: 50% 50%;}
#thumb-26 {object-position: 50% 50%;}
#thumb-27 {object-position: 50% 50%;}
#thumb-28 {object-position: 50% 50%;}
#thumb-29 {object-position: 50% 50%;}
#thumb-30 {object-position: 50% 50%;}
#thumb-31 {object-position: 50% 50%;}
#thumb-32 {object-position: 50% 50%;}
#thumb-33 {object-position: 50% 50%;}
#thumb-34 {object-position: 50% 50%;}
#thumb-35 {object-position: 50% 50%;}
#thumb-36 {object-position: 50% 50%;}
#thumb-37 {object-position: 50% 50%;}
#thumb-38 {object-position: 50% 50%;}
#thumb-39 {object-position: 50% 50%;}
#thumb-40 {object-position: 50% 50%;}
#thumb-41 {object-position: 50% 50%;}
#thumb-42 {object-position: 50% 50%;}
#thumb-43 {object-position: 50% 50%;}
#thumb-44 {object-position: 50% 50%;}
#thumb-45 {object-position: 50% 50%;}
#thumb-46 {object-position: 50% 50%;}
#thumb-47 {object-position: 50% 50%;}
#thumb-48 {object-position: 50% 50%;}
#thumb-49 {object-position: 50% 50%;}
#thumb-50 {object-position: 50% 50%;}
#thumb-51 {object-position: 50% 50%;}
#thumb-52 {object-position: 50% 50%;}
#thumb-53 {object-position: 50% 50%;}
#thumb-54 {object-position: 50% 50%;}
#thumb-55 {object-position: 50% 50%;}
#thumb-56 {object-position: 50% 50%;}
#thumb-57 {object-position: 50% 50%;}
#thumb-58 {object-position: 50% 50%;}
#thumb-59 {object-position: 50% 50%;}
#thumb-60 {object-position: 50% 50%;}