/*
         * ====================================================
         * GRUNDLAGEN
         * ====================================================
         */

        html,
        body {

            margin: 0;

            padding: 0;
        }


        /*
         * ====================================================
         * FOTO-GALERIE
         * ====================================================
         */

        .foto-galerie {

            width: 100%;
        }


        .foto-galerie__inner {

            width: 100%;

            padding:
                2rem;

            box-sizing:
                border-box;
        }


        .foto-galerie__title {

            margin:
                0 0 0.5rem;

            color: #222;

            font-family:
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size:
                2rem;

            line-height:
                1.2;
        }


        /*
         * ====================================================
         * FOTOGRAF
         * ====================================================
         */

        .foto-galerie__photographer {

            margin:
                0 0 2rem;

            color:
                #666;

            font-family:
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size:
                0.95rem;

            line-height:
                1.4;
        }


        .foto-galerie__section-title {

            margin:
                2.5rem 0 1rem;

            color: #222;

            font-family:
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size:
                1.4rem;

            line-height:
                1.3;
        }


        /* ====================================================
           Thumbnail-Galerie
           ==================================================== */

        .foto-galerie__grid {

            display: flex;

            flex-wrap: wrap;

            align-items: flex-start;

            gap:
                1rem;
        }


        .foto-galerie__thumbnail {

            display: block;

            width:
                min(
                    200px,
                    100%
                );

            overflow: hidden;

            background:
                #eee;

            text-decoration: none;
        }


        .foto-galerie__thumbnail img {

            display: block;

            width: auto;

            height: auto;

            max-width: 200px;

            max-height: 200px;

            object-fit: contain;

            transition:
                opacity 0.15s ease;
        }


        .foto-galerie__thumbnail:hover img,
        .foto-galerie__thumbnail:focus img {

            opacity:
                0.75;
        }


        /* ====================================================
           GROSSBILDANSICHT
           ==================================================== */

        .foto-galerie__lightbox {

            position: fixed;

            inset: 0;

            z-index: 1000;

            display: grid;

            grid-template-columns:
                5rem
                minmax(0, 1fr)
                5rem;

            grid-template-rows:
                4rem
                minmax(0, 1fr);

            width: 100vw;

            height: 100vh;

            height: 100dvh;

            overflow: hidden;

            box-sizing: border-box;

            background:
                rgba(
                    0,
                    0,
                    0,
                    0.95
                );
        }


        .foto-galerie__lightbox-image {

            grid-column: 2;

            grid-row: 2;

            display: block;

            width: 100%;

            height: 100%;

            max-width: 100%;

            max-height: 100%;

            object-fit: contain;

            box-sizing: border-box;
        }


        /*
         * Navigation innerhalb der Lightbox
         */
        .foto-galerie__lightbox-link {

            color: #fff;

            text-decoration: none;

            display: flex;

            align-items: center;

            justify-content: center;

            font-family:
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size:
                3rem;

            line-height: 1;

            user-select: none;
        }


        .foto-galerie__lightbox-link:hover,
        .foto-galerie__lightbox-link:focus {

            background:
                rgba(
                    255,
                    255,
                    255,
                    0.1
                );
        }


        /*
         * Vorheriges Bild <
         */
        .foto-galerie__prev {

            grid-column: 1;

            grid-row: 1 / 3;
        }


        /*
         * Nächstes Bild >
         */
        .foto-galerie__next {

            grid-column: 3;

            grid-row: 2;
        }


        /*
         * Schließen X
         */
        .foto-galerie__close {

            grid-column: 3;

            grid-row: 1;

            font-size:
                2.5rem;
        }


        /*
         * Platzhalter
         */
        .foto-galerie__placeholder {

            grid-column: 3;

            grid-row: 2;
        }


        /*
         * Bildnummer
         */
        .foto-galerie__counter {

            position: fixed;

            top: 1rem;

            left: 50%;

            transform:
                translateX(-50%);

            z-index: 1001;

            color: #fff;

            font-family:
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            font-size:
                0.9rem;

            line-height:
                1;

            opacity:
                0.7;
        }


        /* ====================================================
           TABLET
           ==================================================== */

        @media (max-width: 700px) {

            .foto-galerie__inner {

                padding:
                    1rem;
            }


            .foto-galerie__title {

                margin-bottom:
                    0.5rem;

                font-size:
                    1.7rem;
            }


            .foto-galerie__photographer {

                margin-bottom:
                    1.5rem;

                font-size:
                    0.9rem;
            }


            .foto-galerie__grid {

                gap:
                    0.75rem;
            }


            .foto-galerie__thumbnail {

                width:
                    calc(
                        50% - 0.375rem
                    );

                max-width:
                    200px;
            }


            .foto-galerie__thumbnail img {

                max-width:
                    100%;

                max-height:
                    200px;
            }


            .foto-galerie__lightbox {

                grid-template-columns:
                    3.5rem
                    minmax(0, 1fr)
                    3.5rem;

                grid-template-rows:
                    3.5rem
                    minmax(0, 1fr);
            }


            .foto-galerie__lightbox-link {

                font-size:
                    2.5rem;
            }
        }


        /* ====================================================
           SMARTPHONE
           ==================================================== */

        @media (max-width: 420px) {

            .foto-galerie__inner {

                padding:
                    0.75rem;
            }


            .foto-galerie__title {

                font-size:
                    1.5rem;
            }


            .foto-galerie__photographer {

                margin-bottom:
                    1rem;

                font-size:
                    0.85rem;
            }


            .foto-galerie__grid {

                gap:
                    0.5rem;
            }


            .foto-galerie__thumbnail {

                width:
                    calc(
                        50% - 0.25rem
                    );

                max-width:
                    none;
            }


            .foto-galerie__thumbnail img {

                width:
                    100%;

                max-width:
                    100%;

                max-height:
                    200px;
            }


            .foto-galerie__lightbox {

                grid-template-columns:
                    3rem
                    minmax(0, 1fr)
                    3rem;

                grid-template-rows:
                    3.5rem
                    minmax(0, 1fr);
            }


            .foto-galerie__lightbox-link {

                font-size:
                    2rem;
            }


            .foto-galerie__close {

                font-size:
                    2rem;
            }
        }