/* ============================================
   BASILIKA RANKWEIL - Design System
   Modern, sacred, timeless
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  /* Colors - Sacred Palette */
  --color-primary: #7A1520;
  --color-primary-light: #9A2030;
  --color-primary-dark: #4A0A10;
  --color-gold: #B8963E;
  --color-gold-light: #D4B85A;
  /* Gold als Schrift. #B8963E erreicht auf Weiss nur 2,8:1 und ist damit
     als Text zu blass (gefordert sind 4,5:1). Dieselbe Farbfamilie, nur
     dunkler: 5,6:1 auf Weiss, 5,3:1 auf Creme, 4,7:1 auf Sand. Gilt NUR
     fuer Schrift und fuer Flaechen, auf denen weisse Schrift steht -
     Goldflaechen, Raender und Zierlinien behalten --color-gold.
     Der dunklere Ton ist der Hover-Zustand des Goldknopfs (7,9:1). */
  --color-gold-dark: #8C5E2A;
  --color-gold-darker: #6F4A1E;

  /* Neutrals - Warm Stone */
  --color-white: #FFFFFF;
  --color-cream: #FAF8F5;
  --color-sand: #F0EBE3;
  --color-stone: #D4CFC7;
  /* War #8A847A — auf Weiss nur rund 3:1 Kontrast und damit zu blass
     fuer Fliesstext. Jetzt rund 5:1. */
  --color-warm-gray: #6E675E;

  /* Eigene Toene fuer den dunklen Fussbereich: dort muss der Text heller
     sein als auf weissem Grund, sonst ist er kaum zu lesen. */
  --color-footer-text:  #B9B2A8;
  --color-footer-label: #857E74;
  --color-charcoal: #2D2926;
  --color-dark: #1A1816;

  /* Typography */
  --font-heading: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-accent: 'Cormorant', 'Georgia', serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* Layout */
  --width-content: 50rem;
  --width-wide: 72rem;
  --width-max: 80rem;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.6s ease;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 50px rgba(0, 0, 0, 0.12);
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  /* 17px statt 16px und etwas mehr Zeilenabstand: der Fliesstext war zu
     klein zum bequemen Lesen, besonders in den langen Textseiten. */
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--color-charcoal);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-primary-light);
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-dark);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
h4 { font-size: clamp(1.1rem, 2vw, 1.3rem); }

p {
  margin-bottom: var(--space-md);
}

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

/* --- Utility Classes --- */
.container {
  width: 100%;
  max-width: var(--width-wide);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.container--narrow {
  max-width: var(--width-content);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Skip link (WCAG 2.4.1 Bypass Blocks) ──── */
.skip-link {
  position: absolute;
  left: 0;
  top: -100px;
  z-index: 2000;
  background: var(--color-primary);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 4px 0;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* ── Global keyboard focus indicator (WCAG 2.4.7 Focus Visible) ──── */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Avoid double-rings on elements that already paint their own focus state */
.form-input:focus-visible,
.admin-input:focus-visible {
  outline: none;
}

/* ── Respect prefers-reduced-motion (WCAG 2.3.3 Animation from Interactions) ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-gold { color: var(--color-gold-dark); }

/* --- Section Spacing --- */
.section {
  padding: var(--space-4xl) 0;
}

.section--cream {
  background-color: var(--color-cream);
}

.section--sand {
  background-color: var(--color-sand);
}

.section--dark {
  background-color: var(--color-dark);
  color: var(--color-cream);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-cream);
}

.section--primary {
  background-color: var(--color-primary);
  color: var(--color-cream);
}

.section--primary h2,
.section--primary h3 {
  color: var(--color-cream);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.section__subtitle {
  /* Bewusst dieselbe Schrift wie der Fliesstext: die kursive Zierschrift
     unter jeder Ueberschrift war das auffaelligste Baukasten-Merkmal. */
  font-family: var(--font-body);
  font-size: 1.08rem;
  color: var(--color-warm-gray);
  margin-top: var(--space-sm);
}

/* --- Trenner ---------------------------------------------------------
   Frueher zwei Linien mit einem Kreuz dazwischen. Diese Zierde findet
   sich auf unzaehligen Baukasten-Websites und laesst die Seite beliebig
   wirken; die Abschnitte trennen sich ohnehin durch Flaeche und Abstand.
   Das Element bleibt als reiner Abstandhalter erhalten, damit die
   bestehenden Vorlagen unveraendert bleiben. */
.divider {
  display: block;
  height: var(--space-xl);
  margin: 0 auto;
}

.divider__icon { display: none; }

.divider__icon {
  color: var(--color-gold);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
}

/* --- Header / Navigation --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-sand);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  max-width: var(--width-max);
  margin: 0 auto;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  text-decoration: none;
  color: var(--color-dark);
}

.site-logo__img {
  height: 50px;
  width: auto;
}

.site-logo__text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.site-logo__text small {
  display: block;
  font-size: 0.74rem;
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-warm-gray);
}

/* Main Navigation */
.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.main-nav__link {
  padding: var(--space-sm) var(--space-md);
  /* 0.9rem waren rund 14 Pixel — fuer die Hauptnavigation zu klein. */
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-charcoal);
  text-decoration: none;
  border-radius: 4px;
  transition: all var(--transition-fast);
  position: relative;
}

.main-nav__link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition-base);
}

.main-nav__link:hover::after,
.main-nav__link.active::after {
  width: 60%;
}

.main-nav__link:hover {
  color: var(--color-primary);
}

.main-nav__link.active {
  color: var(--color-primary);
  font-weight: 500;
}

.main-nav__link--external {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.main-nav__external-icon {
  opacity: 0.7;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.main-nav__link--external:hover .main-nav__external-icon {
  opacity: 1;
  transform: translate(1px, -1px);
}

/* Dropdown menus */
.main-nav__item--dropdown {
  position: relative;
}

.main-nav__toggle {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.main-nav__caret {
  font-size: 0.65em;
  line-height: 1;
  transition: transform var(--transition-fast);
}

.main-nav__item--dropdown.open .main-nav__caret,
.main-nav__item--dropdown:hover .main-nav__caret {
  transform: rotate(180deg);
}

.main-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-sand);
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  padding: 6px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s linear var(--transition-fast);
  z-index: 1100;
}

/* Invisible bridge so the cursor can travel from the toggle to the dropdown
   without crossing a no-hover dead zone (margin-top above) */
.main-nav__dropdown::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.main-nav__item--dropdown:hover .main-nav__dropdown,
.main-nav__item--dropdown:focus-within .main-nav__dropdown,
.main-nav__item--dropdown.open .main-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.main-nav__dropdown a {
  display: block;
  padding: 10px 14px;
  font-size: 0.98rem;
  color: var(--color-charcoal);
  text-decoration: none;
  border-radius: 4px;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.main-nav__dropdown a:hover,
.main-nav__dropdown a:focus-visible {
  background: var(--color-cream);
  color: var(--color-primary);
}

/* Hamburger Menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  z-index: 1001;
}

.menu-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-charcoal);
  margin: 5px 0;
  transition: all var(--transition-base);
  border-radius: 2px;
}

.menu-toggle.active .menu-toggle__bar:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active .menu-toggle__bar:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active .menu-toggle__bar:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile overlay */
.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.mobile-overlay.active {
  opacity: 1;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-dark);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.65;
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.hero__slide--active {
  opacity: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bias the crop upward so the church-tower spire stays visible on wide screens */
  object-position: center 30%;
  opacity: 0.65;
}

/* Desktop-only Overrides (gelten nur ab 769px Breite) */
@media (min-width: 769px) {
  /* Erstes Bild stärker nach links verankern (Kirchturm rückt nach links) */
  .hero__slide img[src$="hero-basilika_2.jpg"] {
    object-position: 25% 30%;
  }
  /* Herbst-Bild — Spitze des Turms im oberen Bildbereich, sehr stark nach oben verankern */
  .hero__slide img[src*="hero-basilika-herbst_2"] {
    object-position: center 10%;
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 24, 22, 0.3) 0%,
    rgba(26, 24, 22, 0.5) 50%,
    rgba(26, 24, 22, 0.7) 100%
  );
  z-index: 2;
}

.hero__content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: var(--space-xl);
  max-width: 50rem;
}

.hero__pretitle {
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: var(--space-lg);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 600;
  color: var(--color-white);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.hero__subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--space-2xl);
}

.hero__scroll {
  position: absolute;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  transition: color var(--transition-fast);
}

.hero__scroll:hover {
  color: rgba(255, 255, 255, 0.9);
}

.hero__scroll-line {
  width: 1px;
  height: 40px;
  background: rgba(255, 255, 255, 0.4);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50% { transform: scaleY(1.3); opacity: 1; }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.85rem 2rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-primary-light);
  color: var(--color-white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn--outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

.btn--outline-dark {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn--outline-dark:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Weisse Schrift auf Gold: auf #B8963E waren es 2,8:1, im Hover auf
   #D4B85A sogar nur 1,9:1. Die Flaeche wird dunkler, die Schrift bleibt
   weiss - jetzt 5,6:1 bzw. 7,9:1. Der Hover dunkelt nach, statt wie
   frueher aufzuhellen; aufhellen laesst sich mit weisser Schrift nicht
   lesbar machen. */
.btn--gold {
  background: var(--color-gold-dark);
  color: var(--color-white);
}

.btn--gold:hover {
  background: var(--color-gold-darker);
  color: var(--color-white);
}

/* --- Pull Quote --- */
.pull-quote {
  font-family: var(--font-heading);
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  color: var(--color-primary);
  text-align: center;
  line-height: 1.4;
  max-width: 40rem;
  margin: var(--space-3xl) auto;
  padding: 0 var(--space-xl);
}

/* --- Feature Cards --- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}

/* Einzelne Karte nicht über die volle Breite aufblähen */
.cards-grid > .card:only-child {
  max-width: 420px;
}

.card {
  background: var(--color-white);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card__image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.card:hover .card__image img {
  transform: scale(1.05);
}

.card__body {
  padding: var(--space-xl);
}

.card__title {
  font-size: 1.4rem;
  margin-bottom: var(--space-sm);
}

.card__text {
  color: var(--color-warm-gray);
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

.card__link {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.card__link::after {
  content: '\2192';
  transition: transform var(--transition-fast);
}

.card:hover .card__link::after {
  transform: translateX(4px);
}

/* --- Schedule Table (Gottesdienste) --- */
.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-xl);
  max-width: var(--width-wide);
  margin: 0 auto;
}

.schedule__item {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
  background: var(--color-white);
  border-radius: 4px;
  border-top: 3px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.schedule__day {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-lg);
}

.schedule__time {
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--color-dark);
  margin-bottom: var(--space-sm);
}

.schedule__desc {
  color: var(--color-warm-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Grouped entries within a schedule item */
.schedule__entry {
  margin-bottom: var(--space-lg);
}

.schedule__entry:last-child {
  margin-bottom: 0;
}

.schedule__entry + .schedule__entry {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-stone);
}

/* ── Aktuelle Gottesdienste ─────────────────────── */
.aktuelle-gottesdienste {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: var(--width-content);
  margin: 0 auto;
}

.aktuelle-item {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--color-white);
  border-radius: 4px;
  border-left: 4px solid var(--color-primary);
  box-shadow: var(--shadow-sm);
  align-items: center;
}

.aktuelle-item__date {
  flex-shrink: 0;
  min-width: 140px;
  text-align: center;
}

.aktuelle-item__weekday {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
}

.aktuelle-item__fulldate {
  display: block;
  font-size: 0.85rem;
  color: var(--color-warm-gray);
  margin-top: 2px;
}

.aktuelle-item__entries {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.aktuelle-item__entry {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.aktuelle-item__time {
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  min-width: 80px;
}

.aktuelle-item__name {
  color: var(--color-warm-gray);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .aktuelle-item {
    flex-direction: column;
    gap: var(--space-md);
  }
  .aktuelle-item__date {
    text-align: left;
    min-width: unset;
  }
}

/* --- Timeline (Baugeschichte) --- */
.timeline {
  position: relative;
  max-width: var(--width-content);
  margin: 0 auto;
  padding: var(--space-xl) 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: var(--color-stone);
}

.timeline__item {
  position: relative;
  width: 50%;
  padding: 0 var(--space-2xl) var(--space-2xl);
}

.timeline__item:nth-child(odd) {
  margin-left: 0;
  text-align: right;
  padding-right: var(--space-2xl);
}

.timeline__item:nth-child(even) {
  margin-left: 50%;
  text-align: left;
  padding-left: var(--space-2xl);
}

.timeline__dot {
  position: absolute;
  top: 5px;
  width: 12px;
  height: 12px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.timeline__item:nth-child(odd) .timeline__dot {
  right: -6px;
}

.timeline__item:nth-child(even) .timeline__dot {
  left: -6px;
}

.timeline__year {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-xs);
}

.timeline__text {
  font-size: 0.95rem;
  color: var(--color-charcoal);
  line-height: 1.6;
}

/* --- Image Gallery Grid --- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-md);
}

.gallery-grid__item {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.gallery-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-grid__item:hover img {
  transform: scale(1.08);
}

.gallery-grid__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(122, 21, 32, 0);
  transition: background var(--transition-base);
  pointer-events: none;
}

.gallery-grid__item:hover::after {
  background: rgba(122, 21, 32, 0.15);
}

/* --- Lightbox --- */
[data-lightbox] { cursor: pointer; }

.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.92);
  justify-content: center;
  align-items: center;
}

.lightbox.active {
  display: flex;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 2px;
}

.lightbox__close {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: var(--space-sm);
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.lightbox__close:hover {
  opacity: 1;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  padding: var(--space-md);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.lightbox__nav:hover {
  opacity: 1;
}

.lightbox__nav--prev { left: var(--space-xl); }
.lightbox__nav--next { right: var(--space-xl); }

/* --- Event Cards --- */
.event-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: var(--width-content);
  margin: 0 auto;
}

.event-card {
  display: flex;
  gap: var(--space-xl);
  padding: var(--space-xl);
  background: var(--color-white);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
  border-left: 3px solid var(--color-primary);
  transition: box-shadow var(--transition-base);
}

.event-card:hover {
  box-shadow: var(--shadow-md);
}

.event-card__date {
  flex-shrink: 0;
  text-align: center;
  min-width: 70px;
}

.event-card__day {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.event-card__month {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-warm-gray);
}

.event-card__content {
  flex: 1;
}

.event-card__title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.event-card__text {
  color: var(--color-warm-gray);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* --- Contact Info Section --- */
.contact-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2xl);
  text-align: center;
}

/* Die vier Ueberschriften des Kontaktbands sind h2, nicht h4: auf der
   Kontaktseite folgen sie unmittelbar auf die h1, eine Ebene dazwischen
   gibt es nicht. Die Angaben sind unveraendert - die Schrift sieht also
   genauso aus wie vorher, nur die Gliederung stimmt jetzt. */
.contact-band__item h2 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.contact-band__item p,
.contact-band__item a {
  font-size: 0.95rem;
  color: var(--color-warm-gray);
  line-height: 1.7;
}

.contact-band__item a:hover {
  color: var(--color-primary);
}

/* --- People Grid --- */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-xl);
}

.person-card {
  text-align: center;
  padding: var(--space-2xl) var(--space-xl);
}

.person-card__photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-lg);
  border: 3px solid var(--color-sand);
}

.person-card__name {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.person-card__role {
  color: var(--color-warm-gray);
  font-size: 0.9rem;
  font-style: italic;
}

/* --- Page Hero (smaller, for inner pages) --- */
.page-hero {
  position: relative;
  padding: calc(var(--space-5xl) + 80px) 0 var(--space-4xl);
  background: var(--color-dark);
  text-align: center;
  overflow: hidden;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
}

.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
}

.page-hero__content {
  position: relative;
  z-index: 2;
}

.page-hero__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.page-hero__subtitle {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.7);
}

/* --- Content Blocks --- */
.content-block {
  max-width: var(--width-content);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.content-block p {
  font-size: 1.05rem;
  line-height: 1.8;
}

.content-block h3 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  color: var(--color-primary);
}

/* Two-column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.two-col--reverse {
  direction: rtl;
}

.two-col--reverse > * {
  direction: ltr;
}

.two-col__image {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.two-col__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Info Box --- */
.info-box {
  background: var(--color-cream);
  border-left: 3px solid var(--color-gold);
  padding: var(--space-xl);
  border-radius: 0 4px 4px 0;
  margin: var(--space-xl) 0;
}

.info-box__title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

/* --- Footer --- */
.site-footer {
  background: var(--color-dark);
  color: var(--color-stone);
  padding: var(--space-4xl) 0 var(--space-xl);
}

.footer-grid {
  display: grid;
  /* Die Kontaktspalte braucht mehr Platz — Anschrift und E-Mail-Adresse
     brachen sonst mitten im Wort um. */
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.footer__brand {
  max-width: 300px;
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

.footer__brand p {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--color-footer-text);
}

.footer__heading {
  /* Kleine Serifenueberschriften wirkten im Fussbereich wie Zierrat.
     Jetzt eine ruhige Bezeichnung in der Grundschrift. */
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-footer-label);
  margin-bottom: var(--space-md);
}

.footer__links li {
  margin-bottom: var(--space-sm);
}

.footer__links a {
  font-size: 0.98rem;
  color: var(--color-footer-text);
  transition: color var(--transition-fast);
}

.footer__links a:hover {
  color: var(--color-gold-light);
}

.footer__contact p {
  font-size: 0.98rem;
  margin-bottom: var(--space-xs);
  color: var(--color-footer-text);
}

.footer__contact a {
  color: var(--color-footer-text);
}

.footer__contact a:hover {
  color: var(--color-gold-light);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--color-warm-gray);
}

.footer__bottom a {
  color: var(--color-warm-gray);
}

.footer__bottom a:hover {
  color: var(--color-gold-light);
}

/* --- Einblenden beim Scrollen -----------------------------------------

   Zwei Aenderungen gegenueber frueher:

   1. Der Inhalt ist von sich aus sichtbar. Ausgeblendet wird nur, wenn
      JavaScript die Klasse js-anim am <html> gesetzt hat. Vorher blieb
      alles unsichtbar, sobald das Skript nicht lief — und in Ausdrucken,
      Vorschauen und Lesemodi war die Seite leer.

   2. Deutlich zurueckhaltender: 8 statt 30 Pixel Versatz, 0,4 statt
      0,8 Sekunden. Die langen Schiebe-Effekte waren das auffaelligste
      Baukasten-Merkmal der Seite.
   ---------------------------------------------------------------------- */

.js-anim .fade-in,
.js-anim .fade-in-left,
.js-anim .fade-in-right {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}

.js-anim .fade-in.visible,
.js-anim .fade-in-left.visible,
.js-anim .fade-in-right.visible {
  opacity: 1;
  transform: none;
}

/* Wer Bewegung abgestellt hat, bekommt gar keine. */
@media (prefers-reduced-motion: reduce) {
  .js-anim .fade-in,
  .js-anim .fade-in-left,
  .js-anim .fade-in-right {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Responsive --- */

/* Tablet landscape */
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .two-col--reverse {
    direction: ltr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  .timeline::before {
    left: 20px;
  }

  .timeline__item,
  .timeline__item:nth-child(odd),
  .timeline__item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    text-align: left;
    padding-left: 50px;
    padding-right: 0;
  }

  .timeline__item:nth-child(odd) .timeline__dot,
  .timeline__item:nth-child(even) .timeline__dot {
    left: 14px;
    right: auto;
  }

  .hero__title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .contact-band {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .site-header__inner {
    padding: var(--space-sm) var(--space-md);
  }

  .main-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: calc(var(--space-5xl)) var(--space-xl) var(--space-xl);
    gap: 0;
    box-shadow: var(--shadow-xl);
    transition: right var(--transition-base);
    z-index: 1000;
    overflow-y: auto;
  }

  .main-nav.open {
    right: 0;
  }

  .main-nav__link {
    width: 100%;
    padding: var(--space-md) 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--color-sand);
  }

  .main-nav__link::after {
    display: none;
  }

  /* Dropdowns become inline expandable groups inside the mobile panel */
  .main-nav__item--dropdown {
    position: static;
    width: 100%;
  }

  .main-nav__toggle {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }

  .main-nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 var(--space-md);
    margin: 0;
    max-height: 0;
    overflow: hidden;
  }

  .main-nav__item--dropdown.open .main-nav__dropdown {
    max-height: 500px;
    padding: 4px 0 8px var(--space-md);
  }

  .main-nav__dropdown a {
    padding: 10px 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--color-sand);
  }

  .main-nav__dropdown a:last-child {
    border-bottom: none;
  }

  .menu-toggle {
    display: block;
  }

  .mobile-overlay.active {
    display: block;
  }

  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 450px;
  }

  .hero__bg img,
  .hero__slide img {
    object-position: 35% 30%;
  }
  /* Mobile-Overrides für Slides */
  .hero__slide img[src*="hero-basilika-herbst_2"] {
    object-position: 40% 20%;
  }
  .hero__slide img[src*="hero-basilika-nacht"] {
    object-position: 17% 30%;
  }

  .hero__content {
    padding: var(--space-lg);
  }

  .site-logo__img {
    height: 40px;
  }

  .site-logo__text {
    font-size: 1.1rem;
  }

  .section {
    padding: var(--space-3xl) 0;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .contact-band {
    grid-template-columns: 1fr 1fr;
  }

  .schedule {
    grid-template-columns: 1fr 1fr;
  }

  .block-columns--2, .block-columns--3 {
    grid-template-columns: 1fr;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 400px;
  }

  .hero__bg img,
  .hero__slide img {
    object-position: 33% 30%;
  }
  .hero__slide img[src*="hero-basilika-herbst_2"] {
    object-position: 35% 20%;
  }
  .hero__slide img[src*="hero-basilika-nacht"] {
    object-position: 15% 30%;
  }

  .hero__content {
    padding: var(--space-md) var(--space-sm);
  }

  .hero__pretitle {
    font-size: 0.7rem;
    letter-spacing: 0.2em;
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  .hero__scroll {
    bottom: var(--space-lg);
    font-size: 0.65rem;
  }

  .hero__scroll-line {
    height: 28px;
  }

  .site-logo__img {
    height: 36px;
  }

  .site-logo__text {
    font-size: 1rem;
  }

  .site-logo__text small {
    font-size: 0.55rem;
  }

  .section {
    padding: var(--space-2xl) 0;
  }

  .container {
    padding: 0 var(--space-md);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .schedule {
    grid-template-columns: 1fr;
  }

  .event-card {
    flex-direction: column;
    gap: var(--space-md);
  }

  .event-card__date {
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
  }

  .contact-band {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .lightbox__nav { display: none; }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .countdown-timer__number {
    font-size: 2rem;
  }

  .countdown-timer__unit {
    min-width: 60px;
  }

  .countdown-timer {
    gap: var(--space-md);
  }

  .block-quote {
    padding: var(--space-lg) var(--space-md);
  }

  .block-quote__text {
    font-size: 1.1rem;
  }

  .scroll-to-top {
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
  }

  .accordion-item__question {
    padding: 12px 14px;
    font-size: 1rem;
  }

  .notice-banner {
    font-size: 0.85rem;
    padding: var(--space-sm) var(--space-md);
  }

  .pull-quote {
    margin: var(--space-lg) 0;
    padding: var(--space-md) var(--space-lg);
  }
}

/* Small phones */
@media (max-width: 380px) {
  .hero {
    height: 100vh;
    height: 100dvh;
    min-height: 350px;
  }

  .hero__bg img,
  .hero__slide img {
    object-position: 28% 30%;
  }
  .hero__slide img[src*="hero-basilika-herbst_2"] {
    object-position: 30% 20%;
  }
  .hero__slide img[src*="hero-basilika-nacht"] {
    object-position: 12% 30%;
  }

  .hero__title {
    font-size: 1.8rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .site-logo__text {
    font-size: 0.9rem;
  }
}

/* --- Notice Banner --- */
.notice-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}

.notice-banner__content {
  max-width: var(--width-wide);
}

.notice-banner--info {
  background: #EFF6FF;
  color: #1E40AF;
  border-bottom: 1px solid #BFDBFE;
}

.notice-banner--warning {
  background: #FFFBEB;
  color: #92400E;
  border-bottom: 1px solid #FDE68A;
}

.notice-banner--success {
  background: #F0FDF4;
  color: #166534;
  border-bottom: 1px solid #BBF7D0;
}

.notice-banner--urgent {
  background: #7A1520;
  color: #fff;
}

.notice-banner--urgent a {
  color: var(--color-gold-light);
}

.cms-global-notice-zone {
  position: relative;
  z-index: 5;
}

/* ── HINWEIS AUF DER STARTSEITE ─────────────────────────────
   Kleines Fenster unten rechts, im Adminbereich ein- und ausschaltbar.
   Dezent statt Alarm: der Hinweis steht oft wochenlang. Wegklicken
   merkt sich der Browser, bis der Text geändert wird. */
.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(--color-cream);
  border: 1px solid var(--color-stone);
  box-shadow: 0 18px 44px -24px rgb(74 10 16 / .6);
  color: var(--color-charcoal);
}
.hinweis-popup__text {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: .005em;
}
@media (prefers-reduced-motion: no-preference) {
  .hinweis-popup { animation: hinweis-auf .35s ease-out both; }
}
@keyframes hinweis-auf {
  from { opacity: 0; transform: translateY(.75rem); }
  to   { opacity: 1; transform: none; }
}
.hinweis-popup__text > *:first-child { margin-top: 0; }
.hinweis-popup__text > *:last-child { margin-bottom: 0; }
.hinweis-popup__text a { color: var(--color-gold-darker); }
.hinweis-popup__zu {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -.15rem -.25rem 0 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--color-warm-gray);
  cursor: pointer;
}
.hinweis-popup__zu:hover { background: var(--color-sand); color: var(--color-primary); }
@media (max-width: 30rem) {
  .hinweis-popup { right: .75rem; left: .75rem; bottom: .75rem; max-width: none; }
}
@media print { .hinweis-popup { display: none; } }

/* ── SCROLL TO TOP ──────────────────────────────────────── */
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(122, 21, 32, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.2s;
  z-index: 90;
}

.scroll-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-to-top:hover {
  background: #5c0f18;
  box-shadow: 0 6px 20px rgba(122, 21, 32, 0.4);
  transform: translateY(-2px);
}

.scroll-to-top:active {
  transform: translateY(0);
}

/* ── ACCORDION BLOCK ──────────────────────────────────── */
.block-accordion { margin: var(--space-lg) 0; }
.accordion-item { border: 1px solid var(--color-stone); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.accordion-item__question { padding: 16px 20px; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; color: var(--color-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; }
.accordion-item__question::-webkit-details-marker { display: none; }
.accordion-item__question::after { content: '+'; font-size: 1.4rem; font-weight: 300; color: var(--color-warm-gray); transition: transform 0.3s; }
details[open] .accordion-item__question::after { content: '−'; }
details[open] .accordion-item__question { background: var(--color-cream); }
.accordion-item__answer { padding: 0 20px 16px; color: var(--color-warm-gray); line-height: 1.7; }

/* ── QUOTE BLOCK ──────────────────────────────────────── */
.block-quote { border: none; margin: var(--space-xl) auto; max-width: 42rem; padding: var(--space-xl) var(--space-2xl); position: relative; text-align: center; }
.block-quote::before { content: '\201C'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 6rem; font-family: var(--font-heading); color: var(--color-primary); opacity: 0.15; line-height: 1; }
.block-quote__text { font-family: var(--font-heading); font-size: 1.35rem; font-style: italic; color: var(--color-text); line-height: 1.6; margin-bottom: var(--space-lg); }
.block-quote__footer { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.block-quote__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-stone); }
.block-quote__author { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.block-quote__role { font-size: 0.85rem; color: var(--color-warm-gray); }

/* ── DIVIDER BLOCK ────────────────────────────────────── */
.block-divider { display: flex; align-items: center; justify-content: center; }
.block-divider--spacing-small { padding: var(--space-md) 0; }
.block-divider--spacing-medium { padding: var(--space-xl) 0; }
.block-divider--spacing-large { padding: var(--space-3xl) 0; }
.block-divider--line hr { border: none; height: 1px; background: var(--color-stone); width: 100%; }
.block-divider--dots { font-size: 1.5rem; letter-spacing: 1rem; color: var(--color-warm-gray); }
.block-divider--ornament { font-size: 1.8rem; color: var(--color-primary); opacity: 0.6; }
.block-divider--space { }

/* ── EMBED BLOCK ──────────────────────────────────────── */
.block-embed { margin: var(--space-lg) 0; }
.block-embed__wrapper { position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #000; }
.block-embed__wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.block-embed__caption { text-align: center; margin-top: var(--space-sm); font-size: 0.85rem; color: var(--color-warm-gray); font-style: italic; }
.block-embed__placeholder { display: flex; align-items: center; justify-content: center; min-height: 200px; background: var(--color-sand); border: 2px dashed var(--color-stone); border-radius: 8px; color: var(--color-warm-gray); font-size: 0.95rem; }

/* ── COLUMNS BLOCK ────────────────────────────────────── */
.block-columns { display: grid; gap: var(--space-xl); margin: var(--space-lg) 0; }
.block-columns--2 { grid-template-columns: 1fr 1fr; }
.block-columns--3 { grid-template-columns: 1fr 1fr 1fr; }
.block-columns__col { min-width: 0; }
.block-columns__col > *:first-child { margin-top: 0; }

/* ── COUNTDOWN BLOCK ──────────────────────────────────── */
.block-countdown { text-align: center; margin: var(--space-xl) 0; }
.countdown-timer { display: flex; justify-content: center; gap: var(--space-lg); flex-wrap: wrap; margin-top: var(--space-lg); }
.countdown-timer__unit { display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.countdown-timer__number { font-family: var(--font-heading); font-size: 3rem; font-weight: 700; color: var(--color-primary); line-height: 1; }
.countdown-timer__label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-warm-gray); margin-top: 4px; }
.countdown-timer__expired { font-size: 1.1rem; color: var(--color-primary); font-weight: 600; }

/* ── TABLE BLOCK ──────────────────────────────────────── */
.block-table { margin: var(--space-lg) 0; }
.block-table__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.block-table__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.block-table__table th { background: var(--color-primary); color: #fff; font-weight: 600; text-align: left; padding: 12px 16px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.block-table__table td { padding: 12px 16px; border-bottom: 1px solid var(--color-stone); color: var(--color-text); }
.block-table__table tr:last-child td { border-bottom: none; }
.block-table__table tr:hover td { background: rgba(122, 21, 32, 0.02); }

/* ── BLOCK SPACING & WIDTH UTILITY CLASSES ────────────────── */
.block-spacing-top--small { margin-top: 16px !important; }
.block-spacing-top--medium { margin-top: 32px !important; }
.block-spacing-top--large { margin-top: 64px !important; }
.block-spacing-bottom--small { margin-bottom: 16px !important; }
.block-spacing-bottom--medium { margin-bottom: 32px !important; }
.block-spacing-bottom--large { margin-bottom: 64px !important; }
.block-width--full { max-width: 100%; }
.block-width--contained { max-width: 900px; margin-left: auto; margin-right: auto; }
.block-width--narrow { max-width: 650px; margin-left: auto; margin-right: auto; }

/* Large screens */
@media (min-width: 1200px) {
  .container {
    padding: 0 var(--space-2xl);
  }
}

/* ═══════════════════════════════════════════════════════════
   VOTING TABLE (Terminabstimmung)
   ═══════════════════════════════════════════════════════════ */

.voting-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
.voting-table th,
.voting-table td {
    padding: .6rem .75rem;
    border: 1px solid var(--color-cream, #F0EBE3);
    vertical-align: middle;
}
.voting-table thead th {
    background: var(--color-cream, #FAF8F5);
    font-weight: 600;
}
.voting-table tfoot td {
    background: var(--color-cream, #FAF8F5);
    font-weight: 600;
}
.vote-yes { color: #059669; font-weight: bold; font-size: 1.1rem; }
.vote-maybe { color: #D97706; font-weight: bold; font-size: 1.1rem; }
.vote-no { color: #DC2626; font-size: 1rem; opacity: .5; }

/* ── Voting Form ─────────────────────────────────────────── */

.voting-options {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.voting-option {
    background: var(--color-cream, #FAF8F5);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.voting-option--full {
    opacity: .6;
}
.voting-option__label {
    font-size: .9rem;
}
.voting-option__choices {
    display: flex;
    gap: .5rem;
}
.vote-choice {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .3rem .6rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
    border: 1px solid #E5E7EB;
    transition: background .15s;
}
.vote-choice:hover { background: #f3f4f6; }
.vote-choice input[type="radio"] { accent-color: currentColor; }
.vote-choice--yes { color: #059669; }
.vote-choice--maybe { color: #D97706; }
.vote-choice--no { color: #DC2626; }

/* ── Registration Form ───────────────────────────────────── */

.registration-form {
    background: var(--color-cream, #FAF8F5);
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: var(--space-xl, 2rem);
}
.registration-form__field {
    margin-bottom: 1.25rem;
}
.registration-form__label {
    display: block;
    font-weight: 600;
    margin-bottom: .35rem;
    font-size: .9rem;
}
.form-input {
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: .9rem;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s;
}
.form-input:focus {
    outline: none;
    border-color: var(--color-primary, #7A1520);
    box-shadow: 0 0 0 3px rgba(122, 21, 32, .1);
}
select.form-input {
    appearance: auto;
}

@media (max-width: 600px) {
    .voting-option { flex-direction: column; align-items: flex-start; }
    .voting-option__choices { width: 100%; }
    .vote-choice { flex: 1; justify-content: center; }
}

/* --- Downloads --- */
/* --- Downloads (senior-friendly, large text) --- */
.download-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 52rem;
  margin: 0 auto;
}

.download-item {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border: 2px solid var(--color-sand);
  border-radius: var(--radius, 8px);
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.download-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
}

.download-item__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.download-item__info {
  flex: 1;
}

.download-item__info h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0 0 .2rem;
  line-height: 1.3;
}

.download-item__meta {
  font-size: 1rem;
  color: var(--color-warm-gray);
}

.download-item__action {
  font-size: 1.1rem;
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}

/* --- Pfarrblatt (grid cards like pfarre-rankweil.at) --- */
.pb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 1.5rem;
}

.pb-card {
  display: flex;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  transition: transform var(--transition-fast);
}

.pb-card:hover {
  transform: translateY(-2px);
}

.pb-card__img {
  width: 45%;
  flex-shrink: 0;
  padding: .5rem 1rem .5rem 0;
  border-right: 2px dotted var(--color-warm-gray, #908782);
  margin-right: 1rem;
  line-height: 0;
}

.pb-card__img img {
  width: 100%;
  height: auto;
  box-shadow: 0 0 3px 0 rgba(0,0,0,.2);
}

.pb-card__placeholder {
  width: 100%;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  color: var(--color-warm-gray);
  font-size: 3rem;
}

.pb-card__info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: .75rem 0;
}

.pb-card__nummer {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
}

.pb-card__datum {
  font-size: 1rem;
  color: var(--color-warm-gray);
  margin-top: .3rem;
}

/* Archive year tiles */
.pb-archive-years {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.pb-year-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .75rem;
  width: 140px;
  background: var(--color-white);
  border: 2px solid var(--color-sand);
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.pb-year-tile:hover {
  border-color: var(--color-primary);
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
  transform: translateY(-2px);
}

.pb-year-tile.active {
  border-color: var(--color-primary, #7A1520);
  box-shadow: 0 3px 12px rgba(122,21,32,.2);
}

.pb-year-tile__cover {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 2px rgba(0,0,0,.15);
}

.pb-year-tile__placeholder {
  width: 100%;
  aspect-ratio: 2/3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
  border-radius: 4px;
  font-size: 2rem;
  color: var(--color-warm-gray);
}

.pb-year-tile__label {
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
}

.pb-year-tile__count {
  font-size: .75rem;
  opacity: .6;
}

.pb-archive-content {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-sand);
}

.pb-archive-content__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

.pb-archive-content__header h3 {
  margin: 0;
  font-size: 1.2rem;
}

.pb-archive-close {
  background: none;
  border: 1px solid var(--color-warm-gray);
  border-radius: 4px;
  /* WCAG 2.5.5: rund 28 px hoch war zu wenig zum Treffen, vor allem am
     Telefon. Jetzt mindestens 44 px hoch und breiter im Griff. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: .5rem 1.25rem;
  font-size: .85rem;
  cursor: pointer;
  color: var(--color-warm-gray);
  font-family: inherit;
  transition: all var(--transition-fast);
}

.pb-archive-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

@media (max-width: 900px) {
  .pb-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .pb-grid { grid-template-columns: 1fr; }
  .pb-card__img { width: 40%; }
  .pb-year-tile { padding: .75rem 1rem; }
  .pb-year-tile__label { font-size: 1rem; }
  .download-item__action { display: none; }
  .download-item__info h3 { font-size: 1.15rem; }
}

/* ============================================
   PERSONEN / PEOPLE
   ============================================ */

.personen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-xl);
}

.personen-grid--compact {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.person-card {
  background: var(--color-white);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-align: center;
}

.person-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.person-card__image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-sand);
}

.person-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Bei Portraets sitzt der Kopf oberhalb der Bildmitte. Ohne Angabe
     schneidet cover mittig zu und nimmt ihm die Stirn. */
  object-position: center 25%;
}

.person-card__image--small {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: var(--space-lg) auto 0;
}

.person-card__image--small img {
  border-radius: 50%;
}

.person-card__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-warm-gray);
  background: var(--color-sand);
}

.person-card__placeholder--small {
  border-radius: 50%;
}

.person-card__info {
  padding: var(--space-lg);
}

.person-card__name {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-xs);
}

.person-card__rolle {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.person-card__dienstzeit {
  color: var(--color-warm-gray);
  font-size: 0.85rem;
  margin: 0 0 var(--space-sm);
}

.person-card__beschreibung {
  color: var(--color-warm-gray);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 var(--space-sm);
}

.person-card__kontakt {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.person-card__kontakt a {
  color: var(--color-primary);
  font-size: 0.85rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.person-card__kontakt a:hover {
  color: var(--color-gold-dark);
}

/* Compact card for former Zivildiener */
.person-card--compact {
  text-align: center;
}

.person-card--compact .person-card__info {
  padding: var(--space-md);
}

.person-card--compact .person-card__name {
  font-size: 1.1rem;
}

/* Zivildiener highlight */
.person-card--zivi {
  border-top: 3px solid var(--color-gold);
}

@media (max-width: 600px) {
  .personen-grid { grid-template-columns: 1fr; }
  .personen-grid--compact { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }
  .person-card--compact .person-card__image--small { width: 70px; height: 70px; }
}

/* ==========================================================================
   Abschnitt mit Hintergrundbild.

   Das Bild ist ein echtes <img> hinter dem Inhalt — so bleibt die
   Bildauswahl des Editors unveraendert nutzbar und der Browser kann es
   verzoegert laden. Der Schleier darueber haelt den Text lesbar,
   unabhaengig davon, welches Foto hinterlegt wird.
   ========================================================================== */

.section--mit-bild {
  position: relative;
  isolation: isolate;
  background: var(--color-dark);
  color: #fff;
}

.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.section-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.section-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,16,.55), rgba(20,18,16,.72));
}
.section-bg--stark::after {
  background: linear-gradient(180deg, rgba(20,18,16,.62), rgba(20,18,16,.78));
}

/* Text auf dem Bild */
.section--mit-bild .pull-quote,
.section--mit-bild h2,
.section--mit-bild h3 { color: #fff; }
.section--mit-bild .welcome-text,
.section--mit-bild .section__subtitle { color: rgba(255,255,255,.88); }

/* Leere Flaeche im Bearbeitungsmodus: sichtbar, aber unaufdringlich */
.section-bg--leer { display: grid; place-items: center; }
.section-bg--leer img { object-fit: contain; opacity: .5; }
.section-bg--leer::after { background: rgba(0,0,0,.04); }
.section-bg__hinweis {
  position: absolute;
  z-index: 1;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .8rem;
  letter-spacing: .04em;
  pointer-events: none;
}

/* Fliesstext des Willkommensbandes — vorher als inline-style im Template */
.welcome-text {
  max-width: 42rem;
  margin: var(--space-xl) auto 0;
  color: var(--color-warm-gray);
  font-size: 1.12rem;
  line-height: 1.8;
}

/* ==========================================================================
   Gottesdienstband auf der Startseite.

   Die haeufigste Frage an eine Kirche ist, wann Gottesdienst ist. Deshalb
   stehen die Zeiten auf der Startseite und nicht erst zwei Klicks entfernt.
   Bewusst zweispaltig und linksbuendig — die Startseite war zuvor durch-
   gehend zentriert, was ihr das Baukasten-Gepraege gab.
   ========================================================================== */

.zeiten-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  text-align: left;
}

.zeiten-band__text h2 { margin-bottom: var(--space-md); }
.zeiten-band__text p  { color: var(--color-warm-gray); }
.zeiten-band__text .btn { margin-top: var(--space-md); }

.zeiten-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-stone);
  border-radius: 4px;
  box-shadow: var(--shadow-sm);
}

.zeiten-liste li {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  padding: .85rem 1.4rem;
  border-bottom: 1px solid var(--color-sand);
}
.zeiten-liste li:last-child { border-bottom: 0; }

.zeiten-liste__tag {
  min-width: 9.5rem;
  font-weight: 600;
  color: var(--color-dark);
}
.zeiten-liste__uhr {
  min-width: 5.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  font-weight: 600;
}
.zeiten-liste__was { color: var(--color-warm-gray); }

/* Terminkarten sind jetzt Verweise */
a.event-card { text-decoration: none; color: inherit; }
a.event-card:hover .event-card__title { color: var(--color-primary); }
.event-card__zeit {
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: .35rem;
}

@media (max-width: 860px) {
  .zeiten-band { grid-template-columns: 1fr; }
  .zeiten-liste__tag { min-width: 7.5rem; }
}
@media (max-width: 560px) {
  .zeiten-liste li { flex-direction: column; gap: .1rem; }
  .zeiten-liste__tag, .zeiten-liste__uhr { min-width: 0; }
}

/* ==========================================================================
   Fussbereich — zweiter Durchgang.

   Der erste Durchgang hat nur Farben und Schriftgroessen geaendert; das war
   zu wenig, um den Eindruck zu drehen. Jetzt bekommt der Bereich einen
   eigenen Aufbau: die Anschrift steht vorne bei der Bildmarke, wo man sie
   sucht, und die Verweise stehen als zwei schmale Spalten daneben.
   ========================================================================== */

.site-footer {
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 var(--space-xl);
  /* Feiner Lichtsaum oben — sonst stoesst der dunkle Block hart an den
     hellen Inhalt darueber. */
  border-top: 3px solid var(--color-primary);
}

.footer-grid {
  grid-template-columns: 1.7fr 1fr 1fr 1.5fr;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.footer__brand-name {
  font-size: 1.65rem;
  color: #fff;
  margin-bottom: var(--space-md);
  letter-spacing: .005em;
}

.footer__heading {
  /* Rubriken sollen die Spalte benennen, nicht mit ihr konkurrieren. */
  font-size: .74rem;
  letter-spacing: .16em;
  color: #7E776D;
  margin-bottom: 1rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.footer__links li { margin-bottom: .55rem; }
.footer__links a { position: relative; }
.footer__links a:hover { color: #fff; }

.footer__contact p { line-height: 1.7; }
.footer__contact a:hover { color: #fff; }

.footer__bottom {
  font-size: .85rem;
  color: #7E776D;
  border-top: 1px solid rgba(255,255,255,.08);
}
.footer__bottom a { color: #7E776D; }
.footer__bottom a:hover { color: var(--color-gold-light); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer__bottom { flex-direction: column; gap: .6rem; align-items: flex-start; }
}