/* Schriften selbst gehostet (SIL OFL 1.1, siehe fonts/OFL-*.txt) – kein Google-Fonts-Aufruf */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/fraunces-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/fraunces-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-normal-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-normal-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
:root{
  --honey:#B8860B; --amber:#8E6608; --brown:#3D2C1B; --cream:#F3E9D2;
  --honey-soft:#F7EFDC; --card:#FFFCF6; --muted:#7a6850; --line:#E6D8B8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--brown);font:17px/1.65 Inter,system-ui,sans-serif}
a{color:var(--amber)}
.wrap{max-width:900px;margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.2;margin:0}
img{max-width:100%}

/* Navigation */
nav.top{background:var(--brown);color:var(--cream)}
nav.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;flex-wrap:wrap}
nav.top a{color:var(--cream);text-decoration:none}
.logo{font-family:Fraunces,Georgia,serif;font-size:21px;font-weight:600}
.logo .hex{color:var(--honey)}
.links{display:flex;gap:18px;font-size:15px}
.links a:hover{color:var(--honey)}

/* Hero */
.hero{padding:44px 0 30px}
.hero.start{padding:56px 0 28px}
.hero.kurz{padding:36px 0 18px}
.hero-grid{display:grid;grid-template-columns:260px 1fr;gap:36px;align-items:center}
.cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;box-shadow:0 12px 32px rgba(61,44,27,.22)}
.kicker{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600}
.hero h1{font-size:clamp(38px,7vw,60px);margin:6px 0 10px}
.lead{font-size:19px;color:var(--muted);margin:0 0 20px;max-width:640px}
audio{width:100%;margin-top:4px}
.credit-mini{font-size:13px;color:var(--muted);margin-top:8px}
.dl{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{display:inline-block;background:var(--honey);color:#fff;text-decoration:none;font-weight:600;font-size:15px;padding:9px 18px;border-radius:99px}
.btn:hover{background:var(--amber)}
.btn.ghost{background:transparent;color:var(--amber);border:1.5px solid var(--honey)}
.ki{display:inline-block;background:var(--brown);color:var(--cream);font-size:12px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:99px;margin-right:6px;vertical-align:1px}

/* Direkter Link („diese Seite hat eine eigene Adresse“) */
.teilen{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:16px 0 0;font-size:13.5px;color:var(--muted)}
.teilen .link-icon{color:var(--honey);flex:none}
.teilen a{color:var(--muted);text-decoration-color:var(--line);text-underline-offset:2px}
.teilen a:hover{color:var(--amber);text-decoration-color:var(--honey)}
.teilen .kopieren{font:inherit;font-size:12.5px;color:var(--amber);background:transparent;border:1px solid var(--line);border-radius:99px;padding:2px 10px;cursor:pointer}
.teilen .kopieren:hover,.teilen .kopieren.fertig{border-color:var(--honey);background:var(--honey-soft)}

/* Bewertung und Downloadzähler */
.bewertung{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--muted)}
.sterne-wahl{display:flex;gap:2px}
.sterne-wahl button{background:none;border:0;padding:0 1px;font-size:26px;line-height:1;color:var(--line);cursor:pointer;transition:color .12s}
.sterne-wahl button.an{color:var(--honey)}
.sterne-wahl button:disabled{cursor:default}
.sterne-wahl button:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:4px}
.sterne-schnitt{display:flex;align-items:center;gap:8px}
.sterne-bild{position:relative;display:inline-block;color:var(--line);font-size:17px;letter-spacing:1px;white-space:nowrap}
.sterne-bild .voll{position:absolute;inset:0;overflow:hidden;color:var(--honey)}
.sterne-info{font-style:italic}
.liste .bew{font-size:14px;color:var(--honey)}

/* Textblöcke */
.intro{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin:8px 0 36px}
.intro p{margin:0 0 10px}.intro p:last-child{margin:0}
.intro h2{font-size:19px;margin:24px 0 6px}.intro h2:first-child{margin-top:0}
.cite{font-family:Fraunces,Georgia,serif;font-style:italic;background:var(--honey-soft);border-left:3px solid var(--honey);padding:10px 14px;border-radius:6px}
.section-title{font-size:28px;margin:44px 0 16px}

/* Liedteile */
.lied{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px;margin-bottom:22px}
.lied.mit-aside{display:grid;grid-template-columns:1fr 250px;gap:28px}
.num{font-family:Fraunces,serif;font-size:15px;color:var(--honey);font-weight:700;letter-spacing:.06em}
.lied h2{font-size:26px;margin:2px 0 4px}
.tempo{font-style:italic;color:var(--muted);font-size:15px;margin-bottom:16px}
.verse{font-family:Fraunces,Georgia,serif;font-size:19px;line-height:1.6;margin:0 0 14px}
.stage{display:block;font-size:14px;font-style:italic;color:var(--muted);margin:6px 0 4px}
aside.vorlage{background:var(--honey-soft);border-radius:10px;padding:16px 18px;font-size:14.5px;line-height:1.55;align-self:start}
aside.vorlage h3{font-family:Inter,sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
aside.vorlage blockquote{margin:8px 0 0;font-family:Fraunces,serif;font-style:italic;font-size:15px}
.notiz{margin:10px 0 0}
dl.glossar{display:grid;grid-template-columns:160px 1fr;gap:10px 20px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 28px}
dl.glossar dt{font-weight:600}
dl.glossar dd{margin:0}
.credits{border-top:2px solid var(--honey);margin:40px 0 0;padding:20px 0 40px;font-size:15px;color:var(--muted)}
.credits strong{color:var(--brown)}

/* Startseite */
.neu{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px}
.neu h2{font-size:32px;margin:4px 0 6px}
.neu h2 a{color:var(--brown);text-decoration:none}
.neu p{margin:0 0 10px}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.karte{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--brown);transition:transform .15s}
.karte:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(61,44,27,.12)}
.karte img{aspect-ratio:1;object-fit:cover;width:100%}
.karte div{padding:14px 16px 16px}
.karte h3{font-size:20px;margin-bottom:4px}
.karte p{font-size:14.5px;margin:0 0 8px;color:var(--brown)}
.meta{font-size:13px;color:var(--muted)}
.alben{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.album{display:block;background:var(--brown);color:var(--cream);border-radius:14px;padding:16px;text-decoration:none}
.album img{border-radius:10px;aspect-ratio:1;object-fit:cover;width:100%;margin-bottom:12px}
.album h3{font-size:22px}
.album p{margin:4px 0 6px;font-size:14.5px;opacity:.85}
.album .meta{color:var(--honey)}

/* Album */
.spieler{background:var(--brown);color:var(--cream);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.spieler #jetzt{font-family:Fraunces,serif;font-size:18px}
.tracks{list-style:none;margin:0 0 48px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px}
.tracks li{display:grid;grid-template-columns:40px 28px 1fr auto 50px;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)}
.tracks li:last-child{border:0}
.tracks li.aktiv{background:var(--honey-soft)}
.tracks a{font-family:Fraunces,serif;font-size:19px;color:var(--brown);text-decoration:none}
.play{width:36px;height:36px;border-radius:50%;border:0;background:var(--honey);color:#fff;cursor:pointer;font-size:13px}
.nr,.dauer,.stil{color:var(--muted);font-size:14px}

/* Liste */
#suche,#pl-suche{width:100%;padding:12px 16px;font:inherit;border:1px solid var(--line);border-radius:99px;background:var(--card);margin-bottom:18px}
.liste{list-style:none;margin:0 0 48px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:14px}
.liste a{display:grid;grid-template-columns:52px 1fr 1fr 1fr 58px 50px;gap:14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--brown)}
.liste li:last-child a{border:0}
.liste img{width:52px;height:52px;border-radius:8px;object-fit:cover}
.liste .t{font-family:Fraunces,serif;font-size:18px}
.liste .stil,.liste .alb,.liste .dauer{font-size:14px;color:var(--muted)}

/* Playlisten */
.pl-tipp p{margin:0}
.pl-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:14px}
.pl-kopf label{font-size:14px;color:var(--muted)}
.pl-kopf select{font:inherit;font-size:16px;padding:8px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--brown);max-width:100%}
.pl-kopf select:disabled{opacity:1}
.pl-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.pl-knoepfe .btn{font-size:14px;padding:7px 14px;border:0;cursor:pointer;font-family:inherit}
.pl-knoepfe .btn.ghost{border:1.5px solid var(--honey)}
.pl-knoepfe .btn:disabled{opacity:.45;cursor:default}
.pl-banner{background:var(--honey-soft);border:1px solid var(--honey);border-radius:12px;padding:16px 18px;margin-bottom:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.pl-banner p{margin:0;flex:1 1 260px;font-size:15px}
.pl-banner .btn{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;padding:8px 16px}
.pl-banner .btn.ghost{border:1.5px solid var(--honey)}
.spieler #pl-summe{display:block;font-family:Inter,sans-serif;font-size:13px;color:var(--honey);margin-top:2px}
.tracks.pl li{grid-template-columns:40px 28px 1fr auto 50px 92px}
.pl-ordnen{display:flex;gap:2px;justify-self:end}
.pl-ordnen button{width:28px;height:28px;border:1px solid var(--line);background:var(--card);color:var(--brown);border-radius:6px;cursor:pointer;font-size:13px;line-height:1;padding:0}
.pl-ordnen button:hover:not(:disabled){border-color:var(--honey);color:var(--amber)}
.pl-ordnen button:disabled{opacity:.3;cursor:default}
.pl-leer{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:22px;margin:0 0 20px;color:var(--muted);font-style:italic}
.pl-teilen{margin:0 0 12px}
#pl-link-feld{width:100%;margin-top:10px;padding:10px 14px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--brown)}
#pl-link-info{margin:8px 0 0}
.pl-druckkopf{display:none}
.liste.waehlen li{display:grid;grid-template-columns:52px 1fr 1fr 50px 40px;gap:14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.liste.waehlen li:last-child{border:0}
.liste.waehlen a{display:inline;padding:0;border:0;font-family:Fraunces,serif;font-size:18px}
button.plus{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--honey);background:var(--card);color:var(--amber);font-size:19px;line-height:1;cursor:pointer;justify-self:end}
button.plus:hover{background:var(--honey);color:#fff}
button.plus.drin{background:var(--honey);color:#fff;border-color:var(--honey)}
.pl-hinweis{position:fixed;left:50%;bottom:18px;transform:translate(-50%,120%);background:var(--brown);color:var(--cream);font-size:15px;padding:12px 20px;border-radius:99px;box-shadow:0 10px 28px rgba(61,44,27,.3);transition:transform .25s;z-index:20;max-width:92vw;text-align:center}
.pl-hinweis.an{transform:translate(-50%,0)}
.pl-hinweis a{color:var(--honey);margin-left:6px;white-space:nowrap}

footer.site{background:var(--brown);color:var(--cream);font-size:14px;padding:22px 0;margin-top:20px}
footer.site a{color:var(--honey)}
footer.site p{margin:4px 0}

@media (max-width:720px){
  .hero{padding-top:26px}
  .hero-grid,.neu{grid-template-columns:1fr;gap:20px}
  .cover{max-width:300px}
  .lied,.lied.mit-aside{grid-template-columns:1fr;padding:22px 20px;gap:18px}
  .intro{padding:20px}
  dl.glossar{grid-template-columns:1fr;gap:2px 0;padding:20px}
  dl.glossar dd{margin-bottom:10px}
  .tracks li{grid-template-columns:40px 1fr 46px}
  .tracks .nr,.tracks .stil{display:none}
  .liste a{grid-template-columns:52px 1fr auto 46px}
  .liste .stil,.liste .alb{display:none}
  .links{gap:14px;font-size:14px}
  .tracks.pl li{grid-template-columns:40px 1fr 50px 92px}
  .liste.waehlen li{grid-template-columns:52px 1fr 40px}
  .liste.waehlen .stil,.liste.waehlen .dauer{display:none}
  .pl-kopf{gap:8px}
  .pl-kopf select{width:100%}
}

/* Programmzettel: nur Name und Liedfolge aufs Papier */
@media print{
  body{background:#fff}
  nav.top,footer.site,.hero,.pl-kopf,.pl-banner,.spieler,.pl-teilen,.pl-ordnen,.play,.pl-zufuegen,.pl-hinweis,.pl-leer,noscript{display:none !important}
  .pl-druckkopf{display:block;margin-bottom:14px}
  .pl-druckkopf h2{font-size:28px}
  .pl-druckkopf p{font-size:12px;color:#555;margin:4px 0 0}
  .tracks{border:0;background:none;margin:0}
  .tracks.pl li{grid-template-columns:28px 1fr auto 50px;border-color:#ddd;padding:8px 0;background:none}
  .tracks a{color:#000;text-decoration:none}
}