/* kirchenkiste.de — ein Stil für alle Seiten. Keine fremden Schriften, nichts nachgeladen. */

:root {
  --papier: #faf6ee;
  --karte: #fffdf8;
  --tinte: #231d17;
  --leise: #6b6158;
  --linie: #e3d9c9;
  --holz: #8a4a1c;
  --holz-hell: #f1e4d3;
  --mass: 40rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1b1714;
    --karte: #241f1b;
    --tinte: #efe8de;
    --leise: #b2a697;
    --linie: #3a322b;
    --holz: #e0a170;
    --holz-hell: #3a2a1d;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 1.0625rem/1.6 Charter, "Bitstream Charter", "Iowan Old Style", Georgia, "Times New Roman", serif;
}

h1, h2, h3, .marke, nav, .fuss, table, .knopf, .hinweis {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

h1 { font-size: 1.9rem; line-height: 1.2; margin: 2.5rem 0 .75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.2rem; margin: 2.25rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1.5rem 0 .25rem; }
p, ul, ol { margin: 0 0 1rem; }
a { color: var(--holz); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

.bahn { max-width: var(--mass); margin: 0 auto; padding: 0 16px; }

.sprung { position: absolute; left: -999px; }
.sprung:focus { left: 16px; top: 8px; background: var(--karte); padding: .25rem .5rem; }

.kopf { border-bottom: 1px solid var(--linie); background: var(--karte); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: .9rem; padding-bottom: .9rem; flex-wrap: wrap; }
.marke { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1.15rem; color: var(--tinte); text-decoration: none; }
.marke__kiste { width: 1.4rem; height: 1.1rem; border: 2px solid var(--holz); border-radius: 2px; position: relative; }
.marke__kiste::before { content: ""; position: absolute; left: 0; right: 0; top: 40%; border-top: 2px solid var(--holz); }
nav ul { list-style: none; display: flex; gap: 1.1rem; margin: 0; padding: 0; font-size: .95rem; }
nav a { color: var(--tinte); text-decoration: none; }
nav a[aria-current="page"] { color: var(--holz); font-weight: 600; }

.vorspann { font-size: 1.15rem; color: var(--leise); }

.hinweis {
  background: var(--holz-hell);
  border-left: 4px solid var(--holz);
  padding: .75rem 1rem;
  border-radius: 0 4px 4px 0;
  font-size: .95rem;
  margin: 1.25rem 0;
}

table { width: 100%; border-collapse: collapse; font-size: .95rem; margin: .5rem 0 1.25rem; }
th, td { text-align: left; vertical-align: top; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--linie); }
th { color: var(--leise); font-weight: 600; font-size: .85rem; }
td.wann { white-space: nowrap; }
.offen { color: var(--leise); font-style: italic; }

.dokumente { list-style: none; padding: 0; }
.dokumente li { background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; padding: .8rem 1rem; margin-bottom: .6rem; }
.dokumente a { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; }
.dokumente small { display: block; color: var(--leise); font-size: .85rem; margin-top: .2rem; }

.fuss { border-top: 1px solid var(--linie); margin-top: 4rem; padding: 1.5rem 0 2.5rem; font-size: .85rem; color: var(--leise); }
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 0 0 .5rem; }
.fuss a { color: var(--leise); }

/* Stücke: Kenndaten, Text, Regieanweisungen */
.kenndaten { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 1rem 0 1.5rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .95rem; }
.kenndaten dt { color: var(--leise); }
.kenndaten dd { margin: 0; }
.stueck h2 { border-top: 1px solid var(--linie); padding-top: 1.5rem; }
.stueck .replik { margin: 0 0 .9rem; }
.stueck .sprecher { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 600; font-size: .9rem; letter-spacing: .02em; margin-right: .35rem; }
.stueck .ra { font-style: italic; color: var(--leise); }
.stueck p.ra { margin: 1rem 0; }
.stueck .lied { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .95rem; color: var(--holz); margin: 1.5rem 0; }
.stueck .ablauf { padding-left: 1.2rem; }
.rechte { font-size: .95rem; }
.titelbild { display: block; width: 100%; height: auto; border-radius: 6px; margin: .4rem 0 1.2rem; }
.geschichte .bild { margin: 1.4rem 0; text-align: center; }
.geschichte .bild img { display: inline-block; max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: 6px; }
.geschichte .bild.titel { margin-top: .4rem; }
.geschichte figcaption { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .85rem; color: var(--leise); margin-top: .3rem; }
.geschichte .brief { margin: 1.2rem 0; padding: .8rem 1.1rem; background: var(--karte); border-left: 3px solid var(--holz); font-style: italic; }
.geschichte .brief p { margin: .4rem 0; }
.reihe { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.stuecke-liste { list-style: none; padding: 0; }
.stuecke-liste li { display: flow-root; background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; padding: 1rem 1.1rem; margin-bottom: .8rem; }
.stuecke-liste img { float: right; width: 7.5rem; height: auto; border-radius: 4px; margin: 0 0 .5rem .9rem; }
.stuecke-liste h2, .stuecke-liste h3 { margin: 0 0 .25rem; font-size: 1.1rem; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.stuecke-liste small { display: block; color: var(--leise); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: .85rem; margin-bottom: .4rem; }
@page { margin: 18mm 16mm; }
@media print {
  .kopf, .fuss, .sprung, .nur-bildschirm { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .stueck h2 { break-after: avoid; }
  .replik, .stueck p { break-inside: avoid; }
  .geschichte .bild { break-inside: avoid; }
  .geschichte .bild img { max-height: 120mm; }
  a { color: inherit; }
}

@media (max-width: 30rem) {
  h1 { font-size: 1.55rem; }
  .stuecke-liste img { width: 6rem; }
  td.wann { white-space: normal; }
}