/* ==========================================================================
   PFARRE RANKWEIL

   Eigenständiges Stylesheet. Die Basilika-Website lädt ausschließlich
   style.css und wird von dieser Datei nicht berührt — alle Klassen tragen
   das Präfix pf-, sämtliche Variablen das Präfix --pf-.

   Gestalterische Haltung: redaktionell statt schematisch. Große Typografie,
   ruhige Flächen, echte Fotografie, wenige Rundungen, keine Verläufe. Die
   Abschnitte sind bewusst unterschiedlich gebaut — gleichförmig gerasterte
   Seiten wirken austauschbar.
   ========================================================================== */

:root {
  /* --- Farben --------------------------------------------------------- */
  /* Petrol als Leitfarbe, in drei Tiefen. Der warme Akzent kommt sparsam
     zum Einsatz: Datumsangaben, Rubriken, aktive Zustände. */
  --pf-petrol-900: #0D3037;
  --pf-petrol-800: #14444E;
  --pf-petrol-700: #1C5A66;
  --pf-petrol-500: #2C7B8A;
  --pf-petrol-200: #A7C6CD;

  --pf-akzent:     #8C5E2A;   /* dunkler als frueher: 5,6:1 auf Weiss (WCAG AA) */
  --pf-akzent-200: #D9B183;

  --pf-weiss:  #FFFFFF;
  --pf-creme:  #F7F4EF;
  --pf-sand:   #EDE7DD;
  --pf-linie:  #DCD5C9;

  /* Rahmen von Bedienelementen. Muss nach WCAG 2.1, Erfolgskriterium
     1.4.11, mindestens 3:1 gegen die Nachbarflaeche erreichen — sonst ist
     ein Knopf ohne Fuellfarbe nicht als Knopf zu erkennen.

     Nachgerechnet (relative Leuchtdichte, (L1+0,05)/(L2+0,05)):
       --pf-linie #DCD5C9  auf Weiss 1,46:1 · Creme 1,33:1 · Sand 1,19:1  -> durchgefallen
       --pf-rahmen #8A8272 auf Weiss 3,81:1 · Creme 3,47:1 · Sand 3,10:1  -> bestanden

     Zwischenwerte reichten nicht: #9A9080 kommt auf Sand nur auf 2,56:1,
     #8E8574 auf 2,97:1. Erst #8A8272 haelt die 3:1 auf allen drei
     Untergruenden. Derselbe warme Braunton, nur dunkler.

     --pf-linie bleibt fuer rein dekorative Trennlinien in Gebrauch — fuer
     die gilt die 3:1-Anforderung nicht. */
  --pf-rahmen: #8A8272;

  --pf-text:      #1A1D1E;
  --pf-text-weich:#5C5F5E;
  --pf-text-hell: rgba(255, 255, 255, .78);

  /* --- Schrift -------------------------------------------------------- */
  --pf-serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --pf-sans:  'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  /* --- Maße ----------------------------------------------------------- */
  /* Inhaltsbreite. Bewusst breiter als die uebliche Lesespalte: die
     Textbloecke darin sind einzeln begrenzt, waehrend Listen, Raster und
     Bildflaechen den Platz nutzen sollen. */
  --pf-breite:   84rem;
  --pf-lesespur: 40rem;   /* bequeme Lesebreite für Fließtext */
  --pf-rand:     clamp(1.25rem, 5vw, 4rem);

  --pf-t: .25s cubic-bezier(.2, .7, .3, 1);
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* 17 statt 16 Pixel als Grundmass. Dadurch wachsen alle rem-Angaben
     mit — auch die kleineren Beschriftungen, die sonst einzeln
     nachgezogen werden muessten. */
  font-size: 106.25%;
}

body {
  margin: 0;
  font-family: var(--pf-sans);
  font-size: 1rem;           /* entspricht den 17px aus dem Grundmass */
  line-height: 1.75;
  color: var(--pf-text);
  background: var(--pf-weiss);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--pf-petrol-700); text-underline-offset: .18em; }
a:hover { color: var(--pf-akzent); }

h1, h2, h3, h4 {
  font-family: var(--pf-serif);
  font-weight: 600;
  line-height: 1.08;
  color: var(--pf-petrol-900);
  margin: 0 0 .6em;
  letter-spacing: -.008em;
}

/* Große Überschriften dürfen groß sein und über mehrere Zeilen laufen. */
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.2rem; }
li { margin-bottom: .35rem; }

.pf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--pf-petrol-900); color: #fff; padding: .75rem 1.25rem;
}
.pf-skip:focus { left: 0; }

/* Kleiner Hinweis auf der Startseite — im Adminbereich ein- und
   ausschaltbar. Dezent unten rechts, wegklickbar. */
.pf-hinweis-popup {
  position: fixed;
  overflow: hidden;
  z-index: 60;
  right: 1.5rem;
  bottom: 1.5rem;
  max-width: min(24rem, calc(100vw - 2.5rem));
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.35rem 1.4rem 1.45rem;
  background: var(--pf-creme);
  border: 1px solid var(--pf-rahmen);
  box-shadow: 0 18px 44px -24px rgb(13 48 55 / .55);
  color: var(--pf-text);
}
.pf-hinweis-popup__text {
  font-family: var(--pf-serif);
  font-size: 1.2rem;
  line-height: 1.45;
}
@media (prefers-reduced-motion: no-preference) {
  .pf-hinweis-popup { animation: pf-hinweis-auf .35s ease-out both; }
}
@keyframes pf-hinweis-auf {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}
.pf-hinweis-popup__text > *:first-child { margin-top: 0; }
.pf-hinweis-popup__text > *:last-child { margin-bottom: 0; }
.pf-hinweis-popup__text a { color: var(--pf-akzent); }
.pf-hinweis-popup__zu {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -.2rem -.35rem 0 0;
  border: 0;
  background: none;
  color: var(--pf-grau-600, #5C6B6F);
  cursor: pointer;
}
.pf-hinweis-popup__zu:hover { background: var(--pf-creme); color: var(--pf-petrol-900); }
@media (max-width: 30rem) {
  .pf-hinweis-popup { right: .75rem; left: .75rem; bottom: .75rem; max-width: none; }
}
@media print { .pf-hinweis-popup { display: none; } }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--pf-akzent);
  outline-offset: 3px;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.pf-container {
  width: 100%;
  max-width: var(--pf-breite);
  margin: 0 auto;
  padding: 0 var(--pf-rand);
}

/* Lesespalte — linksbündig, damit Titel und Text auf einer Achse stehen. */
.pf-narrow { max-width: var(--pf-lesespur); margin-inline: 0; }
.pf-narrow--mitte { margin-inline: auto; }

.pf-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.pf-section--tight { padding: clamp(2rem, 4vw, 3.5rem) 0; }
.pf-section--cream { background: var(--pf-creme); }
.pf-section--sand  { background: var(--pf-sand); }
.pf-section--dunkel {
  background: var(--pf-petrol-900);
  color: var(--pf-text-hell);
}
.pf-section--dunkel h1,
.pf-section--dunkel h2,
.pf-section--dunkel h3 { color: #fff; }

/* Kopfzeile eines Abschnitts: Titel links, Verweis rechts. */
.pf-zeilenkopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}
.pf-zeilenkopf h2 { margin: 0; }
.pf-zeilenkopf--breit { display: block; }
.pf-zeilenkopf--breit p {
  max-width: 34rem;
  color: var(--pf-text-weich);
  margin: .6rem 0 0;
}
.pf-zeilenkopf--hell .pf-textlink { color: var(--pf-petrol-200); }
.pf-zeilenkopf--hell .pf-textlink:hover { color: #fff; }

/* Verweis ohne Knopf-Anmutung */
.pf-textlink {
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  color: var(--pf-petrol-700);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--pf-t);
}

/* ==========================================================================
   Kopfbereich
   ========================================================================== */

.pf-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pf-linie);
}

.pf-header__inner {
  /* Ueber die volle Breite statt auf die Inhaltsbreite begrenzt: sonst
     stehen Bildmarke und Navigation als Block in der Mitte und links wie
     rechts bleiben je zweihundert Pixel ungenutzt. */
  width: 100%;
  padding: .75rem clamp(1.25rem, 3.5vw, 3rem);
  min-height: 5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.pf-logo {
  display: flex; align-items: center;
  text-decoration: none; line-height: 1.1;
  flex: none;
}
.pf-logo__name {
  font-family: var(--pf-serif);
  font-size: 1.75rem; font-weight: 600;
  color: var(--pf-petrol-900);
}
.pf-logo__sub {
  font-size: 0.95rem;
  color: var(--pf-text-weich);
  margin-top: .15rem;
}

/* Die Navigation wird nach rechts geschoben — die Bildmarke steht ganz
   links, die Suche ganz rechts, dazwischen liegt die Strecke. */
.pf-nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.pf-nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .6rem .85rem;
  white-space: nowrap;   /* «Kirchen & Kapellen» soll nicht umbrechen */
  font-family: inherit; font-size: 1.01rem; font-weight: 500;
  color: var(--pf-text);
  text-decoration: none;
  background: none; border: 0; cursor: pointer;
  position: relative;
  transition: color var(--pf-t);
}
.pf-nav__link:hover { color: var(--pf-petrol-700); }

/* Feine Linie statt Farbfläche — ruhiger und weniger nach Software. */
.pf-nav__link::after {
  content: '';
  position: absolute; left: .85rem; right: .85rem; bottom: .45rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--pf-t);
}
.pf-nav__link:hover::after,
.pf-nav__link.is-active::after { transform: scaleX(1); }
.pf-nav__link.is-active { color: var(--pf-petrol-700); }

.pf-nav__caret {
  width: .4rem; height: .4rem; margin-left: .15rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-.1rem);
  opacity: .55;
}

.pf-nav__cta {
  margin-left: .9rem;
  padding: .62rem 1.15rem;
  white-space: nowrap;
  font-size: 0.97rem; font-weight: 600;
  color: #fff; text-decoration: none;
  background: var(--pf-petrol-800);
  border: 1px solid var(--pf-petrol-800);
  transition: background var(--pf-t), border-color var(--pf-t);
}
.pf-nav__cta:hover { background: var(--pf-petrol-900); border-color: var(--pf-petrol-900); color: #fff; }

/* --- Aufklappmenü ------------------------------------------------------ */

.pf-nav__item { position: relative; }

.pf-nav__menu {
  position: absolute; top: calc(100% + .4rem); left: -.5rem;
  min-width: 22rem;
  background: #fff;
  border: 1px solid var(--pf-linie);
  box-shadow: 0 18px 44px rgba(13, 48, 55, .13);
  opacity: 0; visibility: hidden; transform: translateY(-.35rem);
  transition: opacity var(--pf-t), transform var(--pf-t), visibility var(--pf-t);
}
.pf-nav__item:hover .pf-nav__menu,
.pf-nav__item:focus-within .pf-nav__menu,
.pf-nav__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

.pf-nav__menu-inner { padding: .5rem; }

/* Die Menueeintraege stehen als Liste im Auszeichnungstext (siehe
   header.php) — ein Screenreader nennt dadurch die Anzahl der Eintraege.
   Punkte und Abstaende der Grundregel werden hier zurueckgenommen, die
   Darstellung bleibt dadurch unveraendert. */
.pf-nav__menu-liste { list-style: none; margin: 0; padding: 0; }
.pf-nav__menu-liste li { margin: 0; }

.pf-nav__eintrag {
  display: block;
  padding: .6rem .75rem;
  text-decoration: none;
  transition: background var(--pf-t);
}
.pf-nav__eintrag:hover { background: var(--pf-creme); }
.pf-nav__eintrag-titel {
  display: block;
  font-weight: 600; font-size: 0.99rem;
  color: var(--pf-petrol-900);
}
.pf-nav__eintrag-unter {
  display: block;
  font-size: 0.95rem; line-height: 1.45;
  color: var(--pf-text-weich);
  margin-top: .05rem;
}

/* --- Menüschalter für schmale Bildschirme ------------------------------ */

.pf-burger {
  display: none;
  width: 2.9rem; height: 2.9rem;
  border: 1px solid var(--pf-rahmen);
  background: #fff; cursor: pointer; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
}
.pf-burger span {
  display: block; width: 1.25rem; height: 1.5px;
  background: var(--pf-text); transition: transform var(--pf-t), opacity var(--pf-t);
}
.pf-burger.is-open span:nth-child(1) { transform: translateY(.45rem) rotate(45deg); }
.pf-burger.is-open span:nth-child(2) { opacity: 0; }
.pf-burger.is-open span:nth-child(3) { transform: translateY(-.45rem) rotate(-45deg); }

/* ==========================================================================
   Schaltflächen
   ========================================================================== */

.pf-btn {
  display: inline-block;
  padding: .82rem 1.55rem;
  font-family: inherit; font-size: 1rem; font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--pf-t), color var(--pf-t), border-color var(--pf-t);
}
.pf-btn--primary {
  background: var(--pf-petrol-800); color: #fff; border-color: var(--pf-petrol-800);
}
.pf-btn--primary:hover { background: var(--pf-petrol-900); border-color: var(--pf-petrol-900); color: #fff; }

.pf-btn--quiet {
  background: transparent; color: var(--pf-petrol-900); border-color: var(--pf-rahmen);
}
.pf-btn--quiet:hover { border-color: var(--pf-petrol-700); color: var(--pf-petrol-700); }

.pf-btn--hell {
  background: transparent; color: #fff; border-color: rgba(255,255,255,.45);
}
.pf-btn--hell:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* ==========================================================================
   1. Auftakt
   ========================================================================== */

.pf-auftakt { background: var(--pf-weiss); }

.pf-auftakt__raster {
  display: grid;
  grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
  align-items: stretch;
  min-height: min(80vh, 46rem);
}

.pf-auftakt__text {
  display: flex; flex-direction: column; justify-content: center;
  /* Mittig in der Spalte statt rechts angeschlagen. Mit margin-left: auto
     klebte der Block am Bild und links blieb auf breiten Schirmen eine
     grosse leere Flaeche. */
  padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 3vw, 3rem);
  max-width: 34rem;
  margin-inline: auto;
}

.pf-auftakt__ort {
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
  margin-bottom: 1.1rem;
}

.pf-auftakt h1 {
  /* Zwei bis drei Zeilen sind gewollt — die Überschrift trägt die Seite. */
  max-width: 13ch;
  margin-bottom: 1.3rem;
}

.pf-auftakt__lead {
  max-width: 30rem;
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--pf-text-weich);
  margin-bottom: 2.1rem;
}

.pf-auftakt__wege { display: flex; gap: .7rem; flex-wrap: wrap; margin: 0; }

.pf-auftakt__bild { position: relative; overflow: hidden; background: var(--pf-sand); }
.pf-auftakt__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

/* ==========================================================================
   2. Nächste Gottesdienste
   ========================================================================== */

.pf-termine { border-top: 1px solid var(--pf-linie); }

.pf-termine__tag {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--pf-linie);
}

.pf-termine__datum {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1;
}
.pf-termine__wochentag {
  /* Ohne Versalien und Sperrung: die kleinen gesperrten Großbuchstaben
     waren über die Seite verteilt das auffälligste Baukastenmerkmal. */
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
}
.pf-termine__zahl {
  font-family: var(--pf-serif);
  font-size: 3rem; font-weight: 600;
  color: var(--pf-petrol-900);
  margin: .1rem 0;
}
.pf-termine__monat {
  font-size: 0.95rem;
  color: var(--pf-text-weich);
}

.pf-termine__liste { list-style: none; margin: 0; padding: 0; }
.pf-termine__liste li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: .5rem 0;
  margin: 0;
}
.pf-termine__liste li + li { border-top: 1px solid var(--pf-sand); }

.pf-termine__zeit {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--pf-petrol-900);
}
.pf-termine__was { font-size: 1.06rem; }
.pf-termine__ort { color: var(--pf-text-weich); font-size: 0.95rem; text-align: right; }

/* ==========================================================================
   3. Bildraster

   Sechs Flächen ohne Abstand, ohne Rundung, ohne Rahmen — eine
   zusammenhängende Collage, kein Kartenraster.
   ========================================================================== */

.pf-raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                       /* nur eine Fuge, kein Abstand */
  background: var(--pf-linie);    /* scheint als Fuge durch */
}

.pf-raster__feld {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  text-decoration: none;
  background: var(--pf-petrol-900);
  isolation: isolate;
}

.pf-raster__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s cubic-bezier(.16, .84, .28, 1);
}
.pf-raster__feld:hover .pf-raster__bild,
.pf-raster__feld:focus-visible .pf-raster__bild { transform: scale(1.07); }

/* Grundschleier: gerade so viel, dass die Schrift trägt — das Foto bleibt Foto. */
.pf-raster__feld::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9,32,37,.28) 0%, rgba(9,32,37,.52) 100%);
  transition: opacity var(--pf-t);
}

/* Beim Überfahren zieht eine Farbfläche von unten herauf. Das ist der
   Unterschied zum bloßen Vergrößern: die Fläche reagiert erkennbar, ohne
   dass etwas springt oder blinkt. */
.pf-raster__vorhang {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,48,55,.15) 0%, rgba(13,48,55,.82) 100%);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s cubic-bezier(.16, .84, .28, 1);
  pointer-events: none;
}
.pf-raster__feld:hover .pf-raster__vorhang,
.pf-raster__feld:focus-visible .pf-raster__vorhang { transform: scaleY(1); }

.pf-raster__titel {
  position: absolute; inset: 0;
  z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .55rem;
  padding: 1.5rem;
  text-align: center;
  font-family: var(--pf-serif);
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  font-weight: 600;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 20px rgba(0, 0, 0, .28);
  transition: transform .45s cubic-bezier(.16, .84, .28, 1);
}
.pf-raster__feld:hover .pf-raster__titel,
.pf-raster__feld:focus-visible .pf-raster__titel { transform: translateY(-.45rem); }

/* Feine Linie, die unter dem Titel aufzieht. */
.pf-raster__strich {
  display: block;
  width: 4.5rem; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  opacity: 0;
  transition: transform .45s cubic-bezier(.16, .84, .28, 1) .06s, opacity .3s ease .06s;
}
.pf-raster__feld:hover .pf-raster__strich,
.pf-raster__feld:focus-visible .pf-raster__strich { transform: scaleX(1); opacity: .85; }

/* Fläche ohne Foto: Linienzeichnung nach der Silhouette der Basilika. */
.pf-raster__feld--ohne-bild { background: var(--pf-petrol-800); }
.pf-raster__feld--ohne-bild::after { background: none; }
.pf-raster__zeichnung {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Abstand nach innen, damit die Zeichnung nicht an den Kanten klebt
     und der Titel darueber Luft behaelt. */
  padding: 13% 18% 9%;
  box-sizing: border-box;
  color: rgba(255, 255, 255, .15);
}
.pf-raster__bild--platzhalter { opacity: .25; }

/* Nur im Bearbeitungsmodus: Titel und Schleier liegen als ganzflaechige
   Ebenen ueber dem Bild und fingen bisher jeden Klick ab - dadurch kam
   man im Editor nie an das Bild darunter. Sie werden hier fuer Klicks
   durchlaessig; nur die beschriftete Stelle bleibt anklickbar, damit
   man Text und Bild getrennt bearbeiten kann. Am Aussehen aendert das
   nichts, und auf der oeffentlichen Seite gilt es gar nicht. */
body.cms-edit-mode .pf-raster__feld::after,
body.cms-edit-mode .pf-raster__titel { pointer-events: none; }
body.cms-edit-mode .pf-raster__titel [data-cms] { pointer-events: auto; }


/* ==========================================================================
   4. Was können wir für Sie tun?

   Bewusst unterschiedlich große Felder statt sechs gleicher Kacheln.
   ========================================================================== */

.pf-anliegen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--pf-linie);
  border-left: 1px solid var(--pf-linie);
}

.pf-anliegen__feld {
  position: relative;
  display: block;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  text-decoration: none;
  border-right: 1px solid var(--pf-linie);
  border-bottom: 1px solid var(--pf-linie);
  transition: background var(--pf-t);
}
.pf-anliegen__feld:hover { background: var(--pf-creme); }

.pf-anliegen__frage {
  display: block;
  font-family: var(--pf-serif);
  font-size: 1.5rem; font-weight: 600; line-height: 1.2;
  color: var(--pf-petrol-900);
  margin-bottom: .45rem;
  max-width: 22ch;
}
.pf-anliegen__feld--gross .pf-anliegen__frage { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }

.pf-anliegen__text {
  display: block;
  color: var(--pf-text-weich);
  max-width: 34ch;
}

.pf-anliegen__pfeil {
  display: inline-block;
  margin-top: .9rem;
  color: var(--pf-akzent);
  font-size: 1.15rem;
  transition: transform var(--pf-t);
}
.pf-anliegen__feld:hover .pf-anliegen__pfeil { transform: translateX(4px); }

/* ==========================================================================
   5. Kirchen und Kapellen
   ========================================================================== */

.pf-kirchen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.pf-kirche { display: block; text-decoration: none; color: inherit; }

/* Die erste Kirche bekommt die doppelte Breite — gleich große Felder
   lassen jede Übersicht nach Katalog aussehen. */
.pf-kirche--gross { grid-column: span 2; grid-row: span 2; }

.pf-kirche__bild {
  display: block; position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pf-petrol-800);
  margin-bottom: .9rem;
}
.pf-kirche--gross .pf-kirche__bild { aspect-ratio: 3 / 2; }
.pf-kirche__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.pf-kirche:hover .pf-kirche__bild img { transform: scale(1.035); }

.pf-kirche__ort {
  display: block;
  font-size: 0.95rem;
  color: var(--pf-akzent-200);
  margin-bottom: .2rem;
}
.pf-kirche__name {
  display: block;
  font-family: var(--pf-serif);
  font-size: 1.35rem; font-weight: 600;
  color: #fff;
}
.pf-kirche--gross .pf-kirche__name { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.pf-kirche__kurz {
  display: block;
  color: var(--pf-text-hell);
  font-size: 0.97rem;
  margin-top: .15rem;
}
.pf-kirche:hover .pf-kirche__name { color: var(--pf-akzent-200); }

/* Ohne Foto bleibt der Eintrag rein typografisch — leere Kästen sind
   schlimmer als gar keine. */
.pf-kirche--ohne-bild {
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255,255,255,.16);
}

/* ==========================================================================
   6. Aktuell in der Pfarre
   ========================================================================== */

.pf-meldungen {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.pf-meldung { display: block; text-decoration: none; color: inherit; }

.pf-meldung__bild {
  display: block; position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pf-sand);
  margin-bottom: 1.1rem;
}
.pf-meldung__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.pf-meldung:hover .pf-meldung__bild img { transform: scale(1.03); }

.pf-meldung__meta {
  display: flex; gap: .7rem; align-items: baseline;
  font-size: 0.95rem;
  margin-bottom: .35rem;
}
.pf-meldung__art { color: var(--pf-akzent); font-weight: 600; }
.pf-meldung__datum { color: var(--pf-text-weich); }

.pf-meldung__titel {
  display: block;
  font-family: var(--pf-serif);
  font-size: 1.45rem; font-weight: 600; line-height: 1.2;
  color: var(--pf-petrol-900);
}
.pf-meldung--haupt .pf-meldung__titel { font-size: clamp(1.8rem, 2.6vw, 2.3rem); }
.pf-meldung:hover .pf-meldung__titel { color: var(--pf-petrol-700); }

.pf-meldung__text {
  display: block;
  color: var(--pf-text-weich);
  margin-top: .4rem;
  max-width: 46ch;
}

.pf-meldungen__klein { display: grid; gap: 1.75rem; }
.pf-meldungen__klein .pf-meldung + .pf-meldung {
  border-top: 1px solid var(--pf-linie);
  padding-top: 1.75rem;
}

/* ==========================================================================
   7. Pfarre als Gemeinschaft
   ========================================================================== */

.pf-gemeinschaft {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--pf-petrol-900);
  color: var(--pf-text-hell);
}

.pf-gemeinschaft__bild { position: relative; min-height: 26rem; overflow: hidden; }
.pf-gemeinschaft__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.pf-gemeinschaft__text {
  padding: clamp(2.5rem, 6vw, 5.5rem) clamp(2rem, 6vw, 5rem);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 42rem;
}
.pf-gemeinschaft__text h2 { color: #fff; max-width: 14ch; }
.pf-gemeinschaft__text p { color: var(--pf-text-hell); }
.pf-gemeinschaft__text .pf-btn { align-self: flex-start; margin-top: .6rem; }

/* ==========================================================================
   Seitenkopf der Unterseiten
   ========================================================================== */

.pf-pagehead {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(1.75rem, 3vw, 2.75rem);
  border-bottom: 1px solid var(--pf-linie);
}
.pf-pagehead__eyebrow {
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
  margin-bottom: .7rem;
}
.pf-pagehead h1 { max-width: 18ch; margin-bottom: .5rem; }
.pf-pagehead__lead {
  max-width: 38rem;
  font-size: 1.16rem;
  color: var(--pf-text-weich);
}

/* ==========================================================================
   Bausteine der Unterseiten
   ========================================================================== */

/* --- Raster und Karten -------------------------------------------------- */

.pf-grid { display: grid; gap: 1.5rem; }
.pf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Karten sind hier bewusst schlicht: Linie statt Schatten, kaum Rundung. */
.pf-card {
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--pf-linie);
}
.pf-card h3 { margin-bottom: .35rem; }
.pf-card p { color: var(--pf-text-weich); }

.pf-card--link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color var(--pf-t), background var(--pf-t);
}
.pf-card--link:hover { border-color: var(--pf-petrol-500); background: var(--pf-creme); }

.pf-card__more {
  display: inline-block; margin-top: .9rem;
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-petrol-700);
}
.pf-card--link:hover .pf-card__more { color: var(--pf-akzent); }

.pf-card__date {
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
  margin-bottom: .4rem;
}

/* --- Hinweiskasten ------------------------------------------------------ */

.pf-note {
  border-left: 3px solid var(--pf-akzent);
  background: var(--pf-creme);
  padding: 1.15rem 1.4rem;
  margin: 1.5rem 0;
}
.pf-note__title {
  font-family: var(--pf-serif);
  font-size: 1.2rem; font-weight: 600;
  color: var(--pf-petrol-900);
  margin-bottom: .3rem;
}

/* --- Angaben (Adresse, Telefon …) --------------------------------------- */

.pf-facts { display: grid; gap: 0; }
.pf-fact {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--pf-linie);
}
.pf-fact:last-child { border-bottom: 0; }
.pf-fact__label {
  font-size: 0.95rem;
  color: var(--pf-text-weich);
  padding-top: .15rem;
}
.pf-fact__value { margin: 0; }

/* --- Verweisliste ------------------------------------------------------- */

.pf-linklist { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pf-linklist li { margin: 0; border-bottom: 1px solid var(--pf-linie); }
.pf-linklist li:first-child { border-top: 1px solid var(--pf-linie); }
.pf-linklist a {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding: .85rem 0;
  text-decoration: none;
  transition: color var(--pf-t);
}
.pf-linklist__meta { color: var(--pf-text-weich); font-size: 0.95rem; white-space: nowrap; }

/* --- Gottesdienstzeiten nach Kirche -------------------------------------- */

.pf-times { display: grid; gap: 1.5rem; }
.pf-times__church { border: 1px solid var(--pf-linie); background: #fff; }
.pf-times__name {
  background: var(--pf-petrol-800);
  color: #fff;
  font-family: var(--pf-serif);
  font-size: 1.2rem; font-weight: 600;
  padding: .8rem 1.4rem;
}
.pf-times__list { list-style: none; margin: 0; padding: 0; }
.pf-times__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin: 0;
  padding: .8rem 1.4rem;
  border-bottom: 1px solid var(--pf-sand);
}
.pf-times__row:last-child { border-bottom: 0; }
.pf-times__when { font-weight: 600; min-width: 11rem; }
.pf-times__what { color: var(--pf-text-weich); text-align: right; }

/* Kompakte Fassung */
.pf-timelist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--pf-linie); background: #fff; }
.pf-timelist__row {
  display: flex; align-items: baseline; gap: 1rem; margin: 0;
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--pf-sand);
}
.pf-timelist__row:last-child { border-bottom: 0; }
.pf-timelist__when { display: flex; gap: .5rem; min-width: 11rem; }
.pf-timelist__time { color: var(--pf-akzent); font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-timelist__what { color: var(--pf-text-weich); }

/* --- Zweispaltiger Block ------------------------------------------------- */

.pf-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

/* --- Abschnittskopf (Altbestand der Unterseiten) -------------------------- */

.pf-section__head { margin-bottom: 2rem; }
.pf-section__head p { color: var(--pf-text-weich); margin-top: .4rem; }
.pf-section__head--row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
}
.pf-section__head--row h2 { margin-bottom: .2rem; }
.pf-section__head--row p { margin-bottom: 0; }

.pf-blockkopf { max-width: 24ch; margin-bottom: .5rem; }
.pf-blockkopf__lead { max-width: 40rem; color: var(--pf-text-weich); margin-bottom: 2rem; }

/* ==========================================================================
   Personen
   ========================================================================== */

.pf-person {
  border: 1px solid var(--pf-linie);
  background: #fff;
  overflow: hidden;
}

.pf-person__kopf {
  display: flex; align-items: stretch; gap: 0;
  list-style: none;
}
.pf-person__kopf::-webkit-details-marker { display: none; }
.pf-person--klappbar .pf-person__kopf { cursor: pointer; }
.pf-person--klappbar:hover { border-color: var(--pf-petrol-500); }

.pf-person__foto,
.pf-person__avatar {
  width: 7.5rem; min-height: 9rem;
  flex: none; align-self: stretch;
  object-fit: cover;
  object-position: center 25%;
}
.pf-person__avatar {
  background: var(--pf-petrol-800);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--pf-serif); font-size: 2rem; font-weight: 600;
}

.pf-person__titel {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1; min-width: 0;
  padding: 1.15rem 1.25rem;
}
.pf-person__name {
  font-family: var(--pf-serif);
  font-size: 1.3rem; font-weight: 600;
  color: var(--pf-petrol-900);
}
.pf-person__role { font-size: 0.95rem; color: var(--pf-akzent); font-weight: 600; margin-top: .15rem; }

.pf-person__pfeil {
  align-self: center; margin-right: 1.15rem; flex: none;
  color: var(--pf-text-weich);
  transition: transform var(--pf-t);
}
.pf-person__klapp[open] .pf-person__pfeil { transform: rotate(180deg); }

.pf-person__bio {
  margin: 0; padding: 1rem 1.25rem;
  border-top: 1px solid var(--pf-sand);
  color: var(--pf-text-weich);
}
.pf-person__contact {
  margin: 0; padding: .9rem 1.25rem;
  border-top: 1px solid var(--pf-sand);
  font-size: 0.95rem;
}
.pf-person__contact a { display: inline-block; margin-right: 1rem; font-weight: 500; }

/* ==========================================================================
   Pfarrblatt
   ========================================================================== */

.pf-hefte {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1.5rem 1.25rem;
  margin-bottom: 2rem;
}
.pf-hefte__jahr {
  font-family: var(--pf-sans);
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-text-weich);
  margin: 2rem 0 1rem;
}
.pf-heft { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.pf-heft__bild {
  display: block; aspect-ratio: 210 / 297;
  overflow: hidden; background: var(--pf-sand);
  border: 1px solid var(--pf-linie);
}
.pf-heft__bild img { width: 100%; height: 100%; object-fit: cover; }
.pf-heft:hover .pf-heft__bild { border-color: var(--pf-petrol-500); }
.pf-heft__leer { width: 100%; height: 100%; display: grid; place-items: center; color: var(--pf-text-weich); }
.pf-heft__text { display: block; margin-top: .6rem; }
.pf-heft__titel {
  display: block; font-family: var(--pf-serif);
  font-size: 1.05rem; font-weight: 600; line-height: 1.25;
  color: var(--pf-petrol-900);
}
.pf-heft:hover .pf-heft__titel { color: var(--pf-akzent); }
.pf-heft__meta { display: block; font-size: 0.95rem; color: var(--pf-text-weich); margin-top: .1rem; }

/* ==========================================================================
   Fußbereich
   ========================================================================== */

.pf-footer {
  background: var(--pf-petrol-900);
  color: var(--pf-text-hell);
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem;
}

.pf-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.pf-footer__brand {
  font-family: var(--pf-serif);
  font-size: 1.7rem; font-weight: 600;
  color: #fff;
  margin: 0 0 1rem;
}
.pf-footer__adresse { font-style: normal; line-height: 1.8; margin-bottom: 1.25rem; }
.pf-footer__zeiten { font-size: 0.95rem; line-height: 1.7; }
.pf-footer__zeiten span {
  display: block;
  font-size: 0.95rem; font-weight: 600;
  color: rgba(255,255,255,.55);
  margin-bottom: .3rem;
}

.pf-footer h2 {
  font-family: var(--pf-sans);
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.pf-footer__list { list-style: none; margin: 0; padding: 0; }
.pf-footer__list li { margin-bottom: .55rem; }

.pf-footer a { color: var(--pf-text-hell); text-decoration: none; }
.pf-footer a:hover { color: #fff; text-decoration: underline; }

.pf-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 0.95rem;
  color: rgba(255,255,255,.5);
}
.pf-footer__bottom p { margin: 0; }
.pf-footer__rechtliches { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.pf-footer__bottom a { color: rgba(255,255,255,.5); }

/* ==========================================================================
   Hintergrundbild eines Abschnitts (ContentManager::editableBackground)
   ========================================================================== */

.section-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.section-bg img { width: 100%; height: 100%; object-fit: cover; }
.section-bg--leer { display: grid; place-items: center; }
.section-bg--leer img { object-fit: contain; opacity: .45; }
.section-bg__hinweis {
  position: absolute; z-index: 1;
  padding: .4rem .9rem;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 0.95rem;
  pointer-events: none;
}

/* ==========================================================================
   Schmale Bildschirme

   Mobil ist keine gestapelte Desktopfassung: der Auftakt stellt das Bild
   nach oben, das Bildraster wird zweispaltig mit höheren Flächen, und die
   Navigation wird zu einer eingeblendeten Fläche.
   ========================================================================== */

@media (max-width: 1280px) {
  /* Zwischenbereich: die Leiste passt noch in eine Zeile, aber nur mit
     engeren Abstaenden — sonst faellt die Lupe rechts heraus. */
  .pf-nav { gap: 0; }
  .pf-nav__link { padding: .6rem .5rem; font-size: 0.97rem; }
  .pf-nav__link::after { left: .5rem; right: .5rem; }
  .pf-logo__name { font-size: 1.55rem; }
  .pf-kopfrechts { margin-left: .5rem; padding-left: .5rem; }
  .pf-header__inner { gap: 1rem; padding-inline: clamp(1rem, 2.5vw, 2rem); }

  .pf-kirchen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-kirche--gross { grid-column: span 2; grid-row: auto; }
}

@media (max-width: 1080px) {
  /* --- Navigation als eingeblendete Fläche --- */
  .pf-burger { display: flex; }
  .pf-nav {
    position: fixed; inset: 5rem 0 0 0;
    display: block;
    background: #fff;
    padding: 1rem var(--pf-rand) 3rem;
    overflow-y: auto;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), visibility .3s;
  }
  .pf-nav.is-open { transform: translateY(0); visibility: visible; }

  .pf-nav__item { border-bottom: 1px solid var(--pf-linie); }
  .pf-nav__link {
    display: flex; width: 100%; justify-content: space-between;
    padding: 1rem 0; font-size: 1.15rem;
  }
  .pf-nav__link::after { display: none; }
  .pf-nav > .pf-nav__link { border-bottom: 1px solid var(--pf-linie); }
  .pf-nav__menu {
    position: static; min-width: 0;
    border: 0; box-shadow: none;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .pf-nav__menu.is-open { display: block; }
  .pf-nav__item:hover .pf-nav__menu:not(.is-open) { display: none; }
  .pf-nav__menu-inner { padding: 0 0 .75rem .75rem; }
  .pf-suchknopf { display: none; }
  .pf-suchleiste { display: none !important; }
  .pf-suche--mobil {
    display: flex;
    margin-top: 1.5rem;
  }
  .pf-nav__caret { transition: transform var(--pf-t); }
  .pf-nav__link[aria-expanded="true"] .pf-nav__caret { transform: rotate(-135deg) translateY(-.1rem); }

  /* --- Auftakt: Bild oben, Text darunter --- */
  .pf-auftakt__raster { grid-template-columns: 1fr; min-height: 0; }
  .pf-auftakt__bild { order: -1; aspect-ratio: 4 / 3; }
  .pf-auftakt__bild img { position: static; }
  .pf-auftakt__text {
    max-width: none; margin: 0;
    padding: clamp(2rem, 7vw, 3rem) var(--pf-rand);
  }
  .pf-auftakt h1 { max-width: 16ch; }

  /* --- Bildraster: zwei Spalten, höhere Flächen --- */
  .pf-raster { grid-template-columns: repeat(2, 1fr); }
  .pf-raster__feld { aspect-ratio: 1 / 1; }

  .pf-anliegen { grid-template-columns: 1fr; }
  .pf-meldungen { grid-template-columns: 1fr; }
  .pf-gemeinschaft { grid-template-columns: 1fr; }
  .pf-gemeinschaft__bild { min-height: 18rem; }
  .pf-split { grid-template-columns: 1fr; }
  .pf-grid--3, .pf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .pf-termine__tag { grid-template-columns: 1fr; gap: .75rem; }
  .pf-termine__datum { flex-direction: row; align-items: baseline; gap: .5rem; }
  .pf-termine__zahl { font-size: 1.7rem; margin: 0; }
  /* Uhrzeit nicht in eine feste Spalte zwaengen — "17:30 Uhr" brach sonst
     um. Ort direkt unter den Titel statt in eine eigene Zeile. */
  .pf-termine__liste li {
    grid-template-columns: auto minmax(0, 1fr);
    gap: .1rem .8rem;
    padding: .6rem 0;
  }
  .pf-termine__zeit { white-space: nowrap; }
  .pf-termine__ort { grid-column: 2; text-align: left; }

  .pf-grid--2, .pf-grid--3, .pf-grid--4 { grid-template-columns: 1fr; }
  .pf-kirchen { grid-template-columns: 1fr; }
  .pf-kirche--gross { grid-column: auto; }
  .pf-fact { grid-template-columns: 1fr; gap: .15rem; }
  .pf-times__row { flex-direction: column; gap: .1rem; }
  .pf-times__what { text-align: left; }
  .pf-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .pf-footer__bottom { flex-direction: column; align-items: flex-start; }
  .pf-person__foto, .pf-person__avatar { width: 5.5rem; min-height: 7rem; }
  .pf-person__avatar { font-size: 1.5rem; }
  .pf-hefte { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 460px) {
  /* Eine Spalte, aber weiterhin große Flächen — nicht gestapelte Kacheln. */
  .pf-raster { grid-template-columns: 1fr; }
  .pf-raster__feld { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Bewegung und Druck
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .pf-header, .pf-footer, .pf-raster, .pf-nav { display: none; }
  body { color: #000; font-size: 11pt; }
  a { text-decoration: underline; }
}

/* ==========================================================================
   Kirchen ohne Foto — Aufzählung unter den Bildflächen.

   Bildkacheln und Textkacheln im selben Raster zu mischen reißt Lücken,
   weil die Textkacheln keine Bildhöhe haben. Sobald ein Foto hinterlegt
   wird, wandert der Eintrag von selbst nach oben.
   ========================================================================== */

.pf-kirchenliste {
  list-style: none;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.pf-kirchenliste li { margin: 0; }
.pf-kirchenliste a {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: .3rem 1.5rem;
  align-items: baseline;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none;
  transition: opacity var(--pf-t);
}
.pf-kirchenliste a:hover { opacity: .75; }
.pf-kirchenliste__name {
  font-family: var(--pf-serif);
  font-size: 1.22rem; font-weight: 600;
  color: #fff;
}
.pf-kirchenliste__ort {
  grid-column: 1;
  font-size: 0.95rem;
  color: var(--pf-akzent-200);
  order: -1;
}
.pf-kirchenliste__kurz {
  grid-column: 2; grid-row: 1 / span 2;
  color: var(--pf-text-hell);
  font-size: 0.97rem;
}

/* Bildkacheln oben sollen sich nicht in die Höhe ziehen */
.pf-kirchen { align-items: start; }

@media (max-width: 700px) {
  .pf-kirchenliste { grid-template-columns: 1fr; }
  .pf-kirchenliste a { grid-template-columns: 1fr; }
  .pf-kirchenliste__kurz { grid-column: 1; grid-row: auto; }
}

/* Eine einzelne Bildkachel läuft über die volle Breite: Bild oben,
   Beschriftung darunter — allein in einer Rasterspalte wirkt sie verloren. */
.pf-kirchen--einzeln { grid-template-columns: 1fr; }
.pf-kirche--breit .pf-kirche__bild { aspect-ratio: 21 / 8; }
.pf-kirche--breit .pf-kirche__name { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.pf-kirche--breit .pf-kirche__kurz { font-size: 1.05rem; }

@media (max-width: 640px) {
  .pf-kirche--breit .pf-kirche__bild { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Übersichtsliste (Sakramente, Bereiche einer Seite)

   Name links, Erläuterung rechts, feine Linien dazwischen. Bewusst keine
   Kacheln mit Symbolen: die Einträge unterscheiden sich im Text, nicht in
   der Form.
   ========================================================================== */

.pf-uebersicht {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--pf-linie);
}
.pf-uebersicht li { margin: 0; }

.pf-uebersicht a {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: .3rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  border-bottom: 1px solid var(--pf-linie);
  text-decoration: none;
  color: inherit;
  transition: background var(--pf-t);
}
.pf-uebersicht a:hover { background: var(--pf-creme); }

.pf-uebersicht__name {
  font-family: var(--pf-serif);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 600;
  color: var(--pf-petrol-900);
  line-height: 1.15;
}
.pf-uebersicht__text { display: block; }
.pf-uebersicht__worum { display: block; }
.pf-uebersicht__wozu {
  display: block;
  color: var(--pf-text-weich);
  font-size: 0.97rem;
  margin-top: .15rem;
}
.pf-uebersicht__pfeil {
  color: var(--pf-akzent);
  font-size: 1.15rem;
  transition: transform var(--pf-t);
}
.pf-uebersicht a:hover .pf-uebersicht__pfeil { transform: translateX(4px); }

@media (max-width: 700px) {
  .pf-uebersicht a { grid-template-columns: 1fr auto; }
  .pf-uebersicht__name { grid-column: 1 / -1; margin-bottom: .2rem; }
}

/* Bildflächen auch auf hellem Grund (Unterseite «Kirchen & Kapellen») */
.pf-kirchen--hell .pf-kirche__name { color: var(--pf-petrol-900); }
.pf-kirchen--hell .pf-kirche__kurz { color: var(--pf-text-weich); }
.pf-kirchen--hell .pf-kirche__ort  { color: var(--pf-akzent); }
.pf-kirchen--hell .pf-kirche:hover .pf-kirche__name { color: var(--pf-petrol-700); }

/* Eintrag OHNE Link — sieht aus wie eine Zeile der Liste, ist aber nicht
   anklickbar. Nur hier verwenden: enthaelt das Listenelement einen Link,
   wuerde dieser in die erste, schmale Spalte gequetscht. */
.pf-uebersicht__zeile {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
  gap: .3rem clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) 0;
  border-bottom: 1px solid var(--pf-linie);
}
@media (max-width: 700px) {
  .pf-uebersicht__zeile { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Suche im Kopfbereich
   ========================================================================== */

/* Nur für Screenreader */
.pf-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pf-kopfrechts {
  display: flex; align-items: center; gap: .4rem; flex: none;
  margin-left: clamp(.75rem, 2vw, 2rem);
  padding-left: clamp(.75rem, 2vw, 1.75rem);
  border-left: 1px solid var(--pf-linie);
}

.pf-suchknopf {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  background: none; border: 1px solid transparent;
  color: var(--pf-text);
  cursor: pointer;
  transition: border-color var(--pf-t), color var(--pf-t);
}
.pf-suchknopf:hover { border-color: var(--pf-rahmen); color: var(--pf-petrol-700); }
.pf-suchknopf[aria-expanded="true"] {
  border-color: var(--pf-rahmen);
  background: var(--pf-creme);
  color: var(--pf-petrol-700);
}

.pf-suchleiste {
  border-top: 1px solid var(--pf-linie);
  background: var(--pf-creme);
  padding: 1rem clamp(1.25rem, 3.5vw, 3rem);
}
.pf-suchleiste .pf-container { max-width: none; padding: 0; }
.pf-suchleiste[hidden] { display: none; }

.pf-suche { display: flex; gap: .6rem; align-items: center; }
.pf-suche input[type="search"] {
  flex: 1; min-width: 0;
  padding: .8rem 1rem;
  font: inherit; font-size: 1.02rem;
  color: var(--pf-text);
  background: #fff;
  border: 1px solid var(--pf-rahmen);
  border-radius: 0;
  -webkit-appearance: none;
}
.pf-suche input[type="search"]:focus-visible {
  outline: 2px solid var(--pf-akzent);
  outline-offset: 1px;
}
.pf-suche .pf-btn { flex: none; padding: .8rem 1.4rem; }

.pf-suchleiste__zu {
  flex: none;
  width: 2.6rem; height: 2.6rem;
  font-size: 1.5rem; line-height: 1;
  background: none; border: 0; cursor: pointer;
  color: var(--pf-text-weich);
}
.pf-suchleiste__zu:hover { color: var(--pf-text); }

/* Im eingeblendeten Menü steht das Suchfeld unten; am Desktop nicht nötig. */
.pf-suche--mobil { display: none; }

/* ==========================================================================
   Suchergebnisse
   ========================================================================== */

.pf-suchform { max-width: 44rem; margin-bottom: 2.5rem; }
.pf-suchform__label {
  display: block;
  font-family: var(--pf-serif);
  font-size: 1.25rem;
  color: var(--pf-petrol-900);
  margin-bottom: .6rem;
}
.pf-suchform__zeile { display: flex; gap: .6rem; }
.pf-suchform__zeile input[type="search"] {
  flex: 1; min-width: 0;
  padding: .85rem 1rem;
  font: inherit; font-size: 1.05rem;
  border: 1px solid var(--pf-rahmen);
  border-radius: 0;
  -webkit-appearance: none;
}

.pf-treffer { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pf-linie); }
.pf-treffer li { margin: 0; }
.pf-treffer a {
  display: block;
  padding: 1.3rem 0;
  border-bottom: 1px solid var(--pf-linie);
  text-decoration: none; color: inherit;
  transition: background var(--pf-t);
}
.pf-treffer a:hover { background: var(--pf-creme); }

.pf-treffer__art {
  display: block;
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
  margin-bottom: .1rem;
}
.pf-treffer__titel {
  display: block;
  /* Seit M5 eine <h2>: Aussenabstand der Grundregel zuruecknehmen,
     damit die Trefferliste unveraendert aussieht. */
  margin: 0;
  font-family: var(--pf-serif);
  font-size: 1.5rem; font-weight: 600;
  color: var(--pf-petrol-900);
  line-height: 1.2;
}
.pf-treffer a:hover .pf-treffer__titel { color: var(--pf-petrol-700); }
.pf-treffer__auszug {
  display: block;
  color: var(--pf-text-weich);
  margin-top: .3rem;
  max-width: 62ch;
}
.pf-treffer__auszug mark {
  background: rgba(168, 118, 60, .18);
  color: inherit;
  padding: 0 .1em;
}
.pf-treffer__url {
  display: block;
  font-size: 0.95rem;
  color: var(--pf-petrol-500);
  margin-top: .35rem;
}

/* ==========================================================================
   Kommende Termine (Veranstaltungen)
   ========================================================================== */

.pf-termine { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pf-linie); }
.pf-termine__zeile { margin: 0; }
.pf-termine__zeile a {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 14rem);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--pf-linie);
  text-decoration: none; color: inherit;
  transition: background var(--pf-t);
}
.pf-termine__zeile a:hover { background: var(--pf-weiss); }

.pf-termine__titel {
  display: block;
  font-family: var(--pf-serif);
  font-size: 1.4rem; font-weight: 600;
  color: var(--pf-petrol-900);
  line-height: 1.2;
}
.pf-termine__zeile a:hover .pf-termine__titel { color: var(--pf-petrol-700); }
.pf-termine__text { display: block; color: var(--pf-text-weich); margin-top: .2rem; }
.pf-termine__wo { display: block; text-align: right; }
.pf-termine__zeit { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.pf-termine__ort  { display: block; color: var(--pf-text-weich); font-size: 0.95rem; }

@media (max-width: 760px) {
  .pf-termine__zeile a { grid-template-columns: 4.5rem minmax(0, 1fr); gap: .3rem 1.2rem; }
  .pf-termine__wo { grid-column: 2; text-align: left; margin-top: .3rem; }
  .pf-termine__zeit, .pf-termine__ort { display: inline; }
  .pf-termine__ort::before { content: ' · '; }
}

/* Seitenkopf in kleinerer Fassung — eine Suchanfrage im Titel wird sonst
   unnoetig gross und bricht ueber drei Zeilen. */
.pf-pagehead--klein h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  max-width: 30ch;
}

/* ==========================================================================
   Terminband: Einordnung links, Liste rechts.

   Mit nur einem oder zwei Terminen wirkte eine volle Zeile verloren —
   die halbe Breite blieb leer. So trägt der linke Text den Abschnitt
   auch dann, wenn wenig ansteht.
   ========================================================================== */

.pf-terminband {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.pf-terminband__text h2 { margin-bottom: .5rem; }
.pf-terminband__text p { color: var(--pf-text-weich); }
.pf-terminband__wege {
  display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
  margin-top: 1.2rem;
}

/* Im Band steht die Liste rechts und beginnt oben bündig mit der Überschrift. */
.pf-terminband .pf-termine { margin-top: .4rem; }

@media (max-width: 860px) {
  .pf-terminband { grid-template-columns: 1fr; gap: 1.75rem; }
  .pf-terminband__wege { flex-direction: row; gap: 1.5rem; flex-wrap: wrap; }
}

/* ==========================================================================
   Einzelne Meldung: breit statt halb leer
   ========================================================================== */

.pf-meldungen--einzeln { grid-template-columns: 1fr; }
.pf-meldungen--einzeln .pf-meldung--haupt {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.pf-meldungen--einzeln .pf-meldung__bild {
  margin-bottom: 0;
  /* Sonst zieht ein hohes Bild den ganzen Block in die Laenge und neben
     dem kurzen Text bleibt eine leere Flaeche stehen. */
  aspect-ratio: 3 / 2;
  max-height: 22rem;
}
.pf-meldungen--einzeln .pf-meldung__text { max-width: 46ch; }

@media (max-width: 760px) {
  .pf-meldungen--einzeln .pf-meldung--haupt { grid-template-columns: 1fr; }
  .pf-meldungen--einzeln .pf-meldung__bild { grid-row: auto; margin-bottom: 1rem; }
}

/* Inhalt einer Meldung als eigener Block — damit er neben einem Bild als
   Ganzes mittig sitzen kann statt oben zu kleben. */
.pf-meldung__inhalt { display: block; }
.pf-meldungen--einzeln .pf-meldung__inhalt {
  display: flex; flex-direction: column; justify-content: center;
}
.pf-meldung__mehr {
  display: none;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--pf-petrol-700);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  align-self: flex-start;
}
.pf-meldungen--einzeln .pf-meldung__mehr { display: inline-block; }
.pf-meldung:hover .pf-meldung__mehr { color: var(--pf-akzent); }

/* ==========================================================================
   Bewerbungsformular (Zivildienst)

   Zwei Spalten: links wozu und an wen, rechts das Formular. Ein Formular
   ohne Ansprache daneben wirkt wie ein Behördenblatt.
   ========================================================================== */

.pf-bewerbung {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.pf-bewerbung__rubrik {
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
  margin-bottom: .4rem;
}
.pf-bewerbung__text h2 { margin-bottom: .7rem; }
.pf-bewerbung__weg {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--pf-linie);
  color: var(--pf-text-weich);
  line-height: 1.8;
}

/* --- Felder ------------------------------------------------------------- */

.pf-formular { display: grid; gap: 1.15rem; }

.pf-feld { display: grid; gap: .35rem; }
.pf-feld label {
  font-weight: 600;
  color: var(--pf-petrol-900);
  font-size: 0.98rem;
}
.pf-feld__muss { color: var(--pf-akzent); }
.pf-feld__frei {
  font-weight: 400;
  color: var(--pf-text-weich);
  font-size: 0.88rem;
}

.pf-formular input[type="text"],
.pf-formular input[type="email"],
.pf-formular input[type="tel"],
.pf-formular input[type="number"],
.pf-formular textarea {
  width: 100%;
  font: inherit;
  color: var(--pf-petrol-900);
  background: var(--pf-weiss);
  border: 1px solid var(--pf-rahmen);
  border-radius: 2px;
  padding: .7rem .85rem;
}
.pf-formular textarea { resize: vertical; min-height: 6.5rem; }

.pf-formular input:focus,
.pf-formular textarea:focus {
  outline: none;
  border-color: var(--pf-petrol-500);
  box-shadow: 0 0 0 3px rgba(44, 123, 138, .16);
}

.pf-formular [aria-invalid="true"] { border-color: #A6362C; }
.pf-feld__fehler {
  color: #A6362C;
  font-size: 0.9rem;
  font-weight: 500;
}

.pf-feld__reihe {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

/* Zustimmung: Kästchen und Text nebeneinander, Text nicht unter das
   Kästchen laufen lassen. */
.pf-feld--haken label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .6rem;
  align-items: start;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pf-text-weich);
  cursor: pointer;
}
.pf-feld--haken input { margin-top: .25rem; width: 1.05rem; height: 1.05rem; }

.pf-formular__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin: .4rem 0 0;
}
.pf-formular__hinweis { color: var(--pf-text-weich); font-size: 0.92rem; }

/* Nur für Maschinen sichtbar. Nicht display:none — manche Programme
   überspringen versteckte Felder gerade deswegen. */
.pf-honig {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.pf-note--gut { border-left-color: #2F7D4F; }
.pf-note--warnung { border-left-color: #A6362C; }

@media (max-width: 900px) {
  .pf-bewerbung { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .pf-feld__reihe { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Veranstaltungen: Kachel mit Bild

   Das hochgeladene Bild steht oben, darunter Datum, Titel, ein Satz und
   der Ort. Kacheln ohne Bild bleiben schlank — ein grauer Platzhalter
   sähe nach Fehler aus.
   ========================================================================== */

.pf-vgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.pf-vkarte {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--pf-weiss);
}
/* Ohne Strich: ueber dem Bild wirkte er wie ein Balken auf dem Foto,
   unter dem Bild wie ein Fehler. Die Kachel braucht ihn nicht - das Bild
   und die farbige Datumszeile gliedern genug. */

.pf-vkarte__bild {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--pf-sand);
}
.pf-vkarte__bild img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.pf-vkarte:hover .pf-vkarte__bild img { transform: scale(1.04); }

.pf-vkarte__text {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  /* Innenabstand rundum: frueher klebte der Text am Bildrand. */
  padding: 1.15rem 1.3rem 1.4rem;
  flex: 1;
}

.pf-vkarte__datum {
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
}
.pf-vkarte__titel {
  font-family: var(--pf-serif);
  font-size: 1.32rem; font-weight: 600;
  line-height: 1.25;
  color: var(--pf-petrol-900);
}
.pf-vkarte__lead {
  color: var(--pf-text-weich);
  font-size: 1rem;
  line-height: 1.6;
}
.pf-vkarte__ort {
  color: var(--pf-text-weich);
  font-size: 0.95rem;
}
.pf-vkarte__mehr {
  margin-top: auto;
  padding-top: .8rem;
  font-size: 0.97rem; font-weight: 600;
  color: var(--pf-petrol-700);
}
.pf-vkarte:hover .pf-vkarte__titel,
.pf-vkarte:hover .pf-vkarte__mehr { color: var(--pf-akzent); }

/* Ohne Bild bleibt oben etwas Luft, damit die Kacheln nebeneinander
   nicht wie abgeschnitten wirken. */
.pf-vkarte--ohne-bild .pf-vkarte__text { padding-top: 1.4rem; }

/* Eine einzelne Kachel liegt quer: Bild links, Text rechts. Sonst stünde
   sie schmal in einer sonst leeren Reihe. */
.pf-vgrid--einzeln { grid-template-columns: 1fr; }
.pf-vgrid--einzeln .pf-vkarte {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
.pf-vgrid--einzeln .pf-vkarte__text { padding: 1.4rem 1.6rem 1.5rem; }
.pf-vgrid--einzeln .pf-vkarte__titel { font-size: 1.6rem; }

@media (max-width: 700px) {
  .pf-vgrid--einzeln .pf-vkarte { grid-template-columns: 1fr; gap: 1rem; }
  .pf-vgrid--einzeln .pf-vkarte__text { padding-top: 1rem; }
}

/* ==========================================================================
   Bild und Text im Wechsel

   Für Seiten, die aus mehreren bebilderten Abschnitten bestehen (Gebäude,
   Kirchenmusik, Wallfahrt). Jeder zweite Abschnitt kehrt die Seiten um —
   das ergibt Rhythmus, ohne dass jeder Block gleich aussieht.
   ========================================================================== */

.pf-wechsel { display: grid; gap: clamp(3rem, 6vw, 5rem); }

.pf-wechsel__block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}
.pf-wechsel__block:nth-child(even) .pf-wechsel__bild { order: 2; }

.pf-wechsel__bild { overflow: hidden; background: var(--pf-sand); }
.pf-wechsel__bild img {
  width: 100%; height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.pf-wechsel__text h2 { margin-bottom: .6rem; }
.pf-wechsel__text > p { margin-bottom: .9rem; }
.pf-wechsel__text > p:last-child { margin-bottom: 0; }

/* Kontaktzeilen innerhalb eines Abschnitts — kleiner als der Fließtext,
   damit sie nicht mit ihm konkurrieren. */
.pf-wechsel__angaben {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--pf-linie);
  color: var(--pf-text-weich);
  font-size: 0.97rem;
  line-height: 1.75;
}
.pf-wechsel__angaben strong { color: var(--pf-petrol-900); font-weight: 600; }

/* Abschnitt ohne Bild: Text läuft über beide Spalten, aber nicht ins Endlose. */
.pf-wechsel__block--nur-text { grid-template-columns: 1fr; }
.pf-wechsel__block--nur-text .pf-wechsel__text { max-width: 46rem; }

@media (max-width: 860px) {
  .pf-wechsel__block { grid-template-columns: 1fr; gap: 1.5rem; }
  .pf-wechsel__block:nth-child(even) .pf-wechsel__bild { order: 0; }
}

/* ==========================================================================
   Namensliste (Gremien, Chöre, Ansprechpersonen)

   Eine schlichte Aufzählung mit feiner Linie statt Aufzählungspunkten —
   Kästchen für jede Person wären bei zehn Namen zu viel Gewicht.
   ========================================================================== */

.pf-namen { list-style: none; margin: 0; padding: 0; }
.pf-namen li {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
  align-items: baseline;
  padding: .6rem 0;
  border-bottom: 1px solid var(--pf-linie);
  margin: 0;
}
.pf-namen li:last-child { border-bottom: 0; }
.pf-namen__name { font-weight: 600; color: var(--pf-petrol-900); }
.pf-namen__rolle { color: var(--pf-text-weich); font-size: 0.97rem; }
.pf-namen__kontakt { margin-left: auto; font-size: 0.95rem; }

/* ==========================================================================
   Kreise und Teams

   Übersicht als Bildkacheln, dahinter je Gruppe eine eigene Seite mit
   grossem Bild, Text in Lesebreite und einem Kasten mit den Angaben.
   ========================================================================== */

.pf-gruppen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
}

.pf-gruppe {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--pf-weiss);
}
.pf-gruppe__bild {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pf-sand);
}
.pf-gruppe__bild img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.pf-gruppe:hover .pf-gruppe__bild img { transform: scale(1.05); }

.pf-gruppe__text {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 0 0;
  flex: 1;
}
.pf-gruppe__name {
  font-family: var(--pf-serif);
  font-size: 1.25rem; font-weight: 600;
  line-height: 1.25;
  color: var(--pf-petrol-900);
}
.pf-gruppe__kurz { color: var(--pf-text-weich); font-size: 0.97rem; line-height: 1.55; }
.pf-gruppe__mehr {
  margin-top: auto; padding-top: .7rem;
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-petrol-700);
}
.pf-gruppe:hover .pf-gruppe__name,
.pf-gruppe:hover .pf-gruppe__mehr { color: var(--pf-akzent); }

/* Ohne Bild: eine ruhige Fläche mit Linie oben statt eines Platzhalters. */
.pf-gruppe--ohne-bild {
  border-top: 2px solid var(--pf-petrol-900);
  background: var(--pf-creme);
  padding: 1.2rem 1.3rem 1.3rem;
}
.pf-gruppe--ohne-bild .pf-gruppe__text { padding-top: 0; }

/* --- Einzelseite -------------------------------------------------------- */

.pf-gruppenbild {
  width: 100%;
  max-height: 26rem;
  overflow: hidden;
  background: var(--pf-sand);
}
.pf-gruppenbild img {
  width: 100%; height: 100%;
  max-height: 26rem;
  object-fit: cover; display: block;
}

.pf-gruppenseite {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.pf-gruppenseite__text > p { margin-bottom: 1rem; }
.pf-gruppenseite__text > ul {
  margin: 0 0 1rem 1.1rem;
  padding: 0;
  color: var(--pf-text);
}
.pf-gruppenseite__text > ul li { margin-bottom: .35rem; }
.pf-gruppenseite__weblink { margin-top: 1.5rem; font-weight: 600; }

.pf-gruppenseite__karte {
  background: var(--pf-creme);
  padding: 1.3rem 1.4rem;
  border-top: 2px solid var(--pf-akzent);
}
.pf-gruppenseite__rubrik {
  font-weight: 600; color: var(--pf-akzent);
  margin-bottom: .7rem;
}
.pf-gruppenseite__liste { margin: 0; }
.pf-gruppenseite__liste > div {
  padding: .55rem 0;
  border-bottom: 1px solid var(--pf-linie);
}
.pf-gruppenseite__liste > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pf-gruppenseite__liste dt {
  font-size: 0.85rem;
  color: var(--pf-text-weich);
  margin-bottom: .1rem;
}
.pf-gruppenseite__liste dd { margin: 0; font-size: 0.99rem; line-height: 1.5; }

.pf-gruppenseite__zurueck { margin-top: 2.5rem; }

@media (max-width: 860px) {
  .pf-gruppenseite { grid-template-columns: 1fr; gap: 2rem; }
  .pf-gruppenbild, .pf-gruppenbild img { max-height: 18rem; }
}

/* ==========================================================================
   Etappen (Jakobsweg)

   Eine Tabelle wäre naheliegend, bricht auf dem Telefon aber unschön um.
   Deshalb ein Raster, das schmal zur Karte je Etappe wird — die Werte
   tragen dann ihre eigene Beschriftung.
   ========================================================================== */

.pf-etappen { border-top: 1px solid var(--pf-linie); }

.pf-etappen__kopf,
.pf-etappe {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) repeat(4, 6.5rem);
  gap: .75rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--pf-linie);
}

.pf-etappen__kopf {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pf-text-weich);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-bottom: .5rem;
}

.pf-etappe__nr {
  font-family: var(--pf-serif);
  font-size: 1.25rem;
  color: var(--pf-akzent);
}
.pf-etappe__weg { font-weight: 600; color: var(--pf-petrol-900); }
.pf-etappe__wert { color: var(--pf-text-weich); font-size: 0.97rem; }
.pf-etappe__label { display: none; }

/* Die beiden Etappen, die Rankweil berühren, sind der Grund, warum diese
   Liste hier steht — sie werden hervorgehoben. */
.pf-etappe--hier { background: var(--pf-weiss); }
.pf-etappe__marke {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .5rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--pf-akzent);
  background: var(--pf-sand);
  border-radius: 2px;
}

@media (max-width: 820px) {
  .pf-etappen__kopf { display: none; }
  .pf-etappe {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    row-gap: .35rem;
    padding: 1rem 0;
  }
  .pf-etappe__weg { grid-column: 2; }
  .pf-etappe__wert {
    grid-column: 2;
    display: flex; gap: .5rem;
  }
  .pf-etappe__label {
    display: inline;
    min-width: 5rem;
    color: var(--pf-text-weich);
  }
}

/* ==========================================================================
   Ehemalige (Zivildienst)

   Zwanzig Jahrgänge. Als volle Personenkarten wäre das eine Wand; als
   kleine Bilder mit Name und Zeitraum bleibt es überschaubar und man
   erkennt trotzdem jedes Gesicht.
   ========================================================================== */

.pf-ehemalige {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.pf-ehemalig { display: flex; flex-direction: column; gap: .15rem; }

.pf-ehemalig__bild {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 50%;
  margin-bottom: .6rem;
  background: var(--pf-sand);
}
.pf-ehemalig__bild--leer { border: 1px solid var(--pf-linie); }

.pf-ehemalig__name { font-weight: 600; color: var(--pf-petrol-900); line-height: 1.3; }
.pf-ehemalig__ort  { color: var(--pf-text-weich); font-size: 0.92rem; }
.pf-ehemalig__zeit { color: var(--pf-text-weich); font-size: 0.88rem; }

.pf-zeilenkopf__hinweis { color: var(--pf-text-weich); font-size: 0.95rem; }

/* ==========================================================================
   Schmale Bildschirme — Nachtrag.

   Diese Regeln stehen bewusst am Dateiende: die Bausteine darüber (Suche,
   Terminband, Meldungen) wurden nach dem Haltepunkt-Block ergänzt und
   hätten ihn sonst überschrieben.
   ========================================================================== */

@media (max-width: 1080px) {
  /* Die eingeblendete Navigation ist position: fixed. Ein Vorfahre mit
     backdrop-filter wird aber selbst zum Bezugsrahmen dafür — die Fläche
     blieb dadurch auf die Höhe der Kopfzeile beschränkt. Der Weichzeichner
     ist Zierde und kann hier entfallen. */
  .pf-header { backdrop-filter: none; background: #fff; }

  /* Die Lupe entfällt: auf schmalen Schirmen steht das Suchfeld im Menü. */
  .pf-suchknopf { display: none; }
  .pf-suchleiste { display: none !important; }
  .pf-suche--mobil { display: flex; margin-top: 1.75rem; }
  .pf-suche--mobil input[type="search"] { font-size: 1.05rem; }

  /* Ohne die Lupe braucht es die Trennlinie links vom Menüschalter nicht. */
  .pf-kopfrechts { border-left: 0; padding-left: 0; margin-left: 0; }
}

/* ==========================================================================
   Kirchen und Kapellen

   Bild, Name, Kurzbeschreibung — und auf Klick der ausführliche Text.
   Wer kein Bild hat, bekommt keine leere Fläche, sondern nur Typografie.
   Gepflegt wird alles im Adminbereich unter Orte.
   ========================================================================== */

.pf-orte {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  align-items: start;
}

.pf-ort { min-width: 0; }
.pf-ort--gross { grid-column: span 2; }

.pf-ort__bild {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pf-sand);
  margin-bottom: .9rem;
}
.pf-ort--gross .pf-ort__bild { aspect-ratio: 16 / 9; }
.pf-ort__bild img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.16, .84, .28, 1);
}
.pf-ort:hover .pf-ort__bild img { transform: scale(1.04); }

.pf-ort__kopf {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  list-style: none;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--pf-linie);
}
.pf-ort__kopf::-webkit-details-marker { display: none; }
.pf-ort__klapp > .pf-ort__kopf { cursor: pointer; }
.pf-ort__klapp > .pf-ort__kopf:hover .pf-ort__name { color: var(--pf-petrol-700); }

.pf-ort__titel { display: block; min-width: 0; }
.pf-ort__name {
  display: block;
  font-family: var(--pf-serif);
  font-size: 1.35rem; font-weight: 600;
  color: var(--pf-petrol-900);
  line-height: 1.2;
}
.pf-ort--gross .pf-ort__name { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.pf-ort__kurz {
  display: block;
  color: var(--pf-text-weich);
  margin-top: .1rem;
}

.pf-ort__pfeil {
  flex: none; color: var(--pf-text-weich);
  transition: transform .25s cubic-bezier(.16, .84, .28, 1);
}
.pf-ort__klapp[open] .pf-ort__pfeil { transform: rotate(180deg); }

.pf-ort__text {
  padding-top: .85rem;
  color: var(--pf-text-weich);
  line-height: 1.7;
}

.pf-ort__adresse {
  margin: .5rem 0 0;
  font-size: 0.95rem;
  color: var(--pf-text-weich);
}

@media (max-width: 1080px) {
  .pf-orte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-ort--gross { grid-column: span 2; }
}
@media (max-width: 600px) {
  .pf-orte { grid-template-columns: 1fr; }
  .pf-ort--gross { grid-column: auto; }
  .pf-ort--gross .pf-ort__bild { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Pfarrblatt: hervorgehobene Ausgabe

   Titelseite links, Angaben und Download rechts. Eine einzelne kleine
   Kachel in einer sonst leeren Reihe sah nach Versehen aus.
   ========================================================================== */

.pf-heftgross {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}

.pf-heftgross__bild {
  display: block;
  aspect-ratio: 210 / 297;
  overflow: hidden;
  background: var(--pf-weiss);
  border: 1px solid var(--pf-linie);
  box-shadow: 0 14px 38px rgba(13, 48, 55, .12);
  transition: box-shadow var(--pf-t), transform var(--pf-t);
}
.pf-heftgross__bild:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(13, 48, 55, .18); }
.pf-heftgross__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-heftgross__bild .pf-heft__leer { width: 100%; height: 100%; display: grid; place-items: center; color: var(--pf-text-weich); }

.pf-heftgross__rubrik {
  font-size: 0.95rem; font-weight: 600;
  color: var(--pf-akzent);
  margin-bottom: .3rem;
}
.pf-heftgross__text h2 { margin-bottom: .35rem; }
.pf-heftgross__datum {
  color: var(--pf-text-weich);
  margin-bottom: 1rem;
}
.pf-heftgross__datum span::before { content: ' · '; }
.pf-heftgross__text > div { max-width: 40rem; }
.pf-heftgross__wege { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* Archivraster etwas dichter — die Titelseiten sind schmal. */
.pf-hefte { grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }

@media (max-width: 700px) {
  .pf-heftgross { grid-template-columns: 1fr; }
  .pf-heftgross__bild { max-width: 15rem; }
}

/* ==========================================================================
   Leerzustand einer Listenseite

   Ein einzelner Hinweiskasten in weiter weißer Fläche sieht nach Fehler
   aus. Stattdessen zwei Spalten: was fehlt und warum, daneben der Weg
   zum Pfarrbüro.
   ========================================================================== */

.pf-leer {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--pf-linie);
  border-bottom: 1px solid var(--pf-linie);
}

.pf-leer__text h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: .5rem; }
.pf-leer__text p  { color: var(--pf-text-weich); max-width: 46ch; }

.pf-leer__wege {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
}
.pf-leer__wege li { margin: 0; }
.pf-leer__wege a {
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
}

.pf-leer__kontakt {
  background: var(--pf-creme);
  padding: 1.4rem 1.5rem;
  font-size: 0.97rem;
  line-height: 1.7;
}
.pf-leer__rubrik {
  font-weight: 600; color: var(--pf-akzent);
  margin-bottom: .4rem;
}
.pf-leer__zeiten { color: var(--pf-text-weich); margin-top: .7rem; }

@media (max-width: 760px) {
  .pf-leer { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Gottesdienste — Tagesübersicht und regelmäßige Zeiten

   Bewusst leicht gebaut: dünne Linien statt Kästen, schmale Zeilen, zwei
   bis drei Spalten. Die frühere Fassung mit dunkler Kopfzeile je Kirche
   wirkte bei sieben Kirchen wie eine Wand.
   ========================================================================== */

/* Breite Spalten: lange Bezeichnungen - etwa die Jahrtagsmesse mit allen
   Verstorbenen - sollen nicht Wort fuer Wort umbrechen. Dadurch stehen je
   nach Bildschirm zwei bis drei Tage nebeneinander statt vier. */
.pf-gdtage {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  gap: 2rem 3rem;
}
.pf-gdtag { min-width: 0; }
.pf-gdtag__anlass {
  display: block;
  font-family: var(--pf-sans);
  font-size: .84rem; font-weight: 600;
  letter-spacing: .02em;
  color: var(--pf-akzent);
  margin-top: .15rem;
}
.pf-gdtag__datum {
  font-family: var(--pf-serif);
  flex-wrap: wrap;
  font-size: 1.08rem; font-weight: 600;
  color: var(--pf-petrol-900);
  padding-bottom: .45rem;
  margin: 0 0 .6rem;
  border-bottom: 2px solid var(--pf-petrol-900);
  display: flex; align-items: baseline; gap: .6rem;
}
.pf-gdtag__heute {
  font-family: var(--pf-sans);
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pf-akzent);
}
.pf-gdtag--heute .pf-gdtag__datum { border-bottom-color: var(--pf-akzent); }

.pf-gdtag__liste { list-style: none; margin: 0; padding: 0; }
.pf-gdtag__liste li {
  display: flex; gap: .8rem; align-items: baseline;
  padding: .42rem 0;
  border-bottom: 1px solid var(--pf-sand);
  margin: 0;
}
.pf-gdtag__liste li:last-child { border-bottom: 0; }
.pf-gdtag__zeit {
  /* Breit genug fuer «10.00 Uhr» - sonst bricht die Zeit um und die
     Zeile wird doppelt so hoch. */
  flex: 0 0 5.6rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--pf-petrol-800);
}
.pf-gdtag__was { min-width: 0; line-height: 1.45; }
.pf-gdtag__ort {
  display: block;
  font-size: .88rem;
  color: var(--pf-text-weich);
}

/* Regelmäßige Zeiten */
.pf-zeiten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.75rem 2.5rem;
}
.pf-zeitkirche { min-width: 0; }
.pf-zeitkirche__name {
  font-family: var(--pf-serif);
  font-size: 1.12rem; font-weight: 600;
  color: var(--pf-petrol-900);
  margin: 0 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--pf-linie);
}
.pf-zeitliste { list-style: none; margin: 0; padding: 0; }
.pf-zeitliste li {
  display: grid;
  grid-template-columns: minmax(7rem, auto) minmax(4.6rem, auto);
  align-items: baseline;
  column-gap: .8rem;
  padding: .4rem 0;
  margin: 0;
  border-bottom: 1px solid var(--pf-sand);
}
.pf-zeitliste li:last-child { border-bottom: 0; }
.pf-zeitliste__wann { font-weight: 600; }
.pf-zeitliste__zeit {
  font-variant-numeric: tabular-nums;
  color: var(--pf-petrol-800);
  white-space: nowrap;
}
.pf-zeitliste__was {
  grid-column: 1 / -1;
  color: var(--pf-text-weich);
  font-size: .93rem;
  line-height: 1.45;
}
/* Die jährlichen Einträge stehen über die volle Breite — dort ist der
   Zeitraum lang («Von 1. Mai bis 31. Mai, dienstags und donnerstags»). */
.pf-zeitliste--breit li { grid-template-columns: minmax(16rem, auto) minmax(4.6rem, auto) 1fr; }
.pf-zeitliste--breit .pf-zeitliste__was { grid-column: auto; }

.pf-immer { margin-top: 2.25rem; }
.pf-immer__titel {
  font-family: var(--pf-serif);
  font-size: 1.12rem; font-weight: 600;
  color: var(--pf-petrol-900);
  margin: 0 0 .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--pf-linie);
}

@media (max-width: 600px) {
  .pf-zeitliste--breit li { grid-template-columns: 1fr auto; }
  .pf-zeitliste--breit .pf-zeitliste__was { grid-column: 1 / -1; }
}

/* Veranstaltung: Bild oben, weitere Bilder darunter */
.pf-vbild { padding-top: 0; }
.pf-vbild img {
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}
.pf-vbilder {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.pf-vbilder figure { margin: 0; }
.pf-vbilder img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
}
.pf-vbilder figcaption {
  font-size: .88rem;
  color: var(--pf-text-weich);
  padding-top: .4rem;
}

/* Laengere Namenslisten in zwei Spalten - untereinander wurden sie zu
   lang, waehrend daneben Platz frei blieb. */
.pf-namen--zwei {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  column-gap: 2rem;
}
@media (max-width: 520px) {
  .pf-namen--zwei { grid-template-columns: 1fr; }
}

/* Portraet statt Querformat: schmalere Bildspalte, Hochformat, und
   der Kopf bleibt vollstaendig im Bild. */
.pf-wechsel__block--portraet {
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  align-items: start;
}
/* Jeder zweite Block spiegelt: das Bild wandert nach rechts. Dann muss
   auch die schmale Spalte nach rechts - sonst fuellt das Portraet die
   breite Seite aus und wirkt doppelt so gross wie das gegenueber. */
.pf-wechsel__block--portraet:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
}
.pf-wechsel__block--portraet .pf-wechsel__bild img {
  aspect-ratio: 3 / 4;
  /* Etwas oberhalb der Mitte ausrichten: bei Portraets sitzt der Kopf
     im oberen Drittel, sonst wird die Stirn abgeschnitten. */
  object-position: center 18%;
}
@media (max-width: 860px) {
  .pf-wechsel__block--portraet { grid-template-columns: 1fr; }
  .pf-wechsel__block--portraet .pf-wechsel__bild img { aspect-ratio: 3 / 2; }
}

/* Wechselnde Kirchenbilder im Auftakt: alle liegen uebereinander,
   sichtbar ist immer genau eines. Ohne JavaScript bleibt das erste. */
.pf-auftakt__bild { position: relative; }
.pf-auftakt__bild img { transition: opacity 1.2s ease; }
.pf-auftakt__bild .pf-auftakt__wechsel {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.pf-auftakt__bild img.is-sichtbar { opacity: 1; }
.pf-auftakt__bild img:first-child.is-sichtbar { opacity: 1; }

/* Veranstaltung: Text links, Bilder rechts. Die Bilder werden nicht
   beschnitten - Plakate sind haeufig hochformatig. */
.pf-vdetail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.pf-vdetail__text { max-width: 46rem; min-width: 0; }
.pf-vdetail__bilder { display: grid; gap: 1.25rem; min-width: 0; }
.pf-vbild__eins { margin: 0; }
.pf-vbild__eins img { width: 100%; height: auto; display: block; }
.pf-vbild__eins figcaption {
  font-size: .88rem; color: var(--pf-text-weich); padding-top: .4rem;
}
@media (max-width: 860px) {
  .pf-vdetail { grid-template-columns: 1fr; }
  .pf-vdetail__bilder { order: -1; }
}

/* Filterband ueber der Tagesuebersicht */
.pf-gdfilter {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem 1.1rem;
  padding: .9rem 0 1.4rem;
  border-bottom: 1px solid var(--pf-linie);
  margin-bottom: 1.75rem;
}
.pf-gdfilter__titel { font-weight: 600; color: var(--pf-petrol-900); }
.pf-gdfilter__liste { display: flex; flex-wrap: wrap; gap: .4rem .9rem; flex: 1; }
/* Mindestens 44 Pixel hoch: kleinere Flaechen sind mit dem Finger
   kaum zu treffen (WCAG 2.5.5). */
.pf-gdfilter__wahl {
  display: flex; align-items: center; gap: .45rem;
  cursor: pointer; font-size: .94rem;
  min-height: 2.75rem; padding: 0 .25rem;
}
.pf-gdfilter__wahl input { width: 1rem; height: 1rem; accent-color: var(--pf-petrol-800); }
.pf-gdfilter__alle {
  border: 1px solid var(--pf-rahmen); background: #fff; cursor: pointer;
  padding: .3rem .9rem; font: inherit; font-size: .9rem; color: var(--pf-petrol-800);
}
.pf-gdfilter__alle:hover { background: var(--pf-creme); }

/* Anmeldung zu einer Veranstaltung */
.pf-anmeldung {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--pf-linie);
}
.pf-anmeldung h2 { margin-bottom: 1rem; }
.pf-feld__wahl { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; }
.pf-feld__wahl input { margin-top: .25rem; accent-color: var(--pf-petrol-800); }


/* ==========================================================================
   Terminabstimmung

   Je Termin eine Zeile: links wann, rechts Ja oder Nein. Ausgebuchte
   Termine bleiben sichtbar, sind aber nicht mehr waehlbar - sonst fragt
   man sich, warum ein Termin verschwunden ist.
   ========================================================================== */

.pf-abstimmung { border: 0; padding: 0; margin: .5rem 0 0; }
.pf-abstimmung legend { font-weight: 600; color: var(--pf-petrol-900); padding: 0 0 .4rem; }
.pf-abstimmung__termin {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1.5rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--pf-sand);
}
.pf-abstimmung__termin:last-child { border-bottom: 0; }
.pf-abstimmung__termin--voll { color: var(--pf-text-weich); }
.pf-abstimmung__wann { min-width: 0; }
.pf-abstimmung__voll {
  display: inline-block; margin-left: .5rem;
  font-size: .8rem; font-weight: 600; color: var(--pf-akzent);
}
.pf-abstimmung__zahl { margin-left: .5rem; font-size: .85rem; color: var(--pf-text-weich); }
.pf-abstimmung__wahl { display: flex; gap: 1.25rem; }
.pf-abstimmung__wahl label {
  display: flex; align-items: center; gap: .35rem;
  min-height: 2.75rem; cursor: pointer; font-weight: 400;
}
.pf-abstimmung__wahl input { accent-color: var(--pf-petrol-800); }
.pf-abstimmung__bisher { margin-top: 1.25rem; color: var(--pf-text-weich); font-size: .95rem; }

/* Bild im Klappbereich: Wer auf das Foto tippt, klappt den Text auf.
   Vorher reagierte nur der Name - das Bild sah aus wie ein Knopf,
   war aber keiner. */
.pf-ort__kopf--mit-bild { display: block; padding: 0; }
.pf-ort__bild--klick { display: block; }
.pf-ort__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .9rem 0 .2rem;
}

/* ==========================================================================
   Pfarrblatt-Archiv: ein Klappbereich je Kirchenjahr

   Das Archiv umfasst weit über 150 Hefte. Zugeklappt holt der Browser die
   Titelbilder eines Jahrgangs erst beim Aufklappen — das spart beim ersten
   Laden Zeit und Datenvolumen. Gestaltet wie die übrigen Klappbereiche
   (.pf-ort__klapp, .pf-person__klapp), damit es sich vertraut anfühlt.
   ========================================================================== */

.pf-heftjahr { border-bottom: 1px solid var(--pf-linie); }
.pf-heftjahr:first-of-type { border-top: 1px solid var(--pf-linie); }

.pf-heftjahr__kopf {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 0;
  min-height: 2.75rem;
  cursor: pointer;
  font-family: var(--pf-sans);
  font-size: 1rem; font-weight: 600;
  color: var(--pf-petrol-900);
  list-style: none;
}
/* Das voreingestellte Dreieck des Browsers weicht dem eigenen Pfeil. */
.pf-heftjahr__kopf::-webkit-details-marker { display: none; }
.pf-heftjahr__kopf::marker { content: ''; }
.pf-heftjahr__kopf:hover .pf-heftjahr__jahr { color: var(--pf-akzent); }

.pf-heftjahr__zahl { font-weight: 400; color: var(--pf-text-weich); }
.pf-heftjahr__pfeil {
  margin-left: auto; flex: none;
  color: var(--pf-text-weich);
  transition: transform var(--pf-t);
}
.pf-heftjahr[open] .pf-heftjahr__pfeil { transform: rotate(180deg); }

/* Luft zwischen Überschrift und Raster, und der letzte Jahrgang braucht
   unten keinen doppelten Abstand. */
.pf-heftjahr[open] > .pf-hefte { margin-top: .5rem; margin-bottom: 1.5rem; }

/* Ausgeblendetes bleibt ausgeblendet.
   Die Zeilen der Tagesliste haben display:flex - damit waere das
   Attribut [hidden] wirkungslos, und der Kirchenfilter haette nichts
   bewirkt. Dasselbe gilt fuer einen ganzen Tag ohne uebrige Zeile. */
.pf-gdtag__liste li[hidden] { display: none !important; }
.pf-gdtag[hidden] { display: none !important; }
.pf-gdtage [hidden] { display: none !important; }
/* Zusatzangaben zu einem Termin — bei einer Jahrtagsmesse die Namen der
   Verstorbenen. Eigene Zeile, kleiner und ruhiger als die Bezeichnung:
   die Liste ist lang und soll den Termin nicht ueberlagern. */
.pf-gdtag__zusatz {
    display: block;
    margin-top: .35rem;
    padding-left: .75rem;
    border-left: 2px solid var(--pf-rahmen);
    font-size: .86rem;
    line-height: 1.6;
    color: var(--pf-text-leise, #5b564c);
    hyphens: auto;
}
.pf-zeitliste__was .pf-gdtag__zusatz { margin-top: .3rem; }

/* ==========================================================================
   Pfarre im Bild — Alben, Bildraster, Bildansicht
   Wie die übrigen Unterseiten: Linien statt Schatten, keine Rundungen,
   das Foto trägt die Fläche. Das Datum in der Akzentfarbe.
   ========================================================================== */

.pf-galerie-jahre {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: 1.4rem;
}
.pf-galerie-jahre a {
  padding: .35rem .8rem;
  border: 1px solid var(--pf-rahmen);
  text-decoration: none; font-weight: 600; font-size: .95rem;
  color: var(--pf-petrol-900);
  transition: border-color var(--pf-t), background var(--pf-t);
}
.pf-galerie-jahre a:hover { border-color: var(--pf-petrol-700); background: var(--pf-creme); }
.pf-galerie-jahre a[aria-current="page"] { background: var(--pf-petrol-800); border-color: var(--pf-petrol-800); color: #fff; }

/* „Frühere Jahre": gleiche Form wie die Jahresknöpfe, klappt eine Liste auf. */
/* Die Liste richtet sich an der ganzen Leiste aus, nicht am Knopf: je nach
   Breite steht „Frühere Jahre" links oder rechts in der Zeile, die Liste
   passt so aber immer auf den Bildschirm. */
.pf-galerie-jahre { align-items: flex-start; position: relative; }
.pf-galerie-jahre__mehr { position: static; }
.pf-galerie-jahre__mehr > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .8rem;
  border: 1px solid var(--pf-rahmen);
  font-weight: 600; font-size: .95rem; color: var(--pf-petrol-900);
  transition: border-color var(--pf-t), background var(--pf-t);
}
.pf-galerie-jahre__mehr > summary::-webkit-details-marker { display: none; }
.pf-galerie-jahre__mehr > summary:hover,
.pf-galerie-jahre__mehr[open] > summary { border-color: var(--pf-petrol-700); background: var(--pf-creme); }
.pf-galerie-jahre__mehr > summary.is-aktiv { background: var(--pf-petrol-800); border-color: var(--pf-petrol-800); color: #fff; }
.pf-galerie-jahre__mehr > summary svg { transition: transform var(--pf-t); }
.pf-galerie-jahre__mehr[open] > summary svg { transform: rotate(180deg); }
.pf-galerie-jahre__liste {
  position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0;
  width: max-content; max-width: 100%; margin: 0; padding: .4rem; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(4.25rem, 1fr)); gap: .35rem;
  background: #fff; border: 1px solid var(--pf-rahmen);
  box-shadow: 0 10px 28px -14px rgb(0 0 0 / .35);
}
.pf-galerie-jahre__liste a { display: block; text-align: center; }

.pf-galerie-gruppe + .pf-galerie-gruppe { margin-top: clamp(2.5rem, 5vw, 4rem); }
.pf-galerie-gruppe__kopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-bottom: .6rem; margin-bottom: 1.4rem;
  border-bottom: 1px solid var(--pf-linie);
}
.pf-galerie-gruppe__kopf h2 { margin: 0; }
.pf-galerie-gruppe__mehr { font-weight: 600; color: var(--pf-petrol-700); }

.pf-alben {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}
.pf-album { margin: 0; }
.pf-album__link {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
  border: 1px solid var(--pf-linie); background: #fff;
  transition: border-color var(--pf-t);
}
.pf-album__link:hover, .pf-album__link:focus-visible { border-color: var(--pf-petrol-500); }
.pf-album__bild {
  position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--pf-petrol-900); color: var(--pf-petrol-200);
}
.pf-album__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.pf-album__link:hover .pf-album__bild img,
.pf-album__link:focus-visible .pf-album__bild img { transform: scale(1.04); }
.pf-album__leer { position: absolute; inset: 25% 30%; width: 40%; height: 50%; }
.pf-album__anzahl {
  position: absolute; right: 0; bottom: 0;
  padding: .3rem .7rem; font-size: .85rem; font-weight: 600;
  background: rgba(13, 48, 55, .86); color: #fff;
}
.pf-album__text { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.15rem 1.2rem; }
.pf-album__datum { font-size: .92rem; font-weight: 600; color: var(--pf-akzent); }
.pf-album__titel { font-size: clamp(1.3rem, 2vw, 1.6rem); margin: 0; line-height: 1.2; }
.pf-album__ort { font-size: .95rem; color: var(--pf-text-weich); }

.pf-galerie-meta {
  display: flex; flex-wrap: wrap; gap: .25rem 0;
  margin: 0 0 .9rem; font-weight: 600; color: var(--pf-akzent);
}
.pf-galerie-meta > * + *::before { content: '·'; margin: 0 .55rem; color: var(--pf-rahmen); }

.pf-bilder {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - .25rem), 14rem), 1fr));
}
.pf-bilder__eintrag { margin: 0; }
.pf-bilder__link { display: block; aspect-ratio: 1; overflow: hidden; background: var(--pf-sand); cursor: zoom-in; }
.pf-bilder__link img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .7, .3, 1), opacity var(--pf-t); }
.pf-bilder__link:hover img { transform: scale(1.04); }
.pf-bilder__link:focus-visible { outline-offset: 3px; }

.pf-galerie-zurueck { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2.5rem; }

.pf-leuchtkasten {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(8, 20, 23, .96); color: #fff;
}
.pf-leuchtkasten[hidden] { display: none; }
.pf-leuchtkasten__flaeche {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 4rem clamp(.5rem, 6vw, 5.5rem) 1rem;
}
.pf-leuchtkasten__figur { margin: 0; display: flex; flex-direction: column; align-items: center; max-height: 100%; }
.pf-leuchtkasten__bild {
  max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; display: block;
  transition: opacity .2s;
}
.pf-leuchtkasten__bild.is-laedt { opacity: .35; }
.pf-leuchtkasten__unterschrift {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1rem;
  margin-top: .8rem; max-width: 60rem; text-align: center;
  font-size: .95rem; color: rgba(255, 255, 255, .85);
}
.pf-leuchtkasten__zahl { font-variant-numeric: tabular-nums; color: var(--pf-akzent-200); font-weight: 600; }
.pf-leuchtkasten__knopf {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .35);
  font-size: 2rem; line-height: 1; cursor: pointer;
  transition: background var(--pf-t), border-color var(--pf-t);
}
.pf-leuchtkasten__knopf:hover { background: rgba(255, 255, 255, .18); border-color: #fff; }
.pf-leuchtkasten__knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pf-leuchtkasten__knopf--zu { top: 1rem; right: 1rem; }
.pf-leuchtkasten__knopf--zurueck { left: clamp(.4rem, 1.5vw, 1.25rem); top: 50%; transform: translateY(-50%); }
.pf-leuchtkasten__knopf--weiter  { right: clamp(.4rem, 1.5vw, 1.25rem); top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .pf-leuchtkasten__flaeche { padding: 4rem .25rem 5rem; }
  .pf-leuchtkasten__knopf--zurueck, .pf-leuchtkasten__knopf--weiter { top: auto; bottom: 1rem; transform: none; }
  .pf-leuchtkasten__knopf--zurueck { left: 1rem; }
  .pf-leuchtkasten__knopf--weiter { right: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pf-album__bild img, .pf-bilder__link img { transition: none; }
  .pf-album__link:hover .pf-album__bild img, .pf-bilder__link:hover img { transform: none; }
}

.pf-galerie-nachweis { margin: .6rem 0 0; max-width: 38rem; font-size: .95rem; overflow-wrap: anywhere; color: var(--pf-text-weich); }
.pf-galerie-nachweis a { color: var(--pf-petrol-700); }