/* Hintergrundbild für die Mach-mit-Sektion */
.with-bg {
  position: relative;
  background: url('assets/Mitmachen.jpeg') center/cover no-repeat;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 4px solid #f97316; /* Auffälliger Rahmen */
}
.overlay {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 3rem;
  border-radius: 10px;
  max-width: 900px;
  width: 100%; /* Einheitliche Breite */
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}


.section-bildung .overlay,
.section-rente .overlay,
.section-finanzierung .overlay,
.section-petition .overlay,
.section.beamtentum .overlay,
.section-spenden .overlay,
.section-videos .overlay,
.section-mitgliedwerden .overlay {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 3rem;
  border-radius: 10px;
  max-width: 900px;
  width: 90%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

.section-bildung,
.section-rente,
.section-finanzierung,
.section-petition,
.section-beamtentum,
.section-spenden,
.section-videos,
.section-mitgliedwerden {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 60vh; /* Einheitliche Höhe */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 4px solid #f97316;
}

.donation-container-alt {
  text-align: center;
}

.donation-container-alt img {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
}

.donation-container-alt img:hover {
  transform: scale(1.05);
}

/* Einheitlicher Call-to-Action-Button */
.btn-cta {
  display: inline-block;
  background: #ffcc00; /* Gelb */
  color: #000; /* Schwarze Schrift */
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  font-size: 1.2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  border: none;
}

/* Hover-Effekt */
.btn-cta:hover {
  background: #ffaa00; /* Dunkleres Gelb beim Hover */
  transform: scale(1.05);
}


/* 
   HINTERGRUND-BILDER 
   - hier kannst du deine eigenen Dateien angeben 
   - oder weiter oben über "background" definieren 
*/

.section-bildung { background-image: url('assets/Bildung.jpeg'); }
.section-rente { background-image: url('assets/Rente.jpeg'); }
.section-finanzierung { background-image: url('assets/Finanzierung.jpeg'); }
.section-petition { background-image: url('assets/Petition.png'); }
.section-beamtentum { background-image: url('assets/Beamtentum.png'); }
.section-spenden { background-image: url('assets/Spenden.jpeg'); }
.section-mitgliedwerden { background-image: url('assets/Mitglied.jpeg'); }


@media (max-width: 768px) {
  .section-bildung,
  .section-rente,
  .section-finanzierung,
  .section-petition,
  .section-beamtentum,
  .section-spenden,
  .section-mitgliedwerden {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
}

/* Standard-Stil für den Download-Button */
.btn-download {
  display: inline-block;
  background: #ffcc00; /* Gelber Hintergrund */
  color: #000; /* Schwarzer Text */
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  transition: background 0.3s ease-in-out, transform 0.2s ease-in-out;
  text-decoration: none;
  font-size: 1.2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  border: none;
}

/* Hover-Effekt */
.btn-download:hover {
  background: #ffaa00; /* Dunkleres Gelb beim Hover */
  transform: scale(1.05); /* Leichte Vergrößerung */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

nav a:empty {
  display: none;
}

/*
   DER CTA-BUTTON:
   Falls du denselben Button-Stil wie bei "Mitmachen" verwenden willst, 
   kannst du die .btn-cta-Klasse einfach wiederverwenden.
*/
.btn-cta {
  display: inline-block;
  background: #ffcc00;
  color: #333;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-cta:hover {
  background: #ffaa00;
  transform: scale(1.05);
}

/* Orangefarbener Rand für Wahlprogramm & Eckpfeiler */
#wahlprogramm, {
  border: 4px solid #f97316; /* Orangefarbener Rahmen */
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

  
/* MITGLIED-WERDEN-SECTION */
.section-mitgliedwerden {
  position: relative;
  background: url('assets/Mitglied.jpeg') center/cover no-repeat; /* Dein Bildpfad */
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border: 4px solid #f97316; /* Orangefarbener Rahmen */
}

.section-mitgliedwerden .overlay {
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 3rem;
  border-radius: 10px;
  max-width: 900px;
  width: 90%;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

/* FORMULAR-GESTALTUNG */
.section-mitgliedwerden form {
  margin-top: 2rem;
  text-align: left; /* Labels und Inputs linksbündig */
}

.section-mitgliedwerden .form-group {
  margin-bottom: 1rem;
}

/* Label-Stil */
.section-mitgliedwerden label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: normal;
  font-size: 1rem;
}

/* Input-Felder */
.section-mitgliedwerden input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 5px;
  border: none;
  margin-bottom: 0.5rem;
  font-size: 1rem;
}

/* Fokus-Effekt auf Input */
.section-mitgliedwerden input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(249, 115, 22, 0.5); /* Orangefarbener Glow */
}

/* CTA-Button wie in deinen anderen Bereichen */
.btn-cta {
  display: inline-block;
  background: #ffcc00;
  color: #333;
  padding: 1rem 2rem;
  border-radius: 10px;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
  text-decoration: none;
  margin-top: 1.5rem;
  font-size: 1.2rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btn-cta:hover {
  background: #ffaa00;
  transform: scale(1.05);
}


/* Optionale Begrenzung und Zentrierung der ganzen Section */
#video-section {
 max-width: 1200px;     /* Begrenzte Breite */
      margin: 2rem auto;    /* Zentriert */
      padding: 1rem;
      background: #fff;     /* Weiße Box */
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      overflow: hidden;     /* Verhindert Überstehen */
 }

/* Das Video passt sich automatisch an die Breite an */
.video-box video {
  display: block;   /* Entfernt Standard-Inline-Gap */
  width: 100%;      /* Füllt die Breite des .video-box-Containers */
  height: auto;     /* Höhe bleibt proportional */
  border: none;
}