/* ----------- 1. SILBER-ROSA DESIGN ----------- */
:root {
  --main-bg: #111111;           /* Tiefes Schwarz als Haupt-Hintergrund */
  --card-bg: #181818;           /* Etwas helleres Schwarz für Cards */
  --accent: #c2b994;            /* Edler Gold-Ton */
  --accent2: #eeeadd;           /* Helles Gold als Akzent/Highlight */
  --text-light: #faf9f6;        /* Weiß als dezentes Highlight, sparsam einsetzen */
  --text-soft: #c2b994;         /* Gold als Soft-Text */
  --btn-hover: #c2b99422;       /* Transparenter Gold-Hover für Buttons */
  --shadow: 0 8px 40px #c2b99444;   /* Goldener Shadow */
  --shadow2: 0 2px 16px #c2b99422;  /* Leichter Gold-Shadow */
  --fav-default: #c2b994;       /* Gold für Favoriten (Default) */
  --fav-active: #fffbe9;        /* Sehr helles, fast weißes Gold für aktiv */
  --fav-glow: 0 0 12px #c2b994cc, 0 0 1px #faf9f6;
}



/* ----------- 3. GLOBALER FONT ----------- */
html, body {
  margin:0; padding:0; height:100%;
  background: var(--main-bg);
  color: var(--text-light);
  font-family: 'Playfair Display', serif;
}

/* ----------- 4. LANDING PAGE ----------- */
.landing-bg {
  position:fixed;top:0;left:0;right:0;bottom:0;
  z-index:1;overflow:hidden;
}
.landing-img {
  position:absolute;width:220px;height:340px;
  object-fit:cover;border-radius:22px;
  box-shadow:0 8px 32px #c2b994;opacity:.93;
  animation: float 13s ease-in-out infinite alternate;
  transition:transform 1.7s,box-shadow .3s;
  border:2.5px solid #c2b994;
}
@media(max-width:600px){
  .landing-img{width:46vw;height:68vw;}
}
@keyframes float{
  0%{transform:translateY(0) scale(1);}
  55%{transform:translateY(-28px) scale(1.09);}
  100%{transform:translateY(0) scale(1);}
}
.landing-center {
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  z-index:2;
}
.big-fact {
  min-height: 130px;
  margin: 4em 0 2.4em 0;
  text-align: center;
  color: var(--accent);
  font-size: 2.7rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: .01em;
  text-shadow: 0 4px 32px c2b994, 0 2px 40px #240a17aa;
  pointer-events: none;
  user-select: none;
  word-break: break-word;
  line-height: 1.17;
  opacity: 0;
  transition: font-size .6s cubic-bezier(.6,0,.3,1);
}
@media (max-width: 700px) {
  .big-fact { font-size: 1.47rem; min-height: 72px; }
}
@keyframes factFadeInOut {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
.big-fact.show {
  animation: factFadeInOut 3.6s cubic-bezier(.44,0,.28,1) both;
}

.landing-btn {
  font-size:2.3rem;
  padding:26px 72px;
  background:var(--accent2);
  border:none;
  border-radius:33px;
  color:#c2b994;
  font-family: 'Playfair Display', serif;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:0 2px 28px #c2b99488,0 2px 14px #c2b99433;
  margin-top:2em;
  transition: background .2s, color .2s;
}
.landing-btn:hover {background:var(--btn-hover);color:#c61a85;}
/* ----------- 5. OVERLAY (18+, Passwort) ----------- */
.overlay, .pwlock {
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  z-index:2222;
  background:rgba(24,21,27,0.97);
}
.overlaybox, .pwlockbox {
  background:var(--card-bg);
  border-radius:20px;
  padding:32px 32px 28px 32px;
  box-shadow:var(--shadow);
  text-align:center;
  max-width:340px;
  font-family: 'Playfair Display', serif;
}
.overlaybox h1, .pwlockbox h2 {
  font-size:2rem;
  margin-bottom:.5em;
  color:var(--accent);
  font-family: 'Playfair Display', serif;
}
.overlaybox p, .pwinfo {
  font-size:1.09rem;
  color:var(--text-soft);
}
.overlaybox button, .pwlockbox button {
  margin-top:18px;
  padding:10px 34px;
  font-size:1.1rem;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#31162a;
  cursor:pointer;
  box-shadow:var(--shadow2);
  font-family: 'Playfair Display', serif;
  font-weight:600;
}
.overlaybox button:hover, .pwlockbox button:hover {
  background:var(--btn-hover);
  color:c2b994;
}
.pwlockbox input {
  margin:16px 0 8px 0;
  padding:8px 14px;
  font-size:1.09rem;
  border-radius:7px;
  border:1px solid var(--accent2);
  min-width:120px;
  background:#fff7fa;
  color:#c2b994;
  font-family: 'Playfair Display', serif;
}
.pwfail {color:#c2b994; font-size:1.03rem;}
/* ----------- 6. TOP-BUTTONS ----------- */
.toggle-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 22;
  background: var(--accent2);
  border: none;
  border-radius: 999px;
  padding: 12px 28px;
  color: #c2b994;
  cursor: pointer;
  font-size: 1.07rem;
  font-family: 'Playfair Display', serif;
  font-weight: 500;
  box-shadow: var(--shadow2);
  transition: background .2s;
}
.toggle-btn:hover { background: var(--accent);}
.favbar-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 22;
  background: var(--accent2);
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  color: var(--fav-active);
  cursor: pointer;
  font-size: 1.3rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  box-shadow: var(--shadow2);
  transition: background .2s;
}
.favbar-btn:hover { background: var(--accent);}
#seriesSelect {
  position:fixed;top:20px;left:50%;transform:translateX(-50%);
  z-index:40;font-size:1rem;padding:7px 14px;
  border-radius:10px;border:1px solid var(--accent);
  background:var(--accent2);color:#33322f;
  font-family: 'Playfair Display', serif;
}
/* ----------- 7. SHOWCASE MODE ----------- */
#showcase {
  position: relative; width: 100vw; height: 100vh; overflow: hidden;
  transition: opacity .7s;
}
.float-img {
  position: absolute; border-radius: 22px;
  box-shadow:0 8px 32px #c2b99477;
  width: 220px; height: 340px; object-fit: cover; opacity: 0.97;
  animation: float 13s ease-in-out infinite alternate;
  cursor: pointer; transition: transform 1.7s cubic-bezier(.5,1.7,.3,1), box-shadow .3s;
  will-change: transform; border: 2.5px solid #c2b994;
}
.float-img:hover { box-shadow:0 16px 56px #c2b994bb, 0 2px 14px #c2b99455;}
@media(max-width:500px){ .float-img { width:64vw; height:98vw;} }
/* ----------- 8. GRID ----------- */
#grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 18px; padding: 44px 5vw 80px 5vw;
  animation: fadeInGrid .6s; min-height: 100vh;
}
@keyframes fadeInGrid { from { opacity: 0; transform: translateY(50px);} to   { opacity: 1; transform: translateY(0);} }
.grid-img-wrap { position: relative; }
.grid-img {
  width: 100%; aspect-ratio: 2/3; border-radius: 16px; cursor: pointer;
  box-shadow:0 2px 14px #e4aedc66; object-fit: cover;
  transition: transform .18s, box-shadow .18s; background: #faf7fb;
  border: 1.8px solid #e4aedc;
}
.grid-img:hover {
  transform: scale(1.07); box-shadow:0 8px 30px #c2b994aa, 0 2px 16px #c2b994;
}
.grid-fav-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  background: rgba(255,255,255,0.96);
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 1.55rem;
  color: var(--fav-default);
  box-shadow: 0 2px 10px #fff6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .18s, background .18s, box-shadow .14s;
  z-index: 4;
  outline: none;
  touch-action: manipulation;
  user-select: none;
  font-family: 'Playfair Display', serif;
}
.grid-fav-btn.faved {
  color: var(--fav-active);
  background: #f7d7f2;
  box-shadow: var(--fav-glow);
  animation: fav-pop .18s;
}
@keyframes fav-pop { 0%{transform:scale(1.15);} 100%{transform:scale(1);} }
/* ----------- 9. MODAL ----------- */
#modal {
  display:none; position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(24,21,27,0.98); align-items:center; justify-content:center;
  z-index:100; flex-direction: column; animation: fadeModal .3s;
  font-family: 'Playfair Display', serif;
}
@keyframes fadeModal { from {opacity:0;} to{opacity:1;} }
#modal img {
  max-width:85vw; max-height:75vh; border-radius:24px;
  box-shadow:0 8px 50px #e4aedc77; border: 2px solid var(--accent);
}
#modal .close {
  position:absolute; top:32px; right:32px; left:auto;
  font-size:2.8rem; color:var(--accent); cursor:pointer; transition: color .2s; z-index: 101;
}
#modal .close:hover { color: #c2b994;}
#modalText { text-align: center; margin-top: 20px; font-size: 1.14rem; color: var(--accent2);}
.fav-btn {
  position: absolute; left:32px; top:32px; right:auto;
  font-size:3rem; background:none; border:none; cursor:pointer;
  filter: drop-shadow(0 2px 6px #c2b994aa); transition: color .2s, text-shadow .2s; z-index:102;
  color: var(--fav-default);
  font-family: 'Playfair Display', serif;
}
.fav-btn.faved {
  color: var(--fav-active);
  text-shadow: 0 0 12px #c2b99488, 0 2px 6px #c2b994;
  animation: fav-pop .2s;
}
/* ----------- 10. DOWNLOAD-BUTTON ----------- */
#downloadBtn {
  display: inline-block;
  margin: 22px 0 0 0;
  padding: 10px 34px;
  font-size: 1.12rem;
  border-radius: 10px;
  background: var(--accent2);
  color: #c2b994;
  font-weight: 600;
  box-shadow: 0 2px 10px #c2b99422;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: 'Playfair Display', serif;
  transition: background .16s, color .18s;
}
#downloadBtn:hover {
  background: var(--btn-hover);
  color: #c2b994;
}
#downloadBtn.disabled {
  background: #e3cee2;
  color: #8d697a;
  border: 1px solid #c2b994;
  cursor: not-allowed !important;
  pointer-events: none;
  opacity: 0.6;
  text-decoration: line-through;
}
/* ----------- 11. MUSIK-BUTTON ----------- */
#musicBtn {
  position:fixed; bottom:36px; right:38px;
  background: var(--accent2); border: none; border-radius:50%;
  width:58px; height:58px; color:#c2b994; font-size:2.3rem; cursor:pointer;
  z-index: 30; box-shadow:var(--shadow2); transition: background .2s;
  font-family: 'Playfair Display', serif;
}
#musicBtn.playing { background: var(--accent); }
/* ----------- 12. LOADER ----------- */
#loader {
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.3rem;letter-spacing:.1em;color:var(--accent);
  font-family: 'Playfair Display', serif;
}
/* ----------- 13. RESPONSIVE ----------- */
@media(max-width:900px){
  #modal .close { top:14px; right:14px; left:auto; font-size:2.1rem;}
  .fav-btn { top:14px; left:14px; right:auto; font-size:2.1rem;}
}
@media(max-width:500px){
  .float-img { width:64vw; height:98vw;}
}
.pwlock {
  position:fixed;top:0;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  z-index:2222;
  background:rgba(32,12,30,0.97);
}
.pwlockbox {
  background:var(--card-bg);
  border-radius:20px;
  padding:36px 32px 30px 32px;
  box-shadow:var(--shadow);
  text-align:center;
  max-width:420px;
}
.pwlockbox h2 {
  font-size:1.7rem;
  color:var(--accent);
}
.pwlockbox input {
  margin:16px 0 8px 0;
  padding:8px 14px;
  font-size:1.14rem;
  border-radius:7px;
  border:1px solid var(--accent2);
  min-width:120px;
  background:#fff7fa;
  color:#c2b994;
  font-family: 'Playfair Display', serif;
}
.pwlockbox button {
  padding:8px 28px;
  font-size:1.1rem;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#31162a;
  cursor:pointer;
  margin-top:10px;
  font-weight:600;
}
.pwlockbox button:hover {background:var(--btn-hover);color:#c2b994;}
.pwinfo {
  font-size:.99rem;color:var(--text-soft);margin-bottom:8px;
}
.pwfail {color:#ec73b7; font-size:1.03rem;}
/* Musikbutton */
#musicBtn {
  position:fixed; bottom:36px; right:38px;
  background: var(--accent2); border: none; border-radius:50%;
  width:58px; height:58px; color:#c2b994; font-size:2.3rem; cursor:pointer;
  z-index: 30; box-shadow:var(--shadow2); transition: background .2s;
  font-family: 'Playfair Display', serif;
}
#musicBtn.playing { background: var(--accent); }

/* --- MOBILE NAVBAR FINAL --- */
.mobile-navbar {
  display: none;
}
@media (max-width: 700px) {
  .mobile-navbar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 54px;
    background: var(--accent2);
    box-shadow: 0 2px 16px #e4aedc22;
    z-index: 1002;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    gap: 4px;
  }
  .mobile-navbar button {
    background: none;
    border: none;
    color: #b3298a;
    font-size: 2.2em;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 14px #ec73b732;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    font-family: 'Playfair Display', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static !important;
    margin: 0 2px;
  }
  .mobile-navbar button:active,
  .mobile-navbar .favbar-btn.faved {
    background: var(--accent);
    color: #fff;
  }
  /* Verstecke Desktop-Buttons auf Mobil */
  .toggle-btn:not(#toggleModeNav),
  .favbar-btn:not(#favBarBtnNav),
  .seriesSelect,
  #musicBtn {
    display: none !important;
  }
  body {
    padding-top: 54px;
  }
}
/* --- Offcanvas-Seitenmenü für Serien, jetzt in Silber/rosa --- */
.menu-overlay {
  display: none;
  position: fixed; left:0; top:0; width:100vw; height:100vh;
  background: rgba(207,210,218,0.58); /* Silber mit leichter Transparenz */
  z-index: 1010;
}
.menu-overlay.active { display: block; }
.side-menu {
  position: fixed;
  left: -260px;
  top: 0;
  width: 240px;
  height: 100vh;
  background: var(--accent2);   /* Silber! */
  box-shadow: 3px 0 38px #e4aedc99;
  padding: 24px 12px 18px 12px;
  z-index: 1020;
  transition: left 0.28s cubic-bezier(.54,.07,.43,.93);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.side-menu.active { left: 0; }
.close-btn {
  position: absolute; right: 12px; top: 12px;
  font-size: 2.3em; background: none; border: none; color: #b3298a; cursor: pointer;
  line-height: 1;
  transition: color .15s;
  z-index: 1100;
}
.close-btn:hover { color: #fff; background: var(--accent);}
#seriesList {
  margin: 32px 0 0 0; padding: 0; list-style: none;
}
#seriesList li {
  margin: 0 0 14px 0;
  padding: 0;
}
#seriesList li.active a {
  font-weight: bold; color: var(--fav-active);
}
#seriesList a {
  color: #54455a;
  text-decoration: none;
  font-size: 1.15em;
  padding: 7px 0 7px 7px;
  display: block;
  border-radius: 8px;
  transition: background .14s, color .14s;
}
#seriesList a:hover {
  background: var(--accent);
  color: #fff;
}
/* Nur noch das Glassmenu als Menü anzeigen */
#toggleMode,
#favBarBtn,
#musicBtn,
.seriesSelect,
.mobile-navbar,
.side-menu,
.menu-overlay,
#favBarBtnNav,
#toggleModeNav,
.burgerMenuBtn,
#musicBtnNav,
#closeMenuBtn {
    display: none !important;
}