/* ============================================================
   basis.css – Gemeinsames Grund-CSS aller öffentlichen Seiten
   ------------------------------------------------------------
   Eingeführt: v3.12 (Oktober 2026)

   Vorher stand dieser Block zeichengenau identisch in allen zehn
   HTML-Dateien. Jede Änderung am Grunddesign musste zehnmal
   gemacht werden – und ein Fehler (z. B. die Menü-Regel für
   <nav>, die in v3.11.12 den Zeitstrahl zerschossen hat) steckte
   ebenfalls zehnmal drin.

   Enthält: Farb-Variablen, Grundlayout, Header, Hauptmenü,
   Footer, Mini-Player, Abschnitts-Überschriften, Einblend-
   Animation und die Mobil-Regeln für das Hamburger-Menü.

   Eingebunden in jeder Seite VOR dem seiteneigenen <style>:
     <link rel="stylesheet" href="assets/basis.css?v=1">
   Reihenfolge ist wichtig: Erst das Grund-CSS, danach die
   Regeln der Seite – so können Seiten einzelne Werte gezielt
   überschreiben.

   v3.12 außerdem: Grundgröße 110 % (siehe html-Regel), feste Pixel-
   werte für Inhaltsgrößen auf rem umgestellt, Mindestschriftgröße
   0,7 rem und Mindest-Deckkraft 0,8 für kleine Beschriftungen – auf
   allen Seiten nach denselben Regeln.

   WICHTIG: Nach jeder Änderung an dieser Datei die Zahl hinter
   ?v= in ALLEN zehn HTML-Dateien hochzählen (Cache-Buster),
   sonst laden Browser die alte Fassung aus dem Cache.
   ============================================================ */
/* === CSS-VARIABLEN (Design-Token) ===
   Alle Farben zentral definiert – Änderung hier wirkt überall */
:root {
  --navy:       #192537;  /* Haupthintergrund – dunkles Marineblau aus dem Logo */
  --navy-light: #1f2f45;  /* Etwas helleres Blau für Karten und Hover-Zustände */
  --gold:       #B09E80;  /* Goldton aus dem Brand Guide – Akzentfarbe */
  --gold-light: #c8b290;  /* Helleres Gold für Hover-Zustände */
  --rule:  rgba(176,158,128,0.3); /* Halbtransparentes Gold für Trennlinien */
  --cream:      #E9E9E9;  /* Cremeweiss aus dem Logo – Haupttextfarbe */
  --cream-dim:  #c0b8a8;  /* Gedimmtes Creme für Nebentexte */
}

/* === RESET & BASIS ===
   Einheitliche Grundeinstellungen für alle Browser */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth; /* Sanftes Scrollen bei Anker-Links */
  /* v3.12: Grundgröße der ganzen Website. 100 % = 16 px (Browser-
     Standard), 110 % = 17,6 px. Alle Größen in rem (Schrift, Cover,
     Porträts, Buttons, Header-Höhe, Inhaltsbreiten) richten sich
     danach – ein einziger Regler für die ganze Seite, die
     Verhältnisse untereinander bleiben erhalten.
     Bewusst NICHT mitskaliert (bleiben in px): Haarlinien und
     Rahmen, das Punktraster, die Umbruchpunkte der Media Queries
     und die feine Achsen-Geometrie im Zeitstrahl. */
  font-size: 110%;
}

body {
  background: var(--navy);
  color: var(--cream);
  font-family: 'EB Garamond', Georgia, serif; /* Historische Antiqua – passt zur Cinzel im Logo */
  font-size: 1.125rem;
  line-height: 1.7;
  /* Subtiles Punktraster als Hintergrundtextur – übernommen vom Logo-Cover-Design */
  background-image: radial-gradient(circle, rgba(176,158,128,0.065) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* === KOPFZEILE (HEADER) ===
   position:sticky hält den Header beim Scrollen oben.
   backdrop-filter erzeugt den Glasmorphismus-Effekt. */
header {
  position: sticky;
  top: 0;
  z-index: 200; /* Über allen anderen Elementen */
  background: rgba(25,37,55,0.97); /* Fast undurchsichtig für Lesbarkeit */
  backdrop-filter: blur(10px); /* Weichzeichner-Effekt auf darunterliegenden Inhalten */
  border-bottom: 1px solid var(--rule);
  padding: 0 2.5rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Logo-Bereich: Buch-Icon + "Frontispiz" in Cinzel */
.header-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  flex-shrink: 0; /* Verhindert Schrumpfen bei engem Viewport */
}
.header-logo span {
  font-family: 'Cinzel', serif; /* Gleiche Schrift wie im echten Logo */
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: #B09E80; /* Direkt Gold – nicht via Variable da es das Logo-Gold ist */
}

/* Navigation: horizontale Linkliste
   v3.12: Selektoren auf "header nav" eingeschränkt. Vorher galt die
   Regel für JEDES <nav> der Seite – das hat in v3.11.12 die
   Jahresleiste im Zeitstrahl verbogen. Außerdem stehen die Menü-
   einträge jetzt korrekt in einer <ul> (vorher <li> direkt im <nav>,
   ungültiges HTML); die Flex-Anordnung sitzt deshalb an der <ul>. */
header nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  align-items: center;
}
header nav a {
  font-family: 'Josefin Sans', sans-serif; /* Gleiche Schrift wie "DER LITERATURPODCAST" im Logo */
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.2s;
}
header nav a:hover, header nav a.active { color: var(--gold-light); }

/* Hamburger-Button: nur auf Mobilgeräten sichtbar */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--cream);
  flex-shrink: 0;
}

/* === FUSSZEILE (FOOTER) === */
footer {
  border-top: 1px solid var(--rule);
  padding: 1.75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Bricht auf mobil in mehrere Zeilen um */
  gap: 1rem;
}
.footer-logo { width: 12.5rem; display: block; }
.footer-logo svg { width: 100%; height: auto; display: block; }

.footer-links { display: flex; gap: 1.75rem; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--gold); }
.footer-copy {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  color: var(--cream-dim);
  opacity: 0.8;
}

/* === ABSCHNITTE (SECTIONS) ===
   max-width und padding sorgen für konsistente Inhaltsbreite */
.section { max-width: 60rem; margin: 0 auto; padding: 4rem 2rem; }

/* Abschnittsüberschrift: Linie rechts via ::after Pseudo-Element */
.section-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.section-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap; /* Verhindert Umbruch des Titels */
}

/* === MINI-PLAYER (fixiert am unteren Rand) ===
   transform:translateY(100%) versteckt ihn zunächst unterhalb des Viewports.
   Die Klasse .visible schiebt ihn mit einer CSS-Transition ins Bild. */
#mini-player {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 500; /* Über allem anderen, auch über dem Header */
  background: rgba(20,30,48,0.97);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--gold);
  padding: 0.85rem 2rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  transform: translateY(100%); /* Startzustand: unsichtbar unten */
  transition: transform 0.35s cubic-bezier(.4,0,.2,1); /* Sanfte Ein-/Ausblend-Animation */
}
#mini-player.visible { transform: translateY(0); } /* Sichtbar-Zustand */

/* Player-Elemente */
.mp-art {
  width: 2.625rem; height: 2.625rem;
  background: var(--navy-light);
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mp-art svg { color: var(--gold); opacity: 0.5; }
.mp-info { flex: 1; min-width: 0; } /* min-width:0 erlaubt text-overflow:ellipsis */
.mp-title {
  font-family: 'EB Garamond', serif;
  font-size: 0.95rem;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Langer Titel wird mit ... abgekürzt */
}
.mp-ep {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}
.mp-controls { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.mp-btn {
  background: none; border: none; cursor: pointer;
  color: var(--cream); display: flex; align-items: center;
  padding: 0; transition: color 0.2s;
}
.mp-btn:hover { color: var(--gold); }
.mp-play-btn {
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--gold); background: none;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--gold);
  transition: background 0.2s;
}
.mp-play-btn:hover { background: rgba(176,158,128,0.15); }
.mp-progress {
  flex: 1; min-width: 5rem; max-width: 13.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.mp-time {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 0.7rem; color: var(--cream-dim);
  opacity: 0.8; white-space: nowrap;
}
.mp-bar {
  flex: 1; height: 3px;
  background: rgba(176,158,128,0.2);
  cursor: pointer; position: relative;
}
.mp-bar-fill {
  height: 100%; background: var(--gold);
  width: 0%;
  transition: width 0.25s linear;
  pointer-events: none; /* Klick geht durch zur mp-bar */
}
.mp-close { margin-left: 0.25rem; }

/* === ANIMATIONEN === */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* .fade-in Klasse für sanftes Einblenden beim Laden */
.fade-in { animation: fadeUp 0.8s ease both; }

/* === RESPONSIVE: MOBILGERÄTE ===
   Unter 960px Breite wird die Navigation zum Hamburger-Menü.
   v3.12: vorher 768px. Mit der größeren Schrift (110 %) passt das
   volle Menü erst ab ca. 950px in den Header – darunter wäre die
   Seite seitlich verschiebbar geworden. */
@media (max-width: 960px) {
  header { padding: 0 1.25rem; }

  /* Navigation als Dropdown statt horizontal
     v3.12: nur noch das Hauptmenü im <header> (siehe oben). top = Header-
     Höhe, deshalb ebenfalls in rem (4rem), damit beides zusammen wächst. */
  header nav {
    display: none; /* Standardmäßig versteckt */
    position: absolute; /* Aus dem Dokumentfluss nehmen */
    top: 4rem; left: 0; right: 0;
    background: rgba(25,37,55,0.99);
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--rule);
    z-index: 200;
  }
  header nav ul { flex-direction: column; gap: 1.25rem; }
  header nav.open { display: block; } /* Per JS-Klasse eingeblendet */
  .menu-toggle { display: block; } /* Hamburger-Button sichtbar */

  footer { flex-direction: column; padding: 1.5rem; }
  #mini-player { padding: 0.75rem 1rem; gap: 0.75rem; }
  .mp-progress { display: none; } /* Fortschrittsbalken auf Mobil verstecken */
}