/* Lis NOIR, Gestaltung
   Dunkel, weil die Band so heißt und so klingt. Weinrot als Akzent, eine ruhige
   Serifenschrift, viel Schwarzraum, und die Fotos leuchten daraus hervor. */

:root {
  --nacht:       #14110f;
  --nacht-tief:  #0d0b0a;
  --flaeche:     #1e1a17;
  --tinte:       #f2ece1;
  --tinte-leise: #b3a795;
  --linie:       #372f29;
  --wein:        #8f2436;
  --wein-hell:   #d4707a;
  --gold-hell:   #f3d688;
  --gold:        #c9a227;
  --gold-dunkel: #8a6a1a;

  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --breit: 66rem;
  --schmal: 42rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--tinte);
  font: 1.0625rem/1.75 var(--sans);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--wein-hell); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--tinte); }

h1, h2, h3 { font-family: var(--serif); font-weight: normal; line-height: 1.15; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 0 0 1rem; }
h3 { font-size: 1.25rem; margin: 0 0 .4rem; }
p { margin: 0 0 1rem; }
.schmal { max-width: var(--schmal); }
.leise { color: var(--tinte-leise); }

/* ---------- Kopfleiste ---------- */

.kopfleiste {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .6rem clamp(1rem, 4vw, 2.5rem);
  background: #14110feb; backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.wortmarke {
  font-family: var(--serif); font-size: 1.35rem; letter-spacing: .02em;
  color: var(--tinte); text-decoration: none; white-space: nowrap;
}
.wortmarke em { font-style: normal; color: var(--wein-hell); }
.kopfleiste nav { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-left: auto; }
.kopfleiste nav a {
  color: var(--tinte-leise); text-decoration: none; font-size: .92rem;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.kopfleiste nav a:hover { color: var(--tinte); border-bottom-color: var(--wein); }

.menueknopf {
  display: none; align-items: center; gap: .5rem; margin-left: auto;
  background: transparent; border: 1px solid var(--linie); border-radius: 4px;
  color: var(--tinte); font: inherit; font-size: .9rem; padding: .35rem .7rem; cursor: pointer;
}
.menueknopf .striche,
.menueknopf .striche::before,
.menueknopf .striche::after {
  display: block; width: 16px; height: 2px; background: var(--tinte); border-radius: 1px;
}
.menueknopf .striche { position: relative; }
.menueknopf .striche::before, .menueknopf .striche::after { content: ""; position: absolute; left: 0; }
.menueknopf .striche::before { top: -5px; }
.menueknopf .striche::after { top: 5px; }

@media (max-width: 56rem) {
  .kopfleiste { flex-wrap: wrap; gap: .6rem; }
  .menueknopf { display: inline-flex; }
  .kopfleiste nav { display: none; }
  .kopfleiste.offen nav {
    display: flex; flex-direction: column; gap: 0; flex-basis: 100%; margin-top: .3rem;
    border-top: 1px solid var(--linie);
  }
  .kopfleiste.offen nav a {
    padding: .75rem .2rem; border-bottom: 1px solid var(--linie);
    border-left: 3px solid transparent;
  }
  .kopfleiste.offen nav a:hover { border-left-color: var(--wein); }
}

/* ---------- Aufmacher ---------- */

/* Im Bild steht nur das Logo, und zwar im unteren Drittel. Slogan und Knoepfe
   folgen darunter auf dunklem Grund. */
.aufmacher {
  position: relative; min-height: min(78vh, 40rem);
  display: flex; align-items: flex-end;
  padding: clamp(2rem, 8vw, 5rem) clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 7vh, 4.5rem);
  background: var(--nacht-tief) center/cover no-repeat;
}
.aufmacher::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #0d0b0af7 0%, #0d0b0ae6 34%, #0d0b0a99 66%, #0d0b0a40 100%);
}
.aufmacher > div {
  position: relative; z-index: 1; width: 100%; max-width: var(--breit); margin: 0 auto;
  text-shadow: 0 1px 6px #0d0b0a99;
}
/* Im Aufmacher steht die Wortmarke gross, der ausgeschriebene Name klein
   darunter. */
/* Wortmarke, Lilie und Name bilden einen Block, der nur so breit ist wie die
   Wortmarke. Er steht mittig ueber der ganzen Breite des Aufmachers, waehrend
   Slogan und Knoepfe darunter linksbuendig bleiben. */
.markenblock {
  display: block; width: max-content; max-width: 100%; margin: 0 auto;
  text-align: center;
}
.aufmacher h1 {
  display: block;
  font-size: clamp(2.4rem, 8.5vw, 5.2rem); margin: 0; letter-spacing: -.01em;
}
.aufmacher h1 em { font-style: normal; color: var(--wein-hell); }
.aufmacher .namenszeile {
  font-family: var(--sans); font-size: clamp(1rem, 2.4vw, 1.25rem);
  color: var(--tinte-leise); margin: 0 0 1.4rem;
}
/* Einstieg unter dem Bild, linksbuendig wie alle Abschnitte */
.einstieg { padding: clamp(2rem, 5vw, 3.2rem) clamp(1rem, 4vw, 2.5rem); }
.einstieg .innen { max-width: var(--breit); margin: 0 auto; }
.einstieg .unterzeile {
  font-family: var(--serif); font-size: clamp(1.25rem, 3.2vw, 1.9rem);
  color: var(--tinte); max-width: 34ch; margin: 0 0 1.6rem;
}
.einstieg .knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }
.aufmacher .knoepfe { display: flex; gap: .7rem; flex-wrap: wrap; }

.knopf {
  display: inline-block; background: var(--wein); color: var(--tinte);
  font-weight: 600; text-decoration: none; padding: .65rem 1.3rem;
  border-radius: 2px; border: 1px solid var(--wein); text-shadow: none;
}
.knopf:hover { background: var(--tinte); color: var(--nacht); border-color: var(--tinte); }
.knopf.leer { background: transparent; border-color: #6b5b52; color: var(--tinte); }
.knopf.leer:hover { background: var(--tinte); color: var(--nacht); border-color: var(--tinte); }

/* ---------- Abschnitte ---------- */

section { padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 4vw, 2.5rem); }
section > .innen { max-width: var(--breit); margin: 0 auto; }
.gesattelt { background: var(--nacht-tief); }
/* Die Abschnittsueberschrift traegt den Abschnitt allein, darunter folgt kein
   zweiter Titel mehr. Der kurze weinrote Strich darueber ersetzt die frueher
   kleine Marke. */
.abschnittstitel {
  font-family: var(--serif); font-weight: normal;
  font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.08;
  color: var(--tinte); margin: 0 0 2rem;
}
.abschnittstitel::before {
  content: ""; display: block; width: 3rem; height: 2px;
  background: var(--wein-hell); margin-bottom: 1.1rem;
}
.albumname {
  font-family: var(--serif); font-size: clamp(1.4rem, 3.5vw, 2rem);
  color: var(--wein-hell); margin: 0 0 1rem;
}

.zweispalt { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) {
  .zweispalt { grid-template-columns: 1fr 1fr; }
  .zweispalt.gedreht > figure { order: -1; }
}
figure { margin: 0; }
figcaption { font-size: .8rem; color: var(--tinte-leise); margin-top: .5rem; }
.rahmen { border: 1px solid var(--linie); }

/* ---------- Wer wir sind ---------- */

.leute { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2rem; }
.person { background: var(--flaeche); border: 1px solid var(--linie); }
.person img { width: 100%; }
.person div { padding: 1.1rem 1.2rem 1.3rem; }
.person h3 { color: var(--wein-hell); }
.person p { margin: 0; font-size: .96rem; }

/* ---------- Was wir tun ---------- */

.angebote { display: grid; gap: 3rem; margin-top: 2.5rem; }
.angebot { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 52rem) {
  .angebot { grid-template-columns: 1fr 1fr; }
  .angebot:nth-child(even) > figure { order: -1; }
}

/* ---------- Termine ---------- */

.termine { display: grid; gap: 0; margin-top: 2rem; }
.termin { display: grid; gap: .2rem 1.8rem; padding: 1.2rem 0; border-top: 1px solid var(--linie); }
.termine .termin:last-child { border-bottom: 1px solid var(--linie); }
@media (min-width: 40rem) { .termin { grid-template-columns: 9rem 1fr; } }
.termin .wann { font-family: var(--serif); font-size: 1.15rem; color: var(--wein-hell); }
.termin h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.termin p { margin: 0; color: var(--tinte-leise); font-size: .96rem; }

/* ---------- Videos ---------- */

.videos { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin-top: 2rem; }
.video { background: var(--flaeche); border: 1px solid var(--linie); }
.video .schutz {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: pointer; line-height: 0;
}
.video .schutz img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video .schutz::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, #0d0b0a33 0%, #0d0b0a80 100%);
  transition: background .2s ease;
}
.video .schutz:hover::after { background: radial-gradient(circle at center, #0d0b0a00 0%, #0d0b0a66 100%); }
.video .knopfkreis {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4.2rem; height: 4.2rem; border-radius: 50%;
  background: #8f2436e6; border: 2px solid #f2ece1cc; z-index: 1;
  display: flex; align-items: center; justify-content: center;
}
.video .knopfkreis::before {
  content: ""; border-style: solid; border-width: .7rem 0 .7rem 1.15rem;
  border-color: transparent transparent transparent #f2ece1; margin-left: .25rem;
}
.video .schutz:hover .knopfkreis { background: var(--wein); }
.video .beschriftung { padding: .9rem 1rem 1.1rem; }
.video .beschriftung h3 { font-size: 1.02rem; margin-bottom: .2rem; }
.video .beschriftung p { margin: 0; font-size: .8rem; color: var(--tinte-leise); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.videohinweis { font-size: .82rem; color: var(--tinte-leise); max-width: var(--schmal); margin-top: 1.6rem; }

/* ---------- Album ---------- */

.album { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 52rem) { .album { grid-template-columns: 1fr 1.15fr; } }
.ausfuehrungen { display: grid; gap: .8rem; margin: 1.5rem 0; }
.ausfuehrung {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  background: var(--flaeche); border: 1px solid var(--linie); padding: .8rem 1rem;
}
.ausfuehrung .preis { font-family: var(--serif); font-size: 1.2rem; color: var(--wein-hell); white-space: nowrap; }
.albumbilder { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; margin-top: 1.2rem; }

/* ---------- Kontakt ---------- */

.kontakt { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-top: 2rem; }
.kontakt div { background: var(--flaeche); border: 1px solid var(--linie); padding: 1.2rem 1.3rem; }
.kontakt .wer { font-family: var(--serif); font-size: 1.3rem; color: var(--wein-hell); margin-bottom: .3rem; }
.kontakt a { font-size: 1.05rem; }

/* ---------- Fuß ---------- */

footer { background: var(--nacht-tief); border-top: 1px solid var(--linie); padding: 3rem clamp(1rem, 4vw, 2.5rem) 2rem; }
footer .innen { max-width: var(--breit); margin: 0 auto; }
footer .schluss {
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  display: flex; gap: 1.4rem; flex-wrap: wrap; font-size: .85rem; color: var(--tinte-leise);
}
footer .schluss a { color: var(--tinte-leise); }

/* ---------- Rechtstexte ---------- */

.rechtstext { max-width: var(--schmal); margin: 0 auto; }
.rechtstext h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin-bottom: 1.5rem; }
.rechtstext h2 { font-size: 1.2rem; margin-top: 2.2rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .video .schutz::after { transition: none; }
}


/* Die Lilie steht zwischen Wortmarke und Namen und ist genauso hoch wie die
   Wortmarke, deshalb hier derselbe Wert wie bei deren Schriftgroesse. */
.aufmacher .lilie {
  height: clamp(2.4rem, 8.5vw, 5.2rem); width: auto;
  margin: .5rem auto .6rem; opacity: .92;
  filter: drop-shadow(0 2px 6px #0d0b0a99);
}

/* ---------- Album-Anriss auf der Startseite ---------- */

.albumanriss { display: grid; gap: clamp(1.2rem, 4vw, 2.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 40rem) { .albumanriss { grid-template-columns: 13rem 1fr; } }
.albumanriss p { margin: 0 0 1.2rem; }

/* ---------- Klangbuch-Seite ---------- */

.klangbuch-kopf { text-align: center; max-width: var(--breit); margin: 0 auto clamp(2.5rem, 6vw, 4rem); }
.klangbuch-kopf h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0 0 .6rem; }
.klangbuch-kopf .unterzeile {
  font-family: var(--serif); font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  color: var(--wein-hell); margin: 0;
}

.kaufoptionen { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin-top: 2rem; }
.kaufkarte { background: var(--flaeche); border: 1px solid var(--linie); padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; }
.kaufkarte h3 { margin-bottom: .3rem; }
.kaufkarte .preis { font-family: var(--serif); font-size: 1.3rem; color: var(--wein-hell); display: block; }
.kaufkarte .versand { display: block; font-size: .78rem; color: var(--tinte-leise); margin-bottom: .8rem; }
.kaufkarte p.beschreibung { flex: 1; font-size: .94rem; color: var(--tinte-leise); }
.kaufkarte .knopf { text-align: center; margin-top: .4rem; }

.portraet img { max-width: 18rem; margin: 0 auto; }

.hier-kaufen {
  margin: 1.8rem 0 0; font-family: var(--serif); font-size: 1.3rem;
  font-weight: normal; color: var(--gold-hell); letter-spacing: .02em;
}
.hero-kauf { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center; margin: .8rem 0 .9rem; }
.produktknopf {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: 11rem; padding: 1.6rem 1rem 1.2rem; text-decoration: none; border: 0;
  background: none; cursor: pointer;
}
.produktknopf .schein {
  position: absolute; top: 46%; left: 50%; transform: translate(-50%, -50%);
  width: 13rem; height: 13rem; border-radius: 50%;
  background: radial-gradient(circle, #f3d68866 0%, #c9a22740 42%, transparent 72%);
  filter: blur(2px); transition: opacity .25s ease, transform .25s ease; z-index: 0;
}
.produktknopf:hover .schein { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
.produktknopf img {
  position: relative; z-index: 1; width: 9rem; height: 9.6rem; object-fit: contain;
  filter: drop-shadow(0 6px 16px #00000080); transition: transform .2s ease;
}
.produktknopf:hover img { transform: translateY(-3px) scale(1.03); }
.produktknopf .beschriftung {
  position: relative; z-index: 1; margin-top: 1rem; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.produktknopf .beschriftung .titel {
  display: flex; align-items: center; min-height: 2.6em; line-height: 1.3;
  font-size: .92rem; color: var(--tinte); font-weight: 600;
}
.produktknopf .beschriftung .preis {
  display: block; margin-top: .2rem; font-family: var(--serif); font-size: 1.15rem;
  color: var(--gold-hell); font-weight: normal;
}
.knopf.klein {
  padding: .8rem 1.4rem; font-size: 1rem; font-weight: 700;
  background: linear-gradient(155deg, var(--gold-hell), var(--gold) 55%, var(--gold-dunkel));
  border: 1px solid var(--gold-hell); color: var(--nacht-tief);
  box-shadow: 0 0 0 1px #00000033, 0 4px 18px #c9a22755;
  transition: transform .15s ease, box-shadow .15s ease;
}
.knopf.klein:hover {
  background: linear-gradient(155deg, var(--gold-hell), var(--gold-hell) 55%, var(--gold));
  color: var(--nacht-tief); border-color: var(--gold-hell);
  transform: translateY(-2px); box-shadow: 0 0 0 1px #00000033, 0 8px 24px #c9a2278a;
}
.klangbuch-kopf .hinweis { max-width: 32rem; margin: 0 auto; }
.klangbuch-kopf .versandhinweis { font-size: .82rem; }

.geschichte-galerie { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); margin-bottom: 1.6rem; }
@media (max-width: 34rem) { .geschichte-galerie { grid-template-columns: 1fr; max-width: 20rem; margin-left: auto; margin-right: auto; } }

.kunstwerk { position: relative; aspect-ratio: 3 / 4; }
.kunstwerk .schein {
  position: absolute; inset: -14%; border-radius: 50%;
  background: radial-gradient(circle, #f3d68866 0%, #c9a22740 45%, transparent 72%);
  filter: blur(4px); z-index: 0;
}
.geschichte-text { max-width: calc(var(--schmal) * 2); margin: 0 auto; }

/* ---------- Passwortsperre vor geschlossenen Bereichen ---------- */

/* Muss stehen, weil .mitte weiter unten display:flex setzt und damit das
   hidden-Attribut aushebeln wuerde. */
[hidden] { display: none !important; }

.mitte {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(100vh - 10rem); padding: 3rem clamp(1rem, 4vw, 2.5rem);
}
.tor { width: 100%; max-width: 24rem; text-align: center; }
.tor h1 { font-size: clamp(1.6rem, 5vw, 2.1rem); margin: 0 0 .5rem; }
.tor .hinweis { color: var(--tinte-leise); margin: 0 0 1.6rem; font-size: .96rem; }
.tor form { display: flex; flex-direction: column; gap: .8rem; }
.tor input[type="password"] {
  background: var(--flaeche); border: 1px solid var(--linie); color: var(--tinte);
  font: inherit; padding: .75rem .9rem; border-radius: 3px; text-align: center;
}
.tor input[type="password"]:focus { outline: none; border-color: var(--wein-hell); }
.tor button {
  background: var(--wein); color: var(--tinte); border: 1px solid var(--wein);
  font: inherit; font-weight: 600; padding: .75rem 1rem; border-radius: 3px; cursor: pointer;
}
.tor button:hover { background: var(--tinte); color: var(--nacht); border-color: var(--tinte); }
.tor .fehler { color: var(--wein-hell); font-size: .9rem; min-height: 1.4em; margin: 0; }

/* ---------- Promoseite für Redaktionen ---------- */

.promokopf { display: grid; gap: clamp(1.4rem, 4vw, 2.6rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 46rem) { .promokopf { grid-template-columns: 15rem 1fr; } }
.promokopf h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .2rem 0 .3rem; }
.promokopf .augenbraue {
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wein-hell); margin: 0;
}
.promokopf .unterzeile { font-family: var(--serif); font-size: 1.2rem; color: var(--tinte-leise); margin: 0 0 1.4rem; }

.eckdaten { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linie); }
.eckdaten > div { display: grid; grid-template-columns: 11rem 1fr; gap: 0 1rem; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.eckdaten dt { color: var(--tinte-leise); font-size: .88rem; }
.eckdaten dd { margin: 0; font-size: .95rem; }
.eckdaten.breit > div { grid-template-columns: 14rem 1fr; }
@media (max-width: 34rem) { .eckdaten > div, .eckdaten.breit > div { grid-template-columns: 1fr; gap: .1rem; } }

.freigabe { background: var(--flaeche); border: 1px solid var(--wein); border-left-width: 4px; padding: 1.5rem 1.6rem; max-width: var(--breit); }
.freigabe h2 { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 .7rem; }
.freigabe p { max-width: 62ch; }
.freigabe .unterschrift { margin-top: 1rem; font-size: .88rem; color: var(--tinte-leise); }

.tabellenhinweis { max-width: 66ch; margin-bottom: 1.4rem; }
.titeltafel { overflow-x: auto; border: 1px solid var(--linie); }
table.titel { border-collapse: collapse; width: 100%; min-width: 52rem; font-size: .92rem; }
table.titel th, table.titel td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
table.titel thead th { background: var(--flaeche); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte-leise); font-weight: 600; }
table.titel tbody tr:last-child td { border-bottom: 0; }
table.titel tbody tr:hover { background: #ffffff08; }
table.titel .nummer, table.titel .zahl { font-variant-numeric: tabular-nums; color: var(--tinte-leise); }
table.titel .titelname span { font-family: var(--serif); font-size: 1.02rem; color: var(--tinte); }
table.titel .kennung span { font-family: ui-monospace, "Consolas", monospace; font-size: .84rem; color: var(--tinte-leise); }

.plakette { display: inline-block; font-size: .72rem; letter-spacing: .05em; padding: .22rem .5rem; border-radius: 2px; white-space: nowrap; }
.plakette.ja { color: var(--wein-hell); background: #8f24361f; }
.plakette.nein { color: var(--tinte-leise); background: #ffffff0f; }
.plakette.tipp { color: var(--gold-hell); background: #c9a2272e; margin-left: .6rem; }
table.titel tr.empfohlen { background: #c9a2270f; }
table.titel tr.empfohlen:hover { background: #c9a22718; }

.hoerknopf, .ladeknopf {
  display: inline-block; font: inherit; font-size: .82rem; cursor: pointer;
  padding: .35rem .7rem; border-radius: 2px; text-decoration: none; white-space: nowrap;
  border: 1px solid var(--linie); background: none; color: var(--tinte);
}
.hoerknopf:hover, .ladeknopf:hover { border-color: var(--wein-hell); color: var(--wein-hell); }
.hoerknopf.laeuft { border-color: var(--wein); background: var(--wein); color: var(--tinte); }
.ladeknopf { background: var(--wein); border-color: var(--wein); }
.ladeknopf.leer { background: none; border-color: var(--linie); }
.ladeknopf + .ladeknopf { margin-left: .4rem; }
table.titel td:last-child { white-space: nowrap; }

.sammel { margin-top: 1.8rem; display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }

.pressebilder { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-bottom: 1.4rem; }
.pressebilder a { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: var(--tinte-leise); font-size: .84rem; }
.pressebilder img { aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--linie); }
.pressebilder a:hover { color: var(--wein-hell); }
.pressebilder a:hover img { border-color: var(--wein-hell); }

.kunstwerk img {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at center, #000 20%, transparent 92%);
  mask-image: radial-gradient(ellipse 60% 60% at center, #000 20%, transparent 92%);
}