/* =========================================================================
   Eduard.W – Voice of Hope
   Öffentliche Künstlerwebsite. Vollständig neu (Block 17).

   Haltung: Die Musik steht im Vordergrund, nicht die Oberfläche. Große
   Typografie, viel Weißraum, ruhige Flächen. Alles, was mehrfach vorkommt --
   Songkarten, Cover, Player, Kaufbereiche -- hat feste Maße, damit nichts
   je nach Datenlage verrutscht.
   ========================================================================= */

/* ---------- Grundwerte ------------------------------------------------- */
:root {
  --navy: #0f1c33;
  --navy-tief: #08111f;
  --navy-weich: #1b2c49;
  --gold: #b8901f;
  --gold-hell: #e3c565;
  --gold-blass: #f6efdc;
  --papier: #ffffff;
  --papier-warm: #faf8f4;
  --papier-grau: #f2f1ee;
  --linie: #e4e1da;
  --text: #14202f;
  --text-leise: #5d6b7d;
  --text-invers: #f6f4ef;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --spur: clamp(1.25rem, 5vw, 4rem);   /* seitlicher Rand */
  --bahn: 76rem;                        /* maximale Inhaltsbreite */
  --luft: clamp(4rem, 9vw, 8rem);       /* Abstand zwischen Abschnitten */
  --rund: 0.75rem;
  --rund-gross: 1.25rem;
  --schatten: 0 1px 2px rgba(15, 28, 51, .04), 0 8px 30px rgba(15, 28, 51, .07);
  --schatten-tief: 0 2px 4px rgba(15, 28, 51, .06), 0 20px 50px rgba(15, 28, 51, .12);

  /* Feste Höhe für den Kaufbereich der Karten. Buttonhöhe und reservierter
     Platz stammen aus derselben Variablen -- sonst laufen sie beim nächsten
     Schriftgrößenwechsel auseinander und die Karten stehen ungleich hoch. */
  --kaufbutton-hoehe: 2.85rem;
  --player-hoehe: 2.5rem;
}

/* ---------- Zurücksetzen ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
audio { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 7vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold-hell); color: var(--navy); }
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---------- Bausteine --------------------------------------------------- */
.bahn { width: 100%; max-width: var(--bahn); margin-inline: auto; padding-inline: var(--spur); }
.abschnitt { padding-block: var(--luft); }
.abschnitt-warm { background: var(--papier-warm); }
.abschnitt-dunkel { background: var(--navy); color: var(--text-invers); }
.abschnitt-dunkel h1, .abschnitt-dunkel h2, .abschnitt-dunkel h3 { color: var(--papier); }
.abschnitt-dunkel .leise { color: rgba(246, 244, 239, .78); }

.kicker {
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1rem;
}
.abschnitt-dunkel .kicker { color: var(--gold-hell); }
.leise { color: var(--text-leise); }
.fliess { max-width: 42rem; font-size: 1.1rem; }
.fliess p + p { margin-top: 1.15em; }

.kopfzeile-abschnitt {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.kopfzeile-abschnitt h2 { margin: 0; }

/* ---------- Knöpfe ------------------------------------------------------ */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--kaufbutton-hoehe);
  padding: 0 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--navy);
  color: var(--text-invers);
  font-size: .97rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.knopf:hover, .knopf:focus-visible { transform: translateY(-2px); background: var(--navy-weich); }
.knopf-gold { background: var(--gold); color: #fff; }
.knopf-gold:hover, .knopf-gold:focus-visible { background: #a07d1a; color: #fff; }
.knopf-still { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf-still:hover, .knopf-still:focus-visible { background: var(--papier-grau); border-color: var(--text-leise); }
.abschnitt-dunkel .knopf-still { color: var(--text-invers); border-color: rgba(246, 244, 239, .35); }
.abschnitt-dunkel .knopf-still:hover { background: rgba(246, 244, 239, .12); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .75rem; }
.knopf-breit { width: 100%; }

/* ---------- Kopf und Navigation ---------------------------------------- */
.seitenkopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linie);
}
.kopf-innen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}
.marke { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.marke strong {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -.01em;
}
.marke span {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.hauptnav { display: flex; align-items: center; gap: .35rem; }
.hauptnav a {
  padding: .55rem .9rem;
  border-radius: 999px;
  font-size: .95rem;
  text-decoration: none;
  color: var(--text-leise);
  transition: color .15s ease, background-color .15s ease;
}
.hauptnav a:hover, .hauptnav a:focus-visible { color: var(--text); background: var(--papier-grau); }
.hauptnav a[aria-current="page"] { color: var(--text); font-weight: 600; }
.menue-knopf { display: none; }

/* ---------- Hero -------------------------------------------------------- */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(3.5rem, 8vw, 7rem);
}
.hero-text { max-width: 34rem; }
.hero h1 { margin-bottom: .35em; }
.hero-einleitung { font-size: clamp(1.05rem, 1.6vw, 1.3rem); color: var(--text-leise); margin-bottom: 2rem; }
.hero-bild {
  aspect-ratio: 4 / 5;
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: linear-gradient(160deg, var(--navy-weich), var(--navy-tief));
  box-shadow: var(--schatten-tief);
}
.hero-bild img, .hero-bild .content-image, .hero-bild figure, .hero-bild picture { width: 100%; height: 100%; margin: 0; }
.hero-bild img { object-fit: cover; }
.hero-bild figcaption { display: none; }
.hero-platzhalter {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 2rem;
  color: var(--gold-hell);
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
}

/* ---------- Hervorgehobene Veröffentlichung ---------------------------- */
.spitzenreiter {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.spitzenreiter-cover {
  aspect-ratio: 1;
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: var(--navy-weich);
  box-shadow: var(--schatten-tief);
}
.spitzenreiter-cover img, .spitzenreiter-cover .content-image,
.spitzenreiter-cover figure, .spitzenreiter-cover picture {
  width: 100%; height: 100%; margin: 0;
}
.spitzenreiter-cover img { object-fit: cover; }
.spitzenreiter-cover figcaption { display: none; }
.spitzenreiter h2 { margin-bottom: .3em; }
.spitzenreiter .meta { color: var(--text-leise); font-size: .95rem; margin-bottom: 1.25rem; }
.abschnitt-dunkel .spitzenreiter .meta { color: rgba(246, 244, 239, .7); }
.spitzenreiter audio { width: 100%; height: var(--player-hoehe); margin: 1.5rem 0; }

/* ---------- Songkarten -------------------------------------------------- */
.karten-raster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
.karten-raster-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.karte {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--rund-gross);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.karte:hover { transform: translateY(-4px); box-shadow: var(--schatten); border-color: transparent; }

/* Das Cover ist immer exakt quadratisch, unabhängig vom Seitenverhältnis
   der Originaldatei. Zugeschnitten wird angezeigt, nicht in der Datei. */
.karte-cover {
  position: relative;
  aspect-ratio: 1 / 1;
  background: linear-gradient(155deg, var(--navy-weich), var(--navy-tief));
  overflow: hidden;
}
.karte-cover img, .karte-cover .content-image, .karte-cover figure, .karte-cover picture { width: 100%; height: 100%; margin: 0; }
.karte-cover img { object-fit: cover; }
.karte-cover figcaption { display: none; }
.karte-cover-ersatz {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1rem;
  color: var(--gold-hell);
  font-family: var(--serif);
  font-size: 1.15rem;
  text-align: center;
}
.karte-abzeichen {
  position: absolute;
  top: .7rem;
  left: .7rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.abzeichen {
  padding: .22rem .6rem;
  border-radius: 999px;
  background: rgba(15, 28, 51, .85);
  color: var(--gold-hell);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.abzeichen-gold { background: var(--gold); color: #fff; }

.ki-herkunft {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: .45rem 0 .7rem;
  padding: .38rem .68rem;
  border: 1px solid color-mix(in srgb, var(--gold) 72%, #6f4d00);
  border-radius: 999px;
  background: var(--gold-blass);
  color: var(--navy);
  font-size: .78rem;
  font-weight: 750;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.ki-herkunft-kompakt {
  display: flex;
  margin: .35rem 0 0;
  padding: .28rem .52rem;
  font-size: .7rem;
}
.abschnitt-dunkel .ki-herkunft {
  border-color: rgba(255, 224, 148, .75);
  background: rgba(255, 244, 213, .13);
  color: #fff4d5;
}
.kauf-seite > .ki-herkunft { margin-inline: auto; }

.karte-inhalt {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: 1.15rem 1.15rem 1.3rem;
}

/* Jeder Textslot hat seine eigene feste Höhe -- unabhängig davon, ob er
   gefüllt ist. Erst dadurch stehen Player, Preis und Kaufbereich über alle
   Karten hinweg auf einer Linie. */
.karte-titel {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
  height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karte-titel a { text-decoration: none; }
.karte-titel a:hover { color: var(--gold); }
.karte-unterzeile {
  margin: 0;
  height: 1.5em;
  font-size: .88rem;
  color: var(--gold);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karte-text {
  margin: 0;
  height: calc(1.55em * 3);
  font-size: .92rem;
  line-height: 1.55;
  color: var(--text-leise);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.karte-meta {
  margin: 0;
  height: calc(1.4em * 2);
  line-height: 1.4;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .7rem;
  font-size: .8rem;
  color: var(--text-leise);
}
.karte-meta span { white-space: nowrap; }

/* Alles ab hier sitzt unten -- bei jeder Karte auf derselben Höhe. */
.karte-player { margin-top: auto; padding-top: .75rem; }
.karte-player audio { width: 100%; height: var(--player-hoehe); }
.karte-player-leer { height: var(--player-hoehe); }

.karte-kauf { margin-top: .75rem; display: flex; align-items: center; gap: .6rem; }
.karte-preis { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.karte-kauf .knopf { flex: 1; padding-inline: 1rem; font-size: .9rem; }
/* Der Kaufbereich hält seinen Platz frei -- aber nur in Rastern, die
   überhaupt einen Kaufbutton enthalten. Sonst klaffte auf einer Seite ganz
   ohne Verkauf unter jeder Karte eine sinnlose Lücke. */
.karten-raster:has(.karte-kauf .knopf) .karte-kauf { min-height: var(--kaufbutton-hoehe); }

/* ---------- Albumkacheln ------------------------------------------------ */
.album-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.album-kachel { display: flex; flex-direction: column; height: 100%; }
.album-kachel-cover {
  display: block;
  aspect-ratio: 1;
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-weich), var(--navy-tief));
  box-shadow: var(--schatten);
  transition: transform .2s ease, box-shadow .2s ease;
}
.album-kachel:hover .album-kachel-cover { transform: translateY(-5px); box-shadow: var(--schatten-tief); }
.album-kachel-cover img, .album-kachel-cover .content-image, .album-kachel-cover figure, .album-kachel-cover picture { width: 100%; height: 100%; margin: 0; }
.album-kachel-cover img { object-fit: cover; }
.album-kachel-cover figcaption { display: none; }
.album-kachel-inhalt { display: flex; flex-direction: column; flex: 1; gap: .35rem; padding-top: 1rem; }
.album-kachel h3 { margin: 0; font-size: 1.3rem; }
.album-kachel h3 a { text-decoration: none; }
.album-kachel h3 a:hover { color: var(--gold); }
.album-kachel-meta { margin: 0; font-size: .85rem; color: var(--text-leise); }
.album-kachel-kauf { margin-top: auto; padding-top: .9rem; display: flex; align-items: center; gap: .6rem; }
.album-kachel-kauf .knopf { flex: 1; font-size: .9rem; }
.album-raster:has(.album-kachel-kauf .knopf) .album-kachel-kauf { min-height: var(--kaufbutton-hoehe); }

/* ---------- Detailseiten ------------------------------------------------ */
.werk-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.werk-kopf-cover {
  aspect-ratio: 1;
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-weich), var(--navy-tief));
  box-shadow: var(--schatten-tief);
}
.werk-kopf-cover img, .werk-kopf-cover .content-image, .werk-kopf-cover figure, .werk-kopf-cover picture { width: 100%; height: 100%; margin: 0; }
.werk-kopf-cover img { object-fit: cover; }
.werk-kopf-cover figcaption { display: none; }
.werk-kopf h1 { margin-bottom: .25em; font-size: clamp(2.25rem, 5vw, 3.75rem); }
.werk-untertitel { font-size: 1.2rem; color: var(--gold); margin-bottom: .75rem; }
.werk-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.1rem;
  font-size: .9rem;
  color: var(--text-leise);
  margin-bottom: 1.5rem;
}
.werk-player { margin: 1.75rem 0; }
.werk-player audio { width: 100%; height: var(--player-hoehe); }
.werk-player-hinweis { font-size: .82rem; color: var(--text-leise); margin-top: .5rem; }
.werk-kauf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--papier-warm);
}
.werk-kauf-preis { font-family: var(--serif); font-size: 1.75rem; }
.werk-kauf-hinweis { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--text-leise); }

.zurueck {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  color: var(--text-leise);
  text-decoration: none;
  margin-bottom: 1.5rem;
}
.zurueck:hover { color: var(--text); }

/* ---------- Titelliste eines Albums ------------------------------------ */
.titelliste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.titelzeile {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: .9rem .25rem;
  border-bottom: 1px solid var(--linie);
}
.titelzeile:hover { background: var(--papier-warm); }
.titelnummer { font-variant-numeric: tabular-nums; color: var(--text-leise); font-size: .9rem; }
.titelname { min-width: 0; }
.titelname a { text-decoration: none; font-weight: 600; }
.titelname a:hover { color: var(--gold); }
.titelname small { display: block; color: var(--text-leise); font-weight: 400; font-size: .82rem; }
.titelzeile audio { width: clamp(10rem, 24vw, 17rem); height: 2.1rem; }
.titeldauer { font-variant-numeric: tabular-nums; color: var(--text-leise); font-size: .88rem; }

/* ---------- Inhalte, Geschichte ---------------------------------------- */
.text-bild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.text-bild-bild {
  aspect-ratio: 4 / 5;
  border-radius: var(--rund-gross);
  overflow: hidden;
  background: var(--papier-grau);
  box-shadow: var(--schatten);
}
.text-bild-bild img, .text-bild-bild .content-image, .text-bild-bild figure, .text-bild-bild picture { width: 100%; height: 100%; margin: 0; }
.text-bild-bild img { object-fit: cover; }
.text-bild-bild figcaption { display: none; }
.text-bild.bild-links .text-bild-bild { order: -1; }

.zitat {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.35;
  text-wrap: balance;
}
.zitat-quelle { display: block; margin-top: 1.5rem; font-family: var(--sans); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; }

.punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; list-style: none; margin: 0; padding: 0; }
.punkte li { padding-top: 1.25rem; border-top: 2px solid var(--gold); }
.punkte strong { display: block; font-family: var(--serif); font-size: 1.25rem; font-weight: 400; margin-bottom: .4rem; }
.punkte p { margin: 0; color: var(--text-leise); font-size: .95rem; }
.abschnitt-dunkel .punkte p { color: rgba(246, 244, 239, .75); }

/* ---------- Kontakt ------------------------------------------------------ */
.kontakt-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.social-reihe { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.social-reihe a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(246, 244, 239, .3);
  border-radius: 999px;
  font-size: .9rem;
  text-decoration: none;
}
.social-reihe a:hover { background: rgba(246, 244, 239, .12); }

/* ---------- Formulare --------------------------------------------------- */
.formular { max-width: 34rem; }
.feld { margin-bottom: 1.25rem; }
.feld label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: .4rem; }
.feld input, .feld textarea, .feld select {
  width: 100%;
  padding: .8rem 1rem;
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--papier);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.feld input:focus, .feld textarea:focus, .feld select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 144, 31, .18);
}
.feld textarea { min-height: 11rem; resize: vertical; }
.feld-kasten { display: flex; gap: .6rem; align-items: start; font-size: .95rem; }
.feld-kasten input { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .2rem; accent-color: var(--gold); }
.feld-kasten span { min-width: 0; }
.feld-fehler { margin: .4rem 0 0; font-size: .85rem; color: #a8232b; }
.feld-fehlerhaft input:not([type="checkbox"]), .feld-fehlerhaft textarea { border-color: #a8232b; }
.feld-hilfe { margin: .4rem 0 0; font-size: .82rem; color: var(--text-leise); }
.formular-senden { margin: 2rem 0 0; }
.honigfalle { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.meldung {
  padding: 1rem 1.25rem;
  border-radius: var(--rund);
  border-left: 3px solid var(--gold);
  background: var(--gold-blass);
  margin-bottom: 1.5rem;
}
.meldung-fehler { border-left-color: #a8232b; background: #fbeceb; }

/* ---------- Fußzeile ---------------------------------------------------- */
.seitenfuss { background: var(--navy-tief); color: rgba(246, 244, 239, .8); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.seitenfuss h4 { font-family: var(--sans); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-hell); margin-bottom: 1rem; }
.seitenfuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.seitenfuss a { text-decoration: none; font-size: .93rem; }
.seitenfuss a:hover { color: var(--papier); text-decoration: underline; text-underline-offset: 3px; }
.fuss-marke { font-family: var(--serif); font-size: 1.5rem; color: var(--papier); margin-bottom: .5rem; }
.fuss-schluss {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(246, 244, 239, .14);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .84rem;
  color: rgba(246, 244, 239, .6);
}

/* ---------- Kaufseiten -------------------------------------------------- */
.kauf-seite { max-width: 38rem; margin-inline: auto; text-align: center; }
.kauf-seite .werk-kopf-cover { max-width: 16rem; margin: 0 auto 2rem; }
.kauf-summe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.25rem 0;
  margin: 2rem 0;
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  font-size: 1.15rem;
  text-align: left;
}
.kauf-summe strong { font-family: var(--serif); font-size: 1.8rem; }
.kauf-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
}
.kauf-status-gut { background: #e6f4ea; color: #1e6b34; }
.kauf-status-offen { background: var(--gold-blass); color: #7a5f14; }
.kauf-status-fehler { background: #fbeceb; color: #a8232b; }
.kauf-hinweise { text-align: left; font-size: .9rem; color: var(--text-leise); }

/* ---------- Springmarke ------------------------------------------------- */
.sprungmarke {
  position: absolute;
  left: -9999px;
  padding: .8rem 1.4rem;
  background: var(--navy);
  color: var(--text-invers);
  border-radius: 0 0 var(--rund) 0;
  z-index: 100;
}
.sprungmarke:focus { left: 0; top: 0; }

.prosa { max-width: 42rem; }
.prosa h2 { margin-top: 2.5rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.prosa h2:first-child { margin-top: 0; }

/* ---------- Enger --------------------------------------------------------
   Breakpoints bewusst am Inhalt: vier Spalten werden zwei, zwei werden eins.
   Player und Kaufbereich behalten überall ihre feste Höhe. */
@media (max-width: 1100px) {
  .karten-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .karten-raster-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .punkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hauptnav { display: none; }
  .hauptnav.offen {
    display: flex;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .75rem var(--spur) 1.5rem;
    background: var(--papier);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }
  .hauptnav.offen a { padding: .85rem 0; border-radius: 0; }
  .menue-knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: transparent;
    font-size: .9rem;
    cursor: pointer;
  }
  .seitenkopf { position: relative; }
  .hero { grid-template-columns: 1fr; padding-block: 3rem 4rem; }
  .hero-bild { order: -1; aspect-ratio: 3 / 2; max-height: 26rem; }
  .spitzenreiter { grid-template-columns: 1fr; }
  .spitzenreiter-cover { max-width: 20rem; }
  .werk-kopf { grid-template-columns: 1fr; }
  .werk-kopf-cover { order: -1; max-width: 22rem; }
  .text-bild { grid-template-columns: 1fr; }
  .text-bild.bild-links .text-bild-bild { order: 0; }
  .kontakt-band { grid-template-columns: 1fr; }
  .fuss-raster { grid-template-columns: 1fr 1fr; }
  .fuss-raster > *:first-child { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .karten-raster, .karten-raster-3, .album-raster { grid-template-columns: minmax(0, 1fr); }
  .punkte { grid-template-columns: 1fr; }
  .titelzeile { grid-template-columns: 2rem minmax(0, 1fr) auto; row-gap: .5rem; }
  .titelzeile audio { grid-column: 1 / -1; width: 100%; }
  .kopfzeile-abschnitt { flex-direction: column; align-items: start; }
  .werk-kauf { flex-direction: column; align-items: stretch; }
  .werk-kauf .knopf { width: 100%; }
  .formular-senden .knopf { width: 100%; }
}

@media (max-width: 380px) {
  .fuss-raster { grid-template-columns: 1fr; }
  .karte-inhalt { padding: 1rem; }
}

/* ---------- Druck -------------------------------------------------------- */
@media print {
  .seitenkopf, .seitenfuss, .knopf, audio, .menue-knopf { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ---------- Hilfsklassen -------------------------------------------------
   Bewusst Klassen statt style-Attributen: Die CSP erlaubt `style-src 'self'`,
   Inline-Styles würden also blockiert -- die Abstände fielen wortlos aus. */
.ohne-oberluft { padding-top: 0; }
.luft-oben-klein { margin-top: 1.5rem; }
.luft-oben { margin-top: 2rem; }
.luft-oben-gross { margin-top: 3rem; }
.luft-oben-sehr-gross { margin-top: 3.5rem; }
.ohne-rand { margin: 0; }
.titel-mittel { font-size: clamp(2rem, 4vw, 3rem); }
.melde-bereich { padding-top: 1.5rem; }

/* Leadsheet: Akkorde stehen zeichengenau über dem Text, deshalb monospace. */
.leadsheet { max-width: 42rem; }
.leadsheet-section { margin-bottom: 2rem; }
.leadsheet-section h3 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.leadsheet-line { margin: 0 0 .35rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92rem; white-space: pre-wrap; }
.leadsheet-chords { display: block; color: var(--gold); font-weight: 700; }
.song-text { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92rem; white-space: pre-wrap; background: var(--papier-grau); padding: 1.25rem; border-radius: var(--rund); overflow-x: auto; }
.filter-leiste { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; margin-bottom: 2.5rem; }
.filter-leiste .feld { margin: 0; }
.filter-leiste select { min-width: 10rem; }

/* Solange das mobile Menü offen ist, bleibt der Hintergrund stehen. */
body[data-site-menu-open] { overflow: hidden; }

/* ---------- Schmale Geräte: Überlauf verhindern -------------------------
   Drei Ursachen, alle in der QA bei 390 und 320 px gemessen:
   Grid- und Flex-Kinder schrumpfen ohne `min-width: 0` nicht unter ihren
   Inhalt; ein `textarea` bringt eine eigene Spaltenbreite mit; und lange
   ungetrennte Zeichenketten sprengen jede Spalte. */
.kopfzeile-abschnitt > *,
.hero > *, .spitzenreiter > *, .werk-kopf > *,
.text-bild > *, .kontakt-band > *, .karte-inhalt > *,
.album-kachel-inhalt > *, .fuss-raster > * { min-width: 0; }

.feld textarea, .feld input, textarea, input[type="text"], input[type="email"] {
  max-width: 100%;
  box-sizing: border-box;
}
textarea { resize: vertical; }

.fliess, .prosa, .karte-text, .leise, .seitenfuss, .werk-meta {
  overflow-wrap: anywhere;
}

/* Ein Knopf mit langem Text sprengt sonst seine Reihe: Flex-Kinder dürfen
   von sich aus nicht unter ihre Inhaltsbreite schrumpfen. */
.knopf-reihe .knopf { max-width: 100%; }
.knopf { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .knopf-reihe { flex-direction: column; align-items: stretch; }
}

/* Urheberangaben als Bezeichnung/Wert-Paare. */
.credits-liste { margin: 0 0 1.25rem; }
.credits-liste > div { padding: .6rem 0; border-bottom: 1px solid var(--linie); }
.credits-liste dt { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.credits-liste dd { margin: .25rem 0 0; }

/* ---------- Vom Admin gesteuerte Layoutklassen ------------------------- */
.hg-light { background: var(--papier-warm); }
.hg-dark { background: var(--navy); color: var(--text-invers); }
.hg-dark h1, .hg-dark h2, .hg-dark h3 { color: var(--papier); }
.hg-dark .leise, .hg-dark .fliess { color: rgba(246, 244, 239, .82); }
.hg-accent { background: var(--gold-blass); }
.oben-small { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.oben-large { padding-top: clamp(6rem, 12vw, 11rem); }
.unten-small { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.unten-large { padding-bottom: clamp(6rem, 12vw, 11rem); }
.breite-narrow { max-width: 52rem; }
.breite-wide { max-width: 90rem; }
.breite-full { max-width: none; }
.ausr-center { text-align: center; }
.ausr-center .fliess, .ausr-center .prosa { margin-inline: auto; }
.ausr-right { text-align: right; }
.ausr-right .fliess, .ausr-right .prosa { margin-left: auto; }
.text-bild.bild-oben { grid-template-columns: 1fr; }
.text-bild.bild-oben .text-bild-bild { order: -1; aspect-ratio: 21 / 9; max-height: 30rem; }
.text-bild.bildgr-small { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.text-bild.bildgr-large { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.text-bild.bildgr-full { grid-template-columns: 1fr; }
.text-bild.bildgr-full .text-bild-bild { order: -1; aspect-ratio: 21 / 9; max-height: 34rem; }
.bildunterschrift { padding: .5rem .25rem 0; font-size: .82rem; color: var(--text-leise); }
.hg-dark .bildunterschrift { color: rgba(246, 244, 239, .7); }
figure.text-bild-bild { margin: 0; }
figure.text-bild-bild figcaption.bildunterschrift { display: block; }
@media (max-width: 900px) {
  .text-bild.bildgr-small, .text-bild.bildgr-large { grid-template-columns: 1fr; }}

/* ---------- Bearbeiten-Links für angemeldete Redakteure ------------------
   Für Besucher wird das Markup serverseitig gar nicht erst ausgeliefert;
   diese Regeln formen nur den seltenen Redaktionsfall. Die Mindesthöhe
   hält den Link auch auf Touch-Geräten gut treffbar. */
.edit-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.25rem;
  padding: .2rem .75rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-blass);
  color: #7a5f14;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.edit-link:hover, .edit-link:focus-visible { background: var(--gold-hell); color: var(--navy); }
.edit-link-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 0; }
h2 .edit-link, h3 .edit-link { margin-left: .5rem; vertical-align: middle; font-weight: 600; }
/* Statusmeldung nach dem Rücksprung aus einem Adminformular. */
.edit-messages { max-width: 72rem; margin: 1rem auto 0; padding: 0 1.25rem; }
.edit-messages p {
  margin: 0 0 .5rem;
  padding: .7rem 1rem;
  border: 1px solid var(--gold);
  border-radius: var(--rund);
  background: var(--gold-blass);
  color: #7a5f14;
  font-size: .92rem;
}