#warengruppe .artpic {float:none !important; margin-left: auto; margin-right: auto;}
         
.preisbox {max-width:100% !important;}

        .G-inwg a {color: var(--linkcolor2); font-weight: bold; padding: 10 50 10 10;  display: block; max-width: fit-content; }
        
        /* Checkboxen immer verstecken */
        .nav-toggle {
            display: none;
        }

        /* ======================================================= */
        /* STANDARD-STYLES (Desktop-Ansicht / Große Bildschirme)   */
        /* ======================================================= */
        
        /* Die echten H2-Überschriften stylen */
        h2.VG-headline,
        h2.click-headline {
            font-size: 2.2rem;
            font-weight: bold;
            color: #333;
            display: block;
            margin-top: 40px;
            margin-bottom: 15px;
        }

        h2.VG-headline a {color: var(--linkcolor2);}
        
        /* Das Label verhält sich auf dem Desktop wie normaler Text */
        .headline-label {
            cursor: default;
            display: block;
            width: 100%;
        }

        .slide-in-div {
            position: static; 
            width: 100%;
            height: auto;
        }

        .overlay-content {
            padding: 0;
        }

        /* Schließen-Elemente und doppelte Überschriften auf Desktop verstecken */
        .close-btn,
        .overlay-headline {
            display: none;
        }

        /* Flexbox-Container für das 50/50 Layout im Desktop */
        .desktop-grid {
            display: flex;
            gap: 30px; 
            align-items: stretch; 
            margin-top: 40px;
        }

        .grid-item {
            flex: 1; 
            display: flex;
            flex-direction: column;
            background-color: #f8f9fa; 
            padding: 20px;
            border-radius: 6px;
        }
        
        .desktop-grid h2.click-headline {
            margin-top: 0; 
        }

@media (pointer: coarse) {
  .menu_top a {
    padding: 15px 25px; /* Größere Klickfläche */
    font-size: 16px;
  }
  
      
}
 /* Optimierung für Maus-Bedienung (Desktop/Laptop) */
@media (pointer: fine) {
  .menu_top a:hover {
    background-color: #0056b3; /* Hover-Effekt nur bei Maus */
  }
}
        
        /* ======================================================= */
        /* MOBIL-STYLES (Ausschließlich bei max-width: 1000px)     */
        /* ======================================================= */
        @media (max-width: 1000px) {
            #headline {font-size: 14pt !important;}
            .header2 {display:none;}
            .pb_bez {display:none;}
            .preisbox {float:none !important; width: 80% !important; margin-left:auto !important; margin-right:auto !important;}
             #warengruppe .artpic {float:none !important; text-align:center;}
            /* Desktop-Flexbox auflösen für korrektes fixed Overlay beim Scrollen */
            .desktop-grid {
                display: block;
                margin-top: 0;
            }

            .grid-item {
                display: block;
                background-color: transparent;
                padding: 0;
                border-radius: 0;
            }

            /* NEU: Das H2-Element wird mobil zum Button-Container transformiert */
            h2.click-headline {
                margin: 0 0 16px 0;
                font-size: 1.2rem; /* Kompaktere Schriftgröße für den Button */
                background-color: #0066cc; /* Button-Farbe */
                border-radius: 8px; /* Abgerundete Ecken */
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Feiner Schatten */
                transition: transform 0.1s ease, box-shadow 0.1s ease; /* Übergang für Klick-Effekt */
                clear: both;
    min-width: fit-content;
    margin-right: auto;
    margin-left: auto;
    width: 85%;
              
            }

            /* Aktiver Klick-Effekt beim Antippen auf dem Smartphone */
            h2.click-headline:active {
                transform: translateY(2px); /* Button senkt sich leicht ab */
                box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15); /* Schatten wird kürzer */
            }

            /* Das innenliegende Label füllt den Button voll aus */
            .headline-label {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                box-sizing: border-box;
                color: #ffffff; /* Weißer Text auf blauem Grund */
                cursor: pointer;
                padding: 14px 20px; /* Großzügige Klickfläche */
            }
            
            .headline-label:hover {
                color: #ffffff;
            }

            /* Der Pfeil wird weiß gefärbt und passend zum Button gestylt */
            .headline-label::after {
                content: "\25b8";
                font-size: 1.4rem;
                color: #ffffff;
                transition: transform 0.2s ease;
            }

            /* Das mobile Vollbild-Overlay */
            .slide-in-div {
                position: fixed;
                top: 0;
                right: -100%; 
                width: 100%;
                height: 100%;
                box-shadow: -5px 0 15px rgba(0,0,0,0.1);
                transition: right 0.4s ease-in-out; 
                z-index: 99999;
                overflow-y: auto;
            }
            #div-0 { background-color: rgba(255, 255, 255, 0.99); }
            #div-1 { background-color: rgba(255, 255, 255, 0.99); }
            #div-2 { background-color: rgba(255, 255, 255, 0.99); }
            #div-3 { background-color: rgba(255, 255, 255, 0.99); }
            #div-4 { background-color: rgba(255, 255, 255, 0.99); }
            #div-5 { background-color: rgba(255, 255, 255, 0.99); }
            #div-6 { background-color: rgba(255, 255, 255, 0.99); }
            #div-AinWG { background-color: rgba(255, 255, 255, 0.99); }

            #toggle-0:checked ~ #div-0,
            #toggle-1:checked ~ #div-1,
            #toggle-2:checked ~ #div-2,
            #toggle-3:checked ~ #div-3,
            #toggle-4:checked ~ #div-4,
            #toggle-5:checked ~ #div-5,
            #toggle-6:checked ~ #div-6,
            #toggle-AinWG:checked ~ #div-AinWG {
                right: 0;
            }

            .overlay-content {
                padding: 15px 20px 40px 20px;
            }

            /* Die kopierte Überschrift im Overlay bleibt als reiner Text gestaltet */
            .overlay-headline {
                display: block;
                font-size: 1.2rem;
                font-weight: bold;
                color: #333;
                margin-top: 0;
                margin-bottom: 20px;
                border-bottom: 2px solid #ddd;
                padding-bottom: 10px;
                cursor: pointer;
                border-radius: 8px;
    background: #ddde;
    padding-top: 20px;
    padding-right: 40px;
    padding-left: 10px;
            }

            .close-btn {
                display: block;
                position: absolute;
                top: 20px;
                right: 40px;
                font-size: 2rem;
                cursor: pointer;
                color: #333;
                z-index: 10;
            }
            
            body:has(.nav-toggle:checked) {
                overflow: hidden;
            }
        }