/* PKR Designsystem „Gemeinde“ – Kirchengemeinden, Gemeinschaften, Vereine mit vielen Seiten
   Leitidee: das Kirchenfenster (Spitzbogen) · Akzentfarbe folgt dem Kirchenjahr (html data-kirchenjahr)
   Schriften: Literata (Überschriften) und Atkinson Hyperlegible (Text), beide SIL Open Font License, lokal */

@font-face { font-family: "Literata"; src: url("fonts/literata-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Grundfarben: Kalkstein, Papier, Tinte */
  --stein: #E9ECE6;
  --papier: #F7F8F5;
  --tinte: #1C2531;
  --schiefer: #4F5967;
  --linie: #C3C9C0;
  /* Gemeinsame Hausfarben und liturgische Varianten */
  --weiss: #FFFFFF;
  --haus: #F2C230;
  --haus-hell: #FBF0C6;
  --haus-dunkel: #745400;
  --gruen: #2C6A44;
  --gruen-hell: #DCE9DF;
  --violett: #5A3E8A;
  --violett-hell: #E7E1F1;
  --fest: #8A6A12;
  --fest-hell: #F1EAD3;
  --rot: #A1302B;
  --rot-hell: #F3DEDB;
  --nacht: #0B1220;
  --nacht-rgb: 11, 18, 32;
  --tinte-rgb: 28, 37, 49;
  --weiss-rgb: 255, 255, 255;
  /* Akzent = liturgische Farbe bis zur Hausfarben-Zuordnung */
  --akzent: var(--gruen);
  --akzent-hell: var(--gruen-hell);
  --auf-akzent: var(--weiss);

  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Atkinson Hyperlegible", "Segoe UI", Verdana, sans-serif;
  /* Schriftgrößen (fließend) */
  --t-0: clamp(1.0625rem, 0.98rem + 0.3vw, 1.1875rem);   /* Fließtext 17–19 px */
  --t-klein: 0.9375rem;
  --t-1: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
  --t-2: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --t-3: clamp(2.4rem, 1.7rem + 3vw, 4.5rem);
  --t-4: clamp(2.9rem, 1.9rem + 4.4vw, 6rem);
  /* Abstände */
  --a-1: 0.5rem; --a-2: 1rem; --a-3: 1.5rem; --a-4: 2.5rem; --a-5: 4rem; --a-6: clamp(4rem, 3rem + 5vw, 7.5rem);
  --turm: 17.5rem;           /* Breite der Menüspalte */
  --text: 40rem;             /* Lesebreite */
  --weit: 72rem;
  /* Spitzbogen als Maske für Bilder */
  --bogen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V52C0 26 22 6 50 0c28 6 50 26 50 52v88z'/%3E%3C/svg%3E");
}
/* Kirchenjahr: eine Einstellung am <html>-Element färbt die ganze Website */
html[data-kirchenjahr="violett"] { --akzent: var(--violett); --akzent-hell: var(--violett-hell); }
html[data-kirchenjahr="weiss"]   { --akzent: var(--fest); --akzent-hell: var(--fest-hell); }
html[data-kirchenjahr="rot"]     { --akzent: var(--rot); --akzent-hell: var(--rot-hell); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--stein); color: var(--tinte); font: 400 var(--t-0)/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { display: inline-block; min-width: 24px; min-height: 24px; color: var(--tinte); text-decoration-color: var(--akzent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--akzent); }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 var(--a-2); letter-spacing: -0.01em; font-optical-sizing: auto; }
h1 { font-size: var(--t-3); font-weight: 400; letter-spacing: -0.02em; }
h2 { font-size: var(--t-2); }
h3 { font-size: var(--t-1); font-weight: 600; }
p, ul, ol, dl, table, figure, blockquote { margin: 0 0 var(--a-3); }
p, li { max-width: var(--text); }
strong { font-weight: 700; }

.sprung { position: absolute; left: var(--a-2); top: -4rem; z-index: 50; background: var(--tinte); color: var(--papier); padding: 0.7rem 1rem; text-decoration: none; }
.sprung:focus { top: var(--a-2); }

/* ---------- Grundgerüst: Menüspalte („Turm“) + Inhalt ---------- */
.rahmen { display: grid; grid-template-columns: var(--turm) minmax(0, 1fr); min-height: 100vh; }
.turm { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--papier); border-right: 1px solid var(--linie); padding: var(--a-4) var(--a-3) var(--a-3); display: flex; flex-direction: column; gap: var(--a-4); }
.marke { text-decoration: none; display: grid; gap: 0.15rem; }
.marke-name { font: 500 1.45rem/1.15 var(--serif); }
.marke-zusatz { font-size: var(--t-klein); color: var(--schiefer); }
.kirchenjahr { display: flex; align-items: center; gap: 0.6rem; font-size: var(--t-klein); color: var(--schiefer); }
.kirchenjahr::before { content: ""; width: 0.9rem; height: 1.2rem; flex: none; background: var(--akzent); -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; }
.menue { display: grid; gap: var(--a-3); }
.menue-gruppe h2 { font: 700 var(--t-klein)/1.3 var(--sans); color: var(--schiefer); margin: 0 0 0.35rem; letter-spacing: 0; }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue li { max-width: none; }
.menue a { display: block; padding: 0.38rem 0 0.38rem 0.85rem; border-left: 2px solid transparent; text-decoration: none; line-height: 1.3; }
.menue a:hover { border-left-color: var(--linie); color: var(--tinte); }
.menue a[aria-current="page"] { border-left-color: var(--akzent); font-weight: 700; }
.turm-kontakt { margin-top: auto; font-size: var(--t-klein); color: var(--schiefer); }
.turm-kontakt p { margin: 0 0 0.3rem; }
.turm-kontakt a { color: var(--tinte); }
/* Kontakt- und Hilfslinks auch auf dem Handy sicher treffen. */
.turm-kontakt a, .fuss a, .pfad a, .mehr, a[href^="tel:"], a[href^="mailto:"] { min-height: 44px; padding-block: .625rem; }
.menue-knopf { display: none; }

.inhalt { min-width: 0; }
.inhalt > main { padding: var(--a-6) clamp(1.25rem, 5vw, 5rem) var(--a-5); max-width: calc(var(--weit) + 10rem); }
.abschnitt { margin-bottom: var(--a-6); }
.abschnitt > h2 { margin-bottom: var(--a-3); }
.einleitung { font-size: var(--t-1); line-height: 1.5; color: var(--schiefer); max-width: 36rem; }

/* ---------- Spitzbogen-Bilder ---------- */
.fenster { margin: 0; }
.fenster-bild { position: relative; aspect-ratio: 5 / 7; background: linear-gradient(170deg, var(--akzent-hell), var(--linie) 70%); -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; overflow: hidden; }
.fenster-bild img { width: 100%; height: 100%; object-fit: cover; }
.fenster figcaption { margin-top: var(--a-2); }
/* Platzhalter, solange kein Foto da ist */
.platzhalter { position: absolute; inset: 0; display: grid; place-items: end center; padding: 1.5rem 1rem; font-size: var(--t-klein); color: var(--schiefer); text-align: center; }

/* ---------- Startseite ---------- */
.kopf-start { display: grid; gap: var(--a-4); margin-bottom: var(--a-6); }
.kopf-start h1 { font-size: var(--t-4); line-height: 1.02; max-width: 14ch; margin: 0; }
.kopf-start .einleitung { margin: 0; }
.drei-fenster { display: grid; grid-template-columns: repeat(var(--fenster-anzahl, 3), minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2.5rem); align-items: end; max-width: var(--weit); }
.drei-fenster .fenster:nth-child(2) .fenster-bild { aspect-ratio: 5 / 8; }   /* mittleres Fenster höher, wie ein Triptychon */
.kirche-name { font: 500 var(--t-1)/1.2 var(--serif); display: block; }
.kirche-zeit { display: block; color: var(--schiefer); }
.kirche-zeit strong { color: var(--tinte); }

.woche { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--tinte); max-width: 56rem; }
.termin { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; gap: var(--a-3); align-items: baseline; padding: var(--a-3) 0; border-bottom: 1px solid var(--linie); }
.termin-tag { font: 400 2.4rem/1 var(--serif); }
.termin-tag small { display: block; font: 700 var(--t-klein)/1.4 var(--sans); color: var(--schiefer); margin-top: 0.2rem; }
.termin h3 { margin: 0 0 0.2rem; font-size: var(--t-1); }
.termin p { margin: 0; color: var(--schiefer); }
.termin-ort { font-size: var(--t-klein); color: var(--schiefer); text-align: right; }
.mehr { display: inline-block; margin-top: var(--a-3); font-weight: 700; }

/* Lebenslagen: zweispaltige Liste mit Linien, keine Karten */
.lagen { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--a-5); max-width: var(--weit); }
.lagen li { border-top: 1px solid var(--linie); padding: var(--a-3) 0; max-width: none; }
.lagen h3 { margin-bottom: 0.3rem; }
.lagen h3 a { text-decoration: none; }
.lagen h3 a:hover { text-decoration: underline; text-decoration-color: var(--akzent); }
.lagen p { margin: 0; color: var(--schiefer); }

/* Hervorgehobene Fläche in der Farbe des Kirchenjahres */
.band { background: var(--akzent); color: var(--auf-akzent); padding: clamp(2rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--a-5); align-items: center; max-width: var(--weit); }
.band h2 { color: inherit; }
.band p { color: inherit; opacity: 0.92; }
.band a { color: inherit; text-decoration-color: currentColor; }
.band .knopf { background: var(--papier); color: var(--tinte); }
.band .fenster-bild { background: rgba(var(--weiss-rgb),.18); }
.band .platzhalter { color: var(--auf-akzent); }

.knopf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.9rem; padding: 0.65rem 1.25rem; background: var(--tinte); color: var(--papier); font-weight: 700; text-decoration: none; border-radius: 999px 999px 0.4rem 0.4rem; }
.knopf:hover { background: var(--akzent); color: var(--auf-akzent); }

/* ---------- Unterseiten ---------- */
.kopf-seite { margin-bottom: var(--a-5); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--a-4); align-items: end; max-width: var(--weit); }
.kopf-seite h1 { margin: 0; max-width: 18ch; }
.kopf-seite .einleitung { margin: var(--a-3) 0 0; }
.kopf-seite .fenster { width: clamp(8rem, 16vw, 13rem); }
.pfad { font-size: var(--t-klein); color: var(--schiefer); margin-bottom: var(--a-3); }
.pfad ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 0; }
.pfad li + li::before { content: "/"; margin-right: 0.3rem; color: var(--linie); }

.fliesstext { max-width: var(--text); }
.fliesstext h2 { margin-top: var(--a-5); }
.fliesstext ul { padding-left: 1.2rem; }
.fliesstext li { margin-bottom: 0.4rem; }
.zitat { margin: var(--a-5) 0; padding-left: var(--a-3); border-left: 3px solid var(--akzent); font: italic 400 var(--t-1)/1.45 var(--serif); max-width: 34rem; }
.zitat footer { font: 400 var(--t-klein)/1.4 var(--sans); color: var(--schiefer); margin-top: var(--a-2); }
.bild-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--a-5); align-items: start; margin: var(--a-5) 0; max-width: var(--weit); }

/* Tabellen (Gottesdienstzeiten) */
.zeiten { width: 100%; max-width: 56rem; border-collapse: collapse; }
.zeiten caption { text-align: left; font: 500 var(--t-1)/1.3 var(--serif); margin-bottom: var(--a-2); }
.zeiten th, .zeiten td { text-align: left; padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.zeiten thead th { font-size: var(--t-klein); color: var(--schiefer); border-bottom: 2px solid var(--tinte); }
.zeiten tbody th { font-weight: 700; }

/* Einbindungen (z. B. ChurchDesk-Kalender) */
.einbindung { background: var(--papier); border: 1px solid var(--linie); border-top: 4px solid var(--akzent); max-width: var(--weit); }
.einbindung iframe { display: block; width: 100%; min-height: 40rem; border: 0; }
.einbindung-hinweis { padding: var(--a-2) var(--a-3); font-size: var(--t-klein); color: var(--schiefer); border-top: 1px solid var(--linie); margin: 0; }
.einbindung-platzhalter { min-height: 22rem; display: grid; place-items: center; text-align: center; padding: var(--a-4); color: var(--schiefer); }

/* Gruppen und Kreise */
.gruppen { list-style: none; padding: 0; max-width: 56rem; border-top: 2px solid var(--tinte); }
.gruppe { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: var(--a-2) var(--a-4); padding: var(--a-3) 0; border-bottom: 1px solid var(--linie); max-width: none; }
.gruppe h3 { margin-bottom: 0.3rem; }
.gruppe p { margin: 0; color: var(--schiefer); }
.gruppe dl { margin: 0; font-size: var(--t-klein); }
.gruppe dt { font-weight: 700; }
.gruppe dd { margin: 0 0 0.4rem; }

/* Downloads */
.downloads { list-style: none; padding: 0; max-width: 40rem; }
.downloads li { border-bottom: 1px solid var(--linie); }
.downloads a { display: flex; justify-content: space-between; gap: var(--a-2); padding: 0.85rem 0; text-decoration: none; }
.downloads a:hover .dl-name { text-decoration: underline; text-decoration-color: var(--akzent); }
.dl-art { font-size: var(--t-klein); color: var(--schiefer); white-space: nowrap; }

/* Kontakt */
.kontakt-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-5); max-width: var(--weit); }
.kontakt-raster address { font-style: normal; }
.person { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--a-2) var(--a-3); align-items: center; padding: var(--a-3) 0; border-bottom: 1px solid var(--linie); }
.person .fenster-bild { aspect-ratio: 5 / 7; }
.person h3 { margin: 0; font-size: 1.2rem; }
.person p { margin: 0; color: var(--schiefer); font-size: var(--t-klein); }

/* ---------- Fuß ---------- */
.fuss { border-top: 1px solid var(--linie); padding: var(--a-4) clamp(1.25rem, 5vw, 5rem); font-size: var(--t-klein); color: var(--schiefer); display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-4); justify-content: space-between; }
.fuss ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--a-3); padding: 0; margin: 0; }
.fuss p { margin: 0; }

/* ---------- Eine ruhige Bewegung: die Fenster „leuchten auf“ ---------- */
@media (prefers-reduced-motion: no-preference) {
  .drei-fenster .fenster-bild { animation: aufleuchten 1.4s cubic-bezier(.2,.7,.2,1) both; }
  .drei-fenster .fenster:nth-child(2) .fenster-bild { animation-delay: .18s; }
  .drei-fenster .fenster:nth-child(3) .fenster-bild { animation-delay: .36s; }
  @keyframes aufleuchten { from { opacity: 0; filter: brightness(1.35) saturate(.6); transform: translateY(1.2rem); } to { opacity: 1; filter: none; transform: none; } }
  .knopf, .menue a { transition: background-color .2s, color .2s, border-color .2s; }
}

/* ---------- Tablet und Handy ---------- */
@media (max-width: 1024px) {
  :root { --turm: 15rem; }
  .band { grid-template-columns: minmax(0, 1fr); }
  .band .fenster { max-width: 12rem; }
}
@media (max-width: 820px) {
  .rahmen { display: block; }
  .turm { position: sticky; top: 0; z-index: 20; height: auto; max-height: 100vh; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--a-2); padding: 0.8rem 1.1rem; border-right: 0; border-bottom: 1px solid var(--linie); }
  .marke-name { font-size: 1.2rem; }
  .marke-zusatz, .kirchenjahr { display: none; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 1rem; background: var(--tinte); color: var(--papier); border: 0; border-radius: 999px 999px 0.4rem 0.4rem; font: 700 1rem var(--sans); cursor: pointer; }
  .js .menue, .js .turm-kontakt { display: none; }
  .js .turm.offen .menue, .js .turm.offen .turm-kontakt { display: grid; width: 100%; }
  .turm.offen { max-height: 100vh; overflow-y: auto; }
  .menue { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--a-2) 0; }
  .menue a { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .inhalt > main { padding-top: var(--a-5); }
  .kopf-seite { grid-template-columns: minmax(0, 1fr); }
  .kopf-seite .fenster { display: none; }
  .bild-text, .kontakt-raster, .lagen { grid-template-columns: minmax(0, 1fr); }
  .gruppe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .menue { grid-template-columns: minmax(0, 1fr); }
  .drei-fenster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .drei-fenster .fenster:first-child { grid-column: 1 / -1; }
  .drei-fenster .fenster:first-child .fenster-bild { aspect-ratio: 4 / 3; }
  .termin { grid-template-columns: 4rem minmax(0, 1fr); }
  .termin-ort { grid-column: 2; text-align: left; }
  .zeiten thead { display: none; }
  .zeiten tr { display: grid; padding: 0.6rem 0; border-bottom: 1px solid var(--linie); }
  .zeiten th, .zeiten td { border: 0; padding: 0.15rem 0; }
}
@media print {
  .turm, .fuss, .menue-knopf { display: none; }
  .rahmen { display: block; }
  body { background: var(--weiss); }
}
.sr-hinweis { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kontakt-raster h3 { margin-top: var(--a-3); }

/* Korrekturen nach Sichtprüfung */
.turm-kontakt a { overflow-wrap: anywhere; }
.knopf, .menue-knopf { border-radius: 1.5rem 1.5rem 0.35rem 0.35rem; }
/* Ohne Foto: angedeutetes Fenster (innerer Bogen und Mittelpfosten) */
.fenster-bild:has(.platzhalter)::before { content: ""; position: absolute; inset: 9% 10% 0; background: rgba(var(--weiss-rgb),.38); -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; }
.fenster-bild:has(.platzhalter)::after { content: ""; position: absolute; left: calc(50% - 1px); top: 22%; bottom: 0; width: 2px; background: rgba(var(--weiss-rgb),.55); }
.platzhalter { z-index: 1; }
.band .fenster-bild:has(.platzhalter)::before { background: rgba(var(--weiss-rgb),.14); }
@media (max-width: 820px) { .marke-name { font-size: 1.1rem; } .marke { flex: 1 1 12rem; min-width: 0; } }
.turm { gap: var(--a-3); }
.einbindung-hinweis { max-width: none; }

/* Variante: nur eine Kirche – ein großes Fenster neben dem Titel, darunter die nächsten Gottesdienste */
.eine-kirche { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(14rem, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: var(--a-6); max-width: var(--weit); }
.eine-kirche h1 { font-size: var(--t-4); line-height: 1.02; margin: 0 0 var(--a-3); }
.eine-kirche .fenster-bild { aspect-ratio: 5 / 8; }
.naechste { list-style: none; padding: 0; margin: var(--a-4) 0 0; border-top: 2px solid var(--tinte); max-width: 30rem; }
.naechste li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--a-2); padding: 0.8rem 0; border-bottom: 1px solid var(--linie); }
.naechste time { font: 500 1.15rem/1.3 var(--serif); white-space: nowrap; }
.naechste span { color: var(--schiefer); }
@media (prefers-reduced-motion: no-preference) { .eine-kirche .fenster-bild { animation: aufleuchten 1.4s cubic-bezier(.2,.7,.2,1) both; } }
@media (max-width: 820px) { .eine-kirche { grid-template-columns: minmax(0, 1fr); } .eine-kirche .fenster { max-width: 20rem; } }
@media (max-width: 420px) { .naechste li { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; } }

/* ===================== Ergänzungen für die Erlöserkirche Iserlohn ===================== */
.marke { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 0.75rem; }
.marke-logo { width: 3rem; height: 3rem; }
.marke-text { display: grid; gap: 0.15rem; }
.dachzeile { font: 700 var(--t-klein)/1.3 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--akzent); margin-bottom: var(--a-2); }
.band .dachzeile { color: inherit; opacity: .85; }
.klein { font-size: var(--t-klein); color: var(--schiefer); }
.naechste li { grid-template-columns: 9rem minmax(0, 1fr); }
.naechste-was { font: 500 1.15rem/1.3 var(--serif); color: var(--tinte) !important; }

/* Monatsspruch: großes Zitat, Andacht zweispaltig auf breiten Schirmen */
.zitat.gross { font-size: var(--t-2); line-height: 1.3; max-width: 46rem; margin: 0 0 var(--a-4); border-left-width: 4px; }
.spalten { max-width: var(--weit); }
@media (min-width: 1200px) { .spalten { columns: 2; column-gap: var(--a-5); } .spalten p { break-inside: avoid-column; } }
.unterschrift { font: italic 500 var(--t-1)/1.3 var(--serif); }

.knopf-reihe { display: flex; flex-wrap: wrap; gap: var(--a-2); max-width: none; }
.knopf.hell { background: var(--papier); color: var(--tinte); box-shadow: inset 0 0 0 2px var(--tinte); }
.knopf.hell:hover { background: var(--akzent); color: var(--auf-akzent); box-shadow: none; }
.abo { background: var(--akzent-hell); padding: clamp(1.5rem, 4vw, 3rem); max-width: var(--weit); }

/* Zwei Anrisse nebeneinander (Über uns / Unser Team) */
.zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-5); max-width: var(--weit); }
.teaser { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--a-3); align-items: end; }
.teaser h2 { font-size: var(--t-1); margin-bottom: .4rem; }
.teaser p { margin: 0; color: var(--schiefer); }
.teaser .mehr { margin-top: var(--a-2); }

.lagen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.still { list-style: none; padding: 0; margin: 0; color: var(--schiefer); }
.still li { margin: 0.15rem 0; }

/* Bilder ohne Spitzbogen: dünner Rahmen, oben gerundet wie ein Fenster */
.bild-rahmen { margin: 0; }
.bild-rahmen img { width: 100%; border-radius: 0.6rem 0.6rem 0 0; border-bottom: 4px solid var(--akzent); }
.beitrag { display: grid; gap: var(--a-4); max-width: 56rem; }
.beitrag .bild-rahmen.gross { max-width: 40rem; }
.bilderreihe { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--a-2); }
.bilderreihe li { max-width: none; }
.bilderreihe img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 0.4rem 0.4rem 0 0; }

/* Galerie: Rückblicke als Raster */
.galerie { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--a-4) var(--a-3); max-width: var(--weit); }
.galerie li { max-width: none; }
.galerie a { display: grid; gap: 0.4rem; text-decoration: none; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 0.6rem 0.6rem 0 0; border-bottom: 4px solid var(--akzent); transition: filter .2s; }
.galerie a:hover img { filter: brightness(1.08) saturate(1.1); }
.galerie-titel { font: 500 var(--t-1)/1.2 var(--serif); }
.galerie a:hover .galerie-titel { text-decoration: underline; text-decoration-color: var(--akzent); }
.galerie-unter { color: var(--schiefer); font-size: var(--t-klein); }

/* Gelbes Blatt */
.blatt-seiten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-2); max-width: var(--weit); margin-bottom: var(--a-2); }
.blatt-seiten img { width: 100%; height: auto; box-shadow: 0 1px 0 var(--linie), 0 6px 20px rgba(var(--tinte-rgb),.08); background: var(--weiss); }
.klappe { border-top: 1px solid var(--linie); max-width: var(--weit); }
.klappe:last-of-type { border-bottom: 1px solid var(--linie); }
/* Geschlossene Inhalte auch für Layout- und Sichtbarkeitsprüfungen vollständig ausblenden. */
.klappe:not([open]) > :not(summary) { display: none; }
.klappe summary { cursor: pointer; padding: 0.9rem 0; font: 500 var(--t-1)/1.3 var(--serif); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.klappe summary::-webkit-details-marker { display: none; }
.klappe summary::after { content: "+"; font-family: var(--sans); color: var(--akzent); }
.klappe[open] summary::after { content: "–"; }
.klappe > div, .klappe > .blatt-seiten { padding-bottom: var(--a-3); }

/* Schutzkonzept */
.sprungmarken ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: none; }
.sprungmarken a { display: inline-block; padding: 0.4rem 0.9rem; border: 1px solid var(--linie); border-radius: 1.2rem 1.2rem 0.3rem 0.3rem; text-decoration: none; background: var(--papier); }
.sprungmarken a:hover { border-color: var(--akzent); }
.sprungmarken { margin-bottom: var(--a-5); }
.band.notfall { grid-template-columns: minmax(0, 1fr); }
.band.notfall .knopf { background: var(--papier); color: var(--tinte); }
.nr { display: inline-grid; place-items: center; width: 2.2rem; height: 2.6rem; margin-right: 0.6rem; background: var(--akzent); color: var(--auf-akzent); font: 700 1.1rem var(--sans); vertical-align: middle; -webkit-mask: var(--bogen) center / 100% 100% no-repeat; mask: var(--bogen) center / 100% 100% no-repeat; padding-top: .35rem; }
.drei-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); max-width: var(--weit); }
.drei-spalten ul { padding-left: 1.1rem; }
.drei-spalten li { margin-bottom: .4rem; }

/* Einbindungen mit Zwei-Klick-Lösung */
.einbindung-platzhalter { min-height: 14rem; }
.einbindung-platzhalter p { margin-left: auto; margin-right: auto; }
.einbindung.geladen .einbindung-platzhalter { display: none; }
.einbindung iframe { min-height: 36rem; }

.qr { margin: var(--a-3) 0; }
.qr figcaption { font-size: var(--t-klein); color: var(--schiefer); }
.konfi { list-style: none; padding: 0; }
.konfi h2 { font-size: var(--t-1); margin: 0 0 .2rem; }
.recht h2 { font-size: var(--t-1); }
.recht h3 { font-size: 1.1rem; margin-top: var(--a-3); }

@media (max-width: 1024px) { .drei-spalten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) {
  .zwei, .lagen.vier { grid-template-columns: minmax(0, 1fr); }
  .marke-logo { width: 2.4rem; height: 2.4rem; }
}
@media (max-width: 560px) {
  .blatt-seiten { grid-template-columns: minmax(0, 1fr); }
  .teaser { grid-template-columns: 5rem minmax(0, 1fr); }
  .naechste li { grid-template-columns: minmax(0, 1fr); }
}
.recht, .person p, .kontakt-raster address { overflow-wrap: anywhere; }
.eine-kirche h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.8rem); }
.einbindung-platzhalter .knopf { font-size: 1rem; }
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }

/* ===== Hausfarbe der Gemeinde: Gelb (wie das Gelbe Blatt). Die liturgische Farbe zeigt nur noch die Kirchenjahr-Marke. ===== */
html { --liturgie: var(--gruen); }
html[data-kirchenjahr="violett"] { --liturgie: var(--violett); }
html[data-kirchenjahr="weiss"]   { --liturgie: var(--fest); }
html[data-kirchenjahr="rot"]     { --liturgie: var(--rot); }
html[data-kirchenjahr] { --akzent: var(--haus-dunkel); --akzent-hell: var(--haus-hell); --auf-akzent: var(--tinte); }
.kirchenjahr::before { background: var(--liturgie); }
.band { background: var(--haus); color: var(--tinte); }
.band .knopf, .band.notfall .knopf { background: var(--tinte); color: var(--papier); }
.band .knopf:hover { background: var(--papier); color: var(--tinte); }
.band .fenster-bild { background: rgba(var(--weiss-rgb),.35); }
.nr { background: var(--haus); color: var(--tinte); }
.menue a[aria-current="page"] { border-left: 4px solid var(--haus); padding-left: calc(0.85rem - 2px); }
.zitat { border-left-color: var(--haus); }
.einbindung { border-top-color: var(--haus); }
.bild-rahmen img, .galerie img { border-bottom-color: var(--haus); }
.abo { background: var(--haus-hell); }
.knopf:hover { background: var(--haus); color: var(--tinte); }
.knopf.hell:hover { background: var(--haus); color: var(--tinte); }

/* ChurchDesk direkt in der Seite (ohne Kasten) */
.einbindung-cd { max-width: var(--weit); }
.einbindung-cd iframe { display: block; width: 100%; height: 48rem; border: 0; background: transparent; overflow: hidden; }

/* Schutzkonzept als kleiner Hinweis direkt unter dem Willkommen – ganze Fläche klickbar */
.schutz-kurz { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; gap: var(--a-3); align-items: center; max-width: var(--weit); margin: calc(var(--a-5) * -1) 0 var(--a-6); padding: 0.9rem 1.4rem 0.9rem 1rem; background: var(--haus); color: var(--tinte); text-decoration: none; border-radius: 1.6rem 1.6rem 0.4rem 0.4rem; transition: transform .2s, box-shadow .2s; }
.schutz-kurz:hover { color: var(--tinte); box-shadow: 0 6px 20px rgba(var(--tinte-rgb),.15); }
.schutz-kurz .fenster-bild { aspect-ratio: 5 / 7; background: rgba(var(--weiss-rgb),.4); }
.schutz-kurz .dachzeile { display: block; color: var(--tinte); margin: 0 0 .15rem; }
.schutz-satz { display: block; line-height: 1.4; }
.schutz-kurz:hover .schutz-satz { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.schutz-pfeil { font-size: 1.6rem; line-height: 1; }
@media (prefers-reduced-motion: no-preference) { .schutz-kurz:hover { transform: translateY(-2px); } }
@media (max-width: 820px) { .schutz-kurz { margin-top: 0; } }
@media (max-width: 560px) { .schutz-kurz { grid-template-columns: 2.6rem minmax(0, 1fr); } .schutz-pfeil { display: none; } .schutz-satz { font-size: var(--t-klein); } }
/* Drucken/PDF: Spitzbogen-Maske weglassen (manche Browser drucken sie schwarz) */
@media print { .fenster-bild, .nr, .kirchenjahr::before { -webkit-mask: none !important; mask: none !important; } .fenster-bild img { border-radius: 0.6rem 0.6rem 0 0; } }
@media (max-width: 820px) { .eine-kirche .fenster { order: -1; max-width: 15rem; } .eine-kirche { gap: var(--a-4); } }

/* Geben & Nehmen: zwei Wege nebeneinander */
.zwei-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-3); max-width: var(--weit); }
.weg { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: 1.6rem 1.6rem 0.4rem 0.4rem; }
.weg h2 { font-size: var(--t-2); }
.weg-hilfe { background: var(--haus); }
.weg-hilfe .klein { color: var(--tinte); }
.weg-helfen { background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.lagen.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--a-4); }
@media (max-width: 1024px) { .lagen.drei { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 820px) { .zwei-wege { grid-template-columns: minmax(0, 1fr); } }
/* Marke: Name groß, darunter Gemeinde und Ort – auch auf dem Handy sichtbar */
.marke-name { font-size: 1.6rem; }
@media (max-width: 820px) { .marke-zusatz { display: block; font-size: 0.8rem; line-height: 1.25; } .marke-name { font-size: 1.2rem; } }
.marke { align-items: start; } .marke-logo { margin-top: .2rem; }
.kirchenjahr > span { display: grid; line-height: 1.3; }
.kj-titel { font-weight: 700; color: var(--tinte); }
.kirchenjahr::before { height: 2.1rem; width: 1.4rem; }
/* Kirchenjahr: Erklärung beim Darüberfahren oder Antippen/Fokus */
.kirchenjahr { position: relative; cursor: help; border-radius: .4rem; margin: 0; }
.kj-i { display: inline-grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-left: .25rem; border-radius: 50%; border: 1.5px solid var(--schiefer); font: 700 .7rem/1 var(--serif); color: var(--schiefer); vertical-align: .1em; }
.kj-info { position: absolute; z-index: 30; left: 0; top: 100%; width: min(15.5rem, 80vw); display: grid; gap: .5rem; padding: .9rem 1rem; background: var(--papier); color: var(--tinte); font-size: .875rem; line-height: 1.45; border: 1px solid var(--linie); border-top: 4px solid var(--liturgie); border-radius: .3rem; box-shadow: 0 10px 28px rgba(var(--tinte-rgb),.16); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.kirchenjahr:hover .kj-info, .kirchenjahr:focus .kj-info, .kirchenjahr:focus-within .kj-info { opacity: 1; visibility: visible; transform: none; }
.kirchenjahr:hover .kj-i { border-color: var(--liturgie); color: var(--liturgie); }
/* Logo groß, Schrift darunter (Desktop); auf dem Handy kompakt nebeneinander */
.marke { grid-template-columns: minmax(0, 1fr); row-gap: .8rem; }
.marke-logo { width: 11rem; height: auto; margin: 0; }
@media (max-width: 820px) {
  .marke { grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; align-items: center; row-gap: 0; }
  .marke-logo { width: 4.2rem; }
}

/* Mittlere Fensterbreiten (Tablet, schmales Browserfenster): nichts quetschen, Wörter nie mitten durchtrennen */
h1, h2, h3 { overflow-wrap: normal; word-break: normal; }
.eine-kirche h1 { font-size: clamp(2.2rem, 1rem + 2.6vw, 4.6rem); }
@media (max-width: 1180px) {
  .eine-kirche { grid-template-columns: minmax(0, 1fr); gap: var(--a-4); }
  .eine-kirche .fenster { order: -1; max-width: 17rem; }
  .eine-kirche h1 { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); max-width: 18ch; }
  .naechste { max-width: 34rem; }
}
@media (max-width: 1024px) {
  .marke-name { font-size: 1.35rem; }
  .marke-logo { width: 9rem; }
}
@media (max-width: 1180px) { .kontakt-raster { grid-template-columns: minmax(0, 1fr); } .zwei { grid-template-columns: minmax(0, 1fr); } }

/* ===== Startseite: Foto des Altarraums hinter dem Willkommen ===== */
.kopf-bild { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end;
  min-height: clamp(34rem, 78vh, 46rem); margin: calc(var(--a-6) * -1 + var(--a-3)) 0 var(--a-4); max-width: calc(var(--weit) + 4rem);
  border-radius: clamp(2rem, 8vw, 9rem) clamp(2rem, 8vw, 9rem) 0.5rem 0.5rem; background: var(--nacht); color: var(--weiss); }
.kopf-bild-foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.kopf-bild::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(var(--nacht-rgb),.88) 0%, rgba(var(--nacht-rgb),.72) 38%, rgba(var(--nacht-rgb),.25) 70%, rgba(var(--nacht-rgb),.05) 100%),
              linear-gradient(0deg, rgba(var(--nacht-rgb),.55) 0%, rgba(var(--nacht-rgb),0) 45%); }
.kopf-bild-text { padding: clamp(2rem, 5vw, 4rem); max-width: 40rem; }
.kopf-bild h1 { color: var(--weiss); font-size: clamp(2.3rem, 1.2rem + 3vw, 4.4rem); line-height: 1.04; margin: 0 0 var(--a-3); max-width: 15ch; }
.kopf-bild .einleitung { color: rgba(var(--weiss-rgb),.88); max-width: 34rem; }
.kopf-bild .naechste { border-top-color: var(--haus); margin-top: var(--a-3); }
.kopf-bild .naechste li { border-bottom-color: rgba(var(--weiss-rgb),.22); }
.kopf-bild .naechste-was { color: var(--weiss) !important; }
.kopf-bild .naechste span { color: rgba(var(--weiss-rgb),.8); }
.kopf-bild a { color: var(--weiss); text-decoration-color: var(--haus); }
.kopf-bild a:hover { color: var(--haus); }
.kopf-bild a:focus-visible { outline-color: var(--haus); }
.schutz-kurz { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kopf-bild-foto { animation: kopfbild 1.6s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes kopfbild { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
}
/* Schmal: Bild oben sichtbar, Text darunter auf dunklem Verlauf */
@media (max-width: 820px) {
  .kopf-bild { margin-top: calc(var(--a-5) * -1 + var(--a-2)); min-height: 0; padding-top: 58vw; border-radius: 4rem 4rem .4rem .4rem; }
  .kopf-bild-foto { height: 75vw; bottom: auto; object-position: 52% 50%; }
  .kopf-bild::before { background: linear-gradient(180deg, rgba(var(--nacht-rgb),0) 0, rgba(var(--nacht-rgb),0) 40vw, rgba(var(--nacht-rgb),.94) 74vw, var(--nacht) 100%); }
}
.kopf-bild { min-height: clamp(30rem, 66vh, 40rem); }
.kopf-bild-foto { object-position: 26% 55%; }
.kopf-bild h1 { font-size: clamp(2.2rem, 1.1rem + 2.6vw, 3.8rem); max-width: 17ch; }
.kopf-bild::before { background: linear-gradient(90deg, rgba(var(--nacht-rgb),.9) 0%, rgba(var(--nacht-rgb),.74) 34%, rgba(var(--nacht-rgb),.2) 62%, rgba(var(--nacht-rgb),0) 100%), linear-gradient(0deg, rgba(var(--nacht-rgb),.5) 0%, rgba(var(--nacht-rgb),0) 40%); }
@media (max-width: 820px) { .kopf-bild-foto { object-position: 52% 50%; } .kopf-bild::before { background: linear-gradient(180deg, rgba(var(--nacht-rgb),0) 0, rgba(var(--nacht-rgb),0) 40vw, rgba(var(--nacht-rgb),.94) 74vw, var(--nacht) 100%); } }
/* Bis 1400 px: Bild oben als Band, Text darunter auf dunklem Grund – nichts liegt mehr über dem hellen Altarraum */
@media (max-width: 1400px) {
  .kopf-bild { display: block; min-height: 0; padding-top: 0; }
  .kopf-bild-foto { position: relative; inset: auto; z-index: 0; display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-position: 52% 50%; }
  .kopf-bild::before { display: none; }
  .kopf-bild-text { position: relative; margin-top: -5rem; padding-top: 4rem; max-width: none; background: linear-gradient(180deg, rgba(var(--nacht-rgb),0) 0, var(--nacht) 4.5rem); }
}
@media (max-width: 820px) {
  .kopf-bild { margin-top: calc(var(--a-5) * -1 + var(--a-2)); border-radius: 3.5rem 3.5rem .4rem .4rem; }
  .kopf-bild-foto { aspect-ratio: 4 / 3; height: auto; }
  .marke-logo { width: 3.2rem; }
  .marke-name { font-size: 1.1rem; white-space: nowrap; }
}

/* ===================== Bewegung und visuelle Effekte =====================
   Alles nur, wenn das Gerät keine reduzierte Bewegung wünscht. Ohne JavaScript ist alles sofort sichtbar. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Inhalte gleiten beim Scrollen sanft herein (gestaffelt) */
  .anim [data-auf] { opacity: 0; transform: translateY(1.6rem); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  .anim [data-auf].da { opacity: 1; transform: none; }

  /* 2. Startbild: langsamer Zoom („Atmen“), Lichtschimmer, Text erscheint nacheinander */
  .kopf-bild-foto { animation: kopfbild 1.6s cubic-bezier(.2,.7,.2,1) both, atmen 26s ease-in-out 1.6s infinite alternate; transform-origin: 60% 45%; }
  @keyframes atmen { from { transform: scale(1); } to { transform: scale(1.07); } }
  .kopf-bild::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 28% 34% at 66% 40%, rgba(var(--weiss-rgb),.22), transparent 70%); animation: schimmer 7s ease-in-out infinite alternate; }
  @keyframes schimmer { from { opacity: .35; } to { opacity: 1; } }
  .kopf-bild-text > * { animation: hinein .9s cubic-bezier(.2,.7,.2,1) both; }
  .kopf-bild-text > :nth-child(1) { animation-delay: .25s; }
  .kopf-bild-text > :nth-child(2) { animation-delay: .45s; }
  .kopf-bild-text > :nth-child(3) { animation-delay: .65s; }
  @keyframes hinein { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }

  /* 3. Gelbe Linien „zeichnen“ sich */
  .kopf-bild .naechste { position: relative; border-top-color: transparent; }
  .kopf-bild .naechste::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--haus); transform-origin: left; animation: linie 1.1s cubic-bezier(.6,0,.2,1) .9s both; }
  @keyframes linie { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .anim .zitat[data-auf] { border-left-color: transparent; position: relative; }
  .anim .zitat[data-auf]::before { content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 4px; background: var(--haus); transform: scaleY(0); transform-origin: top; transition: transform 1s cubic-bezier(.6,0,.2,1) .2s; }
  .anim .zitat[data-auf].da::before { transform: scaleY(1); }

  /* 4. Bilder: sanfter Zoom beim Darüberfahren */
  .galerie a, .bilderreihe li, .bild-rahmen, .teaser .fenster-bild { overflow: hidden; }
  .galerie img, .bilderreihe img, .bild-rahmen img, .teaser img, .person img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s; }
  .galerie a:hover img, .bilderreihe li:hover img, .teaser:hover img, .person:hover img { transform: scale(1.06); }
  .galerie a { transition: transform .3s; }
  .galerie a:hover { transform: translateY(-4px); }

  /* 5. Menü: gelber Balken gleitet herein */
  .menue a { position: relative; transition: padding-left .25s, color .2s; }
  .menue a::before { content: ""; position: absolute; left: -2px; top: 20%; bottom: 20%; width: 4px; background: var(--haus); transform: scaleY(0); transition: transform .25s; border-radius: 2px; }
  .menue a:hover { padding-left: 1.1rem; border-left-color: transparent; }
  .menue a:hover::before { transform: scaleY(1); }

  /* 6. Knöpfe und Hinweise: kleine Rückmeldung */
  .knopf { transition: background-color .2s, color .2s, transform .2s, box-shadow .2s; }
  .knopf:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--tinte-rgb),.18); }
  .knopf:active { transform: none; box-shadow: none; }
  .schutz-pfeil, .mehr::after { display: inline-block; transition: transform .25s; }
  .schutz-kurz:hover .schutz-pfeil { transform: translateX(6px); }
  .mehr::after { content: " →"; }
  .mehr:hover::after { transform: translateX(4px); }
  .schutz-kurz .fenster-bild { animation: leuchten 3.5s ease-in-out infinite alternate; }
  @keyframes leuchten { from { box-shadow: none; filter: none; } to { filter: drop-shadow(0 0 6px rgba(var(--weiss-rgb),.9)); } }

  /* 7. Spitzbogen-Marken der Abschnittsnummern „ploppen“ auf */
  .anim [data-auf] .nr { transform: scale(.4); opacity: 0; transition: transform .6s cubic-bezier(.3,1.6,.5,1) .25s, opacity .3s .25s; }
  .anim [data-auf].da .nr { transform: none; opacity: 1; }

  /* 8. Kirchenjahr-Marke glimmt ganz leicht */
  .kirchenjahr::before { animation: glimmen 4s ease-in-out infinite alternate; }
  @keyframes glimmen { from { opacity: .75; } to { opacity: 1; } }

  /* 9. Klappen öffnen weich */
  .klappe[open] > :not(summary) { animation: none; }
}
@media print { [data-auf] { opacity: 1 !important; transform: none !important; } }

/* ===== Startbild neu: Bild-Ebene + Leuchten der Lichter (unscharfe Kopie im Modus „Aufhellen“) ===== */
.kopf-bild-medien { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.kopf-bild-medien img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 26% 55%; }
.kopf-bild-foto { animation: none !important; }
.kopf-bild-glanz { mix-blend-mode: screen; filter: blur(14px) brightness(1.35) saturate(1.6); opacity: .35; }
.kopf-bild::after { display: none; }
@media (max-width: 1400px) {
  .kopf-bild-medien { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 8; }
  .kopf-bild-medien img { object-position: 52% 50%; }
}
@media (max-width: 820px) { .kopf-bild-medien { aspect-ratio: 4 / 3; } }
@media (prefers-reduced-motion: no-preference) {
  .kopf-bild-medien { animation: kopfbild 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .kopf-bild-medien img { animation: atmen 26s ease-in-out 1.6s infinite alternate; transform-origin: 60% 45%; }
  .kopf-bild-glanz { animation: atmen 26s ease-in-out 1.6s infinite alternate, leuchten-licht 5s ease-in-out infinite alternate !important; }
  @keyframes leuchten-licht { 0% { opacity: .15; } 60% { opacity: .75; } 100% { opacity: .9; } }
}


/* Terminvorschau im gleichen Zeilenraster wie Gruppen und Gemeindebüro. */
.gd { min-width: 0; color: inherit; font-size: .85em; }
.gd .gd-termin { display: inline-block; font: inherit; line-height: inherit; }
.gd .gd-tag { font: inherit; white-space: normal; }
.gd .gd-zeit { font: inherit; white-space: nowrap; color: inherit; }
.gd .gd-was { margin: .15rem 0 0; font-size: .9em; font-weight: 400; line-height: 1.5; color: rgba(var(--weiss-rgb),.8); }
.gd .gd-leer { margin: 0; font: inherit; }
.gd .gd-bald { font-size: .75em; margin-right: .4rem; color: inherit; }

/* Abgestimmte Rechtsentwürfe: offene Angaben bleiben erkennbar. */
.recht-entwurf, .recht-pruefen { padding: var(--a-3) 0; border: 0; border-top: 1px solid var(--linie); border-radius: 0; background: transparent; }
.recht-entwurf { margin-bottom: var(--a-4); }
.recht-entwurf p { margin: .5rem 0 0; }
.recht-pruefen { font-size: var(--t-klein); line-height: 1.65; }
.recht code { font-size: .9em; overflow-wrap: anywhere; }

/* Lesbarer Text vor dem Foto, auch bei hellen Bildbereichen. */
@media (min-width: 1401px) {
  .kopf-bild::before { background: linear-gradient(90deg, rgba(var(--nacht-rgb),.9), rgba(var(--nacht-rgb),.72)); }
}

/* Ruhige Desktop-Aufteilung: Foto, Begrüßung und Termine ohne verdeckte Inhalte. */
@media (min-width: 821px) {
  .turm { height: 100dvh; }
  .turm > * { flex-shrink: 0; }
  .marke { min-height: max-content; }
  .marke-name, .marke-zusatz { overflow-wrap: anywhere; }
}
.kopf-bild { display: block; min-height: 0; margin-top: 0; border-radius: 2rem 2rem .4rem .4rem; }
.kopf-bild .kopf-bild-medien { position: relative; inset: auto; z-index: 0; aspect-ratio: 21 / 8; max-height: 23rem; animation: none !important; }
.kopf-bild .kopf-bild-medien img { animation: none !important; object-position: 52% 50%; }
.kopf-bild .kopf-bild-glanz { display: none; }
.kopf-bild::before, .kopf-bild::after { display: none; }
.kopf-bild .kopf-bild-text { position: relative; margin: 0; padding: clamp(1.5rem, 3vw, 2.5rem); max-width: none; background: var(--nacht); }
.kopf-bild .kopf-bild-text > * { animation: none; }
.kopf-bild h1 { font-size: clamp(2rem, 2.7vw, 3rem); line-height: 1.15; max-width: 27ch; }
.kopf-bild .einleitung { font-size: clamp(1.0625rem, 1.3vw, 1.25rem); max-width: 62ch; margin-bottom: 1.5rem; }
.kopf-bild .naechste { max-width: none; margin-top: 0; border-top-color: var(--haus); }
.kopf-bild .naechste::before { display: none; }
.kopf-bild .naechste li { grid-template-columns: minmax(8rem, .7fr) minmax(0, 1.5fr); gap: 1rem; align-items: start; }
.kopf-bild .naechste a { overflow-wrap: anywhere; }
@media (min-width: 1200px) {
  .kopf-bild .kopf-bild-text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 2rem; align-items: start; }
  .kopf-bild h1, .kopf-bild .einleitung { grid-column: 1; margin: 0; }
  .kopf-bild .naechste { grid-column: 2; grid-row: 1 / span 2; }
  .kopf-bild .naechste li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .kopf-bild .naechste-was { font-size: 1.1rem; }
}
@media (max-width: 820px) {
  .kopf-bild .kopf-bild-medien { aspect-ratio: 16 / 9; }
  .kopf-bild h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); }
}
@media (max-width: 480px) {
  .kopf-bild .naechste li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

/* Escape hält den Hinweis geschlossen, bis Maus oder Fokus ihn erneut betreten. */
.kirchenjahr.hinweis-geschlossen .kj-info {
  opacity: 0; visibility: hidden; pointer-events: none; transition: none;
}