/* Seite /grabtuch/ (scripts/grabtuch.mjs): baut auf src/schrift.css auf (Teile, Lesespalte, Leitvers, Bilder, Einwände,
   Nachtabschnitte, Zeitleiste, mitlaufendes Verzeichnis) und ergänzt die eigenen Bausteine: den Regler zwischen Tuch und
   Negativ, „Spur für Spur“ mit dem stehenden Tuch und der Kamera (src/grabtuch.js), die Befunde und Erklärungen, das
   Diagramm der Datierungen, die Funde nach Sicherheit (Auswahl mit src/schrift.js), den Weg des Tuchs, die Päpste, das
   Tuch heute und die Links zum Sehen und Hören. Ohne Skript steht alles ruhig untereinander. */
.grabtuch-seite {
  --leinen: #d8c7a3; --leinen-tief: #b49a6a;
  /* Diagramm der Datierungen: Radiokarbon und andere Verfahren, geprüft auf Farbsehschwächen (hell und dunkel) */
  --c14: #a07a22; --andere: #3d5fb8;
  --sicher-belegt: var(--green); --sicher-umstritten: var(--ochre); --sicher-offen: var(--violet);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grabtuch-seite { --c14: #a8842e; --andere: #6f8ee0; --leinen: #3a3324; --leinen-tief: #5a4c33; } }
:root[data-theme="dark"] .grabtuch-seite { --c14: #a8842e; --andere: #6f8ee0; --leinen: #3a3324; --leinen-tief: #5a4c33; }

/* Kopf: das Gesicht im Negativ, oben etwas dunkler, damit Kopfleiste und Brotkrumen lesbar bleiben */
.grabtuch-kopf .foto-kopf-foto { filter: contrast(1.05); }
.abschnitt-untertitel--mitte { max-width: var(--breit); margin: 0 auto 1.4rem; text-align: center; }

/* ------------------------------------------------------------ Zwischen Tuch und Negativ */
.negativ { max-width: 36rem; margin: 0 auto var(--luft); }
.negativ-rahmen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.negativ-bild { position: relative; margin: 0; border-radius: 10px; overflow: hidden; background: var(--night); box-shadow: var(--shadow); }
.negativ-bild img, .negativ-bild picture { display: block; width: 100%; height: auto; }
.negativ-etikett {
  position: absolute; left: .6rem; bottom: .55rem; margin: 0; padding: .2rem .55rem; border-radius: 999px;
  background: rgba(8, 12, 34, .72); color: var(--auf-nacht); font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .03em;
}
.negativ-griff { display: none; }
.negativ figcaption { margin-top: .7rem; font-family: var(--font-ui); font-size: .85rem; line-height: 1.5; color: var(--ink-2); text-align: center; }
.negativ figcaption .nachweis { display: block; margin-top: .2rem; color: var(--ink-3); }
.negativ-steuer { display: grid; gap: .3rem; justify-items: center; margin-top: .8rem; font-family: var(--font-ui); font-size: .82rem; color: var(--ink-3); }
.negativ-steuer input { width: min(100%, 22rem); accent-color: var(--gold-tief); }
/* Mit Skript: beide Bilder übereinander, das Negativ ab --x sichtbar */
.negativ.ist-bedienbar .negativ-rahmen {
  --x: 50%; position: relative; display: grid; grid-template-columns: 1fr; gap: 0; border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow); cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.negativ.ist-bedienbar .negativ-bild { grid-area: 1 / 1; border-radius: 0; box-shadow: none; }
.negativ.ist-bedienbar .negativ-bild--negativ { clip-path: inset(0 0 0 var(--x)); }
.negativ.ist-bedienbar .negativ-bild--negativ .negativ-etikett { left: auto; right: .6rem; }
.negativ.ist-bedienbar .negativ-griff {
  display: block; position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--gold-hell);
  box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: none;
}
.negativ.ist-bedienbar .negativ-griff::after {
  content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--gold-hell); color: var(--night);
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem; letter-spacing: .1em; box-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------ Spur für Spur */
.spuren { max-width: var(--breit); margin: 0 auto; display: grid; gap: 1.5rem; }
.spuren-tuch {
  position: sticky; top: 3.6rem; z-index: 2; align-self: start; padding: .6rem 0 .5rem;
  background: var(--sheet); box-shadow: 0 10px 18px -14px rgba(20, 24, 36, .35);
}
.teil--papier .spuren-tuch { background: var(--sheet); }
.spuren-wahl { margin: 0 0 .5rem; }
.spuren-fenster {
  position: relative; overflow: hidden; margin: 0 auto; border-radius: 12px; background: var(--leinen);
  aspect-ratio: var(--format); height: 38vh; height: 38svh; max-width: 100%; box-shadow: inset 0 0 0 1px var(--rule);
}
.spuren-buehne { position: absolute; inset: 0; transform-origin: 0 0; transition: transform .9s cubic-bezier(.3, .6, .2, 1); }
.spuren-ansicht { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 100%; }
.spuren-ansicht picture { display: block; height: 100%; }
.spuren-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.spuren-marken { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Die Marken behalten auf dem Bildschirm ihre Größe, wenn die Kamera die Bühne vergrößert (--s aus src/grabtuch.js) */
.spuren-marke { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 / var(--s, 1))); transition: transform .9s cubic-bezier(.3, .6, .2, 1), opacity .3s ease; }
.spuren-marke circle { fill: rgba(201, 162, 74, .22); stroke: var(--gold-hell); stroke-width: 7; transition: fill .3s ease; }
.spuren-marke text { font-family: var(--font-ui); font-size: 64px; font-weight: 700; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: rgba(8, 12, 34, .55); stroke-width: 8px; }
.spuren-marke:hover circle, .spuren-marke:focus-visible circle, .spuren-marke.ist-aktiv circle { fill: var(--kreuz); stroke: #fff; }
.spuren-marke:focus-visible { outline: none; }
.spuren.hat-spur .spuren-marke:not(.ist-aktiv) { opacity: .45; }
/* Nah: die Marke als Ring, damit sie die Spur nicht verdeckt */
.spuren.hat-spur .spuren-marke.ist-aktiv circle { fill: transparent; stroke: var(--kreuz); stroke-width: 9; }
.spuren.hat-spur .spuren-marke.ist-aktiv text { fill: var(--kreuz); stroke: rgba(255, 255, 255, .8); }
.spuren-legende { display: flex; justify-content: space-around; margin: .4rem auto 0; max-width: 24rem; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.spuren-nachweis { max-width: var(--breit); margin: 1rem auto 0; font-family: var(--font-ui); font-size: .75rem; line-height: 1.4; color: var(--ink-3); text-align: center; }
.spuren-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.spur {
  position: relative; padding: 1.25rem 1.25rem 1.1rem 3.6rem; border-radius: 16px; background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule); scroll-margin-top: 50vh; transition: box-shadow .3s ease, background-color .3s ease;
}
.spur.ist-aktiv, .spur:target { background: var(--gold-tint); box-shadow: inset 0 0 0 2px var(--gold-line); }
.spur-nr {
  position: absolute; left: 1rem; top: 1.2rem; margin: 0; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--night); color: var(--gold-hell); font-family: var(--font-ui); font-weight: 700; font-size: .9rem;
}
.spur.ist-aktiv .spur-nr { background: var(--kreuz); color: #fff; }
.spur-titel { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; }
.spur-vers { margin: 0; }
.spur-vers p { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 1.22rem; line-height: 1.4; color: var(--ink); }
.spur-stelle { margin: .2rem 0 .7rem; font-family: var(--font-ui); font-size: .82rem; }
.spur-befund, .spur-mehr { margin: 0 0 .55rem; font-size: 1rem; line-height: 1.62; hyphens: auto; -webkit-hyphens: auto; }
.spur-mehr { margin: 0; font-size: .94rem; color: var(--ink-2); }
.spur-art { display: block; margin-bottom: .15rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.spuren-schluss { margin-top: var(--luft); }
@media (max-width: 899px) {
  /* Schmal steht das Tuch oben über den Karten; gelesen wird darunter */
  .spur { scroll-margin-top: 62vh; }
}
@media (min-width: 900px) {
  .spuren { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: start; }
  .spuren-tuch { top: 4.6rem; padding: 0; background: none; box-shadow: none; }
  .teil--papier .spuren-tuch { background: none; }
  .spuren-fenster { height: auto; width: min(100%, calc((100vh - 10rem) * var(--format))); width: min(100%, calc((100svh - 10rem) * var(--format))); }
  .spur { scroll-margin-top: 30vh; }
  .spuren-liste { gap: 1.4rem; padding-bottom: 20vh; }
}
.spuren.ist-ruhig .spuren-buehne { transition: none; }
@media (prefers-reduced-motion: reduce) { .spuren-buehne, .spuren-marke { transition: none; } }
.spuren.ist-ruhig .spuren-marke { transition: none; }

/* ------------------------------------------------------------ Befunde und Erklärungen */
.befunde, .entstehung, .heute-liste { list-style: none; max-width: var(--breit); margin: 0 auto; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 700px) { .befunde, .heute-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .befunde { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .entstehung { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; } }
.js .befund.zeigen, .js .erklaerung.zeigen, .js .heute-karte.zeigen, .js .papst-wort.zeigen { transition-delay: calc(var(--i, 0) * .08s); }
.befund { padding: 1.1rem 1.15rem 1rem; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); border-top: 4px solid var(--gold); }
.befund-titel, .erklaerung-titel, .heute-titel { margin: 0 0 .45rem; font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.2; }
.befund-text { margin: 0 0 .6rem; font-size: .96rem; line-height: 1.58; hyphens: auto; -webkit-hyphens: auto; }
.befund-beleg { margin: 0; font-family: var(--font-ui); font-size: .78rem; color: var(--ink-3); }
.befunde + .leitvers { margin-top: var(--luft); }
.erklaerung { padding: 1.15rem 1.2rem 1rem; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.erklaerung p { margin: 0 0 .7rem; font-size: .95rem; line-height: 1.58; hyphens: auto; -webkit-hyphens: auto; }
.erklaerung p.erklaerung-art { margin: .2rem 0 .2rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); }
.erklaerung p.erklaerung-art + p + p.erklaerung-art { color: var(--ink-3); }

/* ------------------------------------------------------------ Diagramm der Datierungen */
.alter { max-width: var(--breit); margin: 0 auto var(--luft); }
.alter-rahmen { position: relative; padding: 1rem .6rem .4rem; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.alter-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.alter-bild { display: block; width: 100%; min-width: 38rem; height: auto; overflow: visible; }
.alter-gitter { stroke: var(--rule); stroke-width: 1; }
.alter-tick { font-family: var(--font-ui); font-size: 12px; fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.alter-marke { stroke: var(--ink-3); stroke-width: 1; opacity: .7; }
.alter-marke-text { font-family: var(--font-ui); font-size: 11.5px; font-weight: 600; fill: var(--ink-2); }
.alter-name { font-family: var(--font-ui); font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.alter-wert { font-family: var(--font-ui); font-size: 13px; fill: var(--ink-2); }
.alter-ziel { fill: transparent; transition: fill .2s ease; }
.alter-zeile { cursor: pointer; }
.alter-zeile:hover .alter-ziel, .alter-zeile.ist-aktiv .alter-ziel { fill: var(--gold-tint); }
.alter-zeile:focus { outline: none; }
.alter-zeile:focus-visible .alter-ziel { stroke: var(--gold-text); stroke-width: 2; }
.alter-balken { fill: var(--andere); }
.alter-zeile--c14 .alter-balken { fill: var(--c14); }
.alter-schraffur { fill: url(#alter-schraffur); }
.alter-schraffur-strich { fill: var(--sheet); opacity: .55; }
.alter-hinweis {
  position: absolute; z-index: 3; max-width: min(22rem, calc(100% - 1rem)); margin: 0; padding: .6rem .8rem; border-radius: 10px;
  background: var(--night); color: var(--auf-nacht); font-family: var(--font-ui); font-size: .84rem; line-height: 1.45;
  box-shadow: 0 10px 28px rgba(8, 12, 34, .3); pointer-events: none;
}
.alter figcaption { margin-top: .7rem; font-family: var(--font-ui); font-size: .82rem; line-height: 1.6; color: var(--ink-3); text-align: center; }
.alter-legende { display: inline-flex; flex-wrap: wrap; gap: .2rem .9rem; justify-content: center; margin-right: .4rem; color: var(--ink-2); }
.alter-schluessel { display: inline-block; width: 1.3rem; height: .7rem; margin-right: .3rem; vertical-align: -.02rem; border-radius: 3px; }
.alter-schluessel--c14 { background: var(--c14); }
.alter-schluessel--andere { background: var(--andere); }
.alter-schluessel--schraffiert { background: repeating-linear-gradient(45deg, var(--andere) 0 3px, color-mix(in srgb, var(--andere) 45%, var(--sheet)) 3px 6px); }
.alter-tabelle-rahmen { max-width: var(--mittel); margin: 0 auto var(--luft); overflow-x: auto; border-radius: 16px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.alter-tabelle td { font-family: var(--font-body); font-size: .94rem; line-height: 1.5; }
.alter-tabelle tbody th { width: 38%; }
.alter-tabelle tr:target { background: var(--gold-tint); }
.alter-tabelle tr { scroll-margin-top: 6rem; }

/* ------------------------------------------------------------ Funde nach Sicherheit */
.funde { max-width: var(--breit); margin: 0 auto; }
.wahl-zahl { margin-left: .2rem; padding: 0 .4rem; border-radius: 999px; background: var(--gold-tint); font-size: .78em; font-weight: 700; }
.wahl button[aria-pressed="true"] .wahl-zahl { background: rgba(236, 210, 142, .2); }
.funde-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 700px) { .funde-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .funde-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fund { --c: var(--sicher-belegt); padding: 1rem 1.05rem .95rem; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); border-left: 4px solid var(--c); }
.fund--umstritten { --c: var(--sicher-umstritten); }
.fund--offen { --c: var(--sicher-offen); }
.fund-sicher { margin: 0 0 .3rem; font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.fund-titel { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; }
.fund-wer { margin: .15rem 0 .45rem; font-family: var(--font-ui); font-size: .8rem; color: var(--ink-3); }
.fund-text { margin: 0; font-size: .93rem; line-height: 1.55; hyphens: auto; -webkit-hyphens: auto; }
.funde[data-gewaehlt="belegt"] .fund:not([data-sicher="belegt"]),
.funde[data-gewaehlt="umstritten"] .fund:not([data-sicher="umstritten"]),
.funde[data-gewaehlt="offen"] .fund:not([data-sicher="offen"]) { display: none; }
.funde.ist-bedienbar .fund { animation: tafel-auf .35s ease both; }

/* ------------------------------------------------------------ Der Weg des Tuchs */
.weg .zeit { max-width: var(--spalte); }
.weg-zeit--vermutet::after { display: none; }
.weg-zeit--vermutet::before { background: repeating-linear-gradient(to bottom, var(--rule-strong) 0 7px, transparent 7px 13px); }
.weg-zeit--vermutet .zeit-punkt::before, .weg-zeit--vermutet .zeit-punkt.ist-sichtbar::before { background: var(--paper); box-shadow: none; border-style: dashed; }
.weg-zeit--vermutet .zeit-jahr { color: var(--ink-3); }
.zeit-bild { max-width: 19rem; margin: .9rem 0 .2rem; }
.zeit-bild .gemaelde-rahmen { border-radius: 6px; }
.zeit-bild figcaption { margin-top: .45rem; font-family: var(--font-ui); font-size: .78rem; line-height: 1.45; color: var(--ink-2); }
.zeit-bild .nachweis { display: block; color: var(--ink-3); }

/* ------------------------------------------------------------ Die Päpste */
.papst-worte { list-style: none; max-width: var(--breit); margin: 0 auto 2rem; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 860px) { .papst-worte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } }
.papst-wort { display: flex; flex-direction: column; padding: 1.3rem 1.3rem 1.1rem; border-radius: 18px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(236, 210, 142, .2); }
.papst-wort blockquote { margin: 0 0 .8rem; }
.papst-wort blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; color: #fff; text-wrap: pretty; }
.papst-wer { margin: auto 0 .35rem; font-family: var(--font-ui); font-size: .85rem; font-weight: 700; letter-spacing: .03em; color: var(--gold-hell); }
.papst-wort blockquote + .papst-wer { margin-top: 0; }
.papst-hinweis { font-weight: 500; color: var(--auf-nacht-3); }
.papst-text { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--auf-nacht-2); }
.nacht .papst-text a { color: var(--gold-hell); }
.nacht-satz { max-width: var(--spalte); margin: 0 auto; text-align: center; color: var(--auf-nacht); line-height: 1.65; }

/* ------------------------------------------------------------ Das Tuch heute */
.heute-liste { margin-top: var(--luft); }
.heute-karte { padding: 1.15rem 1.2rem 1rem; border-radius: 16px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--rule); }
.heute-karte p { margin: 0; font-size: .97rem; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; }

/* ------------------------------------------------------------ Sehen und hören */
.sehen-liste { list-style: none; max-width: var(--breit); margin: 0 auto; padding: 0; display: grid; gap: .8rem; }
@media (min-width: 640px) { .sehen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sehen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sehen-link {
  display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: .8rem; height: 100%;
  padding: .95rem 1rem; border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule);
  color: inherit; text-decoration: none; transition: box-shadow .2s ease, transform .2s ease;
}
.sehen-link:hover { box-shadow: inset 0 0 0 2px var(--gold-line); transform: translateY(-2px); }
.sehen-link:focus-visible { outline-color: var(--gold-text); }
.sehen-symbol { grid-row: span 3; display: grid; place-items: start center; padding-top: .1rem; color: var(--kreuz); }
.sehen-symbol svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sehen-symbol .symbol-voll { fill: currentColor; stroke: none; }
.sehen-art { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sehen-titel { margin: .1rem 0 .2rem; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.25; }
.sehen-wer { font-family: var(--font-ui); font-size: .82rem; line-height: 1.45; color: var(--ink-2); }

@media (forced-colors: active) {
  .alter-balken, .alter-schluessel { forced-color-adjust: none; }
  .spuren-marke circle { stroke: CanvasText; }
}