/* Seite /fruehe-kirche/ (scripts/kirchengeschichte.mjs): Zeugnisse der frühen Kirche als Zeitleiste in einer
   ruhigen Lesespalte, davor die Kette der Zeugen und die Übersicht mit Themen (src/themen.js). Verweise (Bibel,
   Katechismus, Kirchenväter, Päpste) öffnen die Vorschau (src/vorschau.css); Teilen: src/teilen.css. */
.kg {
  max-width: calc(var(--measure) + var(--margin-col)); margin: 0 auto;
  padding: 0 max(1.25rem, env(safe-area-inset-right, 0px)) 0 max(1.25rem, env(safe-area-inset-left, 0px));
}
.prose { max-width: var(--measure); min-width: 0; }
.prose p { margin: 0 0 1em; line-height: 1.68; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; text-wrap: pretty; }
.prose strong { font-family: var(--font-ui); font-weight: 650; font-size: .96em; letter-spacing: .005em; }
.prose-list { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: .7em; }
.prose-list li { position: relative; padding-left: 1.1em; line-height: 1.6; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.prose-list li::before { content: ""; position: absolute; left: .05em; top: .68em; width: .38em; height: .38em; border-radius: 50%; background: var(--ink-3); }
.kg-einleitung { color: var(--ink-2); }

/* Kästen über der Zeitleiste: Kette der Zeugen und Übersicht */
.kette, .kg-uebersicht { max-width: var(--measure); border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.kette-titel, .kg-uebersicht-titel { margin: 0 0 .6rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }

/* Die Kette der Zeugen: Lebenszeiten auf einer gemeinsamen Achse; das Band zeigt die Zeit der Apostel (--band-l,
   --band-w), auslaufende Balken ein unsicheres Geburtsjahr (--f: Anteil des Auslaufs) */
.kette { margin: 1.5rem 0 1rem; padding: 1.1rem 1.15rem 1rem; }
.kette-titel { margin-bottom: .15rem; }
.kette-zeile { margin: 0 0 .7rem; font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-3); }
.kette-reihen { list-style: none; margin: 0; padding: 0; }
.kette-reihe, .kette-achse { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.3; }
.kette-reihe { padding: .3rem 0 .1rem; }
.kette-name { font-weight: 600; color: var(--ink); }
.kette-jahre { color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kette-rolle { color: var(--ink-3); }
.kette-spur {
  position: relative; display: block; height: .9rem; margin-top: .2rem;
  background: linear-gradient(to right, transparent var(--band-l), var(--gold-tint) var(--band-l), var(--gold-tint) calc(var(--band-l) + var(--band-w)), transparent calc(var(--band-l) + var(--band-w)));
}
.kette-balken { position: absolute; top: 50%; left: var(--l); width: var(--w); height: .5rem; margin-top: -.25rem; border-radius: 4px; background: var(--green); }
.kette-balken--auslauf { background: linear-gradient(to right, color-mix(in srgb, var(--green) 0%, transparent), var(--green) var(--f)); }
.kette-achse .kette-spur { height: 1.35rem; margin-top: .35rem; background: none; border-top: 1px solid var(--rule-strong); }
.kette-marke { position: absolute; top: .3rem; left: var(--x); transform: translateX(-50%); font-size: .72rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kette-marke::before { content: ""; position: absolute; left: 50%; top: -.42rem; height: .3rem; border-left: 1px solid var(--rule-strong); }
.kette figcaption { margin-top: .6rem; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.5; color: var(--ink-2); }
.kette figcaption p { margin: .45rem 0 0; }
.kette-legende { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; color: var(--ink-3); }
.kette-legende-eintrag { white-space: nowrap; }
.kette-legende-band, .kette-legende-auslauf { display: inline-block; vertical-align: -.05rem; margin-right: .35rem; }
.kette-legende-band { width: 1rem; height: .7rem; border-radius: 2px; background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold-line); }
.kette-legende-auslauf { width: 1.6rem; height: .5rem; border-radius: 4px; background: linear-gradient(to right, color-mix(in srgb, var(--green) 0%, transparent), var(--green)); }
@media (min-width: 600px) {
  .kette-reihe, .kette-achse { grid-template-columns: 14.5rem minmax(0, 1fr); column-gap: .9rem; }
  .kette-reihe .kette-spur { margin-top: 0; }
  .kette-achse .kette-spur { grid-column: 2; }
}

/* Verzeichnis (#verzeichnis): Kette, alle Zeugnisse mit Zeitangabe und Themen, die Abschnitte danach. Auf breiten
   Bildschirmen läuft es rechts mit (unten), src/verzeichnis.js markiert den gelesenen Abschnitt. */
.kg-uebersicht { margin: 1rem 0 1rem; padding: 1.1rem 1.15rem .9rem; }
.kg-uebersicht ol, .kg-teile { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.kg-uebersicht a { color: inherit; text-decoration: none; font-family: var(--font-ui); border-radius: 8px; }
.kg-liste a, .kg-teile a { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .6rem; padding: .36rem .45rem; margin: 0 -.45rem; font-size: .9rem; line-height: 1.35; }
.kg-teile a { grid-template-columns: minmax(0, 1fr); }
.kg-uebersicht a:hover { background: var(--green-tint); }
.kg-uebersicht a.is-current { background: var(--green-tint); box-shadow: inset 3px 0 0 var(--green); }
.kg-zwischentitel { margin: 1rem 0 .45rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.kg-zwischentitel a { color: var(--ink-3); padding: .1rem .2rem; margin: 0 -.2rem; }
.kg-zwischentitel a:hover { color: var(--ink); }
.kg-zeit { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.kg-zeit--folge { visibility: hidden; }
body:has(.kg[data-thema]) .kg-zeit--folge { visibility: visible; color: var(--ink-3); }
@media (max-width: 480px) {
  .kg-liste a { grid-template-columns: 1fr; gap: 0; }
  .kg-zeit--folge { display: none; }
  body:has(.kg[data-thema]) .kg-zeit--folge { display: inline; }
}
.kg-themen { display: flex; flex-wrap: wrap; gap: .4rem; max-width: var(--measure); margin: 1.5rem 0 .25rem; }
.kg-themen-titel { flex-basis: 100%; margin: 0 0 .15rem; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.kg-themen[hidden] { display: none; }
.kg-themen button {
  display: inline-flex; align-items: baseline; gap: .35em; min-height: 2rem; padding: .32rem .72rem; border: 0; border-radius: 999px;
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 600; line-height: 1.2; color: var(--ink-2);
  background: transparent; box-shadow: inset 0 0 0 1px var(--rule-strong); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.kg-themen button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--green-line); background: var(--green-tint); }
.kg-themen button[aria-pressed="true"] { color: var(--sheet); background: var(--green); box-shadow: none; }
@media (max-width: 480px) {
  .kg-themen { gap: .3rem; }
  .kg-themen button { min-height: 1.85rem; padding: .26rem .6rem; font-size: .78rem; }
}
.kg-anzahl { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.kg-themen button[aria-pressed="true"] .kg-anzahl { color: inherit; }

/* Zeile „Quellen“ und „Im Anhang“ unter einem Eintrag */
.sources { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: 1.25rem 0 0; }
.sources-label { font-family: var(--font-ui); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.anhang-chip {
  display: inline-flex; align-items: center; gap: .4em; padding: .38em .7em .38em .45em; border-radius: 999px;
  font-family: var(--font-ui); font-weight: 600; font-size: .8125rem; letter-spacing: .02em; line-height: 1.2;
  color: var(--c); background: var(--c-tint); text-decoration: none; box-shadow: inset 0 0 0 1px var(--c-line);
}
.anhang-chip:hover { box-shadow: inset 0 0 0 1.5px var(--c); }
.anhang-chip[aria-expanded="true"] { background: var(--c); color: var(--sheet); box-shadow: none; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.anhang-chip .icon path { stroke: currentColor; }

/* Die Zeitleiste. Die Zeitangabe steht in der Überschrift; übernommene (Einträge ohne eigene) erscheinen nur, solange
   ein Thema gewählt ist, Bildschirmleser lesen sie immer. */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: .4rem; top: .75rem; bottom: 1.5rem; width: 2px; background: linear-gradient(var(--green-line), var(--rule)); }
.tl-item { position: relative; padding: 1.4rem 0 1.25rem 2.1rem; scroll-margin-top: 4.5rem; }
.tl-item::before { content: ""; position: absolute; left: .4rem; top: 1.95rem; width: .8rem; height: .8rem; margin-left: -.35rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--green); }
.tl-item--dated::before { top: 1.55rem; background: var(--green); box-shadow: 0 0 0 4px var(--paper); }
.tl-title { margin: 0 0 .9rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.65rem); line-height: 1.2; border-radius: 6px; }
.tl-date { display: block; margin: 0 0 .3rem; font-family: var(--font-ui); font-size: .8125rem; font-weight: 600; letter-spacing: .05em; line-height: 1.4; color: var(--green); font-variant-numeric: tabular-nums; }
.tl-trenner, .tl-date--folge {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kg[data-thema] .tl-date--folge { position: static; width: auto; height: auto; margin: 0 0 .3rem; overflow: visible; clip: auto; white-space: normal; color: var(--ink-3); }
.kg[data-thema] .tl-item::before { top: 1.55rem; }
.tl-person { margin: -.4rem 0 .95rem; max-width: var(--measure); font-family: var(--font-ui); font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
.tl-person-name { font-weight: 600; color: var(--ink); }
/* Kernsatz des Zeugnisses im Wortlaut */
.tl-zitat { margin: 0 0 1.15rem; max-width: var(--measure); }
.tl-zitat blockquote { margin: 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--green-line); }
.tl-zitat blockquote p { margin: 0; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.45; color: var(--ink); text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.tl-zitat figcaption { margin: .45rem 0 0 1rem; font-family: var(--font-ui); font-size: .8125rem; }
@keyframes target-flash { from { background-color: var(--green-tint); box-shadow: 0 0 0 .35rem var(--green-tint); } }
.tl-item:target .tl-title { animation: target-flash 2.4s ease-out .3s backwards; }

/* Foto unter der Überschrift (Bild: …); Antippen vergrößert (src/gross.js, src/gross.css) */
.tl-bild { margin: 0 0 1.15rem; max-width: var(--measure); }
.tl-bild .gross-link { display: block; position: relative; overflow: hidden; border-radius: 12px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.tl-bild picture, .tl-bild img { display: block; width: 100%; height: auto; }
.tl-bild--hoch { max-width: 24rem; }
.tl-bild figcaption { margin-top: .45rem; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.45; color: var(--ink-2); }
.tl-bild .nachweis, .kette .nachweis { color: var(--ink-3); }

/* Was die Zeugnisse zeigen: nach der Zeitleiste */
.kg-schluss { margin: 1.5rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.kg-argument { margin-top: 2rem; scroll-margin-top: 4.5rem; }
.kg-argument-titel { margin: 0 0 .75rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.55rem); line-height: 1.2; scroll-margin-top: 4.5rem; }
.kg-argument .tl-zitat { margin-bottom: 1rem; }

/* Karte der Orte (Karte: …): Küsten aus data/karte.json, Punkte führen zum ersten Zeugnis des Ortes */
.karte { margin: 1.25rem 0 1.5rem; padding: 1rem 1rem .85rem; border-radius: 14px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--rule); }
.karte svg { display: block; width: 100%; height: auto; margin: .3rem 0 0; border-radius: 8px; background: color-mix(in srgb, var(--green) 7%, var(--sheet)); }
.karte-land { fill: var(--paper); stroke: var(--rule-strong); stroke-width: 1; stroke-linejoin: round; }
.karte-punkt { fill: var(--green); stroke: var(--sheet); stroke-width: 3; }
.karte-name { font-family: var(--font-ui); font-size: 22px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.karte a:hover .karte-punkt, .karte a:focus-visible .karte-punkt { fill: var(--ink); }
.karte a:hover .karte-name, .karte a:focus-visible .karte-name { text-decoration: underline; }
.karte a:focus-visible { outline: none; }
.karte a:focus-visible .karte-punkt { stroke: var(--ink); stroke-width: 4; }
.karte figcaption { margin-top: .5rem; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 600px) {
  .karte { padding: .85rem .75rem .75rem; margin-inline: -.25rem; }
  .karte-name { font-size: 34px; stroke-width: 7px; }
  .karte-punkt { r: 10; }
}
@media (forced-colors: active) { .karte-land { fill: Canvas; stroke: CanvasText; } .karte-punkt { fill: LinkText; } .karte-name { fill: LinkText; stroke: none; } }

.kg-schluss-titel { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1.15; scroll-margin-top: 4.5rem; }

@media (min-width: 820px) {
  .kg-einleitung, .kette, .kg-uebersicht, .kg-themen, .kg-schluss { margin-left: var(--margin-col); }
  .timeline::before { left: calc(var(--margin-col) - 1.1rem); }
  .tl-item { padding-left: var(--margin-col); }
  .tl-item::before { left: calc(var(--margin-col) - 1.1rem); }
}
/* Kopf des Verzeichnisses; der Schließen-Knopf erscheint nur im Dialog (src/verzeichnis.js) */
.kg-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.kg-schliessen {
  display: none; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; padding: 0; border-radius: 50%;
  border: 1px solid var(--rule-strong); background: var(--sheet); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer;
}
/* Schmale Bildschirme: das Verzeichnis als Dialog über der Seite, wie das Inhaltsverzeichnis der Rezensionen */
.kg-dialog {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  color: var(--ink); background: var(--sheet); overscroll-behavior: contain;
}
.kg-dialog::backdrop { background: var(--backdrop); }
.kg-dialog .kg-uebersicht {
  max-width: 40rem; margin: 0 auto; border-radius: 0; background: transparent; box-shadow: none;
  padding: env(safe-area-inset-top, 0px) max(1.25rem, env(safe-area-inset-right, 0px)) calc(2rem + env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
}
.kg-dialog .kg-kopf { position: sticky; top: 0; z-index: 1; margin: 0 0 .4rem; padding: .9rem 0 .6rem; background: var(--sheet); border-bottom: 1px solid var(--rule); }
.kg-dialog .kg-uebersicht-titel { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink); }
.kg-dialog .kg-schliessen { display: inline-grid; }
.kg-dialog .kg-liste a, .kg-dialog .kg-teile a { scroll-margin-top: 5rem; }

/* Breite Bildschirme: das Verzeichnis läuft rechts neben dem Text mit */
@media (min-width: 1180px) {
  .kg { display: grid; grid-template-columns: minmax(0, calc(var(--measure) + var(--margin-col))) 16.5rem; column-gap: 2.75rem; max-width: calc(var(--measure) + var(--margin-col) + 19.25rem); }
  .kg > * { grid-column: 1; }
  .kg > .kg-uebersicht {
    grid-column: 2; grid-row: 1 / span 6; align-self: start; position: sticky; top: 4.75rem;
    max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain;
    margin: .5rem 0 2rem; padding: .95rem .95rem .8rem; scrollbar-width: thin;
  }
  .kg-uebersicht .kg-liste a { grid-template-columns: 4.6rem minmax(0, 1fr); gap: .45rem; font-size: .8125rem; padding: .3rem .4rem; margin: 0 -.4rem; }
  .kg-uebersicht .kg-teile a { font-size: .8125rem; padding: .3rem .4rem; margin: 0 -.4rem; }
  .kg-uebersicht .kg-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .tl-item:target .tl-title { animation: none; } }
@media (forced-colors: active) {
  .kette-balken, .kette-legende-auslauf { background: CanvasText; forced-color-adjust: none; }
  .kg-themen button[aria-pressed="true"] { outline: 2px solid CanvasText; }
}