/* =====================================================
   BRANDENBURGS DUNKLE GEHEIMNISSE
   Komplette Website-CSS
   ===================================================== */


/* =====================================================
   1. GRUNDLAYOUT
   ===================================================== */

:root {
  --black: #000000;
  --background: #111111;
  --dark: #181818;
  --surface: #222222;
  --light: #f3eee5;
  --gray: #aaa49c;
  --gold: #c9a66b;
  --border: #383838;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  background: var(--black);
  color: var(--light);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
}


/* =====================================================
   2. STARTSEITE: HERO-BEREICH
   ===================================================== */

.hero {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: 0 7% 80px;
  overflow: hidden;
  background: var(--black);
}


/* =====================================================
   3. NAVIGATION
   Desktop:
   Titel links, Links rechts

   Smartphone:
   Titel ausgeblendet, Hamburger rechts
   ===================================================== */


/* Desktop-Navigation */

.mobile-nav {
  position: absolute;
  top: 0;
  left: 7%;
  right: 7%;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  width: auto;
  height: 90px;
  min-height: 90px;
  margin: 0;
  padding: 0;
}

.mobile-home-link {
  display: block;
  flex: 0 0 auto;

  max-width: 300px;
  margin: 0;
  padding: 0;

  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.15;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.mobile-home-link:hover {
  color: var(--light);
}


/* Rechte Desktop-Navigation */

.nav-right {
  position: static;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 30px;

  width: auto;
  height: auto;
  margin: 0 0 0 auto;
  padding: 0;

  background: transparent;
  border: 0;
}

.nav-right a {
  display: block;

  width: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 8px 0;

  border: 0;
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.nav-right a:hover {
  color: var(--gold);
}


/* Startseite nur im mobilen Menü */

.mobile-start-link {
  display: none;
}


/* Hamburger auf Desktop ausblenden */

.mobile-toggle {
  display: none;
}


/* =====================================================
   4. GROSSES STARTSEITEN-BILD
   ===================================================== */

@media (min-width: 701px) {
  .full-width-logo {
    width: 100vw;
    height: auto;
    min-height: 0;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    background: #000000;
  }

  .full-width-logo img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;

    object-fit: contain;
    object-position: center center;
    background: #000000;
  }

  .full-width-logo::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.12) 0%,
      rgba(0, 0, 0, 0.02) 55%,
      rgba(0, 0, 0, 0.95) 100%
    );
  }
}


/* =====================================================
   5. TEXT UNTER DEM STARTSEITEN-BILD
   ===================================================== */

.hero-content {
  position: relative;
  z-index: 2;

  max-width: 760px;
  margin: 0 auto;
  padding: 65px 0 0;

  background: var(--black);
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;

  color: var(--gold);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: normal;
}


.hero-content h1 {
  margin: 0 auto 25px;

  font-size: clamp(2.5rem, 6vw, 5.3rem);
  line-height: 1;
}

.hero-description {
  max-width: 690px;
  margin: 0 auto 18px;

  color: var(--gray);
  font-size: 1.08rem;
}


/* =====================================================
   6. BUTTONS
   ===================================================== */

.button {
  display: inline-block;

  margin-top: 15px;
  padding: 14px 24px;

  border: 1px solid var(--gold);
  color: var(--gold);

  font-weight: bold;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.button:hover {
  background: var(--gold);
  color: var(--black);
}

.spotify-button {
  display: inline-block;

  margin-top: 8px;
  padding: 13px 22px;

  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--black);

  font-size: 0.9rem;
  font-weight: bold;
  text-align: center;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.spotify-button:hover {
  background: transparent;
  color: var(--gold);
}

.text-link {
  display: inline-block;

  margin-top: 10px;
  color: var(--gold);
  font-weight: bold;
}

.text-link:hover {
  opacity: 0.7;
}


/* =====================================================
   7. NEUESTE FOLGEN AUF DER STARTSEITE
   ===================================================== */

.latest-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 7%;

  background: var(--black);
}

.latest-section h2 {
  margin: 0 0 22px;

  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1.05;
}

.section-intro {
  max-width: 700px;
  margin: 0;

  color: var(--gray);
  font-size: 1.05rem;
}


/* Drei Folgen nebeneinander */

.episode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;

  margin-top: 50px;
}

.latest-episode {
  display: flex;
  flex-direction: column;

  min-width: 0;
  margin: 0;
  padding: 24px;

  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.latest-episode h3 {
  margin: 8px 0 14px;

  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.1;
}

.latest-episode p:not(.episode-meta) {
  color: var(--gray);
  font-size: 0.95rem;
}

.episode-meta {
  margin: 0 0 8px;

  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}


/* Spotify-Player */

.spotify-player,
.player {
  margin: 28px 0 18px;
  padding: 12px;

  background: var(--dark);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.spotify-player iframe,
.player iframe {
  display: block;

  width: 100%;
  min-height: 152px;

  border: 0;
  border-radius: 12px;
}

.latest-episode .spotify-player {
  margin-top: auto;
  padding: 0;
  background: transparent;
  border: 0;
}


/* Button unter allen Folgen */

.latest-episode .spotify-button {
  width: 100%;
  margin-top: auto;
  text-align: center;
}

.all-episodes-button {
  display: inline-block;

  margin-top: 35px;
  padding: 14px 22px;

  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: bold;
}

.all-episodes-button:hover {
  background: var(--gold);
  color: var(--black);
}


/* =====================================================
   8. UNTERSEITEN: HEADER OHNE BILD
   ===================================================== */

.subpage-header {
  position: relative;
  z-index: 20;

  min-height: 90px;
  padding: 0 7%;

  background: var(--black);
  border-bottom: 1px solid var(--border);
}


/* =====================================================
   9. ÜBER-DEN-PODCAST-SEITE
   ===================================================== */

.about-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 90px 7% 110px;

  background: var(--black);
}

.about-page h1 {
  margin: 0 0 30px;

  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
}

.about-page p {
  color: var(--gray);
  font-size: 1.08rem;
}

.about-page .intro {
  color: var(--light);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.4rem;
  line-height: 1.4;
}

.about-cover {
  width: 180px;
  height: 180px;
  margin-bottom: 35px;

  object-fit: cover;
  border: 1px solid var(--gold);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

blockquote {
  margin: 45px 0;
  padding: 25px 0 25px 25px;

  border-left: 2px solid var(--gold);
  color: var(--gold);

  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  font-style: italic;
}

.instagram-link {
  display: inline-block;

  margin-top: 18px;
  color: var(--gold);
  font-weight: bold;
}


/* =====================================================
   10. FOLGEN-SEITE
   ===================================================== */

.episodes-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 90px 7% 110px;

  background: var(--black);
}

.episodes-page h1 {
  max-width: 800px;
  margin: 0 0 28px;

  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
}

.episodes-intro {
  max-width: 700px;
  margin: 0 0 70px;

  color: var(--gray);
  font-size: 1.08rem;
}

.episodes-list {
  width: 100%;
}

.episode-card {
  width: 100%;
  margin: 0;
  padding: 42px 0;

  border-top: 1px solid var(--border);
}

.episode-card:last-child {
  border-bottom: 1px solid var(--border);
}

.episode-card h2 {
  margin: 8px 0 18px;

  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
}

.episode-card p:not(.episode-meta) {
  max-width: 720px;
  color: var(--gray);
  font-size: 1.02rem;
}

.episode-card .spotify-player {
  max-width: 760px;
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 50px;
}

/* =====================================================
   H4 ZWISCHENÜBERSCHRIFTEN IN BRONZE / SERIFEN
   ===================================================== */

.episode-detail h4,
.episodes-page h4,
.about-page h4,
.episode-card h4 {
  color: var(--gold) !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: 500 !important; /* dicker war 700 */
  font-size: clamp(1.4rem, 3vw, 2rem) !important; /* größer, responsiv wie h2 */
  line-height: 1.1 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.8rem !important;
}

/* =====================================================
   11. FOOTER
   ===================================================== */

footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  padding: 35px 7%;

  background: var(--black);
  border-top: 1px solid var(--border);
  color: var(--gray);

  font-size: 0.85rem;
}

footer p {
  width: 100%;
  margin: 0;
}

footer a:hover {
  color: var(--gold);
}


/* =====================================================
   12. TABLET
   ===================================================== */

@media (max-width: 900px) and (min-width: 701px) {
  .episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile-nav {
    left: 5%;
    right: 5%;
  }

  .nav-right {
    gap: 20px;
  }
}


/* =====================================================
   13. SMARTPHONE
   ===================================================== */

@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #000000;
    overflow-x: hidden;
  }

  main,
  footer,
  .hero,
  .latest-section,
  .about-page,
  .episodes-page {
    background: #000000;
  }

  /* Hero kompakt halten */
  .hero {
    min-height: 0;
    height: auto;
    padding: 0 0 40px;
  }

  /* Mobile Navigation */
  .mobile-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;

    display: block;
    width: 100%;
    height: 76px;
    min-height: 76px;
    padding: 0;

    background: rgba(0, 0, 0, 0.45);
  }

  .mobile-home-link {
    display: none;
    visibility: hidden;
  }

  .mobile-toggle {
    position: absolute;
    top: 16px;
    right: 6%;
    z-index: 102;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;

    width: 44px;
    height: 44px;
    padding: 8px;

    border: 1px solid var(--light);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
  }

  .mobile-toggle span {
    display: block;

    width: 24px;
    height: 2px;

    background: var(--light);
    transition: transform 0.2s ease;
  }

  .mobile-toggle.is-open span:first-child {
    transform: translateY(4.5px) rotate(45deg);
  }

  .mobile-toggle.is-open span:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  /* Mobile-Menü geschlossen */
  .nav-right {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    z-index: 101;

    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 6% 14px;

    background: #000000;
    border-top: 1px solid rgba(201, 166, 107, 0.45);
    border-bottom: 1px solid var(--border);
  }

  /* Mobile-Menü geöffnet */
  .nav-right.is-open {
    display: flex;
  }

  .nav-right a {
    display: block;

    width: 100%;
    min-height: 44px;
    padding: 13px 0;

    border-bottom: 1px solid rgba(243, 238, 229, 0.15);
    color: var(--light);

    font-size: 0.95rem;
    text-shadow: none;
  }

  .nav-right a:last-child {
    border-bottom: 0;
  }

  .mobile-start-link {
    display: block;
  }

  /* Mobile Banner */
  .full-width-logo {
    width: 100vw;
    height: 330px;
    margin: 0;

    background: #000000;
  }

  .full-width-logo img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
    background: #000000;
  }

  .full-width-logo::after {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.08) 0%,
      rgba(0, 0, 0, 0.02) 55%,
      rgba(0, 0, 0, 0.92) 100%
    );
  }

  /* Text direkt unter dem Bild */
  .hero-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 26px 6% 0;

    background: #000000;
  }

  .hero-content h1 {
    margin-top: 0;
    margin-bottom: 18px;

    font-size: clamp(2.3rem, 12vw, 4rem);
  }

  .hero-description {
    font-size: 1rem;
  }

  /* Folgen als eine Spalte */
  .episode-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .latest-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 60px 6% 80px;
  }

  .latest-episode {
    padding: 22px;
  }

  /* Unterseiten */
  .subpage-header {
    min-height: 76px;
    padding: 0 6%;
  }

  .about-page,
  .episodes-page {
    width: 100%;
    padding: 70px 6% 85px;
  }

  .about-page h1,
  .episodes-page h1 {
    font-size: clamp(2.3rem, 11vw, 4rem);
  }

  .episodes-intro {
    margin-bottom: 45px;
  }

  .episode-card {
    padding: 32px 0;
  }

  .episode-card h2 {
    font-size: 2.2rem;
  }

  .about-cover {
    width: 140px;
    height: 140px;
  }

  .spotify-button {
    width: 100%;
    text-align: center;
  }

  footer {
    padding: 30px 6%;
  }
}

@media (max-width: 900px) and (min-width: 701px) {
  .episode-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .episode-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}


/* =====================================================
   14. KLEINE SMARTPHONES
   ===================================================== */

@media (max-width: 380px) {
  .full-width-logo {
    height: 290px;
  }

  .hero-content {
    padding-top: 22px;
  }

  .nav-right a {
    font-size: 0.9rem;
  }
}

/* =====================================================
   FOLGENKARTEN:
   Rahmen behalten, zusätzliche Trenner entfernen
   ===================================================== */

.episodes-grid .full-episode,
.episodes-list .full-episode,
.episodes-grid .episode-card,
.episodes-list .episode-card {
  position: relative !important;

  border: 1px solid #383838 !important;
  border-top: 1px solid #383838 !important;
  border-radius: 8px !important;

  background: #181818 !important;
}

/* Kupferfarbene Zusatzlinie entfernen */

.episodes-grid .full-episode::before,
.episodes-list .full-episode::before,
.episodes-grid .episode-card::before,
.episodes-list .episode-card::before {
  display: none !important;
  content: none !important;
}

/* Ruhiger Abstand zwischen den Karten */

.episodes-grid {
  row-gap: 26px !important;
  column-gap: 26px !important;
}

/* =====================================================
   ABSTAND ZWISCHEN DEN FOLGENKARTEN
   ===================================================== */

/* =====================================================
   FOLGEN-SEITE AUF DESKTOP BREITER MACHEN
   ===================================================== */

@media (min-width: 1200px) {
  .episodes-page {
    width: calc(100% - 80px) !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 90px 0 120px !important;
  }

  .episodes-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: 100% !important;
  }

  .episodes-grid .full-episode {
    width: 100% !important;
    min-width: 0 !important;
    padding: 30px !important;
  }

  .episodes-grid .full-episode-content {
    width: 100% !important;
    min-width: 0 !important;
  }

  .episodes-grid .podcast-player {
    width: 100% !important;
  }
}


/* Mittlere Desktop- und Tablet-Breite */

@media (min-width: 701px) and (max-width: 1199px) {
  .episodes-page {
    width: calc(100% - 60px) !important;
    max-width: 1100px !important;
    margin: 0 auto !important;
    padding: 80px 0 100px !important;
  }

  .episodes-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
    width: 100% !important;
  }

  .episodes-grid .full-episode {
    width: 100% !important;
    min-width: 0 !important;
    padding: 26px !important;
  }
}


/* Smartphone bleibt einspaltig */

@media (max-width: 700px) {
  .episodes-page {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 70px 6% 90px !important;
  }

  .episodes-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .episodes-grid .full-episode {
    width: 100% !important;
    padding: 22px !important;
  }
}

/* Episoden-Unterseite: Layout mit Instagram links, Text rechts */

.episode-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: 90px 7% 110px;
  background: var(--black);
}

.episode-detail h1 {
  margin: 0 0 28px;
  font-size: clamp(2.5rem, 6vw, 5rem);
  line-height: 1;
}

/* Zweispaltiges Layout: Instagram + Text */

.episode-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 32px;
  margin-bottom: 40px;
}

.episode-instagram {
  flex: 1 1 55%;
}

.episode-notes {
  flex: 1 1 45%;
}

.episode-notes p {
  color: var(--gray);
  font-size: 1.02rem;
}

.episode-meta {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 0.78rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Mobile: untereinander statt nebeneinander */

@media (max-width: 700px) {
  .episode-detail {
    width: 100%;
    padding: 70px 6% 90px;
  }

  .episode-layout {
    flex-direction: column;
    gap: 22px;
  }
}