/*
Theme Name: Heroldsbach
Author: Pilgerverein Heroldsbach e.V.
Description: Individuelles Theme im Marienblau-Gold-Design der Gebetsstaette Heroldsbach.
Version: 1.4
Requires at least: 6.0
Requires PHP: 8.0
*/

:root {
  --blau: #1d3a63;
  --blau-hell: #2c5490;
  --gold: #c9a227;
  --creme: #faf7f0;
  --text: #2b2b2b;
}
* { box-sizing: border-box; margin: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--text);
       background: var(--creme); }
h1, h2, h3 { font-family: Georgia, serif; }

.entwurf { background: repeating-linear-gradient(45deg, #b33, #b33 12px, #922 12px, #922 24px);
           color: #fff; text-align: center; padding: 6px; font-size: .9em;
           letter-spacing: .5px; }

/* Kopf */
header { background: var(--blau); color: #fff; position: sticky; top: 0; z-index: 10;
         box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.kopf-innen { max-width: 1100px; margin: 0 auto; display: flex; align-items: center;
              gap: 14px; padding: 8px 16px; flex-wrap: wrap; }
.kopf-innen img { height: 64px; }
.titel { flex: 1; min-width: 200px; }
.titel .name { font-family: Georgia, serif; font-size: 1.25em; color: #fff;
               text-decoration: none; }
.titel .unter { font-size: .78em; color: #cdd8ea; }
/* Nur das Kopfmenue ist eine Flex-Leiste — die Brotkruemel (nav.pfad) sind
   normaler Fliesstext, sonst rutscht der aktive Seitenname nach oben */
header nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
header nav a { color: #fff; text-decoration: none; padding: 9px 12px; border-radius: 6px;
        font-size: .95em; }
header nav a:hover { background: var(--blau-hell); }
header nav a.aktiv { background: var(--blau-hell); }
.live { background: #b33; font-weight: 600; }
.live:hover { background: #d44; }
.live::before { content: "▶ "; }

/* Startseite */
.hero { position: relative; max-height: 460px; overflow: hidden; }
.hero img { width: 100%; display: block; object-fit: cover; max-height: 460px; }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0;
             background: linear-gradient(transparent, rgba(20, 35, 60, .85));
             color: #fff; padding: 70px 20px 26px; text-align: center; }
.hero-text h1 { font-size: clamp(1.4em, 4vw, 2.3em); text-shadow: 0 2px 6px rgba(0,0,0,.6); }
.hero-text p { margin-top: 6px; font-size: 1.05em; text-shadow: 0 1px 4px rgba(0,0,0,.7); }

main { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
section { margin: 42px 0; }
section > h2, main > h1 { color: var(--blau); }
section > h2 { font-size: 1.45em; border-bottom: 2px solid var(--gold);
               padding-bottom: 6px; margin-bottom: 18px; }
main > h1 { font-size: 1.9em; margin: 10px 0 6px;
            border-bottom: 3px solid var(--gold); padding-bottom: 8px; }
.pfad { margin: 18px 0 0; font-size: .9em; color: #888; }
.pfad a { color: var(--blau-hell); text-decoration: none; }
.pfad a:hover { text-decoration: underline; }
.pfad span { color: #666; }
.untertitel { color: #666; margin: 10px 0 0; }

/* Inhaltsseiten */
.inhalt { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
          padding: 26px 30px; margin: 22px 0 40px; line-height: 1.6; }
.inhalt h1, .inhalt h2, .inhalt h3 { color: var(--blau); margin: 1em 0 .4em; }
/* Einheitliche Stufenleiter: Seitentitel > Zwischentitel > Untertitel > Text */
.inhalt h1, .inhalt h2 { font-size: 1.3em; }
.inhalt h3 { font-size: 1.1em; }
.inhalt h2[id] { scroll-margin-top: 110px; }
.inhalt p { margin: .6em 0; }
.inhalt a { color: var(--blau-hell); }
/* Einheitliche Kennzeichnung: PDF-Dateien und externe Verweise */
.inhalt a[href$='.pdf']:not(.knopf)::after, .inhalt a[href$='.PDF']:not(.knopf)::after {
  content: " (PDF)"; color: #8a7a55; font-size: .85em; white-space: nowrap; }
.inhalt a[href^='http']:not([href$='.pdf']):not(.knopf)::after {
  content: " ↗"; color: #8a7a55; font-size: .9em; }
/* Knoepfe im Inhalt: weisse Schrift schlaegt die blaue Textlink-Farbe */
.inhalt a.knopf { color: #fff; }
.inhalt img { max-width: 100%; height: auto; border-radius: 8px; }
.inhalt table { border-collapse: collapse; max-width: 100%; margin: 1em 0; }
.inhalt td, .inhalt th { border: 1px solid #ddd; padding: 8px 12px;
                         vertical-align: top; }
.inhalt ul, .inhalt ol { margin: .6em 0 .6em 1.4em; }
.inhalt address { font-style: normal; }

.hinweis { background: #fff8e1; border-left: 5px solid var(--gold);
           padding: 10px 14px; border-radius: 8px; margin: 12px 0; color: #7a5c00; }
.toter-link { color: #aaa !important; pointer-events: none;
              text-decoration: line-through; }

/* Galerien */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
           gap: 10px; margin: 14px 0; }
.galerie img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px;
               box-shadow: 0 2px 8px rgba(0,0,0,.15); transition: transform .15s; }
.galerie img:hover { transform: scale(1.03); }

/* Landing-Kacheln */
.wahlliste { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
             gap: 18px; }
.wahl { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
        padding: 20px 22px; text-decoration: none; color: var(--text);
        border-top: 4px solid var(--gold); transition: transform .12s; }
.wahl:hover { transform: translateY(-3px); }
.wahl h3 { color: var(--blau); margin-bottom: 8px; font-size: 1.15em; }

/* Startseiten-Bausteine */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 18px; }
.karte { background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
         padding: 18px 20px; }
.karte h3 { color: var(--blau); margin: 4px 0 8px; font-size: 1.15em; }
.karte a { color: var(--blau-hell); }
.zeiten { background: #fff; border-left: 6px solid var(--gold); border-radius: 12px;
          box-shadow: 0 2px 10px rgba(0,0,0,.08); padding: 20px 24px;
          display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
          gap: 14px; }
.zeiten b { color: var(--blau); }
.besuch { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 18px; align-items: center; }
.besuch img { width: 100%; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.knopf { display: inline-block; background: var(--blau); color: #fff;
         text-decoration: none; padding: 10px 18px; border-radius: 8px;
         margin: 10px 8px 0 0; }
.knopf:hover { background: var(--blau-hell); }

/* Bildbetrachter (Lightbox) */
.lb-deckel { display: none; position: fixed; inset: 0; z-index: 100;
             background: rgba(10, 18, 32, .93); align-items: center;
             justify-content: center; }
.lb-deckel.offen { display: flex; }
.lb-deckel figure { max-width: 92vw; max-height: 92vh; text-align: center; }
.lb-deckel img { max-width: 92vw; max-height: 82vh; border-radius: 6px;
                 box-shadow: 0 6px 40px rgba(0,0,0,.6); }
.lb-deckel figcaption { color: #eee; padding: 12px 8px 0; font-size: 1.05em; }
.lb-pfeil { position: fixed; top: 50%; transform: translateY(-50%);
            background: rgba(255,255,255,.12); color: #fff; border: none;
            font-size: 2.2em; padding: 14px 18px; cursor: pointer;
            border-radius: 10px; }
.lb-pfeil:hover { background: rgba(255,255,255,.3); }
.lb-vor { left: 14px; }
.lb-nach { right: 14px; }
.lb-zu { position: fixed; top: 14px; right: 14px; background: none;
         border: none; color: #fff; font-size: 2.4em; cursor: pointer; }

footer { background: var(--blau); color: #cdd8ea; margin-top: 50px; }
.fuss-innen { max-width: 1100px; margin: 0 auto; padding: 26px 16px;
              display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: center; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }