@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================
   FAITH IN SCARS — Album-Detailseiten (zentrale Vorlage)
   Premium Dark · Cinzel + Inter · Gold-Akzent
   ============================================================ */

:root{
  --black:#050505;--bg:#050505;--card:#111111;
  --accent:#c8a86b;--accent-dim:#a68a52;--gold:#c8a86b;
  --red:#8a1f1f;--red-dim:#5e1414;--accent-2:#8a1f1f;
  --cream:#ffffff;--cream-mid:rgba(255,255,255,0.60);--dust:#8a8078;
  --border:rgba(255,255,255,0.08);--border-red:rgba(200,168,107,0.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--cream);font-family:"Inter",system-ui,-apple-system,sans-serif;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:"Cinzel",Georgia,serif;font-weight:600;letter-spacing:0.04em;}
::selection{background:var(--accent);color:var(--bg);}
::-webkit-scrollbar{width:2px;}::-webkit-scrollbar-track{background:var(--bg);}::-webkit-scrollbar-thumb{background:var(--accent-dim);}

/* Deko (wie Startseite: Cursor & Thread aus, Grain dezent) */
#cursor,#cursor-ring,#thread{display:none;}
#grain{position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:0.4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");}

/* NAV */
#nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:1.4rem 3rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;background:rgba(5,5,5,0.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);}
.nav-brand{font-family:"Cinzel",serif;font-weight:600;font-size:1.1rem;letter-spacing:0.28em;color:var(--cream);text-decoration:none;justify-self:start;}
.nav-menu{display:flex;gap:2.6rem;list-style:none;justify-self:center;}
.nav-menu a{position:relative;font-family:"Inter",sans-serif;font-size:0.72rem;font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--cream-mid);text-decoration:none;padding-bottom:5px;transition:color 0.25s;}
.nav-menu a:hover{color:var(--cream);}
.nav-menu a.active{color:var(--accent);}
.nav-menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);}
.nav-social{display:flex;gap:1.2rem;justify-self:end;}
.nav-social a{color:var(--cream-mid);display:inline-flex;transition:color 0.25s,transform 0.25s;}
.nav-social a:hover{color:var(--accent);transform:translateY(-1px);}
.nav-social svg{width:17px;height:17px;}

/* ALBUM HERO (Cover als Banner; background-image je Seite inline gesetzt) */
#album-hero{position:relative;height:44vh;min-height:300px;overflow:hidden;}
#album-hero-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;filter:grayscale(15%) brightness(0.9);transform:scale(1.05);animation:heroZoom 22s ease-out forwards;}
@keyframes heroZoom{from{transform:scale(1.09);}to{transform:scale(1.0);}}
#album-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,5,5,0.35) 0%,rgba(5,5,5,0.85) 70%,var(--bg) 100%),radial-gradient(ellipse at center,transparent 0%,rgba(5,5,5,0.5) 100%);}

/* PAGE HEADER */
#page-header{padding:3.5rem 3rem 2.2rem 6rem;border-bottom:1px solid var(--border);}
.page-kicker{font-family:"Inter",sans-serif;font-size:0.66rem;font-weight:600;letter-spacing:0.34em;text-transform:uppercase;color:var(--accent);margin-bottom:1.1rem;}
.page-title{font-family:"Cinzel",serif;font-weight:700;font-size:clamp(2.4rem,6vw,5rem);line-height:1.05;letter-spacing:0.04em;color:var(--cream);}
.page-title span{display:block;color:var(--accent);}
.page-meta{margin-top:1.4rem;font-family:"Inter",sans-serif;font-size:0.68rem;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--dust);}

/* ALBUM BIO */
#album-bio{padding:2.8rem 3rem 2.8rem 6rem;border-bottom:1px solid var(--border);max-width:720px;}
.album-bio-text{font-family:"Inter",sans-serif;font-weight:300;font-size:1rem;line-height:1.9;color:var(--cream-mid);}

/* TRACKLIST */
#tracklist{padding:2.5rem 3rem 6rem 6rem;}
.track-row{display:flex;flex-direction:column;border-bottom:1px solid var(--border);transition:background 0.25s;}
.track-row:hover{background:rgba(200,168,107,0.04);}
.track-row.is-playing{background:rgba(200,168,107,0.07);border-color:var(--border-red);}
.track-main{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:1.5rem;padding:1.2rem 0;}
.track-num{font-family:"Inter",sans-serif;font-size:0.72rem;font-weight:500;letter-spacing:0.1em;color:var(--dust);text-align:right;min-width:2.5rem;font-variant-numeric:tabular-nums;}
.track-row.is-playing .track-num{color:var(--accent);}
.track-info{min-width:0;}
.track-artist{font-family:"Inter",sans-serif;font-size:0.56rem;font-weight:600;letter-spacing:0.24em;text-transform:uppercase;color:var(--accent);margin-bottom:0.3rem;}
.track-title{font-family:"Cinzel",serif;font-weight:600;font-size:1.2rem;letter-spacing:0.03em;color:var(--cream);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.track-controls{display:flex;align-items:center;gap:1rem;flex-shrink:0;}
.track-prog-wrap{width:140px;display:flex;flex-direction:column;gap:0.4rem;}
.track-prog{height:2px;background:rgba(255,255,255,0.1);cursor:pointer;border-radius:1px;position:relative;}
.track-fill{height:100%;width:0%;background:var(--accent);border-radius:1px;transition:width 0.1s linear;}
.track-time{font-family:"Inter",sans-serif;font-size:0.58rem;font-weight:500;letter-spacing:0.1em;color:var(--dust);text-align:right;font-variant-numeric:tabular-nums;}
.play-btn{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--accent);color:var(--accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.25s,color 0.25s,border-color 0.25s;flex-shrink:0;}
.play-btn:hover{background:var(--accent);color:var(--bg);}
.track-row.is-playing .play-btn{background:var(--accent);color:var(--bg);border-color:var(--accent);}
.play-btn svg{width:14px;height:14px;fill:currentColor;}
.wa-share-btn{width:38px;height:38px;border-radius:50%;background:#25D366;border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.2s,transform 0.2s;cursor:pointer;text-decoration:none;}
.wa-share-btn:hover{background:#1da851;transform:translateY(-1px);}

/* LYRICS */
.lyrics-panel{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.3s;padding:0 0 0 4.5rem;}
.lyrics-panel.open{max-height:1200px;padding:0.8rem 2rem 1.8rem 4.5rem;}
.lyrics-text{font-family:"Inter",sans-serif;font-weight:300;font-size:0.9rem;line-height:2;color:var(--cream-mid);white-space:pre-line;}
.lyrics-empty{font-family:"Inter",sans-serif;font-size:0.62rem;font-weight:500;letter-spacing:0.15em;text-transform:uppercase;color:var(--dust);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(14px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal.in{opacity:1;transform:none;}

/* FOOTER (wie Startseite) */
footer{padding:4.5rem 3rem 2.5rem 6rem;border-top:1px solid var(--border);}
.footer-inner{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:3rem;max-width:1100px;margin-bottom:3rem;}
.footer-brand{font-family:"Cinzel",serif;font-weight:600;font-size:1.35rem;letter-spacing:0.22em;line-height:1.6;color:var(--cream);}
.footer-tag{font-family:"Inter",sans-serif;font-weight:300;font-size:0.82rem;color:var(--dust);margin-top:1rem;max-width:240px;line-height:1.7;}
.footer-col h4{font-family:"Inter",sans-serif;font-size:0.58rem;font-weight:600;letter-spacing:0.28em;text-transform:uppercase;color:var(--accent);margin-bottom:1.3rem;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.75rem;}
.footer-col a{font-family:"Inter",sans-serif;font-size:0.82rem;font-weight:300;color:var(--cream-mid);text-decoration:none;transition:color 0.2s;display:inline-flex;align-items:center;gap:0.5rem;}
.footer-col a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.8rem;font-family:"Inter",sans-serif;font-size:0.68rem;font-weight:300;letter-spacing:0.12em;color:var(--dust);}

/* VISUALIZER */
#viz{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5000;pointer-events:none;opacity:0;transition:opacity 0.7s ease;width:min(500px,90vw);height:min(260px,45vw);}
#viz.active{opacity:1;}

/* RESPONSIVE */
@media(max-width:960px){
  .nav-menu{display:none;}
  #nav{grid-template-columns:1fr auto;padding:1.2rem 1.5rem;}
}
@media(max-width:768px){
  #page-header,#album-bio,#tracklist{padding-left:2rem;padding-right:1.5rem;}
  .track-main{grid-template-columns:2rem 1fr auto;gap:1rem;}
  .track-prog-wrap{width:80px;}
  .page-title{font-size:clamp(2rem,9vw,4rem);}
  .lyrics-panel,.lyrics-panel.open{padding-left:2rem;}
  footer{padding:3.5rem 1.5rem 2rem 1.5rem;}
  .footer-inner{grid-template-columns:1fr 1fr;gap:2.2rem;}
}
@media(max-width:420px){.footer-inner{grid-template-columns:1fr;}}