/* ==========================================================================
   Festtagsgedichte – Hauptstil
   Mobil zuerst · selbst gehostete Schriften · helle & dunkle Darstellung
   ========================================================================== */

@font-face { font-family: "Literata"; src: url(../fonts/literata-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(../fonts/literata-latin-wght-italic.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url(../fonts/source-sans-3-latin-wght-normal.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --papier: #FBF7F1;
  --karte: #FFFFFF;
  --tinte: #2A2320;
  --tinte-2: #6B605A;
  --linie: #EAE1D6;
  --akzent: #8E2A3F;
  --akzent-dunkel: #6F1F31;
  --akzent-hell: #F7E9EC;
  --gold: #A87A26;
  --gold-hell: #F6EDDA;
  --band: #3B1C24;
  --band-text: #FBEFF1;
  --schatten: 0 1px 2px rgba(42, 35, 32, .05), 0 4px 16px rgba(42, 35, 32, .06);
  --radius: 14px;
  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --breite: 1120px;
  --schmal: 720px;
  --rand: 16px;
  color-scheme: light;
}
/* Dunkel nur, wenn gewählt (data-farbe="dunkel") oder „automatisch“ + System dunkel */
:root[data-farbe="dunkel"] {
  color-scheme: dark;
  --papier: #1B1715; --karte: #25201D; --tinte: #F1EAE3; --tinte-2: #B5AAA2; --linie: #3A322D;
  --akzent: #E48A9D; --akzent-dunkel: #F0A5B5; --akzent-hell: #3B242A; --gold: #D9AE5B; --gold-hell: #372D1C;
  --band: #2E171D; --band-text: #FBEFF1; --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
}
@media (prefers-color-scheme: dark) {
  :root[data-farbe="auto"] {
    color-scheme: dark;
    --papier: #1B1715; --karte: #25201D; --tinte: #F1EAE3; --tinte-2: #B5AAA2; --linie: #3A322D;
    --akzent: #E48A9D; --akzent-dunkel: #F0A5B5; --akzent-hell: #3B242A; --gold: #D9AE5B; --gold-hell: #372D1C;
    --band: #2E171D; --band-text: #FBEFF1; --schatten: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
  }
}
@media (min-width: 720px) { :root { --rand: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 1.0625rem/1.6 var(--sans); overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }
a { color: var(--akzent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--akzent-dunkel); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
h3 { font-size: 1.05rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 8px; top: -60px; background: var(--akzent); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.sprung:focus { top: 8px; }
.icon { width: 1.4em; height: 1.4em; flex: none; }
.icon--klein { width: 1.05em; height: 1.05em; vertical-align: -.15em; }

.rahmen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.rahmen--schmal { max-width: var(--schmal); }
.inhalt { min-height: 60vh; padding-bottom: 48px; }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--linie); }
.kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 calc(var(--rand) - 8px); height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kopf__knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--tinte); cursor: pointer; }
.kopf__knopf:hover { background: var(--akzent-hell); color: var(--akzent); }
.marke { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--tinte); line-height: 1.1; min-width: 0; }
.marke__wort { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; color: var(--tinte); }
.marke__wort em { font-style: italic; font-weight: 500; color: var(--akzent); }
.marke__zeile { font-size: .72rem; color: var(--tinte-2); letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; }
.marke__logo { max-height: 44px; width: auto; }
.kopf__suche { border-top: 1px solid var(--linie); padding: 12px var(--rand) 16px; max-width: var(--breite); margin: 0 auto; }

/* ---------- Navigation (Seitenleiste) ---------- */
.nav { position: fixed; inset: 0; z-index: 50; }
.nav__schleier { position: absolute; inset: 0; background: rgba(20, 14, 12, .45); animation: einblenden .2s ease; }
.nav__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 360px); background: var(--papier); overflow-y: auto; padding: 8px 12px 32px; box-shadow: 0 0 40px rgba(0,0,0,.2); animation: reinschieben .25s ease; }
.nav__kopf { display: flex; justify-content: space-between; align-items: center; padding: 6px 4px 6px 8px; }
.nav__uebersicht { margin: 4px 8px 12px; font-size: .95rem; }
.nav__liste { list-style: none; margin: 0; padding: 0; }
.nav__liste > li { border-top: 1px solid var(--linie); }
.nav__liste summary, .nav__liste > li > a { display: flex; justify-content: space-between; align-items: center; padding: 13px 8px; font-weight: 600; cursor: pointer; list-style: none; color: var(--tinte); text-decoration: none; }
.nav__liste summary::-webkit-details-marker { display: none; }
.nav__liste summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--tinte-2); border-bottom: 2px solid var(--tinte-2); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.nav__liste details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.nav__liste ul { list-style: none; margin: 0 0 10px; padding: 0 0 0 8px; }
.nav__liste ul a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--tinte); text-decoration: none; }
.nav__liste ul a:hover { background: var(--akzent-hell); color: var(--akzent); }
.nav__direkt a { gap: 8px; justify-content: flex-start !important; }
@keyframes reinschieben { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }
body.nav-offen { overflow: hidden; }

/* ---------- Suche ---------- */
.suchfeld { position: relative; display: flex; align-items: center; background: var(--karte); border: 1.5px solid var(--linie); border-radius: 999px; padding: 4px 4px 4px 14px; box-shadow: var(--schatten); max-width: 640px; }
.suchfeld:focus-within { border-color: var(--akzent); }
.suchfeld__icon { color: var(--tinte-2); width: 1.25em; height: 1.25em; }
.suchfeld__eingabe { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; color: var(--tinte); padding: 10px 10px; outline: none; }
.suchfeld__eingabe::placeholder { color: var(--tinte-2); opacity: .85; }
.suchfeld__eingabe::-webkit-search-cancel-button { display: none; }
.suchfeld__los { border: 0; background: var(--akzent); color: #fff; font: 600 .95rem var(--sans); padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.suchfeld__los:hover { background: var(--akzent-dunkel); }
@media (max-width: 420px) { .suchfeld__los { padding: 10px 14px; } }
.vorschlaege { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--karte); border: 1px solid var(--linie); border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.14); z-index: 40; overflow: hidden; text-align: left; }
.vorschlaege h4 { margin: 0; padding: 10px 16px 4px; font: 600 .72rem var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.vorschlaege a { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; color: var(--tinte); text-decoration: none; }
.vorschlaege a small { color: var(--tinte-2); white-space: nowrap; }
.vorschlaege a:hover, .vorschlaege a[aria-selected="true"] { background: var(--akzent-hell); color: var(--akzent); }
.vorschlaege .vorschlaege__alle { border-top: 1px solid var(--linie); font-weight: 600; color: var(--akzent); }

/* ---------- Startseite ---------- */
.held { background: radial-gradient(120% 90% at 50% 0%, var(--gold-hell) 0%, var(--papier) 70%); padding: 36px var(--rand) 40px; text-align: center; }
.held__innen { max-width: 760px; margin: 0 auto; }
.held__titel { font-size: clamp(2rem, 1.3rem + 3.6vw, 3.4rem); margin-bottom: .35em; }
.held__titel em { color: var(--akzent); font-weight: 500; }
.held__text { color: var(--tinte-2); font-size: 1.08rem; margin: 0 auto 22px; max-width: 34em; }
.held .suchfeld { margin: 0 auto; }

.block { max-width: var(--breite); margin: 40px auto 0; padding: 0 var(--rand); }
.block__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.block__kopf h2 { margin: 0; }
.block__vorzeile { display: block; font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.block__alle { font-weight: 600; font-size: .95rem; white-space: nowrap; text-decoration: none; }

.saison { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.saison__karte { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; box-shadow: var(--schatten); transition: transform .15s, border-color .15s; }
.saison__karte:hover { transform: translateY(-2px); border-color: var(--akzent); color: var(--tinte); }
.saison__karte--gross { grid-column: 1 / -1; background: linear-gradient(135deg, var(--akzent) 0%, var(--akzent-dunkel) 100%); border: 0; color: #fff; padding: 22px; }
.saison__karte--gross:hover { color: #fff; }
.saison__anlass { font: 600 1.2rem var(--serif); }
.saison__karte--gross .saison__anlass { font-size: 1.5rem; }
.saison__vers { font: italic 400 .98rem/1.55 var(--serif); opacity: .88; }
.saison__karte:not(.saison__karte--gross) .saison__vers { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; color: var(--tinte-2); }
.saison__mehr { margin-top: auto; font-size: .88rem; font-weight: 600; opacity: .9; }
@media (min-width: 860px) { .saison { grid-template-columns: 1.6fr 1fr 1fr; } .saison__karte--gross { grid-column: auto; } }

.kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .kacheln { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .kacheln { grid-template-columns: repeat(4, 1fr); } }
.kachel { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; min-height: 112px; padding: 14px 16px; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; overflow: hidden; transition: border-color .15s, transform .15s; }
.kachel::before { content: ""; position: absolute; right: -18px; top: -18px; width: 64px; height: 64px; border-radius: 50%; background: var(--gold-hell); transition: transform .3s; }
.kachel:hover { border-color: var(--akzent); color: var(--tinte); transform: translateY(-2px); }
.kachel:hover::before { transform: scale(1.3); }
.kachel__name { position: relative; font: 600 1.08rem/1.25 var(--serif); }
.kachel__zahl { position: relative; font-size: .82rem; color: var(--tinte-2); background: var(--papier); border-radius: 999px; padding: 1px 8px; }
.kacheln--klein .kachel { min-height: 96px; }
.kachel__motiv { position: absolute; top: 10px; right: 10px; width: 52px; height: 52px; color: var(--gold); transition: transform .3s; }
.kachel:hover .kachel__motiv { transform: rotate(-6deg) scale(1.06); }
.kachel::before { right: -14px; top: -14px; width: 84px; height: 84px; }
.kacheln--klein .kachel__motiv { width: 44px; height: 44px; }
img.motiv--bild { object-fit: contain; }
.saison__karte { position: relative; overflow: hidden; }
.saison__motiv { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; color: var(--gold); opacity: .9; }
.saison__karte--gross .saison__motiv { width: 76px; height: 76px; color: #fff; opacity: .55; top: 16px; right: 16px; }
.saison__anlass { padding-right: 52px; }
.saison__karte--gross .saison__anlass { padding-right: 84px; }
.liste__kopf--motiv { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: start; }
.liste__kopf--motiv > * { grid-column: 1; }
.liste__kopf--motiv .liste__motiv { grid-column: 2; grid-row: 1 / span 2; width: 64px; height: 64px; color: var(--gold); }
@media (min-width: 720px) { .liste__kopf--motiv .liste__motiv { width: 84px; height: 84px; } }
.uebersicht__gruppe { position: relative; }
.uebersicht__motiv { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; color: var(--gold); }

.band { background: var(--band); color: var(--band-text); margin-top: 48px; padding: 40px var(--rand); }
.band__innen { max-width: var(--breite); margin: 0 auto; display: grid; gap: 24px; }
@media (min-width: 860px) { .band__innen { grid-template-columns: 1fr 1fr; align-items: center; } }
.band h2 { color: #fff; }
.band p { color: color-mix(in srgb, var(--band-text) 80%, transparent); }
.band__vorzeile { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--gold) !important; margin: 0 0 6px; }
.band__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.band__liste a { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.band__liste a:hover { background: rgba(255,255,255,.14); color: #fff; }
.band__liste small { display: block; opacity: .7; font-size: .85rem; }
.band__play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gold); color: #fff; font-size: .8rem; flex: none; padding-left: 2px; }

.autorin { display: grid; gap: 20px; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 24px; max-width: calc(var(--breite) - 2 * var(--rand)); margin-left: auto; margin-right: auto; }
@media (min-width: 720px) { .autorin--bild { grid-template-columns: 180px 1fr; } }
.autorin__text { max-width: 46em; }
.autorin__bild img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: 160px; }
.autorin h2 { margin-bottom: .3em; }
@media (max-width: 1168px) { .autorin { margin-left: var(--rand); margin-right: var(--rand); } }

.knopf { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--akzent); color: #fff; font: 600 1rem var(--sans); padding: 11px 20px; border-radius: 999px; text-decoration: none; cursor: pointer; }
.knopf:hover { background: var(--akzent-dunkel); color: #fff; }
.knopf--hell { background: #fff; color: var(--band); }
.knopf--hell:hover { background: var(--gold-hell); color: var(--band); }

/* ---------- Listen ---------- */
.krumen ol { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; font-size: .88rem; color: var(--tinte-2); }
.krumen li:not(:last-child)::after { content: "›"; margin: 0 .45em; color: var(--tinte-2); }
.krumen a { color: var(--tinte-2); text-decoration: none; }
.krumen a:hover { color: var(--akzent); text-decoration: underline; }
.liste__kopf { margin: 14px 0 18px; }
.liste__kopf h1 { margin-bottom: .25em; }
.liste__intro { color: var(--tinte-2); max-width: 46em; }
.liste__intro p { margin: .4em 0; }
.liste__suche { margin-top: 12px; }
.liste__zahl { color: var(--tinte-2); font-size: .92rem; margin: 18px 0 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin: 0 calc(-1 * var(--rand)); padding-left: var(--rand); padding-right: var(--rand); scroll-snap-type: x proximity; }
.chips--scroll::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .chips--scroll { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte); color: var(--tinte); font-size: .93rem; text-decoration: none; white-space: nowrap; scroll-snap-align: start; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--akzent); color: var(--akzent); }
.chip--an { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.chip--an:hover { color: #fff; background: var(--akzent-dunkel); }
.chip--leise { background: transparent; color: var(--tinte-2); }
.chip--gross { padding: 10px 18px; font-size: 1rem; }
.chip--zurueck::before { content: "‹"; }
.unter { margin: 0 0 12px; }
.alter { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .93rem; color: var(--tinte-2); }
.alter select { font: inherit; color: var(--tinte); background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: 7px 14px; max-width: 100%; }
.alter select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.wege { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
@media (min-width: 640px) { .wege { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } }
.weg { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 9px 12px; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--gold-hell); color: var(--tinte); text-decoration: none; line-height: 1.3; }
@media (min-width: 640px) { .weg { padding: 12px 16px; column-gap: 12px; } }
.weg:hover { border-color: var(--gold); }
.weg__name { font-family: var(--serif); font-weight: 600; }
.weg__info { grid-column: 1; font-size: .88rem; color: var(--tinte-2); }
.weg .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--gold); display: none; }
@media (min-width: 640px) { .weg .icon { display: block; } }

/* Zeile „282 Texte · [Filtern]“ – geöffnet nimmt der Filter die ganze Breite */
.liste__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 16px 0 12px; }
.liste__leiste .liste__zahl { margin: 0; }
.liste__leiste:has(.filter__box[open]) .filter { flex-basis: 100%; }
.filter { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.filter__box[open] { flex-basis: 100%; }
.filter__box:not([open]) { border-radius: 999px; }
.filter__box:not([open]) > summary { padding: 7px 16px; font-size: .93rem; }
.filter__box:not([open]) > summary::after { width: 6px; height: 6px; margin-left: 4px; }
.filter__aktiv { display: flex; flex-wrap: wrap; gap: 8px; }
.pille { display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 14px; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); font-weight: 600; font-size: .92rem; text-decoration: none; }
.pille .icon { width: 1.1em; height: 1.1em; }
.filter__box { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.filter__box > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; font-weight: 600; cursor: pointer; list-style: none; }
.filter__box > summary::-webkit-details-marker { display: none; }
.filter__box > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tinte-2); border-bottom: 2px solid var(--tinte-2); transform: rotate(45deg); transition: transform .2s; }
.filter__box[open] > summary::after { transform: rotate(-135deg); }
.filter__gruppen { padding: 4px 16px 16px; display: grid; gap: 14px; }
.filter__gruppe h3 { font: 600 .75rem var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--tinte-2); margin: 0 0 8px; }
.filter__gruppe .chip { font-size: .9rem; padding: 6px 12px; }
@media (min-width: 900px) { .filter__gruppen { grid-template-columns: repeat(2, 1fr); } }

.karten { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .karten { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1000px) { .karten { grid-template-columns: repeat(3, 1fr); } }
.karte { position: relative; display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: var(--schatten); transition: border-color .15s, transform .15s; }
.karte:hover { border-color: color-mix(in srgb, var(--akzent) 55%, var(--linie)); transform: translateY(-2px); }
.karte--hervor { border-color: var(--gold); }
.karte--hervor::after { content: "★"; position: absolute; top: 12px; right: 14px; color: var(--gold); font-size: .9rem; }
.karte__titel { font-size: 1.2rem; margin: 0 0 10px; padding-right: 18px; }
.karte__titel a { color: var(--tinte); text-decoration: none; }
.karte__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); } /* ganze Karte klickbar */
.karte__text { font: italic 400 1.07rem/1.7 var(--serif); color: var(--tinte); margin: 0; }
.karte__text--prosa { font-style: normal; font-family: var(--sans); }
.karte__mehr { color: var(--akzent); }
.karte__fuss { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .82rem; color: var(--tinte-2); }
.karte__rubrik { color: var(--akzent); font-weight: 600; }
.karte__info--lied { color: var(--gold); font-weight: 600; }

.seiten ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.seiten a, .seiten span { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte); color: var(--tinte); text-decoration: none; font-weight: 600; }
.seiten .current { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.seiten .dots { border: 0; background: none; }
.seiten a:hover { border-color: var(--akzent); color: var(--akzent); }
.leer { background: var(--karte); border: 1px dashed var(--linie); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--tinte-2); }
.treffer-rubriken { margin: 0 0 8px; }
.treffer-rubriken h2 { font-size: 1.05rem; font-family: var(--sans); color: var(--tinte-2); }

/* ---------- Gedicht ---------- */
.gedicht { background: var(--karte); border: 1px solid var(--linie); border-radius: 20px; padding: 26px 20px 20px; margin-top: 14px; box-shadow: var(--schatten); }
@media (min-width: 720px) { .gedicht { padding: 44px 56px 32px; } }
.gedicht__kopf { margin-bottom: 22px; }
.gedicht__titel { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem); margin-bottom: .45em; }
.gedicht__chips .chip { font-size: .85rem; padding: 4px 11px; }
.gedicht__text { font-family: var(--serif); font-size: clamp(1.14rem, 1.02rem + .5vw, 1.32rem); line-height: 1.78; }
.gedicht__text pre, .gedicht__text .wp-block-verse { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; padding: 0; background: none; border: 0; color: var(--tinte); }
.gedicht__text p { margin: 0 0 1.1em; }
.gedicht__text h2, .gedicht__text h3 { margin-top: 1.4em; }
.gedicht__autor { margin: 26px 0 0; font-size: .9rem; color: var(--tinte-2); letter-spacing: .02em; }
.gedicht__autor::before { content: ""; display: block; width: 44px; height: 2px; background: var(--gold); margin-bottom: 12px; }

.fg-audio { margin: 26px 0 0; padding: 16px; border-radius: 14px; background: var(--gold-hell); }
.fg-audio__kopf { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.fg-audio__icon { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); color: #fff; }
.fg-audio__player { width: 100%; }
.fg-audio__info { margin: 8px 0 0; font-size: .88rem; color: var(--tinte-2); }
.fg-video { position: relative; aspect-ratio: 16/9; border-radius: 12px; background: #1c1412; display: grid; place-items: center; text-align: center; padding: 16px; }
.fg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.fg-video__start { display: inline-flex; align-items: center; gap: 10px; border: 0; background: #fff; color: #1c1412; font: 600 1rem var(--sans); padding: 12px 18px; border-radius: 999px; cursor: pointer; }
.fg-video__play { color: #c00; }
.fg-video__hinweis { color: rgba(255,255,255,.7); font-size: .8rem; margin: 10px 0 0; }

.aktionen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 26px 0 0; }
.aktion { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 11px 4px 9px; border: 1px solid var(--linie); border-radius: 12px; background: var(--papier); color: var(--tinte); font: 600 .82rem var(--sans); text-decoration: none; cursor: pointer; transition: border-color .15s, background .15s; }
.aktion .icon { width: 1.5em; height: 1.5em; color: var(--akzent); }
.aktion:hover { border-color: var(--akzent); color: var(--akzent); }
.aktion--wa .icon { color: #1f9e53; }
.aktion.ist-ok { border-color: #1f9e53; color: #1f9e53; }
.aktionen__meldung { min-height: 1.4em; margin: 8px 0 0; font-size: .9rem; color: #1f9e53; text-align: center; }
@media (max-width: 719px) {
  /* Aktionen auf dem Handy als Leiste am unteren Rand */
  .aktionen { position: sticky; bottom: 10px; z-index: 20; background: color-mix(in srgb, var(--karte) 94%, transparent); backdrop-filter: blur(8px); padding: 8px; border-radius: 16px; border: 1px solid var(--linie); box-shadow: 0 8px 28px rgba(0,0,0,.14); }
  .aktion { border: 0; background: transparent; padding: 6px 2px; }
}
.fg-vg { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.blaettern { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.blaettern a { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--linie); background: var(--karte); color: var(--tinte); text-decoration: none; font-weight: 600; line-height: 1.3; }
.blaettern a:hover { border-color: var(--akzent); color: var(--akzent); }
.blaettern small { display: block; font-weight: 400; color: var(--tinte-2); font-size: .8rem; }
.blaettern__nach { grid-column: 2; justify-content: flex-end; text-align: right; }
.block--mehr { margin-top: 44px; }

/* ---------- Seiten, Übersicht, Fehler ---------- */
.seite { margin-top: 20px; }
.seite__inhalt { font-size: 1.08rem; }
.seite__inhalt img { border-radius: 12px; }
.seite__bild img { border-radius: var(--radius); margin-bottom: 16px; }
.uebersicht { columns: 1; column-gap: 18px; }
@media (min-width: 640px) { .uebersicht { columns: 2; } }
@media (min-width: 1000px) { .uebersicht { columns: 3; } }
.uebersicht__gruppe { break-inside: avoid; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 18px; }
.uebersicht__gruppe h2 { font-size: 1.2rem; }
.uebersicht__gruppe h2 a { color: var(--tinte); text-decoration: none; }
.uebersicht__gruppe ul { list-style: none; margin: 0; padding: 0; }
.uebersicht__gruppe li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-top: 1px solid var(--linie); }
.uebersicht__gruppe li a { color: var(--tinte); text-decoration: none; }
.uebersicht__gruppe li a:hover { color: var(--akzent); }
.uebersicht__gruppe li span { color: var(--tinte-2); font-size: .85rem; }
.uebersicht__zwischen { margin-top: 32px; }
.fehler { text-align: center; padding-top: 40px; }
.fehler .suchfeld { margin: 20px auto; }
.fehler__chips { justify-content: center; margin-top: 18px; }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); background: var(--karte); margin-top: 56px; }
.fuss__innen { max-width: var(--breite); margin: 0 auto; padding: 32px var(--rand) 40px; display: grid; gap: 18px; }
@media (min-width: 860px) { .fuss__innen { grid-template-columns: 1.4fr 1fr; } .fuss__copy { grid-column: 1 / -1; } }
.fuss__marke p { color: var(--tinte-2); margin: .4em 0 0; max-width: 34em; }
.fuss__links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fuss__links a { color: var(--tinte); text-decoration: none; }
.fuss__links a:hover { color: var(--akzent); text-decoration: underline; }
.farbschalter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .9rem; color: var(--tinte-2); }
.farbschalter__gruppe { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); }
.farbschalter button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--tinte-2); font: 500 .88rem var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.farbschalter button[aria-pressed="true"] { background: var(--karte); color: var(--tinte); box-shadow: var(--schatten); }
.farbschalter button:hover { color: var(--tinte); }
.farbschalter svg { width: 16px; height: 16px; }
.fuss__copy { font-size: .85rem; color: var(--tinte-2); margin: 0; border-top: 1px solid var(--linie); padding-top: 16px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Verse: jede Zeile ein Block mit hängendem Einzug */
.vers .strophe { margin: 0 0 1.15em; }
.vers .strophe:last-child { margin-bottom: 0; }
.vers .zeile { display: block; padding-left: 1.1em; text-indent: -1.1em; }
@media (max-width: 480px) { .gedicht__text { font-size: 1.1rem; line-height: 1.7; } }

/* Gedicht des Tages */
.heute { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--radius); background: var(--karte); border: 1px solid var(--linie); color: var(--tinte); text-decoration: none; box-shadow: var(--schatten); }
.heute:hover { border-color: var(--akzent); color: var(--tinte); }
.heute__datum { flex: none; display: grid; place-items: center; width: 64px; height: 70px; border-radius: 12px; background: var(--akzent); color: #fff; font: 600 .78rem var(--sans); text-transform: uppercase; letter-spacing: .06em; line-height: 1.1; padding-top: 4px; }
.heute__datum span { font: 600 1.9rem/1 var(--serif); letter-spacing: 0; }
.heute__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.heute__vorzeile { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.heute__titel { font: 600 1.2rem/1.25 var(--serif); }
.heute__vers { font: italic .95rem/1.5 var(--serif); color: var(--tinte-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Verzeichnis (A–Z, Monate, Jahrzehnte) */
.verz__sprung { margin: 0 0 16px; position: sticky; top: 60px; z-index: 5; background: var(--papier); padding: 8px 0; }
.verz__sprung .chip { min-width: 40px; justify-content: center; }
.verz { columns: 1; column-gap: 18px; }
@media (min-width: 640px) { .verz { columns: 2; } }
@media (min-width: 1000px) { .verz { columns: 3; } }
.verz__gruppe { break-inside: avoid; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 18px; scroll-margin-top: 130px; }
.verz__gruppe h2 { font-size: 1.3rem; color: var(--akzent); margin-bottom: .3em; }
.verz__gruppe ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.verz--monat .verz__gruppe ul, .verz--jahrzehnt .verz__gruppe ul { display: block; }
.verz--monat li { padding: 4px 0; border-top: 1px solid var(--linie); }
.verz__gruppe a { color: var(--tinte); text-decoration: none; line-height: 1.9; }
.verz__gruppe a:hover { color: var(--akzent); text-decoration: underline; }
.verz__tag { display: inline-block; min-width: 2em; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
.verz--jahrzehnt .verz__gruppe ul { display: flex; }

/* Sprachen */
.gedicht__sprachen { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: .92rem; color: var(--tinte-2); }
.gedicht__sprachen a { font-weight: 600; }

/* ---------- Alben & Streaming ---------- */
.fg-dienste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fg-dienst { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--karte); border: 1px solid var(--linie); color: var(--tinte); font-size: .9rem; font-weight: 600; text-decoration: none; }
.fg-dienst::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.fg-dienst--spotify::before { background: #1DB954; }
.fg-dienst--apple::before { background: #FA2D48; }
.fg-dienst--youtube::before { background: #FF0000; }
.fg-dienst:hover { border-color: var(--akzent); color: var(--tinte); }
.fg-album-kasten { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); }
.fg-album-kasten__cover { width: 64px; height: 64px; flex: none; border-radius: 8px; object-fit: cover; }
.fg-album-kasten__text { min-width: 0; }
.fg-album-kasten__text small { display: block; color: var(--tinte-2); font-size: .8rem; }
.fg-album-kasten__name { font: 600 1.1rem/1.3 var(--serif); color: var(--tinte); }
.fg-album-kasten .fg-dienste { gap: 6px; margin-top: 8px; }
.fg-album-kasten .fg-dienst { padding: 5px 11px; font-size: .84rem; }
.fg-album__cover--leer { display: grid; place-items: center; background: linear-gradient(135deg, var(--gold), color-mix(in srgb, var(--gold) 55%, var(--akzent))); color: #fff; font-size: 1.6rem; }
.album { display: grid; gap: 18px; margin: 14px 0 24px; }
.album__cover { width: 100%; max-width: 180px; aspect-ratio: 1; height: auto; border-radius: var(--radius); object-fit: cover; box-shadow: var(--schatten); }
.album__cover.fg-album__cover--leer { display: grid; font-size: 3.4rem; }
.album__titel { margin: 0 0 .15em; }
.album__zahl { color: var(--tinte-2); margin: 0; }
.album__intro { margin-top: 10px; }
.fg-video--spotify { aspect-ratio: auto; min-height: 152px; margin-bottom: 8px; }
.fg-video--spotify.fg-video--aktiv { min-height: 380px; }
.fg-video__start .fg-video__play { color: #1DB954; }
.album__liste-titel { font-size: 1.2rem; margin: 28px 0 10px; }
.titel { list-style: none; counter-reset: titel; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.titel__eintrag { counter-increment: titel; display: grid; grid-template-columns: 2em 1fr; gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--linie); }
.titel__eintrag::before { content: counter(titel); color: var(--tinte-2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.titel__link { text-decoration: none; color: var(--tinte); min-width: 0; }
.titel__name { display: block; font-weight: 600; }
.titel__anriss { display: block; color: var(--tinte-2); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titel__player { grid-column: 2; width: 100%; height: 36px; margin-top: 4px; }
.alben { margin: 6px 0 8px; }
.alben__titel { font-size: 1.2rem; margin: 18px 0 10px; }
.alben__liste { list-style: none; margin: 0 calc(-1 * var(--rand)); padding: 0 var(--rand) 6px; display: grid; grid-auto-flow: column; grid-auto-columns: 36%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand); scrollbar-width: none; }
.alben__liste li { scroll-snap-align: start; }
.alben__eintrag { display: block; text-decoration: none; color: var(--tinte); }
.alben__cover { display: block; width: 100%; aspect-ratio: 1; height: auto; border-radius: var(--radius); object-fit: cover; }
.alben__cover.fg-album__cover--leer { display: grid; font-size: 2.2rem; }
.alben__name { display: block; font: 600 1rem/1.3 var(--serif); margin-top: 6px; }
.alben__zahl { display: block; color: var(--tinte-2); font-size: .85rem; }
@media (min-width: 720px) {
  .album { grid-template-columns: 240px 1fr; align-items: end; }
  .album__cover { max-width: 240px; }
  .alben__liste { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1000px) { .alben__liste { grid-template-columns: repeat(6, 1fr); } }

/* ---------- Bücher ---------- */
.knopf--rand { background: transparent; color: var(--akzent); box-shadow: inset 0 0 0 1.5px var(--akzent); }
.knopf--rand:hover { background: var(--akzent-hell); color: var(--akzent); }
.buecher { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 24px 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .buecher { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 24px; } }
.buecher--klein { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 640px) { .buecher--klein { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
.buch-karte { display: flex; flex-direction: column; gap: 4px; color: var(--tinte); text-decoration: none; }
.buch-karte__cover { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 8px; }
.buch-karte__cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .15s; }
.buch-karte:hover .buch-karte__cover img { transform: translateY(-3px); }
.buch-karte__reihe { font-size: .8rem; font-weight: 600; letter-spacing: .04em; color: var(--gold); }
.buch-karte__titel { font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; }
.buch-karte:hover .buch-karte__titel { color: var(--akzent); }
.buch-karte__text { font-size: .9rem; color: var(--tinte-2); }
.buch__platzhalter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 16px; text-align: center; border-radius: 4px; background: var(--gold-hell); color: var(--tinte-2); font-family: var(--serif); }
.buch { display: grid; gap: 24px; margin: 14px 0 40px; }
@media (min-width: 720px) { .buch { grid-template-columns: minmax(200px, 300px) 1fr; gap: 40px; align-items: start; } }
.buch__cover { max-width: 300px; }
.buch__cover img { display: block; width: 100%; height: auto; }
.buch__reihe { margin: 0 0 4px; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--gold); }
.buch__titel { margin: 0 0 16px; }
.buch__text { max-width: 40em; }
.buch__daten { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 20px 0; }
.buch__daten dt { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.buch__daten dd { margin: 0; font-weight: 600; }
.buch__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }