/* ==========================================================================
   1. VARIABLEN & GRUNDGER�ST
   ========================================================================== */
:root {
  --primary-color: #77B538;
  --secondary-color: #E2DDBF;
  --text-color: #102024;
  --text-light: #fff;
  --hover-bg-color: #77B538;
  --hover-text-color: #102024;
}

* { 
  box-sizing: border-box; 
}

body {
  margin: 0;
  font-family: "Open Sans", Arial, sans-serif;
  background-color: var(--primary-color);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px;
}

main {
  flex: 1 0 auto;
  max-width: 1000px;
  margin: 15px auto;
  padding: 0 15px;
}

/* ==========================================================================
   2. CONTAINER & TYPOGRAFIE
   ========================================================================== */
.container {
  max-width: 900px;
  margin: 30px auto;
  padding: 30px;
  background-color: var(--secondary-color);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

h1 { text-align: center; font-size: 2rem; margin-top: 0; }
h2 { font-size: 1.3rem; margin-top: 25px; }
h2.section-title { text-align: center; margin-bottom: 20px; }

/* ==========================================================================
   3. LINKS & BUTTONS
   ========================================================================== */
.container a:not(.back-btn) { 
  color: var(--primary-color); 
  text-decoration: none; 
  font-weight: bold; 
  transition: color 0.2s; 
}
.container a:not(.back-btn):hover { 
  color: var(--text-color); 
}

.back-btn {
  display: inline-block;
  margin-top: 30px;
  padding: 8px 15px;
  background-color: var(--primary-color);
  color: var(--text-light);
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s, color 0.2s;
}
.back-btn:hover { 
  background-color: var(--hover-bg-color); 
  color: var(--hover-text-color); 
  transform: translateY(-2px); 
}

.button, .download-button, .newsletter-button {
  font-size: 1rem; 
  font-family: inherit; 
  display: inline-block; 
  padding: 10px 20px;
  background-color: var(--primary-color); 
  color: var(--text-light); 
  border: none;
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 700; 
  cursor: pointer;
  text-align: center; 
  transition: background-color 0.2s, transform 0.2s, color 0.2s;
}
.button:hover, .download-button:hover, .newsletter-button:hover { 
  background-color: var(--hover-bg-color); 
  color: var(--hover-text-color); 
  transform: translateY(-2px); 
}

/* ==========================================================================
   4. HEADER & EPISODEN-KARTEN (GRID-LAYOUT)
   ========================================================================== */
header { text-align: center; padding: 30px 15px 0; color: var(--text-light); }
header img { max-width: 300px; margin-bottom: 10px; height: auto; }
header h1 { margin: 0; font-size: 1.8rem; }
header p { margin: 5px 0 0; font-size: 1rem; }
header .store-badges { margin-top: 22px; margin-bottom: 0; }
header .store-badges h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-light); }
header .store-badges a { display: inline-block; margin-top: 0; }
header .store-badges img { width: 142px; height: auto; display: block; margin: 0 auto; }

.episodes { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
  gap: 15px; 
  align-items: stretch; /* Garantiert gleiche Kartenh�he in einer Reihe */
}
.episodes:not(:last-of-type) { margin-bottom: 30px; }

article.episode-card {
  background-color: var(--secondary-color);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
article.episode-card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 8px 20px rgba(0,0,0,0.15); 
}

.episode-card h2 { font-size: 1.3rem; margin: 0 0 10px; }

/* Erh�hter Abstand nach unten zum Player, um Quetschen bei viel Text zu verhindern */
.episode-card p { margin: 10px 0 25px 0; line-height: 1.5; }

/* Dr�ckt Audio und Download starr nach unten */
.episode-card audio { 
  width: 100%; 
  margin: 0 0 5px 0; 
  margin-top: auto; /* Schiebt den Player nach unten, h�lt aber 25px Abstand zum p-Tag */
  border-radius: 10px; 
  background-color: #f0f0f0; 
}
.episode-card .download-button {
  margin-top: 5px;
}

/* Falls du doch mal wieder ein Bild in einer Folge nutzt */
.episode-intro { display: flex; gap: 15px; align-items: flex-start; margin-top: 10px; }
.episode-intro__img img { width: 120px; border-radius: 10px; cursor: zoom-in; }

/* ==========================================================================
   5. FORMULARE & NEWSLETTER
   ========================================================================== */
section { max-width: 400px; margin: 35px auto; padding: 20px; background-color: var(--secondary-color); border-radius: 12px; text-align: center; }
section form input[type="email"] { padding: 12px; width: 90%; max-width: 300px; border-radius: 6px; border: 1px solid #ccc; }

.datenschutz-hinweis { font-size: 0.75rem; color: var(--text-color); margin: 5px 0 15px; text-align: center; padding: 0 10px; }
.datenschutz-hinweis a { color: var(--primary-color); text-decoration: underline; }

/* ==========================================================================
   6. ARCHIV-STEUERUNG & DESIGN (KLASSENBASIERT & UNENDLICH ERWEITERBAR)
   ========================================================================== */
.archive-group {
  margin-bottom: 25px;
}

/* Sichtbarkeit steuern */
.archive-content {
  display: none;
  margin-top: 15px;
}
.archive-content.open {
  display: block;
}

/* Archiv Kopfbereich */
.archive-header-card {
  background-color: var(--secondary-color) !important;
  border: none;
  text-align: center;
}

.archive-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
}

.archive-toggle-button {
  margin-top: 10px;
  width: 100%;
}

/* Archiv Fu�bereich */
.archive-footer-box {
  background-color: var(--secondary-color);
  padding: 25px; 
  margin-top: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.archive-close-button {
  margin: 0;
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.archive-close-button:hover {
  background-color: var(--hover-bg-color) !important;
  color: var(--hover-text-color) !important;
}
/* Blendet alle Download-Buttons innerhalb von .archive-content aus */
.archive-content .download-button {
    display: none;
}

/* Archiv-Episoden-Karten: Hover-Effekt entfernen */
.archive-content .episode-card:hover {
    transform: none !important;       /* Falls du 'transform: scale()' nutzt */
    box-shadow: none !important;      /* Falls du einen Schatten-Effekt nutzt */
    background-color: inherit;        /* Falls sich die Farbe �ndert */
    border: none;                     /* Falls sich der Rahmen �ndert */
    cursor: default;                  /* Zeiger-Cursor entfernen */
}

/* 1. Die Archive-Box bekommt das Aussehen einer Episoden-Karte */
.archive-box {
    background-color: #E2DDBF; /* Deine gew�nschte Farbe */
    border-radius: 12px;       /* Abgerundete Ecken */
    padding: 20px;
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Macht den �bergang weich */
	
    /* Hier �bernimmst du den "Effekt" von Episode 30 */
    border: 1px solid #dcdcdc; /* Hier ggf. deinen Rahmenwert anpassen */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Der Schatten-Effekt */
}

.archive-box:hover {
    transform: translateY(-5px); /* Das "Anheben" beim Dr�berfahren */
    box-shadow: 0 8px 16px rgba(0,0,0,0.15); /* Ein etwas st�rkerer Schatten als im Ruhezustand */
    cursor: pointer; /* Zeigt an, dass man klicken kann */
}

/* 2. Damit das Archiv nicht "h�pft", wenn es offen ist, 
   k�nnen wir den Hover-Effekt im offenen Zustand deaktivieren, 
   falls das gew�nscht ist (optional) */
.archive-box.is-open:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Bleibt bei normalem Schatten */
}

/* 2. Die Episoden-Karten INNERHALB des Archivs zur�cksetzen */
.archive-content .episode-card {
    background-color: #E2DDBF !important;           /* Wei�er Hintergrund f�r den Karten-Effekt */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important; /* Der Schatten-Effekt */
    border: 1px solid #e0e0e0 !important;           /* Ein sehr dezenter Rahmen */
    border-radius: 8px !important;                  /* Abgerundete Ecken */
    padding: 15px !important;                       /* Innenabstand, damit der Text nicht klebt */
    margin-bottom: 15px !important;                 /* Abstand zwischen den einzelnen Karten */
}

/* 3. Hover-Effekt f�r die inneren Episoden deaktivieren */
.archive-content .episode-card:hover {
    transform: none !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.15) !important; /* Beim Hover wird der Schatten etwas weicher/gr��er */
    background: transparent !important;
}

/* Optional: Damit die letzte Karte im Archiv nicht so weit unten klebt */
.archive-content .episode-card:last-child {
    margin-bottom: 0;
}


/* ==========================================================================
   7. FOOTER, COOKIES & LIGHTBOX
   ========================================================================== */
footer { flex-shrink: 0; background-color: #fff; padding: 20px 15px; text-align: center; box-shadow: 0 -2px 6px rgba(0,0,0,0.1); position: relative; z-index: 100; }
footer .footer-container { max-width: 1000px; margin: auto; }
footer .social-links { display: flex; justify-content: center; gap: 20px; margin-bottom: 10px; flex-wrap: wrap; }
footer .social-links a .social-icon { width: 32px; height: 32px; fill: #77B538; transition: transform 0.2s; }
footer .social-links a:hover .social-icon { transform: scale(1.3); fill: #55832e; }
footer a { color: #77B538; text-decoration: none; font-weight: 700; }

#cookie-banner { position: fixed; bottom: 0; width: 100%; background: rgba(15,25,28,0.95); backdrop-filter: blur(7px); color: #fff; padding: 20px; z-index: 10000; display: none; }
#accept-cookies { background: var(--primary-color); color: #fff; }

.lightbox { display: none; position: fixed; inset: 0; z-index: 20000; background: rgba(0,0,0,0.9); }
.lightbox.is-open { display: block; opacity: 1; }

/* ==========================================================================
   8. MEDIA QUERIES (RESPONSIVE & DARK MODE)
   ========================================================================== */
.Stil2 { font-size: 9px; }

@media (max-width: 480px) {
  .episodes { gap: 10px; }
  .button, .download-button, .newsletter-button, .back-btn { width: 100%; }
  .archive-header-wrapper { flex-direction: column; gap: 5px; }
}

@media (prefers-color-scheme: dark) {
  body { background-color: #121212; color: #eee; }
  header { background-color: #1b1b1b; }
  article.episode-card, section, .container { background-color: #1f1f1f; color: #eee; }
  footer { background-color: #1b1b1b; }
}