/* ===== Base ===== */
body {
  margin: 0;
  font-family: Garamond, serif;
  color: #f5f5dc;
  /* Hintergrundbild (Autorenseite) */
  background: #0a0a0a url("../images/LyFi.png") no-repeat center center fixed;
  background-size: cover;
}

/* Overlay-Grundaufbau */
.overlay {
  min-height: 100vh;
  padding: 2rem;
}

/* Grünes Overlay (gewählt) */
.overlay-green {
  background: linear-gradient(
    180deg,
    rgba(20, 80, 20, 0.35) 0%,
    rgba(0, 40, 0, 0.55) 60%,
    rgba(0, 30, 0, 0.75) 100%
  );
}

/* ===== Header-Feinschliff ===== */
/* H2 etwas größer und optisch 2–3 Zeilen höher in den "Himmel" geschoben */
header h2 {
  font-size: 1.4rem;
  margin-top: -18px; /* bei Bedarf -16 / -20 anpassen */
}

/* ===== Bücher-Sektion ===== */
.book-section {
  text-align: center;
  margin-top: 2.5rem;
}

.book-section h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.8rem;
  color: #d4af37;
}

.book-section .subline {
  font-style: italic;
  opacity: 0.9;
}

/* Kacheln: nebeneinander (Desktop), sauberer Wrap (mobil) */
.book-categories {
  list-style: none;
  padding: 0;
  margin: 1.25rem auto 0;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 900px;
}

.book-card { 
  flex: 1 1 200px; 
  max-width: 260px; 
}

.book-card a {
  display: grid;
  grid-template-rows: auto auto;
  justify-items: center;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.65);
  border-radius: 10px;
  text-decoration: none;
  color: #c0d8c0;
  font-weight: 700;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;
}

.book-card a:hover {
  background: rgba(212, 175, 55, 0.15);
  border-color: #d4af37;
  transform: translateY(-2px);
}

/* Standardgröße der eigens gestalteten Mini-SVGs */
.book-card svg { 
  width: 42px; 
  height: 42px; 
  display: block; 
}

/* Sci-Fi-Symbol: gezielt kleiner, ohne HTML anzufassen */
.book-categories a[href*="books/scifi/"] svg,
.book-categories a[href*="books/scifi/index.html"] svg {
  width: 36px;
  height: 36px;
}

/* Optional: leicht kompakter auf sehr kleinen Screens
@media (max-width: 560px) {
  .book-card { flex: 1 1 100%; max-width: none; }
}
*/
.book-categories {
  display: flex !important;  /* zwingt Flexbox */
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 1.25rem auto 0;
  max-width: 900px;
}
/* Sci-Fi kleiner machen */
.book-card a[href$="scifi/index.html"] svg {
  width: 36px;
  height: 36px;
}
/* Karten nebeneinander erzwingen */
.book-categories {
  display: flex !important;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* Sci-Fi Icon etwas kleiner */
.book-card a[href$="scifi/index.html"] svg {
  width: 36px;
  height: 36px;
}
/* === FINAL OVERRIDES (nur ans Dateiende einfügen) === */
.book-categories{
  display: flex !important;        /* nebeneinander */
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  list-style: none !important;      /* keine Punkte */
  padding-left: 0 !important;
  margin: 1.25rem auto 0;
  max-width: 900px;
}
.book-categories li{ list-style: none !important; } /* falls ein Browser zickt */

.book-card{ flex: 1 1 200px; max-width: 260px; }

/* alle drei Symbole gleich groß & kleiner */
.book-card svg{
  width: 36px !important;
  height: 36px !important;
  display: block;
}
/* Intro-Text etwas höher setzen */
.overlay section p:first-of-type {
  margin-top: -22px;  /* ca. 2–3 Zeilen nach oben */
}
/* Sprachmenü-Logo dunkler machen */
#lang-trigger img {
  filter: brightness(.45) contrast(1.55) saturate(1.1);
}
footer .footer-mail { margin-right: 20px; }            /* Platz nach der E-Mail */
footer .footer-photo {
  width: 29px;                                         /* Foto etwas breiter */
  height: auto;
  margin: 0 16px;                                      /* Platz vor/nach dem Foto */
  vertical-align: middle;
}
footer .gr-link {                                      /* Platz vor dem Goodreads-Block */
  margin-left: 20px;
  text-decoration: none;
  white-space: nowrap;                                 /* hält Icon + Text zusammen */
}
footer .gr-link img { vertical-align: middle; }
footer .gr-text {
  margin-left: 6px;                                    /* Abstand Icon ↔ Text */
  color: #ff1493;                                      /* pink */
  font-weight: 600;
}