/* Vorschau der Verweise: Bibelstellen, Katechismus, Buchzitate, Kirchenväter. Ein Verweis (.ref) öffnet die
   Quelle im Wortlaut, am Computer als Sprechblase am Verweis, auf dem Handy als Blatt von unten (src/vorschau.js).
   Gemeinsam für die Rezension und die Seiten von tuespetrus.de; steht vor src/styles.css, damit die Kapseln
   der Rezension (.page-chip, .anhang-chip) die Grundform der Verweise weiter anpassen können. */

/* ------------------------------------------------------------ Verweise */
/* Im Fließtext zurückhaltend: Schriftfarbe wie der Satz, nur eine feine farbige Unterstreichung
   zeigt die Art (rot Bibel, violett Katechismus, grün Kirchenväter). Die Seitenangaben bleiben Kapseln.
   Verweise sind Links mit der Quelle als Adresse (scripts/verweise.mjs, verweisLink()); als inline-block brechen sie
   wie ein Wort nur als Ganzes um. */
.ref {
  display: inline-block; -webkit-appearance: none; appearance: none;
  font: inherit; line-height: inherit; letter-spacing: inherit; font-variant-numeric: lining-nums;
  color: inherit; background: transparent;
  border: 0; border-radius: .2em; margin: 0; padding: 0;
  text-decoration-line: underline; text-decoration-color: var(--c-line);
  text-decoration-thickness: 1px; text-underline-offset: .24em;
  white-space: nowrap; cursor: pointer; text-align: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, text-decoration-color .15s ease, box-shadow .15s ease;
}
.ref:hover { color: var(--c); text-decoration-color: var(--c); }
.ref:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.ref[aria-expanded="true"] { color: var(--c); background: var(--c-tint); box-shadow: 0 0 0 .18em var(--c-tint); text-decoration-color: var(--c); }
.ref--bibel { --c: var(--rubric); --c-tint: var(--rubric-tint); --c-line: var(--rubric-line); }
.ref--kkk { --c: var(--violet); --c-tint: var(--violet-tint); --c-line: var(--violet-line); }
.ref--buch { --c: var(--ochre); --c-tint: var(--ochre-tint); --c-line: var(--ochre-line); }
.ref--online { --c: var(--ochre); --c-tint: var(--ochre-tint); --c-line: var(--ochre-line); }
/* Belege aus dem Original im Text: notfalls umbrechen statt über den Rand zu ragen */
.ref--online:not(.page-chip) { white-space: normal; max-width: 100%; }
.ref--vater { --c: var(--green); --c-tint: var(--green-tint); --c-line: var(--green-line); }
.ref--anhang { --c: var(--green); --c-tint: var(--green-tint); --c-line: var(--green-line); }
.ref--ds { --c: var(--violet); --c-tint: var(--violet-tint); --c-line: var(--violet-line); }
.ref--ger { --c: var(--violet); --c-tint: var(--violet-tint); --c-line: var(--violet-line); }
.ref--lehramt { --c: var(--violet); --c-tint: var(--violet-tint); --c-line: var(--violet-line); }
.ref--papst { --c: var(--gold-text); --c-tint: rgba(154, 118, 36, .12); --c-line: var(--gold-line); }

/* ------------------------------------------------------------ Vorschau */
.pv-layer { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.pv {
  --c: var(--ink-2);
  position: fixed; left: 0; top: 0; pointer-events: auto;
  margin: 0; padding: 0;
  overflow: visible;
  width: min(29rem, calc(100vw - 1.5rem)); max-width: none; max-height: min(36rem, 72vh);
  display: flex; flex-direction: column;
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--rule-strong); border-radius: 14px; box-shadow: var(--shadow);
  opacity: 0; transform: translateY(6px) scale(.985); transform-origin: top center;
  transition: opacity .16s ease, transform .16s ease;
  outline: none;
}
.pv:not([open]) { display: none; }
.pv::backdrop { background: var(--backdrop); }
.pv-title:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.pv[data-side="top"] { transform-origin: bottom center; }
.pv-layer.is-open .pv { opacity: 1; transform: none; }
.pv[data-kind="bibel"] { --c: var(--rubric); --c-tint: var(--rubric-tint); }
.pv[data-kind="kkk"] { --c: var(--violet); --c-tint: var(--violet-tint); }
.pv[data-kind="buch"] { --c: var(--ochre); --c-tint: var(--ochre-tint); }
.pv[data-kind="online"] { --c: var(--ochre); --c-tint: var(--ochre-tint); }
.pv[data-kind="vater"] { --c: var(--green); --c-tint: var(--green-tint); }
.pv[data-kind="anhang"] { --c: var(--green); --c-tint: var(--green-tint); }
.pv[data-kind="ds"] { --c: var(--violet); --c-tint: var(--violet-tint); }
.pv[data-kind="ger"] { --c: var(--violet); --c-tint: var(--violet-tint); }
.pv[data-kind="lehramt"] { --c: var(--violet); --c-tint: var(--violet-tint); }
.pv[data-kind="papst"] { --c: var(--gold-text); --c-tint: rgba(154, 118, 36, .12); }
.pv-grip { display: none; }
.pv-head { position: relative; padding: .95rem 3.25rem .75rem 1.15rem; border-bottom: 1px solid var(--rule); }
.pv-kind {
  display: flex; align-items: center; gap: .45rem; margin: 0 0 .3rem;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c);
}
.pv-kind::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); flex: none; }
.pv-title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; }
.pv-close {
  position: absolute; top: .6rem; right: .6rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 0; background: transparent; color: var(--ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.pv-close:hover { background: var(--rule); color: var(--ink); }
.pv-body {
  overflow-y: auto; overscroll-behavior: contain; padding: .9rem 1.15rem .6rem;
  font-size: 1rem; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto;
}
.pv-body p { margin: 0 0 .7rem; }
.pv-note { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-2); }
.pv-role { padding-bottom: .6rem; border-bottom: 1px solid var(--rule); }
.pv-verses { margin: 0 0 .7rem; }
.pv-verse sup {
  font-family: var(--font-ui); font-size: .66em; font-weight: 600; color: var(--c);
  vertical-align: .5em; line-height: 0; margin-right: .18em; font-variant-numeric: tabular-nums;
}
.pv-verses--poetry .pv-verse { display: block; margin-bottom: .45rem; padding-left: .9rem; text-indent: -.9rem; }
.pv-chapter {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin: .9rem 0 .35rem !important;
}
.pv-chapter:first-child { margin-top: 0 !important; }
.pv-gap { color: var(--ink-3); margin: -.2rem 0 .5rem !important; letter-spacing: .2em; }
.pv-para { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: .55rem; margin-bottom: .6rem; }
.pv-para p { margin: 0 0 .35rem; }
.pv-num {
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem; color: var(--c);
  padding-top: .22rem; font-variant-numeric: tabular-nums;
}
.pv-para--stack { display: block; }
.pv-para--stack .pv-num { display: block; padding: 0; margin-bottom: .1rem; }
/* Stellenangabe als Link (Auszüge aus mehreren Kapiteln): nur die Angabe selbst ist anklickbar */
.pv-para--stack a.pv-num { display: table; }
.pv-sub {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin: .15rem 0 .2rem !important;
}
.pv-quote { margin: 0 0 .9rem; padding: .1rem 0 .1rem .9rem; border-left: 3px solid var(--c); }
.pv-quote p { margin: 0; }
.pv-quote cite {
  display: block; margin-top: .35rem; font-style: normal; font-family: var(--font-ui);
  font-size: .78rem; font-weight: 600; color: var(--c);
}
.elide { color: var(--ink-3); white-space: nowrap; }
.pv-foot {
  padding: .7rem 1.15rem .95rem; border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: .78rem; line-height: 1.45; color: var(--ink-3);
}
.pv-foot p { margin: 0; }
.pv-source-note { color: var(--ink-2); margin-bottom: .25rem !important; }
.pv-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem !important; }
.pv-links a {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.1rem;
  padding: .3rem .75rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .8rem;
}
.pv-links a:hover { border-color: var(--c); color: var(--c); }
.pv-links .pv-jump { border-color: var(--c); color: var(--c); background: var(--c-tint); }
.pv-links .pv-jump:hover { background: var(--c); color: var(--sheet); }
.pv-ext { width: .7em; height: .7em; flex: none; }
.pv-arrow {
  position: absolute; left: 1.5rem; width: 14px; height: 14px; background: var(--sheet);
  border: 1px solid var(--rule-strong); transform: rotate(45deg); pointer-events: none;
}
.pv[data-side="bottom"] .pv-arrow { top: -8px; border-right: 0; border-bottom: 0; }
.pv[data-side="top"] .pv-arrow { bottom: -8px; border-left: 0; border-top: 0; }

@media (max-width: 759px) {
  .pv {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100%;
    max-height: 84vh; max-height: 84dvh;
    border-radius: 18px 18px 0 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
    opacity: 1;
  }
  .pv-layer.is-open .pv { transform: translateY(0); }
  .pv-arrow { display: none; }
  .pv-grip { display: block; width: 2.6rem; height: 4px; border-radius: 2px; background: var(--rule-strong); margin: .6rem auto 0; flex: none; }
  .pv-head { padding-top: .6rem; }
  .pv-body { font-size: 1.02rem; }
}

/* ------------------------------------------------------------ Papst: Steckbrief (Daten aus data/paepste.json) */
.pv-papst { display: flex; align-items: center; gap: .9rem; margin: 0 0 .9rem; }
.pv-papst-bild { flex: none; width: 4.5rem; height: 4.5rem; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(40, 28, 6, .3)); }
.pv-papst-ohne {
  flex: none; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; padding: .45rem; text-align: center;
  background: radial-gradient(circle at 50% 35%, #2c4aa0, #142761); box-shadow: inset 0 0 0 3px #c99b3c, inset 0 0 0 5px #6f5520;
  color: #ecd28e; font-family: var(--font-kapitalis, serif); font-size: .56rem; line-height: 1.15; letter-spacing: .04em;
}
.pv-body .pv-papst-lat { margin: 0; font-family: var(--font-kapitalis, serif); font-size: .9rem; letter-spacing: .08em; color: var(--ink-2); }
.pv-papst-daten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .9rem; margin: 0 0 .8rem; font-family: var(--font-ui); font-size: .88rem; }
.pv-papst-daten dt { color: var(--ink-3); }
.pv-papst-daten dd { margin: 0; color: var(--ink); }
.pv-papst-daten small { display: block; font-size: .75rem; color: var(--ink-3); }
.pv-body .pv-papst-notiz { margin: 0; padding-top: .7rem; border-top: 1px solid var(--rule); font-size: .95rem; line-height: 1.55; }