/* Themenseiten von tuespetrus.de (bisher /name-fels-schluessel/: Mt 16,18–19 lateinisch und deutsch mit Erklärungen).
   Kopf auf Papier 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; }

/* 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; }
@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); }

/* Ü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); }