@font-face{font-family:'Playfair';src:url('/assets/fonts/PlayfairDisplay-Variable.ttf') format('truetype');font-weight:400 800;font-display:swap}
@font-face{font-family:'PlayfairIt';src:url('/assets/fonts/PlayfairDisplay-Italic-Variable.ttf') format('truetype');font-style:italic;font-weight:400 700;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_18pt-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('/assets/fonts/Inter_18pt-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
:root{--brz:#9B7A4A;--brz2:#7D6038;--ink:#efe9e1;--muted:#b7ada2;--panel:#181310;--line:rgba(255,255,255,.08)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#100d0b;color:var(--ink);font:16px/1.7 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--brz);text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 22px}
.eyebrow{font:600 12px/1.4 Inter;letter-spacing:3px;text-transform:uppercase;color:var(--brz)}
h1{font:400 clamp(34px,6vw,72px)/1.03 Playfair;letter-spacing:.5px;margin:.15em 0 .25em}
h1 em{font-family:PlayfairIt;color:var(--brz);font-style:italic}
.lead{font-size:clamp(16px,2.2vw,21px);max-width:40em;color:#e6ddd0}
.hero{position:relative;padding:70px 0 34px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 72% 20%,rgba(155,122,74,.26),transparent 60%),linear-gradient(180deg,#14100c,#100d0b)}
.hero .inner{position:relative;z-index:2}
/* kompakter, EINHEITLICHER Kopf für Booklet + Player (halbierte Höhe, gleiche Headline) */
.hero.compact{padding:38px 0 10px}
.hero.compact h1{font-size:clamp(28px,4.6vw,46px);margin:.08em 0 .18em}
.hero.compact .lead{font-size:clamp(15px,1.9vw,18px);max-width:46em}
/* Abstand Hero → erste Sektion (Player) halbieren */
.hero.compact + section{padding-top:10px}
.back{display:inline-block;margin-bottom:14px;font:600 12px/1 Inter;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.back:hover{color:var(--brz)}
section{padding:40px 0;border-top:1px solid var(--line)}
.grp{font:400 25px/1.2 Playfair;margin:8px 0 4px;color:#efe9e1}
.grp .n{font:600 10px/1 Inter;letter-spacing:2px;text-transform:uppercase;color:var(--brz);margin-left:12px;opacity:.6}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:16px}
/* Album-Kachel (Übersicht) */
.al{background:linear-gradient(160deg,#181310,#131009);border:1px solid var(--line);border-radius:12px;padding:20px 22px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.al::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brz);opacity:.7;z-index:3}
/* Genre-Illustration beim Mouse-over (schließt bei Mouse-out via :hover) */
.al-pop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;z-index:0;pointer-events:none}
.al::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(20,16,12,.5),rgba(19,16,9,.84));opacity:0;transition:opacity .4s;z-index:1;pointer-events:none}
.al:hover .al-pop{opacity:.6}
.al:hover::before{opacity:1}
.al .k,.al h3,.al p,.al .links{position:relative;z-index:2}
.al .k{font:600 11px/1.4 Inter;letter-spacing:2px;text-transform:uppercase;color:var(--brz);margin-bottom:6px}
.al h3{font:400 24px/1.1 Playfair;margin-bottom:6px}
.al p{color:#cfc4b6;font-size:14.5px;flex:1}
.al .links{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--brz);border-radius:30px;font:600 12px/1 Inter;letter-spacing:1px;text-transform:uppercase;transition:.2s}
.btn.solid{background:var(--brz);color:#14100a}
.btn.solid:hover{filter:brightness(1.12)}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--brz);color:#14100a}
.btn.off{border-color:var(--line);color:var(--muted);cursor:default}
.badge{display:inline-block;background:#2a2318;border:1px solid var(--line);border-radius:20px;padding:2px 10px;color:var(--muted);font-size:.72rem;margin-left:6px}
footer{padding:48px 0 72px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;text-align:center}
footer a{font-weight:600}
/* Booklet: Song-Kacheln */
.songs{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:18px}
.song{background:linear-gradient(160deg,#181310,#131009);border:1px solid var(--line);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
.song .stop{cursor:pointer;display:block}
.song .stop:hover .open{opacity:1}
.song::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brz);opacity:.55}
.song:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(0,0,0,.45)}
.song .nr{font:600 11px/1 Inter;letter-spacing:1px;color:var(--brz)}
.song h3{font:400 20px/1.15 Playfair;margin:6px 0 6px}
.song .fac{color:#cfc4b6;font-size:13.5px;line-height:1.5}
.song .sty{color:var(--muted);font-size:11px;margin-top:10px;font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.song .open{position:absolute;top:14px;right:16px;color:var(--brz);font:italic 600 12px/1 Inter;opacity:.55}
.song:hover .open{opacity:1}
.song .pic{margin-top:14px;border-radius:8px;overflow:hidden;aspect-ratio:16/10;background:#0d0a06;border:1px solid rgba(155,122,74,.14)}
.song .pic img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .25s,transform .4s}
.song:hover .pic img{opacity:1;transform:scale(1.04)}
/* Kachel-Bild ist ein (unmarkierter) Link → startet den einen Player oben */
.song .pic.play{cursor:pointer;position:relative}
.song .pic.play.active{outline:2px solid var(--brz);outline-offset:-2px}
/* Eine schlanke Custom-Player-Leiste oben (sticky) */
.nowplay{margin-top:4px;background:linear-gradient(160deg,#1b1510,#120c07);border:1px solid rgba(155,122,74,.3);border-radius:12px;padding:12px 16px;position:sticky;top:0;z-index:30;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.nowplay audio{display:none}
.nowplay .np-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nowplay .np-goto{white-space:nowrap;padding:9px 16px;margin-left:auto}
.nowplay .np-fassung{display:flex;align-items:center;gap:6px}
.nowplay .np-fassung>span{color:var(--muted);font:600 11px/1 Inter;letter-spacing:.5px}
.nowplay .tk{padding:6px 12px;border:1px solid var(--line);border-radius:14px;background:transparent;color:var(--ink);font:600 11px/1 Inter;cursor:pointer;transition:.15s}
.nowplay .tk.on{background:var(--brz);color:#14100a;border-color:var(--brz)}
.nowplay .np-transport{display:flex;gap:6px}
.nowplay .np-b{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#14100c;color:var(--ink);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;transition:.15s}
.nowplay .np-b:hover{border-color:var(--brz);color:var(--brz)}
.nowplay .np-play{background:#2a2116;border-color:rgba(155,122,74,.5)}
.nowplay .np-time{color:var(--muted);font:500 12px/1 Inter;white-space:nowrap;font-variant-numeric:tabular-nums}
.nowplay .np-seek{flex:1 1 150px;min-width:110px;accent-color:var(--brz);height:4px;cursor:pointer}
.nowplay .np-mute{border:none;background:transparent;font-size:15px}
.nowplay .np-vol{width:84px;accent-color:var(--brz);cursor:pointer}
.nowplay .np-label{color:var(--muted);font:italic 500 12px/1.3 Inter;margin-top:9px}
.nowplay .np-label b{color:var(--brz);font-weight:600;font-style:normal}
@media(max-width:760px){.nowplay .np-seek{flex-basis:100%;order:6}.nowplay .np-vol{width:64px}}
/* Popup (Liedtext) */
#pop{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:4vh 4vw;background:rgba(10,7,4,.66);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s}
#pop.open{opacity:1;pointer-events:auto}
#pop.hovermode{pointer-events:none}
#pop .card{position:relative;width:min(940px,96vw);max-height:92vh;overflow-y:auto;background:linear-gradient(160deg,#1b1510,#120c07);border:1px solid rgba(155,122,74,.4);border-radius:14px;box-shadow:0 40px 120px rgba(0,0,0,.7);padding:30px 34px}
#pop .card h3{font:400 27px/1.1 Playfair;margin-bottom:2px}
#pop .card .sub{color:var(--brz);font-size:13px;font-style:italic;margin-bottom:16px}
#pop .lyr{line-height:1.5;font-size:15px;white-space:normal}
#pop .lyr .tag{color:var(--brz);font-style:italic;font-size:.82rem;display:block;margin-top:12px}
#pop .lyr .l{display:block}
#pop .x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(155,122,74,.6);background:rgba(20,16,10,.72);color:#efe4d2;font:300 22px/32px Inter;text-align:center;cursor:pointer}

.player{display:grid;grid-template-columns:290px 1fr;gap:16px;margin-top:8px}
@media(max-width:820px){.player{grid-template-columns:1fr}}
.list{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:72vh;overflow-y:auto}
.row{display:flex;gap:10px;align-items:baseline;padding:10px 13px;cursor:pointer;border-bottom:1px solid #251f18}
.row:hover{background:#241d15}.row.active{background:#2c2317;box-shadow:inset 3px 0 0 var(--brz)}
.rnr{color:var(--brz);font-weight:700;width:24px;flex:none}
.rt{flex:1;min-width:0}.rt b{font-weight:600}.rt small{display:block;color:var(--muted);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column;min-height:60vh}
.now-t{font:400 1.7rem/1.1 Playfair;margin:0}
.now-s{color:var(--brz);font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;margin:4px 0 12px}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:6px 0}
.controls button{background:#2a2318;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px 12px;cursor:pointer;font-size:.85rem}
.controls button:hover{background:#372c1c}.controls button.on{background:var(--brz);color:#1a1206;border-color:var(--brz);font-weight:600}
.time{color:var(--muted);font-size:.75rem;min-width:88px;text-align:right}
input[type=range]{accent-color:var(--brz)}
.seek{flex:1;min-width:120px}
.hint{color:var(--muted);font-size:.75rem}
.lyr{flex:1;margin-top:12px;padding:4px;line-height:1.45;font-size:.92rem;column-count:2;column-gap:30px;column-rule:1px solid var(--line)}
@media(max-width:640px){.lyr{column-count:1}}
.lyr .tag{color:var(--brz);font-style:italic;font-size:.78rem;margin-top:10px;display:block;break-inside:avoid}
.lyr .l{display:block;break-inside:avoid}