:root{
  --rot:rgba(178, 0, 33, 1);
  --dunkelgrau: rgba(35, 35, 35, 1);
  --hellgrau: rgba(135, 135, 145, 1);
  --mittelgrau: rgba(185, 185, 195,1);
  --verlauf_n_unten:  linear-gradient(to bottom, rgba(175, 175, 185, 1), rgba(135, 135, 145, 1));
  --verlauf_n_oben:  linear-gradient(to bottom, rgba(135, 135, 145, 1), rgba(175, 175, 185, 1));
  --schwarz: rgba(0, 0, 0, 1);
  --weiss: rgba(255, 255, 255, 1);
  --strich: border: 3px solid var(--rot);
  font-size: 16px;
}

        /* header {
            background-color: #333;
            color: #fff;
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: relative;
            z-index: 100;
        } */



        /* --- MENÜ LOGIK (HTML & CSS Only) --- */
        
        /* Die unsichtbare Checkbox */
        #menu-toggle {
            display: none; 
        }

        /* Das Hamburger-Icon (Label für die Checkbox) */
        .menu-icon {
            display: none; /* Desktop: ausgeblendet */
            cursor: pointer;
            font-size: 2.2rem;
            user-select: none;
        }

        /* Der Menü-Container (ul) */
        .menu {
            list-style: none;
            display: flex;
            justify-content: flex-end;
            gap: 20px;
        }

        .menu li {
            position: relative;
        }

        .menu a {
            text-decoration: none;
            color: var(--schwarz);
            padding: 10px 15px;
            display: block;
            transition: background 0.7s;
        }

        .menu a:hover {
            background-color: var(--rot);
            border-radius: 1rem;
        }

        /* --- DROPDOWN (Menüpunkt 4) --- */
        
        /* Das Untermenü verstecken */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: var(--hellgrau);
            min-width: 200px;
            border-radius: 1rem;
            list-style: none;
            display: none; /* Standardmäßig versteckt */
            box-shadow: 0 8px 16px rgba(0,0,0,0.4);
            z-index: 200;
        }

        /* Dropdown anzeigen bei Hover auf das Eltern-li */
        .has-dropdown:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu li a {
            padding: 12px 16px;
        }

        .dropdown-menu li a:hover {
            background-color: var(--rot);
            border-radius: 1rem; /* Eckig im Dropdown */
        }





        /* --- MOBILE VERSION (Media Query) --- */
        @media (max-width: 768px) {
            
            /* Hamburger Icon anzeigen */
            .menu-icon {
                display: block;
                z-index: 999;
                padding-right: 2rem;
            }

            /* Das Menü selbst transformieren */
            .menu {
                position: fixed;
                top: 190px; /* Höhe des Headers */
                left: 0;
                width: 100%; /* Ganze Breite */
                /* height: calc(100vh - 190px);  Restliche Höhe */
                background-color: var(--mittelgrau);
                flex-direction: column; /* Untereinander */
                align-items: center; /* Zentriert */
                gap: 0;
                /* Animation Logic */
                transform: translateX(-100%); /* Start: Links draußen */
                transition: transform 0.7s ease-in-out;
            }

            /* Wenn Checkbox checked -> Menü reinholen */
            #menu-toggle:checked ~ .menu {
                transform: translateX(0);
            }

            /* Styling der Links auf Mobile */
            .menu li {
                width: 100%;
                text-align: center;
                border-bottom: 1px solid #444;
            }

            .menu a {
                padding: 20px;
            }

            /* --- Mobile Dropdown Anpassung --- */
            .has-dropdown:hover .dropdown-menu {
                position: static; /* Nicht mehr absolut, fließt im Content */
                display: block;
                background-color: var(--weiss); /* Dunklerer Hintergrund zur Unterscheidung */
                width: 100%;
                box-shadow: none;
            }
            
            /* Pfeil Indikator für Dropdown */
            .has-dropdown > a::after {
                content: ' ▼';
                font-size: 0.9em;
            }
        }
    

        #start_body .start, #uns_body .uns, #galerie_body .galerie, #kontakt_body .kontakt, #impressum_body .impressum{
            border-bottom: 2px solid var(--rot);
        }