/*
         * ====================================================
         * ALLE STYLES UNTER .foto-galerien GEKAPSELT
         * ====================================================
         */

        .foto-galerien {
            width: 100%;
        }


        .foto-galerien__inner {

            width: 100%;

            max-width: 900px;

            margin:
                0 auto;

            padding:
                2rem;
        }


        .foto-galerien__title {

            margin:
                0 0 2rem;

            color:
                #222;

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

            font-size:
                2rem;

            line-height:
                1.2;
        }


        /*
         * ====================================================
         * DESKTOP: TABELLE
         * ====================================================
         */

        .foto-galerien__table-wrapper {

            width:
                100%;

            overflow-x:
                auto;
        }


        .foto-galerien__table {

            width:
                100%;

            border-collapse:
                collapse;

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

            font-size:
                1rem;
        }


        .foto-galerien__table th {

            padding:
                0.75rem 1rem;

            color:
                #222;

            background:
                #e9e9e9;

            font-weight:
                600;

            text-align:
                left;

            white-space:
                nowrap;

            border-bottom:
                2px solid #ccc;
        }


        .foto-galerien__table td {

            padding:
                0;

            color:
                #222;

            background:
                #f7f7f7;

            vertical-align:
                top;

            border-bottom:
                1px solid #ddd;
        }


        /*
         * Jede Tabellenzelle ist komplett klickbar.
         */
        .foto-galerien__row-link {

            display:
                block;

            width:
                100%;

            box-sizing:
                border-box;

            padding:
                0.75rem 1rem;

            color:
                #222;

            text-decoration:
                none;
        }


        .foto-galerien__table tbody tr:hover td {

            background:
                #eeeeee;
        }


        .foto-galerien__table tbody tr:focus-within td {

            background:
                #eeeeee;
        }


        /*
         * Datum und Ort nicht unnötig umbrechen.
         */
        .foto-galerien__date,
        .foto-galerien__location {

            white-space:
                nowrap;
        }


        /*
         * ====================================================
         * MOBILE: KARTEN
         * ====================================================
         */

        .foto-galerien__cards {

            display:
                none;
        }


        /*
         * Die komplette Karte ist ein Link.
         */
        .foto-galerien__card {

            display:
                block;

            box-sizing:
                border-box;

            width:
                100%;

            margin:
                0 0 0.75rem;

            padding:
                1rem;

            color:
                #222;

            background:
                #f5f5f5;

            border:
                1px solid #ddd;

            border-radius:
                0.5rem;

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

            text-decoration:
                none;

            transition:
                background-color 0.15s ease,
                border-color 0.15s ease,
                transform 0.1s ease;
        }


        .foto-galerien__card:hover,
        .foto-galerien__card:focus {

            color:
                #222;

            background:
                #eeeeee;

            border-color:
                #bbb;

            text-decoration:
                none;
        }


        .foto-galerien__card:active {

            transform:
                scale(0.995);
        }


        .foto-galerien__card-row {

            display:
                flex;

            gap:
                0.75rem;

            margin:
                0 0 0.4rem;

            line-height:
                1.4;
        }


        .foto-galerien__card-row:last-child {

            margin-bottom:
                0;
        }


        .foto-galerien__card-label {

            flex:
                0 0 4rem;

            color:
                #666;

            font-size:
                0.85rem;

            font-weight:
                600;
        }


        .foto-galerien__card-value {

            min-width:
                0;

            color:
                #222;
        }


        .foto-galerien__card-title {

            font-weight:
                600;
        }


        .foto-galerien__empty {

            margin:
                0;

            color:
                #666;

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

            font-size:
                1rem;
        }


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

        @media (max-width: 600px) {

            .foto-galerien__inner {

                padding:
                    1rem;
            }


            .foto-galerien__title {

                margin-bottom:
                    1.5rem;

                font-size:
                    1.6rem;
            }


            /*
             * Desktop-Tabelle ausblenden.
             */
            .foto-galerien__table-wrapper {

                display:
                    none;
            }


            /*
             * Mobile-Karten anzeigen.
             */
            .foto-galerien__cards {

                display:
                    block;
            }


            .foto-galerien__card {

                padding:
                    0.9rem;
            }

        }