/*? ===========================================
/*? ===== Globale Styles für beide Themes =====
/*? =========================================== */

/*! === Globaler Reset & Basis-Stile === */
/* Moderner, sauberer CSS-Reset */
*, *::before, *::after {
  box-sizing: border-box;
   /* Sorgt für eine intuitive Berechnung von Breiten und Höhen */
}
* {
  margin: 0;
}
body {
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}
p {
  text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

/*? === Variablen für Schrift und Farbe === */
:root {
  /** Globale Variable für die Skalierung des Dark-Mode-Schalters */
  --scale: 0.8; /* Standardgröße für Desktop */
  /** --- Schrift --- */
  /* Schriftfamilien */
  --font-family-sans: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-family-serif: Georgia, Palatino, "Palatino Linotype", Times,
    "Times New Roman", serif;

  /* Überschriften */
  --h1-size: 1.8rem; /* 28px */
  --h2-size: 1.5rem; /* 24px */
  --h3-size: 1.3rem; /* 20px */
  --h4-size: 1.1rem; /* 18px */
  
  /* Basisschriftgröße und Zeilenhöhe */
  --font-size-base: 1rem; /* 16px */
  --line-height-base: 1.6;

  /* Spezifische Schriftgrößen */
  --font-size-small: 0.9rem; /* 14px */
  --font-size-nav-link: clamp(0.8rem, 1.8vw, 1.1rem);

  /** --- Farben --- */
  --color-back: rgba(255, 255, 255, 0.3); /* Hintergrundfarbe */
  --color-backdark: rgba(19, 34, 68, 0.3); /* Hintergrundfarbe Darkmode */
  --color-font: #1a1a1a; /* Textfarbe */
  --color-fontdark: #e0e0e0; /* Textfarbe Darkmode */
  --color-border: #dddddd; /* Rahmenfarbe */
  --color-borderdark: #252525; /* Rahmenfarbe Darkmode */
  --color-borderline: #252525; /* Trennlinie */
  --color-borderlinedark: #dddddd; /* Trennlinie Darkmode */
  --color-footer: #303030; /* Footerfarbe */
  --color-footerdark: #bbbbbb; /* Footerfarbe Darkmode */
}

/** === Globale Link-Stile === */
a:link {
  color: #0000ff;
  text-decoration: underline;
}
a:visited {
  color: #800080;
  text-decoration: underline;
}
a:hover {
  color: #0000ff;
  text-decoration: underline;
}
a:active {
  color: #ee0000;
  text-decoration: underline;
}
/* --- Dark Mode Link-Stile --- */
body.dark a:link {
  color: #85c1e9;
}
body.dark a:visited {
  color: #d0a0d0;
}

body {
  box-sizing: border-box;
  min-width: 320px;
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background-color: transparent;
  color: var(--color-font);
  position: relative;
  transition: background-color 0.5s ease, color 0.5s ease;
  word-wrap: break-word;
}

.intro {
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--color-font);
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgb(0, 0, 0);
  max-width: 800px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-size: var(--h4-size);
  line-height: var(--line-height-base);
  backdrop-filter: blur(5px);
  h2 {
    font-family: var(--font-family-serif);
    font-size: var(--h2-size);
    margin-bottom: 1rem;
  }
  p {
    margin-bottom: 1em;
  }
}

#canvas { 
    display: block; 
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    pointer-events: none;
}

/*? ==============================
/*? ===== Globaler Preloader =====
/*? ============================== */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(19, 34, 68, 0.8); /* Passt zum Dark-Mode-Hintergrund */
  z-index: 9999;
  display: none; /* Standardmäßig ausgeblendet, wird per JS gesteuert */
  justify-content: center;
  align-items: center;
  color: white;
  font-family: var(--font-family-serif);
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#preloader.visible {
  display: flex;
}

#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.preloader-content {
  position: relative; /* Für die Positionierung des Rings */
  text-align: center;
  /* Feste Größe für den Container, damit die absolut positionierten Bilder Platz haben */
  width: 100px;
  height: 100px;
}

/* Gemeinsame Stile für beide Preloader-Bilder, um sie zu stapeln */
.preloader-content .loader-base,
.preloader-content .loader-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.preloader-content .loader-ring {
  animation: rotate 5s linear infinite;
}
.preloader-content p {
  /* Positioniert den Text unterhalb des Lade-Symbols */
  position: absolute;
  top: 110px; /* Höhe des Symbols + Abstand */
  left: 50%;
  transform: translateX(-50%);
  width: 200px; /* Verhindert unschönen Zeilenumbruch */
  font-size: 1.2rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/*? ===========================================
/*? ===== Hilfsklassen für iFrame-Inhalte =====
/*? =========================================== */

/* Zentriert den direkten Kind-Inhalt (z.B. <main class="intro">) vertikal und horizontal. */
.iframe-center-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.main-content {
  max-width: 920px;
  margin: 20px auto;
  padding: 0 20px;
  box-sizing: border-box;
  h1, h2, h3, h4 {
    font-family: var(--font-family-serif);
    font-weight: bold;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  h1 {font-size: var(--h1-size);}
  h2 {font-size: var(--h2-size);}
  h3 {font-size: var(--h3-size);}
  h4 {font-size: var(--h4-size);}
  p {
  margin-bottom: 0.5em;
  }
  em {
  font-style: italic;
  }
  ul {
  margin-bottom: 1em;
  padding-left: 20px;
  }
  li {
  list-style-type: disc;
  margin-bottom: 0.5em;
  }
  .source-credit {
  font-size: var(--font-size-small);
  color: var(--color-footer);
  margin-top: 2em;
  }
}

.Bilder {
  border-width: 0px;
  box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.5);
  border-color: var(--color-border);
  background-color: transparent;
  border-radius: 20px;
  display: block;
  margin: 2em auto;
  max-width: 100%; /* Make images responsive */
  height: auto;
  transition: transform 0.5s ease-in-out;
}
.Bilder:hover {
  transform: scale(1.05);
}

.vorstand {
  overflow: hidden;
  h1 {
    text-align: center;
  }
}

#vorstandgruppe {
  max-width: 100%;
  height: auto;
  margin: 0 auto 20px;
  display: block;
}

.vorstand-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  justify-items: center;
  text-align: center;
}
.vorstand-mitglied {
  max-width: 300px;
  .Vorstand {
    width: 300px;
    height: 300px;
    object-fit: cover;
  }
  p {
    font-family: var(--font-family-serif);
    font-weight: bold;
    font-size: var(--h4-size);
    line-height: 24px;
    margin-top: 15px;
  }
}
.Vorstand {
  border-width: 0px;
  box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5);
  border-color: var(--color-border);
  background-color: transparent;
  border-radius: 150px;
  transition: transform 0.3s ease-in-out;
}
.Vorstand:hover {
  transform: scale(1.1);
}

.impressum h2 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--color-borderline);
}
.legal-grid {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  h2 {
    margin-top: 0;
  }
}
.qr-code {
  display: none; /* Standardmäßig auf Mobilgeräten ausgeblendet */
  margin: 2em auto 0; /* Zentriert und fügt Abstand nach oben hinzu */
  max-width: 200px;
  width: 100%;
}
footer {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-borderline);
  font-size: var(--font-size-small);
  color: var(--color-footer);
  p {
    margin-bottom: 0.5em;
  }
}
.copyright {
  margin-top: 0.5em;
  padding-top: 1.5em;
  border-top: 1px solid var(--color-borderline);
  text-align: center;
  font-size: var(--font-size-small);
  color: var(--color-footer);
}

/* Container für den Hintergrund-Inhalt */
#background-content {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
/* Der eigentliche Hintergrund-Div */
.background-image-container {
  height: 100%;
  width: 100%;
  background-image: url("../img/mainbackpiclight.webp");
  background-size: cover;
  background-position: center;
  position: relative; /* Notwendig, um das Pseudo-Element korrekt zu positionieren */
  z-index: 0;
  /* Ken-Burns-Effekt für das Haupt-Hintergrundbild */
  transform: scale(1); /* Start-Skalierung für die Animation */
  animation: kenburns 45s ease-in-out infinite alternate; /* Animation anwenden */
}

/* Pseudo-Element für das Dark-Mode-Bild, das für den Übergang sorgt */
.background-image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/mainbackpicdark.webp");
  background-size: cover;
  background-position: center;
  opacity: 0; /* Standardmäßig komplett durchsichtig */
  transition: opacity 0.8s ease-in-out; /* Der sanfte Übergangseffekt */
  z-index: 1; /* Liegt über dem Haupt-Hintergrundbild */
  /* Ken-Burns-Effekt für das Dark-Mode-Hintergrundbild */
  transform: scale(1); /* Start-Skalierung für die Animation */
  animation: kenburns 45s ease-in-out infinite alternate; /* Animation anwenden */
}

/* Blendet das Dark-Mode-Bild ein, wenn der Dark Mode aktiv ist */
body.dark .background-image-container::after {
  opacity: 1; /* Komplett sichtbar machen */
}
/* Dark Mode Overlay für den Haupt-Hintergrund */
body.dark #background-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-backdark);
  opacity: 0.(10, 15, 31, 0.1); /* Leicht erhöht, um das Nachtbild besser in das Farbschema zu integrieren */
  z-index: 2; /* Muss über dem eingeblendeten Nacht-Bild liegen */
  pointer-events: none;
}

/** Fixierte Navigationsleiste am oberen Rand */
nav {
  position: fixed;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  background: linear-gradient(to bottom, #6496dc, #ffffff 100%);
  box-shadow: 0 0 20px rgb(0, 0, 0);
  z-index: 1000;
}
/* Container für linke Navigationselemente (Switch, Logo) */
.nav-left {
  flex: 1; /* Sorgt für gleichmäßige Verteilung des Raums */
  justify-content: flex-start;
  display: flex;
  flex-direction: row;
  align-items: center;
}

/** Logo-Styling */
.logo {
  flex-shrink: 0; /* Verhindert, dass das Logo auf kleinen Bildschirmen schrumpft */
  position: relative; /* Für die absolute Positionierung der inneren Bilder */
  width: 80px; /* Feste Breite und Höhe für den Container */
  height: 80px;
  transition: transform 0.3s ease-in-out; /* Transition für den Hover-Effekt */
}
.logo:hover {
  transform: scale(1.2); /* Skaliert den gesamten Container beim Hover */
}
/* Gemeinsame Stile für beide Logo-Bilder */
.logo .logo-base,
.logo .logo-ring {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* Spezifische Stile für den rotierenden Ring */
.logo .logo-ring {
  opacity: 0; /* Standardmäßig unsichtbar */
  transition: opacity 0.3s ease-in-out;
  box-shadow: none;
}
/* Beim Hover über das Logo: Ring einblenden und Animation starten */
.logo:hover .logo-ring {
  opacity: 1;
  animation: rotate 5s linear infinite; /* Wiederverwendung der bestehenden 'rotate'-Animation */
}

/* Zentraler Navigationsblock */
.nav-center {
  display: flex;
  align-content: center;
  flex-direction: row;
  align-items: center;
  gap: 1rem; /* Abstand zwischen Logo und dem Titel/Menü-Block */
}
/* Container, der Titel und Menü-Buttons gruppiert */
.title-menu-block {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem; /* Abstand zwischen Titel und Menü-Buttons */
  padding-bottom: 10px;
}
.site-title {
  font-family: var(--font-family-sans);
  font-size: clamp(1.4rem, 2.5vw, 1.7rem);
  font-weight: bold;
  text-shadow: 0 0 5px #fff;
}
/* Hamburger-Menü-Button (nur auf Mobilgeräten sichtbar) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem;
  z-index: 1001;
}
/* Container für rechte Navigationselemente (Hamburger) */
.nav-right {
  flex: 1;
  justify-content: flex-end;
  display: flex;
  align-items: center;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
nav a,
nav a:link,
nav a:visited {
  text-decoration: none;
  font-family: var(--font-family-serif);
  color: var(--color-font);
  font-weight: bold;
  font-size: clamp(0.8rem, 1.5vw, 1.2rem);
  padding: 5px 10px;
  border-radius: 50px;
  background: linear-gradient(to bottom, #f0f0f0, #dcdcdc);
  border: 1px solid #c0c0c0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease-in-out;
}
nav a:hover {
  background: linear-gradient(to bottom, #e8e8e8, #d4d4d4);
}
nav a:active {
  /* Der "inset"-Schatten erzeugt einen eingedrückten Effekt */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.1);
  transform: scale(0.9);
}
nav a.active {
  color: #3498db;
  transform: scale(1.1);
}
/* Fortschrittsanzeige */
.progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: transparent; /* Container ist unsichtbar */
}
.progress-bar {
  height: 100%;
  width: 0%; /* Startet bei 0% Breite */
  background-color: #3498db; /* Farbe passend zum aktiven Menüpunkt */
  /* Eine schnelle, lineare Transition sorgt für ein direktes Feedback */
  /* Eine etwas langsamere, weichere Transition glättet Sprünge, die beim Nachladen von Inhalten entstehen. */
  transition: width 0.25s ease-out;
}
main {
  /* Fallback-Hintergrundfarbe für Mobilgeräte oder wenn der Hintergrund nicht sichtbar ist */
  background-color: transparent; /* Immer transparent, um den Bild-Hintergrund zu zeigen */
}

/* =========================================
===== Theme-Farben (Light & Dark Mode) =====
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv */
/* Diese Stile gelten für ALLE Inhalte und zentralisieren die Farbgebung. */

/* --- Layout-Anpassungen --- */
/* Entfernt den Standard-Browser-Abstand vom allerersten Element (z.B. der Überschrift). */
.main-content > *:first-child,
.intro > *:first-child {
  margin-top: 0;
  padding-top: 0;
}

/* --- Stile für das Download-Popup (wird von impressum.html verwendet) --- */
.download-container {
  position: relative;
  display: inline-block; /* Sorgt dafür, dass der Container sich an den Button anpasst */
  margin: 0.5em 0;
}
.download-trigger-button,
.download-button {
  display: inline-block;
  padding: 10px 10px;
  background-color: #3498db;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-size: 1em;
  transition: background-color 0.2s;
}
.download-trigger-button:hover,
.download-button:hover {
  background-color: #2980b9;
  color: white;
}
.download-button {
  flex-grow: 1;
  text-align: center;
  color: white !important; /* Wichtig, um Standard-Link-Farben zu überschreiben */
}
.download-popup {
  position: absolute;
  bottom: calc(
    100% + 8px
  ); /* Positioniert das Popup über dem Button mit 8px Abstand */
  left: 50%;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  z-index: 10;
  width: 300px;
  visibility: hidden;
  opacity: 0;
  text-align: center; /* Zentriert den gesamten Textinhalt (h3, p) */
  transform: translate(-50%, 10px); /* Startposition für Animation */
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}
.download-popup.visible {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0); /* Korrigierte Endposition für die Animation */
}
.download-popup h2 {
  font-size: 1.2em;
  color: #333;
  margin-bottom: 10px;
}
.download-popup p {
  margin: 0 0 10px;
  font-size: 0.9em;
  color: #555;
}
.download-links {
  display: flex;
  gap: 10px;
  justify-content: center;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
===== Theme-Farben (Light & Dark Mode) =====
========================================= */

/* === Stile für den Dark-Mode-Schalter === */
.switch {
  position: relative;
  display: inline-block;
  width: calc(var(--scale) * 60px);
  height: calc(var(--scale) * 34px);
}

.switch #darkmode-toggle {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #2196f3;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.sun-moon {
  position: absolute;
  content: "";
  height: calc(var(--scale) * 26px);
  width: calc(var(--scale) * 26px);
  left: calc(var(--scale) * 4px);
  bottom: calc(var(--scale) * 4px);
  background-color: yellow;
  transition: 0.4s;
}

#darkmode-toggle:checked + .slider {
  background-color: black;
}

#darkmode-toggle:focus + .slider {
  box-shadow: 0 0 calc(var(--scale) * 1px) #2196f3;
}

#darkmode-toggle:checked + .slider .sun-moon {
  transform: translateX(calc(var(--scale) * 26px));
  background-color: white;
  animation: rotate-center 0.6s ease-in-out both;
}

.moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: gray;
}
#darkmode-toggle:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.slider.round {
  border-radius: calc(var(--scale) * 34px);
}
.slider.round .sun-moon {
  border-radius: 50%;
}

#moon-dot-1 {
  left: calc(var(--scale) * 10px);
  top: calc(var(--scale) * 3px);
  position: absolute;
  width: calc(var(--scale) * 6px);
  height: calc(var(--scale) * 6px);
  z-index: 4;
}

#moon-dot-2 {
  left: calc(var(--scale) * 2px);
  top: calc(var(--scale) * 10px);
  position: absolute;
  width: calc(var(--scale) * 10px);
  height: calc(var(--scale) * 10px);
  z-index: 4;
}

#moon-dot-3 {
  left: calc(var(--scale) * 16px);
  top: calc(var(--scale) * 18px);
  position: absolute;
  width: calc(var(--scale) * 3px);
  height: calc(var(--scale) * 3px);
  z-index: 4;
}

#light-ray-1,
#light-ray-3,
#light-ray-2 {
  position: absolute;
  z-index: -1;
  fill: white;
  opacity: 10%;
}
#light-ray-1 {
  left: calc(var(--scale) * -8px);
  top: calc(var(--scale) * -8px);
  width: calc(var(--scale) * 43px);
  height: calc(var(--scale) * 43px);
}
#light-ray-2 {
  left: -50%;
  top: -50%;
  width: calc(var(--scale) * 55px);
  height: calc(var(--scale) * 55px);
}
#light-ray-3 {
  left: calc(var(--scale) * -18px);
  top: calc(var(--scale) * -18px);
  width: calc(var(--scale) * 60px);
  height: calc(var(--scale) * 60px);
}

.cloud-light,
.cloud-dark {
  position: absolute;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}
.cloud-light {
  fill: #eee;
}
.cloud-dark {
  fill: #ccc;
  animation-delay: 1s;
}

#cloud-1 {
  left: calc(var(--scale) * 30px);
  top: calc(var(--scale) * 15px);
  width: calc(var(--scale) * 40px);
}
#cloud-2 {
  left: calc(var(--scale) * 44px);
  top: calc(var(--scale) * 10px);
  width: calc(var(--scale) * 20px);
}
#cloud-3 {
  left: calc(var(--scale) * 18px);
  top: calc(var(--scale) * 24px);
  width: calc(var(--scale) * 30px);
}
#cloud-4 {
  left: calc(var(--scale) * 36px);
  top: calc(var(--scale) * 18px);
  width: calc(var(--scale) * 40px);
}
#cloud-5 {
  left: calc(var(--scale) * 48px);
  top: calc(var(--scale) * 14px);
  width: calc(var(--scale) * 20px);
}
#cloud-6 {
  left: calc(var(--scale) * 22px);
  top: calc(var(--scale) * 26px);
  width: calc(var(--scale) * 30px);
}

@keyframes cloud-move {
  0% {
    transform: translateX(0px);
  }
  40% {
    transform: translateX(calc(var(--scale) * 4px));
  }
  80% {
    transform: translateX(calc(var(--scale) * -4px));
  }
  100% {
    transform: translateX(0px);
  }
}

.stars {
  transform: translateY(calc(var(--scale) * -32px));
  opacity: 0;
  transition: 0.4s;
}

.star {
  fill: white;
  position: absolute;
  transition: 0.4s;
  animation-name: star-twinkle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#darkmode-toggle:checked + .slider .stars {
  transform: translateY(0);
  opacity: 1;
}

#star-1 {
  width: calc(var(--scale) * 20px);
  top: calc(var(--scale) * 2px);
  left: calc(var(--scale) * 3px);
  animation-delay: 0.3s;
}
#star-2 {
  width: calc(var(--scale) * 6px);
  top: calc(var(--scale) * 16px);
  left: calc(var(--scale) * 3px);
}
#star-3 {
  width: calc(var(--scale) * 12px);
  top: calc(var(--scale) * 20px);
  left: calc(var(--scale) * 10px);
  animation-delay: 0.6s;
}
#star-4 {
  width: calc(var(--scale) * 18px);
  top: calc(var(--scale) * 0px);
  left: calc(var(--scale) * 18px);
  animation-delay: 1.3s;
}

@keyframes star-twinkle {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}

/* === Hero-Sektion (Seite-1) === */
#Seite-1 {
  position: relative; /* Wichtig für die Positionierung des Kind-Elements .hero-background */
  /* Überschreibt die Standard-Sektionsstile */
  box-shadow: none;
  /* Padding oben, um Platz für die fixe Navigationsleiste zu schaffen. */
  /* box-sizing sorgt dafür, dass das Padding in die 100vh Höhe eingerechnet wird. */
  padding-top: 100px; /* Höhe der Desktop-Navigationsleiste */
  box-sizing: border-box;
  height: 100vh; /* Füllt die gesamte Bildschirmhöhe */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Setzt die min-height zurück, die von der allgemeinen Sektionsregel kommt */
  min-height: 0;
  backdrop-filter: blur(10px);
  overflow: hidden; /* Versteckt alles, was über die Grenzen der Sektion hinausragt */
}
#Seite-1 iframe {
  background-color: transparent;
  width: 100%;
  flex-grow: 0; /* Verhindert, dass das iFrame den Flex-Raum füllt, Höhe wird durch Inhalt bestimmt */
  transform-origin: center;
  border: none;
}
/* Neuer Container für den Maus-Parallax-Effekt im Hero-Bereich */
.hero-background {
  position: absolute;
  /* inset: -5%; sorgt dafür, dass das Bild auf allen Seiten 5% größer ist als der Container */
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center center;
  z-index: -2; /* Eine Ebene hinter dem Haupt-Hintergrund-Container, aber vor dessen Inhalt */
  /* Eine sanfte Transition sorgt für weiche Bewegungen */
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Das Bild wird durch das data-bg Attribut der Eltern-Sektion via JS geladen */
}

/* Keyframes für die Puls-Animation */
@keyframes pulse {
  50% {
    /* Skaliert den Ladekreis in der Mitte der Animation auf 110% */
    transform: translate(-50%, -50%) scale(1.2);
  }
}

section {
  position: relative; /* Notwendig für die absolute Positionierung des Spinners */
  padding: 20px;
  background-color: --color-back; /* Leicht transparent, damit der Hintergrund durchscheint */
  display: flex; /* Macht die Sektion zu einem Flex-Container */
  flex-direction: column; /* Ordnet die Elemente (h2, iframe) untereinander an */
  min-height: 300px; /* Mindesthöhe für den Lade-Spinner */
  backdrop-filter: blur(10px);
  border-radius: (5px);
  box-shadow: 0 0 20px rgba(0, 0, 0); /* Fügt einen dezenten Schein-Effekt hinzu */
}
iframe {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  background-color: var(--color-back);
  opacity: 0; /* iFrame anfangs unsichtbar machen */
  transition: opacity 0.5s ease-in-out; /* Sanftes Einblenden */
}
iframe.loaded {
  opacity: 1; /* Sichtbar machen, wenn geladen */
}

/* Parallax-Effekt Container */
.parallax {
  position: relative; /* Wichtig für die Positionierung der Pseudo-Elemente */
  /* Eine Mindesthöhe festlegen */
  min-height: 75vh; /* z.B. % der Bildschirmhöhe */
  filter: sharpen(1.3); /* Leichtes Schärfen für bessere Bildqualität */

  /* Erzeugt den Parallax-Scrolling-Effekt */
  background-position: center center; /* Startposition, wird von JS überschrieben */
  background-repeat: no-repeat;
  background-size: cover; /* Füllt den Bereich vollständig aus und ermöglicht horizontales Positionieren. */
  background-color: --color-back; /* Platzhalterfarbe, während das Bild lädt */
  /* Performance-Optimierung: Teilt dem Browser mit, dass sich diese Eigenschaft ändern wird. */
  /* Dies kann die Animation flüssiger machen, indem die GPU genutzt wird. */
  will-change: background-position;
}
/*! WICHTIG: Setzt die Basis für den JS-gesteuerten Parallax-Effekt auf Desktops. */
.parallax {
  background-attachment: scroll;
}

/* Keyframes für den Ken-Burns-Effekt (langsames Zoomen und Schwenken) */
@keyframes kenburns {
  0% {
    transform: scale(1); /* Startgröße */
  }
  100% {
    transform: scale(1.1); /* Endgröße (etwas subtiler) */
  }
}

/* Pseudo-Elemente für den inneren Schatten, um einen Schwebe-Effekt zu erzeugen */
.parallax::before,
.parallax::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 20px;
  z-index: 1;
  pointer-events: none; /*! Verhindert, dass der Schatten Interaktionen blockiert */
}
.parallax::before {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    transparent 100%
  );
}
.parallax::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.loader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 5;
  transition: opacity 0.5s, visibility 0.5s;
  cursor: none;
  animation: pulse 2.5s ease-in-out infinite;
}
.loader img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loader .loader-ring {
  animation: rotate 5s linear infinite;
}

/** --- Dark Mode Theme --- */
body.dark,
body.dark .main-content {
  color: var(--color-fontdark);
  border-color: var(--color-borderdark);
}
body.dark .main-content h1,
body.dark .main-content h2,
body.dark .main-content h3,
body.dark .main-content h4 {
  color: var(--color-fontdark);
  border-bottom-color: var(--color-borderlinedark);
}
body.dark footer {
  border-top-color: var(--color-borderlinedark);
  color: var(--color-footerdark);
}
body.dark .copyright {
  border-top: 1px solid var(--color-borderlinedark);
  color: var(--color-footerdark);
}

body.dark iframe {
  background-color: var(--color-backdark);
  border: 1px solid var(--color-borderdark);
}

body.dark .main-content .source-credit {
  color: var(--color-footerdark);
}

body.dark .download-popup {
  background-color: #182c57;
  h3,
  p {
  color: #ecf0f1;
  }
}

body.dark .intro {
  background-color: rgba(19, 34, 68, 0.6);
  box-shadow: 0 0 20px rgba(0, 0, 0);
  color: var(--color-fontdark);
  text-shadow: none;
}

body.dark .intro h2 {
  color: var(--color-fontdark);
}
body.dark img,
body.dark .Bilder {
  filter: brightness(0.9);
}

body.dark nav {
  background: linear-gradient(
    to bottom,
    #0c1427,
    #132244 100%
  );
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
}
body.dark .site-title {
  color: var(--color-fontdark);
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
body.dark nav a,
body.dark nav a:link,
body.dark nav a:visited {
    color: #e0e0e0;
    background: linear-gradient(to bottom, #2a3b60, #132244);
    border-color: #0c1427;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.1);
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5);
}
body.dark nav a:hover {
    background: linear-gradient(to bottom, #3a4b70, #193270);
}
body.dark nav a:active {
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
  transform: scale(0.98);
}
body.dark nav a.active {
  color: #85c1e9;
}
body.dark .nav-toggle span,
body.dark .nav-toggle span::before,
body.dark .nav-toggle span::after {
  background-color: #ecf0f1;
}
body.dark nav.nav-open ul {
  background-color: #0c1427;
  box-shadow: 0 8px 6px rgba(0, 0, 0, 0.5);
}
body.dark main section {
  background-color: var(--color-backdark);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  color: var(--color-fontdark);
}

/*? =========================================
/*? ===== Responsive Design für Desktop =====
/*? ========================================= */
/* --- Desktop-spezifisches Layout für den Inhalt --- */
@media (min-width: 769px) {
  main section {
    /* Boxed-Layout für die Inhaltssektionen */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px; /* Abgerundete Ecken für einen weicheren Look */
    margin-top: 40px; /* Abstand zu den Parallax-Bildern */
    margin-bottom: 40px;
  }
  
  .qr-code {
    display: block; /* QR-Code nur auf dem Desktop anzeigen */
  }

  /** === Desktop-Menü Stile === */
  nav {
    height: 100px; /* Feste Höhe für ein stabiles Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    gap: 1rem; /* Innenabstand angepasst */
  }
  nav ul {
    gap: 8px;
  }
  /* --- Glas-Effekt für Desktop-Buttons --- */
  nav a {
    /* Der eigentliche Weichzeichner-Effekt für den Hintergrund */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Für Safari-Kompatibilität */
    /* Hintergrund und Rahmen für den 3D-Glas-Effekt anpassen */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.2) 100%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    /* Den ursprünglichen Schatten und die Transition für den Klick-Effekt wiederherstellen */
    box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, color 0.3s, transform 0.3s,
      box-shadow 0.3s;
  }

  /* Anpassung des Glas-Effekts für den Dark Mode */
  body.dark nav a {
    /* Hintergrund und Rahmen für den dunklen 3D-Glas-Effekt */
    background: linear-gradient(180deg, rgba(42, 59, 96, 0.5) 0%, rgba(19, 34, 68, 0.4) 100%);
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* Klick-Effekt für den Dark Mode im Desktop-Layout wiederherstellen */
  body.dark nav a:active {
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
    transform: scale(0.98);
  }
}

/*? =============================================
/*? ===== Responsive Design für Mobilgeräte =====
/*? ============================================= */

@media (max-width: 768px) {
  /* Skalierung des Dark-Mode-Schalters für mobile Ansicht anpassen */
  :root {
    --scale: 0.7;
  }

  body {
    cursor: none;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
    /* Das Padding wird hier gesetzt, um den Inhalt von den Bildschirmrändern abzusetzen
       und gleichzeitig dem 'box-shadow' des .content-wrapper genügend Platz zu geben, damit er nicht abgeschnitten wird.*/
    }

  /* Glitzer-Effekt auf Mobilgeräten ausblenden */
  #canvas {
    display: none;
  }
  body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .intro {
    padding: 20px;
    font-size: var(--font-size-base);
  }

  .legal-grid {
    grid-template-columns: 1fr; /* Spalten untereinander anordnen */
  }
  .legal-grid section:not(:first-child) h2 {
    margin-top: 2.5em; /* Abstand wiederherstellen, wenn die Spalten gestapelt sind */
  }

  /** === Navigationsleiste auf Mobilgeräten anpassen === */
  nav {
    display: flex;
    align-items: center;
    height: 80px; /* Höhe für Mobilgeräte wiederherstellen */
    padding: 0 1rem;
    gap: 1rem; /* Abstand zwischen den Elementen */
  }
  .nav-left {
    display: flex;
  }
  .logo {
    width: 70px;
    height: 70px;
  }
  .nav-center {
    display: flex;
    align-items: center;
    gap: 0.8rem; /* Abstand zwischen Logo und Titel anpassen */
  }
  .site-title {
    font-size: clamp(1rem, 4vw, 1.5rem); /* Schriftgröße für Mobilgeräte anpassen */
    line-height: 1em;
    padding-top: 10px;
  }

  /* Hamburger-Menü-Button anzeigen */
  .nav-toggle {
    display: block; /* Bleibt block, wird aber durch Flexbox im .nav-right Container positioniert */
  }
  .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  /* Hamburger-Icon (drei Striche) mit CSS erstellen */
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: 25px;
    height: 3px;
    background-color: black;
    position: relative;
    transition: transform 0.3s, background-color 0.3s;
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
  }
  .nav-toggle span::before {
    top: -8px;
  }
  .nav-toggle span::after {
    top: 8px;
  }

  /* Navigationsliste für mobile Ansicht formatieren */
  nav ul {
    position: absolute;
    top: 80px; /* Höhe der Navigationsleiste */
    left: 0;
    right: 0;
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    gap: 1rem;
    box-shadow: 0 8px 6px rgb(0, 0, 0);
    /* Menü ausblenden und für Animation vorbereiten */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: transform 0.3s, opacity 0.3s, visibility 0.3s;
  }
  
  /* Klasse für das geöffnete Menü */
  nav.nav-open ul {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

/*! WICHTIG: Der Selektor muss genauso spezifisch sein wie der globale Stil, um ihn zu überschreiben. */
nav.nav-open a,
nav.nav-open a:link,
nav.nav-open a:visited {
  font-size: 1.2em; /* Angepasste Schriftgröße für mobile Ansicht (ca. 19px) */
  text-align: center;
  width: 100%; /* Breite der Buttons, zentriert durch align-items im ul */
  /* Wir entfernen den Glas-Effekt für eine bessere Lesbarkeit auf Mobilgeräten. */
  backdrop-filter: none;
}

  /* Hamburger-Icon zu "X" animieren, wenn Menü offen ist */
  nav.nav-open .nav-toggle span {
    background-color: transparent; /* Mittlerer Strich unsichtbar */
  }
  nav.nav-open .nav-toggle span::before {
    top: 0;
    transform: rotate(45deg);
  }
  nav.nav-open .nav-toggle span::after {
    top: 0;
    transform: rotate(-45deg);
  }

/* Dark Mode für die mobilen Buttons */
body.dark nav.nav-open ul {
  background-color: #0c1427;
}

  /* Parallax-Effekt auf Mobilgeräten deaktivieren und Bild zentrieren */
  .parallax {
    background-attachment: scroll;
  }

  /* Passt das Padding der Hero-Sektion an die mobile Navigationsleisten-Höhe an */
  #Seite-1 {
    padding-top: 100px;
    padding-left: 0;
    padding-right: 0;
  }

/* Sorgt dafür, dass das iFrame der Fotogalerie die Höhe der Sektion füllt */
#Seite-5 iframe {
  flex-grow: 1;
}

  .vorstand-grid {
    /* Auf Mobilgeräten ein 2-spaltiges Layout erzwingen, um die Seite kompakt zu halten */
    /* grid-template-columns: repeat(2, 1fr); */
    /* Umstellung auf auto-fit für bessere Zentrierung auf sehr schmalen Geräten */
    grid-template-columns: repeat(2, minmax(40%, 1fr));
    gap: 20px; /* Abstand für Mobilgeräte reduzieren */
    justify-content: center; /* Zentriert die Grid-Tracks, wenn sie nicht den vollen Platz füllen */
    p {
      font-size: clamp(1rem, 1.5vw, 1.5rem);
      margin: 0;
      padding: 0;
    }
  }

  .vorstand-mitglied img.Vorstand {
    width: 100%; /* Breite an den Container anpassen */
    height: auto; /* Höhe überschreibt das HTML-Attribut und ermöglicht flexible Anpassung */
    aspect-ratio: 1 / 1; /* Stellt sicher, dass die Bilder quadratisch bleiben */
  }

  .download-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    bottom: auto;
    width: 90vw;
    max-width: 320px;
    transform: translate(-50%, -50%) scale(0.9); /* Startzustand für Animation */
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .download-popup.visible {
    transform: translate(-50%, -50%) scale(1); /* Endzustand für Animation */
  }

  .download-links {
    flex-direction: column;
  }
}