/* Themenseiten von tuespetrus.de (bisher /name-fels-schluessel/: Mt 16,18–19 lateinisch und deutsch mit Erklärungen).
   Kopf auf Papier (auf /name-fels-schluessel/, /papstliste/, /petersdom/ und /fruehe-kirche/ über einem Foto) mit dem
   Inschriftenband aus Goldmosaik, darunter der Text in einer Lesespalte bzw. zwei Spalten nebeneinander. Gemeinsame
   Bausteine (Abschnittsköpfe, Einblenden, Knopf) stehen in site.css. */
.artikel { background: var(--paper); }
.artikel main { display: block; overflow-x: clip; }
.artikel-kopf {
  max-width: 46rem; margin: 0 auto; text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) max(1.25rem, env(safe-area-inset-right, 0px)) clamp(1.75rem, 4vw, 2.5rem) max(1.25rem, env(safe-area-inset-left, 0px));
}
.artikel-kopf .tp-pfad ol { justify-content: center; }
.artikel-kopf .eyebrow { color: var(--gold-text); }
.artikel-titel, .artikel-untertitel { font-family: var(--font-display); font-weight: 500; }
.artikel-titel { margin: 0; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4rem); line-height: 1.04; letter-spacing: -.01em; }
/* Zweite Zeile der Seitenüberschrift (<hgroup>): Die Überschrift beginnt mit dem Namen aus der Adresse
   (/papstliste/ → „Papstliste“), darunter steht, worum es geht. Halb so groß wie die Überschrift. Sie steht neben der
   <h1>, nicht darin: Safaris Reader nimmt die ganze <h1> als Titel und lässt dann Zwischenüberschriften weg, die ihm
   ähneln (auf /fruehe-kirche/ zwei Einträge der Zeitleiste). */
.artikel-untertitel { margin: .5rem 0 0; font-size: clamp(1.15rem, .75rem + 1.7vw, 2rem); font-style: italic; line-height: 1.2; color: var(--ink-2); text-wrap: balance; }
.artikel-lead { margin: 1.1rem auto 0; max-width: 38rem; font-size: 1.1em; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* Kopf über einem Foto, wie das Titelbild der Startseite: auf /name-fels-schluessel/ der Fries der Kuppel mit Kreuz und
   „TV ES PETRVS“, auf /papstliste/ das Band der Papstbildnisse in St. Paul vor den Mauern und über „Die ganze Reihe“
   drei dieser Bildnisse (dort mit .abschnitt-kopf statt .artikel-kopf), auf /petersdom/ die Kuppel mit den Lichtbahnen
   (Foto und Verlauf dort in src/ort.css, weil das Foto beim Scrollen stehen bleibt), auf /fruehe-kirche/ das Apsismosaik
   von Santa Pudenziana in Rom (um 400). Nach unten geht das Foto in Nachtblau über, darauf Titel und Vorspann. --oben
   ist der Platz über dem Text; das Foto reicht etwas weiter hinab und wird dort ganz dunkel. */
.foto-kopf {
  --oben: clamp(17rem, 10rem + 14vw, 24rem);
  position: relative; isolation: isolate; overflow: hidden; background: var(--night); color: var(--auf-nacht);
}
.foto-kopf-bild { position: absolute; inset: 0 0 auto; z-index: -1; height: calc(var(--oben) * 1.85); }
.foto-kopf-bild picture, .foto-kopf-foto { display: block; width: 100%; height: 100%; }
.foto-kopf-foto { object-fit: cover; }
.foto-kopf-bild::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 34, .5) 0%, rgba(8, 12, 34, .06) 20%, rgba(8, 12, 34, .1) 44%, rgba(8, 12, 34, .82) 58%, var(--night) 82%);
}
.foto-kopf :is(.artikel-kopf, .abschnitt-kopf) { padding-top: var(--oben); text-shadow: 0 2px 20px rgba(0, 0, 0, .55); }
.foto-kopf .tp-pfad { color: var(--auf-nacht-3); }
.foto-kopf .tp-pfad a { color: var(--auf-nacht-2); }
.foto-kopf .tp-pfad a:hover { color: var(--gold-hell); }
.foto-kopf .tp-pfad li + li::before { color: var(--auf-nacht-3); }
.foto-kopf .eyebrow { color: var(--gold-hell); }
.foto-kopf :is(.artikel-titel, .abschnitt-titel) { color: #fff; }
.foto-kopf .artikel-untertitel { color: var(--auf-nacht-2); }
.foto-kopf :is(.artikel-lead, .abschnitt-lead) { color: var(--auf-nacht); }
/* Verweise auf dunklem Grund: Gold statt der Farbe der Art (wie auf /petersdom/) */
.foto-kopf .ref { --c: var(--gold-hell); --c-line: rgba(236, 210, 142, .5); --c-tint: rgba(236, 210, 142, .16); }
.foto-kopf-nachweis { margin: 1.6rem 0 0; font-family: var(--font-ui); font-size: .72rem; line-height: 1.45; color: rgba(242, 236, 221, .66); }
.foto-kopf-nachweis a { color: inherit; text-decoration-color: currentColor; text-underline-offset: .15em; }

/* Die Inschrift als Goldmosaik mit blauen Mosaikbuchstaben, wie im Fries der Kuppel */
.inschrift { margin: 0 0 clamp(2.5rem, 6vw, 4rem); }
.inschrift-band {
  position: relative; overflow: hidden; background-color: var(--gold); background-size: 150px auto;
  border-block: 3px solid #6f5520; padding: clamp(.7rem, 2vw, 1.2rem) max(1rem, env(safe-area-inset-left, 0px));
  box-shadow: inset 0 10px 18px rgba(60, 38, 6, .35), inset 0 -10px 18px rgba(60, 38, 6, .35);
  text-align: center;
}
.inschrift-zeile {
  margin: 0 auto; max-width: 72rem; font-family: var(--font-kapitalis); font-weight: 700; font-kerning: none;
  font-size: clamp(1.35rem, 3.4vw, 2.6rem); line-height: 1.3; letter-spacing: .07em; color: var(--lapis); text-wrap: balance;
}
.inschrift-zeile .kreuz { display: inline-block; vertical-align: -.04em; margin-right: .35em; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .inschrift-zeile .mosaik-blau {
    color: transparent; background-size: 70px auto; -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 1px 0 rgba(255, 240, 200, .45)) drop-shadow(0 -1px 0 rgba(40, 24, 2, .25));
  }
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .inschrift-zeile .mosaik-blau { background: none; }
}
.inschrift figcaption {
  max-width: 40rem; margin: 1rem auto 0; padding: 0 1.25rem; text-align: center;
  font-family: var(--font-ui); font-size: .9rem; line-height: 1.5; color: var(--ink-3);
}
.inschrift figcaption a { color: var(--ink-2); text-decoration-color: var(--gold-line); text-underline-offset: .18em; }
/* ------------------------------------------------------------ Mt 16,18–19 nebeneinander */
.wort-abschnitt {
  padding: 0 max(1.25rem, env(safe-area-inset-right, 0px)) clamp(3rem, 7vw, 5rem) max(1.25rem, env(safe-area-inset-left, 0px));
}
.wort-texte { max-width: 72rem; margin: 0 auto; display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .wort-texte { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
.wort-text {
  position: relative; margin: 0; padding: 1.9rem 1.6rem 1.6rem; overflow: hidden;
  background: var(--sheet); border: 1px solid var(--rule); border-radius: 18px;
}
.wort-text::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background-color: var(--gold); background-size: 96px auto; }
.wort-text figcaption {
  margin-bottom: .9rem; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-text);
}
.wort-text figcaption span { font-weight: 500; letter-spacing: .03em; text-transform: none; color: var(--ink-3); }
.wort-text blockquote { margin: 0; }
.wort-text p { margin: 0; font-size: clamp(1.08rem, 1rem + .35vw, 1.26rem); line-height: 1.75; hyphens: auto; -webkit-hyphens: auto; }
.wort-text--la p { font-family: var(--font-display); font-size: clamp(1.18rem, 1.05rem + .45vw, 1.42rem); line-height: 1.68; }
/* EB Garamond setzt für Latein sonst „qvia“, „Petrvs“ (klassisches V für U); die Vulgata von 1592 schreibt u */
.wort-text--la { font-feature-settings: "locl" 0; }
.wort-text sup { font-family: var(--font-ui); font-size: .6em; font-weight: 700; color: var(--gold-text); margin: 0 .25em 0 .1em; }
.paar {
  border-radius: .25em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.paar.im-fries { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: .1em; text-underline-offset: .24em; }
.paar.ist-aktiv { background: var(--gold-tint); box-shadow: 0 0 0 .16em var(--gold-tint); }
.wort-hinweis {
  max-width: 46rem; margin: 1.3rem auto 0; text-align: center; font-family: var(--font-ui); font-size: .875rem; line-height: 1.5; color: var(--ink-3);
}
.wort-hinweis-muster { display: inline-block; width: 1.8em; height: .6em; margin-right: .5em; border-bottom: .14em solid var(--gold); vertical-align: .15em; }
/* Erklärungen untereinander, jede eine Zeile aus Bild und Text: auf dem Handy das Bild über dem Text, auf breiten
   Bildschirmen daneben, abwechselnd links und rechts. Der Text hält eine gut lesbare Zeilenlänge; das Bild bleibt beim
   Lesen stehen (sticky), bis der Text zu Ende ist. */
.notizen { max-width: 68rem; margin: clamp(3rem, 7vw, 5rem) auto 0; display: grid; gap: clamp(3rem, 8vw, 5.5rem); }
.notiz { border-top: 2px solid var(--gold); }
.notiz-bild { margin: 0; }
/* Auf dem Handy alle Bilder im selben Format; daneben auf breiten Bildschirmen das ganze Bild. Vergrößern zeigt es immer ganz. */
.notiz-bild-rahmen { aspect-ratio: 3 / 2; overflow: hidden; background: var(--gold-tint); }
.notiz-bild-rahmen picture, .notiz-bild-rahmen img { display: block; width: 100%; height: 100%; }
.notiz-bild-rahmen img { object-fit: cover; }
.notiz-bild figcaption { padding: .7rem 0 0; font-family: var(--font-ui); font-size: .8rem; line-height: 1.45; color: var(--ink-2); }
.notiz-bild .nachweis { display: block; margin-top: .15rem; }
.notiz-text { max-width: 38rem; padding-top: 1.5rem; }
.notiz-titel { margin: 0 0 .8rem; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.65rem, 1.35rem + 1.2vw, 2.2rem); line-height: 1.15; }
.notiz p { margin: 0 0 1rem; font-size: 1.0625rem; line-height: 1.7; hyphens: auto; -webkit-hyphens: auto; }
/* Der Versteil, um den es geht, als Einstieg unter der Überschrift, mit goldenem Strich */
.notiz-vers { margin: 0 0 1.25rem; }
.notiz-vers blockquote { margin: 0; padding: .1rem 0 .1rem 1rem; border-left: 2px solid var(--gold); }
.notiz-vers p { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.45; text-wrap: pretty; }
.notiz-vers figcaption { margin: .45rem 0 0 1rem; font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-3); }
@media (min-width: 860px) {
  .notiz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; padding-top: 2rem; }
  .notiz:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .notiz:nth-child(even) .notiz-bild { order: 2; }
  .notiz-bild { position: sticky; top: 5.5rem; }
  .notiz-bild-rahmen { aspect-ratio: auto; }
  .notiz-bild-rahmen picture, .notiz-bild-rahmen img { height: auto; }
  .notiz-text { padding-top: 0; }
}

/* ------------------------------------------------------------ Weiterlesen */
.artikel-weiter {
  max-width: 72rem; margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) max(1.25rem, env(safe-area-inset-right, 0px)) 0 max(1.25rem, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--rule); text-align: center;
}
.artikel-weiter-titel { margin: 0 0 1rem; font-family: var(--font-ui); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.artikel-weiter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.artikel-weiter a:not(.knopf) {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.9rem; padding: .6rem 1.2rem; border-radius: 999px;
  border: 1px solid var(--rule-strong); color: var(--ink); text-decoration: none; font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
}
.artikel-weiter a:not(.knopf):hover { border-color: var(--gold); color: var(--gold-text); }
.artikel-weiter a:hover .pfeil { transform: translateX(4px); }
/* Leiser Hinweis unter „Weiterlesen“, etwa auf die offizielle Seite eines Ortes (/petersdom/) */
.artikel-hinweis {
  max-width: 38rem; margin: 1.25rem auto 0; padding: 0 max(1.25rem, env(safe-area-inset-right, 0px)) 0 max(1.25rem, env(safe-area-inset-left, 0px));
  font-family: var(--font-ui); font-size: .85rem; line-height: 1.5; color: var(--ink-3); text-align: center; text-wrap: pretty;
}

/* Übersicht einer Rubrik (/rezensionen/): Karten in einer Lesespalte, Titel kleiner als auf der Startseite */
.uebersicht {
  max-width: 52rem; margin: 0 auto;
  padding: 0 max(1.25rem, env(safe-area-inset-right, 0px)) clamp(3.5rem, 8vw, 6rem) max(1.25rem, env(safe-area-inset-left, 0px));
}
.uebersicht-zahl {
  margin: 0 0 1.1rem; text-align: center; font-family: var(--font-ui); font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.uebersicht .karte-link { background: var(--sheet); }
.uebersicht .karte-titel { font-size: clamp(1.7rem, 1.35rem + 1.2vw, 2.3rem); }

/* Lesezeit unter dem Vorspann (scripts/build.mjs setzt sie ein; ohne Angabe bleibt die Zeile weg) */
.artikel-zeit { margin: .9rem 0 0; font-family: var(--font-ui); font-size: .85rem; letter-spacing: .02em; color: var(--ink-3); }
.artikel-zeit:empty { display: none; }
.foto-kopf .artikel-zeit { color: var(--auf-nacht-2); }