html {
       scroll-behavior: smooth;
   }

   /* Sanfter Übergang für das mobile Menü */
   #mobile-menu {
       transition: all 0.3s ease-in-out;
       max-height: 0;
       overflow: hidden;
   }

   #mobile-menu.open {
       max-height: 500px;
       /* Ausreichend für alle Links */
       padding-bottom: 2rem;
   }

   ::selection {
       background: rgb(93 161 114);
       color: white;
   }

   #office-lightbox-root {
       pointer-events: none;
   }

   #office-lightbox-root:not(.modal-hidden) {
       pointer-events: auto;
   }

   #office-lightbox-backdrop,
   #office-lightbox-image,
   #office-lightbox-counter {
       transition: opacity 0.2s ease;
   }

   .modal-hidden #office-lightbox-backdrop {
       opacity: 0;
   }

   .modal-hidden #office-lightbox-image {
       opacity: 0;
   }

   .modal-hidden #office-lightbox-counter {
       opacity: 0;
   }

   .modal-hidden [data-lightbox-close-always],
   .modal-hidden #office-lightbox-prev,
   .modal-hidden #office-lightbox-next {
       opacity: 0;
   }

   [data-lightbox-close-always],
   #office-lightbox-prev,
   #office-lightbox-next {
       transition: opacity 0.2s ease;
   }

   #office-lightbox-prev,
   #office-lightbox-next {
       display: flex;
   }

   #office-lightbox-prev.lightbox-nav-hidden,
   #office-lightbox-next.lightbox-nav-hidden {
       display: none;
   }

   #mobile-menu {
       transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   }

   /* Sicherstellen, dass das Overlay wirklich über allem liegt außer der Nav */
   #menu-overlay {
       pointer-events: auto;
   }

   #privacy-modal-root {
       pointer-events: none;
   }

   #privacy-modal-root:not(.modal-hidden) {
       pointer-events: auto;
   }

   #privacy-modal-backdrop,
   #privacy-modal-panel {
       transition: opacity 0.2s ease, transform 0.25s ease;
   }

   .modal-hidden #privacy-modal-backdrop {
       opacity: 0;
   }

   .modal-hidden #privacy-modal-panel {
       transform: translateY(12px) scale(0.98);
       opacity: 0;
   }

   @media (max-width: 640px) {
       #privacy-notice-btn {
           left: 0.75rem;
           width: 2.75rem;
           height: 2.75rem;
           bottom: calc(0.75rem + env(safe-area-inset-bottom));
       }
   }

   #product-modal-root {
       pointer-events: none;
   }

   #product-modal-root:not(.modal-hidden) {
       pointer-events: auto;
   }

   #product-modal-backdrop,
   #product-modal-panel {
       transition: opacity 0.2s ease, transform 0.25s ease;
   }

   .modal-hidden #product-modal-backdrop {
       opacity: 0;
   }

   .modal-hidden #product-modal-panel {
       transform: translateY(12px) scale(0.98);
       opacity: 0;
   }

   .product-card:focus-visible {
       outline: 3px solid #5da172;
       outline-offset: 3px;
   }

   #germany-badge {
       animation: badge-fade-in 0.6s ease;
       pointer-events: none;
   }

   @keyframes badge-fade-in {
       from {
           opacity: 0;
           transform: translateY(10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* Dezentes "Made in Germany"-Badge für Produktkarten */
   .made-in-germany {
       position: absolute;
       bottom: 10px;
       right: 10px;
       width: 16px;
       height: 11px;
       border-radius: 2px;
       overflow: hidden;
       opacity: 0.55;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
       transition: opacity 0.2s ease;
   }

   .product-card:hover .made-in-germany {
       opacity: 0.9;
   }

   .made-in-germany span {
       display: block;
       width: 100%;
       height: 33.33%;
   }

   .made-in-germany .stripe-black {
       background: #1a1a1a;
   }

   .made-in-germany .stripe-red {
       background: #d00000;
   }

   .made-in-germany .stripe-gold {
       background: #ffce00;
   }

   /* Dezentes EU-Badge für Produktkarten (z. B. Frankreich) */
   .made-in-eu {
       position: absolute;
       bottom: 10px;
       right: 10px;
       width: 16px;
       height: 11px;
       border-radius: 2px;
       overflow: hidden;
       opacity: 0.55;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
       transition: opacity 0.2s ease;
       background: #003399;
   }

   .product-card:hover .made-in-eu {
       opacity: 0.9;
   }

   .made-in-eu svg {
       width: 100%;
       height: 100%;
       display: block;
   }

   /* Animation für das stufenlose Logo-Laufband */
   @keyframes marquee {
       0% {
           transform: translateX(0%);
       }

       100% {
           transform: translateX(-50%);
       }
   }

   .animate-marquee {
       display: flex;
       width: max-content;
       animation: marquee 35s linear infinite;
   }

   .animate-marquee:hover {
       animation-play-state: paused;
   }

   #service-modal-root {
       pointer-events: none;
       /* blockiert die Seite nicht, solange unsichtbar */
   }

   #service-modal-root:not(.modal-hidden) {
       pointer-events: auto;
       /* nur aktiv, wenn Modal offen ist */
   }

   #service-modal-backdrop,
   #service-modal-panel {
       transition: opacity 0.2s ease, transform 0.25s ease;
   }

   .modal-hidden #service-modal-backdrop {
       opacity: 0;
   }

   .modal-hidden #service-modal-panel {
       transform: translateY(12px) scale(0.98);
       opacity: 0;
   }

   .service-card {
       cursor: pointer;
   }

   .service-card:focus-visible {
       outline: 3px solid #5da172;
       outline-offset: 3px;
   }