/* Reset some default styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 :root {
   --bg: #ffffff;
   --text: #222222;
   --card: #f8f9fa;
   --border: #dee2e6;
   --text-muted: #5a5a5a;
   --accent: #0056b3;
 }

 body {
   font-family: Arial, sans-serif;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
   background-color: var(--bg);
   color: var(--text);
   transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* KORREKTUR: Explizite Dark-Mode-Regeln */
 body.dark-mode {
   --bg: #333;
   --text: #fff;
   --card: #444;
   --border: #555;
   --text-muted: #adb5bd;
   --accent: #6ea8fe;

   background-color: #333;
   color: #fff;
 }

 .page-container {
   display: flex;
   flex-direction: column;
   flex: 1;
 }

 .download-header {
   width: 100%;
   background-color: var(--card);
   padding: 2rem 0;
   text-align: center;
 }

 body.dark-mode .download-header {
   background-color: var(--card);
 }

 .download-main {
   flex-grow: 1;
   padding: 2rem;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

.download-instructions {
  text-align: center; /* Zentriert alle Texte innerhalb dieses Containers */
  max-width: 800px;   /* Passt die Breite an die Buttons an */
  width: 100%;
  margin-bottom: 2rem; /* Fügt etwas Abstand zu den Buttons hinzu */
}

.download-instructions h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 1.5rem; /* Mehr Abstand unter der Hauptüberschrift */
}

.download-instructions p {
  font-size: 1.1rem;
  color: var(--text-muted); /* Nutzt die gedämpfte Textfarbe für Lesbarkeit */
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

 .download-checksum {
   margin-top: 2rem;
   font-size: 20px;
 }

 .download-footer {
   width: 100%;
   background-color: var(--card);
   padding: 1rem 0;
   text-align: center;
   border-top: 1px solid var(--border);
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 body.dark-mode .download-footer {
   background-color: var(--card);
   border-top-color: var(--border);
 }

 .footer-content {
   display: flex;
   justify-content: space-between;
   width: 100%;
   align-items: center;
   padding: 0 1rem;
 }

 .download-link,
 .download-link1 {
   color: #0056b3 !important;
   /* dunkleres Blau für besseren Kontrast */
 }

 body.dark-mode .download-link,
 body.dark-mode .download-link1 {
   color: #ffffff !important;
   /* weißer Text für besseren Kontrast */
 }


 .download-buttons {
   border: 1px solid var(--border);
   padding: 1rem;
   border-radius: 5px;
   width: 100%;
   max-width: 800px;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 2rem;
   background-color: var(--card);
 }

 body.dark-mode .download-buttons {
   background-color: var(--card);
   border-color: var(--border);
 }


 .download-button,
 .download-button1,
 .download-button2,
 .gemini-button {
   display: block;
   width: 100%;
   max-width: 700px;
   padding: 1rem;
   font-size: 1.2rem;
   font-style: normal;
   margin-top: 1rem;
   font-weight: 700;
   border: none;
   text-decoration: none;
   color: white;
   text-align: center;
   border-radius: 10px;
   transition: background-color 0.3s, opacity 0.3s;
 }

 .download-button {
   background-color: #007bff;
 }

 .download-button:hover {
   background-color: #0056b3;
 }

 .download-button1 {
   background-color: #28a745;
 }

 .download-button1:hover {
   background-color: #218838;
 }

 .download-button2 {
   opacity: 0.5;
   background-color: #dc3545;
   cursor: not-allowed;
 }

 .download-button2:hover {
   opacity: 0.7;
 }

 .switch {
   position: relative;
   display: inline-block;
   width: 60px;
   height: 34px;
 }

 .switch input {
   opacity: 0;
   width: 0;
   height: 0;
 }

 .slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   transition: .4s;
   border-radius: 34px;
 }

 .slider:before {
   position: absolute;
   content: "";
   height: 26px;
   width: 26px;
   left: 4px;
   bottom: 4px;
   background-color: white;
   transition: .4s;
   border-radius: 50%;
 }

 input:checked+.slider {
   background-color: #2196F3;
 }

 input:focus+.slider {
   box-shadow: 0 0 1px #2196F3;
 }

 input:checked+.slider:before {
   transform: translateX(26px);
 }

 .slider.round {
   border-radius: 34px;
 }

 .slider.round:before {
   border-radius: 50%;
 }

 .dark-mode-lable {
   position: absolute;
   top: 50%;
   right: 70px;
   transform: translateY(-50%);
   pointer-events: none;
 }

 .ad-placeholder {
   display: none;
   /* Hide by default */
   margin-top: 2rem;
   width: 100%;
   max-width: 600px;
   text-align: center;
   padding: 1rem;
   border: 1px solid var(--border);
   border-radius: 5px;
   background-color: var(--card);
 }

 body.dark-mode .ad-placeholder {
   background-color: var(--card);
   border-color: var(--border);
 }

 body.ads-enabled .ad-placeholder {
   display: block;
   /* Show only when enabled */
 }

 .gemini-button {
   background: linear-gradient(45deg, #4285F4, #9B59B6, #F4B400, #0F9D58);
   background-size: 400% 400%;
   animation: gradient 10s ease infinite;
   color: white;
   border: none;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   margin-top: 0;
   /* No margin top for the first button */
 }

 @keyframes gradient {
   0% {
     background-position: 0% 50%;
   }

   50% {
     background-position: 100% 50%;
   }

   100% {
     background-position: 0% 50%;
   }
 }

 .gemini-description {
   /* Vorhandene Stile */
   background-color: rgba(0, 0, 0, 0.05);
   border-radius: 5px;
   padding: 1rem;
   min-height: 50px;
   color: var(--text);
   border: 1px solid var(--border);
   text-align: left;

   /* NEU: Stile für die Animation & zum Verstecken */
   opacity: 0;
   max-height: 0;
   padding-top: 0;
   padding-bottom: 0;
   margin-top: 0;
   overflow: hidden;
   /* Wichtig für die max-height Animation */
   transition: all 0.5s ease-in-out;
   /* Weicher Übergang für alle Änderungen */
 }

 /* Dark-Mode Stile bleiben wie sie sind */
 body.dark-mode .gemini-description {
   background-color: rgba(255, 255, 255, 0.05);
   color: var(--text);
   border-color: var(--border);
 }

 /* NEU: Diese Klasse macht die Box sichtbar */
 .gemini-description.visible {
   opacity: 1;
   max-height: 500px;
   /* Genug Platz für den Text */
   padding-top: 1rem;
   padding-bottom: 1rem;
   margin-top: 1rem;
 }

 .spinner {
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   border-top: 4px solid #fff;
   width: 20px;
   height: 20px;
   animation: spin 1s linear infinite;
 }

 @keyframes spin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 @media (max-width: 768px) {
   .download-main {
     padding: 1rem;
   }

   .download-instructions span,
   .download-instructions h1,
   .download-instructions h3,
   .download-checksum span {
     font-size: 1rem;
   }

   .footer-content {
     flex-direction: column;
     gap: 0.5rem;
   }
 }