/* WICHTIG: Basis-Styling für den Desktop Dark Mode Toggle */
.dark-mode-toggle {
    position: relative;
    /* Breite des Buttons - Standardgröße für Desktop */
    width: 44px;
    /* Höhe des Buttons - Standardgröße für Desktop */
    height: 72px;
    /* Abstände zum umgebenden Element - Standard Desktop Margins */
    margin-left: 10px;
    margin-top: 0px;
    margin-bottom: 40px;
    /* Transparenter Hintergrund für bessere Integration */
    background-color: transparent;
    /* Roter Rahmen für visuelles Feedback */
    border: 1px solid #ff0000;
    border-radius: 45px;
    cursor: pointer;
    /* Sanfte Übergänge bei Zustandsänderungen */
    transition: background-color 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    padding: 10.5px;
    z-index: 3;
}

/* Container für den mobilen Toggle Button - standardmäßig ausgeblendet */
.mobile-dark-mode-toggle {
    display: none;
}

/* Mobile Ansicht Anpassungen - wird aktiv unter 768px Bildschirmbreite */
@media screen and (max-width: 768px) {
    /* Desktop Version ausblenden in mobiler Ansicht */
    .dark-mode-toggle {
        display: none;
    }
    
    /* Mobilen Toggle einblenden und im Menü positionieren */
    .mobile-dark-mode-toggle {
        display: block;
        /* Abstand zu anderen Menüpunkten */
        margin: 20px 0;
        /* Einrückung für Ausrichtung mit Menüpunkten */
        padding-left: 20px;
    }
    
    /* Angepasste Größe und Rotation für mobilen Toggle */
    .mobile-dark-mode-toggle .dark-mode-toggle {
        display: inline-block;
        margin: 0;
        /* Kompaktere Größe für mobile Ansicht */
        width: 36px;
        height: 60px;
        /* Rotation um 90 Grad für Anpassung an Menü-Design */
        transform: rotate(90deg);
    }
    
    /* Styling des beweglichen Handles im mobilen Toggle */
    .mobile-dark-mode-toggle .dark-mode-toggle .toggle-handle {
        /* Kompaktere Größe für den Handle */
        width: 24px;
        height: 24px;
        /* Positionierung innerhalb des Toggles */
        left: 5px;
        top: 6px;
        /* Gegenrotation für gerade Ausrichtung der Icons */
        transform: rotate(-90deg);
    }
    
    /* Angepasste Icon-Größe für mobile Ansicht */
    .mobile-dark-mode-toggle .dark-mode-toggle .toggle-icon {
        width: 20px;
        height: 20px;
    }
    
    /* Handle-Position und Rotation im Dark Mode */
    .site-dark .mobile-dark-mode-toggle .dark-mode-toggle .toggle-handle {
        /* Verschiebung nach unten und Rotation für Dark Mode */
        transform: translateY(22px) rotate(-90deg);
    }
}

/* Dark Mode spezifische Anpassungen */
.site-dark .dark-mode-toggle {
    background-color: transparent;
}

/* WICHTIG: Styling des beweglichen Kreises im Toggle */
.dark-mode-toggle .toggle-handle {
    position: absolute;
    /* Größe des Kreises */
    width: 30px;
    height: 30px;
    /* Farbe des Kreises */
    background-color: #FF003A;
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Position des Kreises */
    left: 6px;
    top: 7px;
}

/* WICHTIG: Bewegung des Kreises im Dark Mode */
.site-dark .dark-mode-toggle .toggle-handle {
    /* Verschiebung nach unten im Dark Mode */
    transform: translateY(24px);
}

/* WICHTIG: Größe der Icons */
.dark-mode-toggle .toggle-icon {
    width: 24px;
    height: 24px;
}

/* WICHTIG: Pfad und Styling des Sonnen-Icons */
.dark-mode-toggle .sun-icon {
    background: url('../images/light_mode_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg') no-repeat center;
    background-size: contain;
    display: block;
    /* Farbanpassung des Icons */
    filter: brightness(0) invert(1);
}

/* WICHTIG: Pfad und Styling des Mond-Icons */
.dark-mode-toggle .moon-icon {
    background: url('../images/dark_mode_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg') no-repeat center;
    /* Größe des Mond-Icons */
    background-size: 18px;
    display: none;
    /* Farbanpassung des Icons */
    filter: brightness(0) invert(1);
}

/* Icon-Sichtbarkeit im Dark Mode */
.site-dark .dark-mode-toggle .sun-icon {
    display: none;
}

.site-dark .dark-mode-toggle .moon-icon {
    display: block;
}

/* WICHTIG: Responsive Anpassungen */
@media screen and (max-width: 768px) {
    .dark-mode-toggle {
        /* Abstände auf mobilen Geräten */
        margin: 0 10px;
    }
}

/* ================================
   DARK MODE TOGGLE FLUID DESIGN EXTENSION
   Für Desktop-Auflösungen 1024px - 2560px
   Basis: 1920x1080 (bleibt unverändert)
   Mobile CSS (max-width: 768px) bleibt unverändert
   ================================ */

/* Fluid Design Variables für Dark Mode Toggle */
:root {
  /* Toggle Dimensions */
  --toggle-width: clamp(35px, 3.5vw, 50px);                      /* 35px - 50px */
  --toggle-height: clamp(60px, 6vw, 80px);                       /* 60px - 80px */
  --toggle-handle-size: clamp(24px, 2.5vw, 34px);                /* 24px - 34px */
  --toggle-icon-size: clamp(18px, 2vw, 28px);                    /* 18px - 28px */
  
  /* Toggle Spacing */
  --toggle-margin-left: clamp(20px, 1vw, 25px);                   /* 8px - 12px */
  --toggle-margin-bottom: clamp(30px, 3.5vw, 45px);              /* 30px - 45px */
  --toggle-padding: clamp(8px, 1vw, 12px);                       /* 8px - 12px */
  --toggle-handle-left: clamp(4px, 0.5vw, 7px);                  /* 4px - 7px */
  --toggle-handle-top: clamp(5px, 0.6vw, 8px);                   /* 5px - 8px */
  --toggle-handle-translate: clamp(18px, 2vw, 28px);             /* 18px - 28px */
}

/* Desktop-only Fluid Anpassungen für Dark Mode Toggle (1024px - 2560px) */
@media screen and (min-width: 1024px) {
  
  /* Desktop Toggle Button - Fluid Sizing */
  .dark-mode-toggle {
    width: var(--toggle-width);
    height: var(--toggle-height);
    margin-left: var(--toggle-margin-left);
    margin-bottom: var(--toggle-margin-bottom);
    padding: var(--toggle-padding);
  }
  
  /* Toggle Handle - Fluid Sizing und Positioning */
  .dark-mode-toggle .toggle-handle {
    width: var(--toggle-handle-size);
    height: var(--toggle-handle-size);
    left: var(--toggle-handle-left);
    top: var(--toggle-handle-top);
  }
  
  /* Dark Mode Handle Position - Fluid Translation */
  .site-dark .dark-mode-toggle .toggle-handle {
    transform: translateY(var(--toggle-handle-translate));
  }
  
  /* Toggle Icons - Fluid Sizing */
  .dark-mode-toggle .toggle-icon {
    width: var(--toggle-icon-size);
    height: var(--toggle-icon-size);
  }
  
  /* Mond-Icon spezifische Größe */
  .dark-mode-toggle .moon-icon {
    background-size: clamp(14px, 1.5vw, 22px);
  }
}

/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1024px - 1366px) */
@media screen and (min-width: 1024px) and (max-width: 1366px) {
  .dark-mode-toggle {
    width: clamp(32px, 3vw, 42px);
    height: clamp(55px, 5.5vw, 70px);
    margin-left: clamp(6px, 0.8vw, 10px);
    margin-bottom: clamp(25px, 3vw, 35px);
    padding: clamp(6px, 0.8vw, 10px);
  }
  
  .dark-mode-toggle .toggle-handle {
    width: clamp(20px, 2.2vw, 28px);
    height: clamp(20px, 2.2vw, 28px);
    left: clamp(3px, 0.4vw, 5px);
    top: clamp(4px, 0.5vw, 6px);
  }
  
  .site-dark .dark-mode-toggle .toggle-handle {
    transform: translateY(clamp(15px, 1.8vw, 22px));
  }
  
  .dark-mode-toggle .toggle-icon {
    width: clamp(16px, 1.8vw, 24px);
    height: clamp(16px, 1.8vw, 24px);
  }
  
  .dark-mode-toggle .moon-icon {
    background-size: clamp(12px, 1.3vw, 18px);
  }
}

/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1367px - 1440px) */
@media screen and (min-width: 1367px) and (max-width: 1440px) {
    .dark-mode-toggle {
      width: clamp(32px, 3vw, 42px);
      height: clamp(55px, 5.5vw, 70px);
      margin-left: clamp(6px, 0.8vw, 10px);
      margin-bottom: clamp(25px, 3vw, 35px);
      padding: clamp(6px, 0.8vw, 10px);
    }
    
    .dark-mode-toggle .toggle-handle {
      width: clamp(20px, 2.2vw, 28px);
      height: clamp(20px, 2.2vw, 28px);
      left: clamp(3px, 0.4vw, 5px);
      top: clamp(4px, 0.5vw, 6px);
    }
    
    .site-dark .dark-mode-toggle .toggle-handle {
      transform: translateY(clamp(15px, 1.8vw, 22px));
    }
    
    .dark-mode-toggle .toggle-icon {
      width: clamp(16px, 1.8vw, 24px);
      height: clamp(16px, 1.8vw, 24px);
    }
    
    .dark-mode-toggle .moon-icon {
      background-size: clamp(12px, 1.3vw, 18px);
    }
  }

/* Spezielle Anpassungen für kleinere Desktop-Auflösungen (1441px - 1919px) */
@media screen and (min-width: 1441px) and (max-width: 1919px) {
  .dark-mode-toggle {
    width: clamp(32px, 3vw, 42px);
    height: clamp(55px, 5.5vw, 70px);
    margin-left: clamp(9px, 0.8vw, 17px);
    margin-bottom: clamp(25px, 3vw, 35px);
    padding: clamp(6px, 0.8vw, 10px);
  }
  
  .dark-mode-toggle .toggle-handle {
    width: clamp(20px, 2.2vw, 28px);
    height: clamp(20px, 2.2vw, 28px);
    left: clamp(3px, 0.4vw, 5px);
    top: clamp(4px, 0.5vw, 6px);
  }
  
  .site-dark .dark-mode-toggle .toggle-handle {
    transform: translateY(clamp(15px, 1.8vw, 22px));
  }
  
  .dark-mode-toggle .toggle-icon {
    width: clamp(16px, 1.8vw, 24px);
    height: clamp(16px, 1.8vw, 24px);
  }
  
  .dark-mode-toggle .moon-icon {
    background-size: clamp(12px, 1.3vw, 18px);
  }
}






/* Spezielle Anpassungen für sehr große Bildschirme (2560px+) */
@media screen and (min-width: 2560px) {
  :root {
    --toggle-width: min(55px, 2.5vw);
    --toggle-height: min(90px, 4vw);
    --toggle-handle-size: min(38px, 1.8vw);
    --toggle-icon-size: min(32px, 1.5vw);
    --toggle-margin-bottom: min(50px, 2.5vw);
    --toggle-handle-translate: min(32px, 1.5vw);
  }

  .dark-mode-toggle {
    width: clamp(32px, 3vw, 42px);
    height: clamp(55px, 5.5vw, 70px);
    margin-left: clamp(6px, 0.8vw, 15px);
    margin-bottom: clamp(25px, 3vw, 35px);
    padding: clamp(6px, 0.8vw, 10px);
  }
  
  .dark-mode-toggle .toggle-handle {
    width: clamp(20px, 2.2vw, 28px);
    height: clamp(20px, 2.2vw, 28px);
    left: clamp(3px, 0.4vw, 5px);
    top: clamp(4px, 0.5vw, 6px);
  }
  
  .site-dark .dark-mode-toggle .toggle-handle {
    transform: translateY(clamp(15px, 1.8vw, 22px));
  }
  
  .dark-mode-toggle .toggle-icon {
    width: clamp(16px, 1.8vw, 24px);
    height: clamp(16px, 1.8vw, 24px);
  }
  
  .dark-mode-toggle .moon-icon {
    background-size: clamp(12px, 1.3vw, 18px);
  }


}





/* Bündige Ausrichtung - Logo, Menü und Toggle auf einer Linie */
@media screen and (min-width: 1024px) {
  /* Position des Toggle Buttons, damit er mit Logo und Menü bündig abschließt */
  .dark-mode-toggle {
    /* Vertikale Ausrichtung wird durch die margin-bottom Variable gesteuert */
    /* Die Werte sind so berechnet, dass sie mit dem Logo und Menü harmonieren */
  }
}

/* Ende Dark Mode Toggle Fluid Design Extension */