@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Cinzel:wght@400;500&display=swap');

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

:root {
    --navy: #1E3A5F;
    --navy-mid: #2C4E7A;
    --gold: #B5882A;
    --gold-light: #C9A84C;
    --gold-line: #D4A843;
    --bg: #F5F2EC;
    --bg2: #EDE9E0;
    --white: #FFFFFF;
    --text: #1E2D3D;
    --muted: #5A6A7A;
    --border: #D6CFC0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 18px;
    line-height: 1.7;
}

/* ─── NAVIGATION ─────────────────────────────────────────── */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.5rem;
    background: var(--navy);
    border-bottom: 2px solid var(--gold-line);
    position: sticky;
    top: 0;
    z-index: 100;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-cross {
    width: 26px;
    height: 26px;
    position: relative;
    flex-shrink: 0;
}

.logo-cross::before,
.logo-cross::after {
    content: '';
    position: absolute;
    background: var(--gold-light);
    border-radius: 1px;
}

.logo-cross::before {
    width: 3px;
    height: 26px;
    left: 11.5px;
    top: 0;
}

.logo-cross::after {
    width: 26px;
    height: 3px;
    left: 0;
    top: 8px;
}

.logo-text {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    color: #fff;
    line-height: 1.3;
}

.logo-sub {
    font-size: 0.87rem;
    color: rgba(255, 255, 255, 0.55);
    font-family: 'EB Garamond', serif;
    font-style: italic;
}

nav ul {
    display: flex;
    gap: 1.8rem;
    list-style: none;
}

nav ul li a {
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

nav ul li a:hover {
    color: var(--gold-light);
}

nav ul li.active a {
    color: var(--gold-light);
    border-bottom: 1.5px solid var(--gold-light);
    padding-bottom: 2px;
}

/* ─── DROPDOWN ───────────────────────────────────────────── */
nav ul li.has-dropdown {
    position: relative;
}

nav ul li.has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.7rem;
    opacity: 0.7;
}

.dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    background: var(--navy);
    border-top: 2px solid var(--gold-line);
    border-bottom: 1px solid rgba(201,168,76,0.2);
    min-width: 240px;
    list-style: none;
    padding: 0.4rem 0;
    z-index: 200;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Unsichtbare Brücke: füllt die Lücke zwischen Nav und Dropdown */
.has-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 12px;
}

.dropdown li a {
    display: block;
    padding: 0.55rem 1.4rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.03em;
    border-bottom: 0.5px solid rgba(201,168,76,0.1);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: visible;
}

.dropdown li:last-child a {
    border-bottom: none;
}

.dropdown li a:hover {
    background: rgba(201,168,76,0.12);
    color: var(--gold-light) !important;
}

nav ul li.has-dropdown:hover .dropdown,
nav ul li.has-dropdown:focus-within .dropdown {
    display: block;
}

/* ─── SUBDROPDOWN (3. Ebene) ─────────────────────────────── */
.dropdown li.has-subdropdown {
    position: relative;
}

.dropdown li.has-subdropdown > a::after {
    content: ' ‹';
    float: left;
    opacity: 0.6;
    margin-right: 8px;
    margin-left: 0;
}

.subdropdown {
    display: none;
    position: absolute;
    top: 0;
    left: auto;
    right: 100%;
    background: var(--navy);
    border-top: 2px solid var(--gold-line);
    border-right: 1px solid rgba(201,168,76,0.2);
    min-width: 180px;
    list-style: none;
    padding: 0.4rem 0;
    z-index: 300;
    box-shadow: -4px 8px 24px rgba(0,0,0,0.25);
}

.subdropdown li a {
    display: block;
    padding: 0.55rem 1.2rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75) !important;
    letter-spacing: 0.03em;
    border-bottom: 0.5px solid rgba(201,168,76,0.1);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.subdropdown li:last-child a {
    border-bottom: none;
}

.subdropdown li a:hover {
    background: rgba(201,168,76,0.12);
    color: var(--gold-light) !important;
}

.dropdown li.has-subdropdown:hover .subdropdown,
.dropdown li.has-subdropdown:focus-within .subdropdown {
    display: block;
}

/* Tageslosung Copyright-Zeile */
.tageslosung-copy {
    color: var(--muted);
    opacity: 0.7;
}

.tageslosung-link {
    color: var(--gold);
    text-decoration: none;
}

.tageslosung-link:hover {
    text-decoration: underline;
}

/* ─── HERO & SLIDESHOW ───────────────────────────────────── */
.hero {
    position: relative;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    min-height: 420px;
}

.slideshow {
    position: absolute;
    inset: 0;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to right,
    rgba(20, 35, 55, 0.72) 0%,
    rgba(20, 35, 55, 0.45) 55%,
    rgba(20, 35, 55, 0.10) 100%
  );
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 5rem 2.5rem;
    max-width: 520px;
}

.slideshow-dots {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 3;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 168, 76, 0.7);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s;
}

.dot.active {
    background: var(--gold-light);
    border-color: var(--gold-light);
}

.hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: var(--gold-light);
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    margin-bottom: 0.8rem;
}

.hero h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(24px, 3.5vw, 38px);
    font-weight: 400;
    color: #fff;
    line-height: 1.25;
    margin-bottom: 0.8rem;
}

.hero-verse {
    font-style: italic;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy);
    color: #fff;
    padding: 0.65rem 1.6rem;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}

.hero-cta:hover {
    background: var(--navy-mid);
}

/* ─── WOCHENSPRUCH ───────────────────────────────────────── */
.wochenspruch {
    background: #2C4E7A;
    border-top: 3px solid var(--gold-line);
    border-bottom: 3px solid var(--gold-line);
    padding: 2.5rem 2.5rem;
}

.wochenspruch-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.wochenspruch-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1rem;
}

.wochenspruch-text {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 400;
    color: #fff;
    line-height: 1.75;
    margin: 0 0 1rem 0;
    padding: 0;
    border: none;
}

.wochenspruch-quelle {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--gold-light);
}

/* ─── SEITENTITEL-BANNER (Unterseiten) ───────────────────── */
.page-banner {
    position: relative;
    height: 180px;
    background-color: var(--navy);
    background-size: cover;
    background-position: center 35%;
    background-repeat: no-repeat;
    overflow: hidden;
    border-bottom: 3px solid var(--gold-line);
}

/* ─── Banner-Hintergrundbild ─────────────────────────────────
   Das Hintergrundbild wird je Kindseite direkt als style-Attribut
   am .page-banner-Div gesetzt, z. B.:
     style="background-image: url('..bilder/gestaltung/kirchenjahr/advent_1_2.jpg')"
   Pinegrow bewahrt dieses Attribut beim Update, weil es im Master
   als data-pgc-edit-attributes="style" markiert ist.
   Fallback (kein style-Attribut gesetzt): Marineblau ohne Bild. */
.banner-standard {
    background-image: url('../bilder/gestaltung/velum_kelch.jpg');
}

.banner-abendmahl {
    background-image: url('../bilder/gestaltung/abendmahl2.jpg');
}

.banner-advent {
    background-image: url('../bilder/gestaltung/kirchenjahr/advent.jpg');
}

.banner-advent1 {
    background-image: url('../bilder/gestaltung/kirchenjahr/advent_1_2.jpg');
}

.banner-advent2 {
    background-image: url('../bilder/gestaltung/kirchenjahr/advent_2_2.jpg');
}

.banner-advent3 {
    background-image: url('../bilder/gestaltung/kirchenjahr/advent3.png');
}

.banner-advent4 {
    background-image: url('../bilder/gestaltung/kirchenjahr/advent4.png');
}

.banner-ahnen {
    background-image: url('../bilder/gestaltung/ahnen.jpg');
}

.banner-allerheiligen {
    background-image: url('../bilder/gestaltung/fest_gedenktage/11-01_allerheiligen2.jpg');
}

.banner-andreas {
    background-image: url('../bilder/gestaltung/fest_gedenktage/11-30_andreas.png');
}

.banner-aschermittwoch {
    background-image: url('../bilder/gestaltung/kirchenjahr/aschermittwoch_2.jpg');
}

.banner-altjahresabend {
    background-image: url('../bilder/gestaltung/kirchenjahr/altjahresabend_2.jpg');
}

.banner-augsburger-bekenntnis {
    background-image: url('../bilder/gestaltung/fest_gedenktage/06-25_augsburger-bekenntnis.png');
}

.banner-aussegnung {
    background-image: url('../bilder/gestaltung/aussegnung2.jpg');
}

.banner-backfischkirche {
    background-image: url('../bilder/logos/backfischkirche.jpg');
}

.banner-barockorgel {
    background-image: url('../bilder/orgeln/thumbnails/orgel-barock.jpg');
}

.banner-bartholomaeus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/08-24_bartholomaeus.png');
}

.banner-bestattung {
    background-image: url('../bilder/gestaltung/bestattung2.jpg');
}

.banner-bonifatius {
    background-image: url('../bilder/gestaltung/fest_gedenktage/06-05_bonifatius2.jpg');
}

.banner-bildergalerien {
    background-image: url('../bilder/gestaltung/bildergalerien.jpg');
}

.banner-buss-bettag {
    background-image: url('../bilder/gestaltung/kirchenjahr/buss-bettag_2.jpg');
}

.banner-christenlehre {
    background-image: url('../bilder/logos/christenlehre.jpg');
}

.banner-christoph {
    background-image: url('../bilder/gestaltung/fest_gedenktage/07-24_christoph.jpg');
}

.banner-christsonntag1 {
    background-image: url('../bilder/gestaltung/kirchenjahr/christsonntag1.png');
}

.banner-christsonntag2 {
    background-image: url('../bilder/gestaltung/kirchenjahr/christsonntag2.png');
}

.banner-christtag2 {
    background-image: url('../bilder/gestaltung/kirchenjahr/weihnachtstag_2_2.jpg');
}

.banner-drittletzter {
    background-image: url('../bilder/gestaltung/kirchenjahr/drittletztersonntag.png');
}

.banner-dvd {
    background-image: url('../bilder/gestaltung/dvd.jpg');
}

.banner-einsegnung {
    background-image: url('../bilder/gestaltung/einsegnung2.jpg');
}

.banner-eintritt {
    background-image: url('../bilder/gestaltung/eintritt2.jpg');
}

.banner-ekm {
    background-image: url('../bilder/logos/ekm.jpg');
}

.banner-enthauptung-johannes {
    background-image: url('../bilder/gestaltung/fest_gedenktage/08-29_enthauptung-johannes.png');
}

.banner-epiphanias {
    background-image: url('../bilder/gestaltung/kirchenjahr/epiphanias_2.jpg');
}

.banner-epiphanias1 {
    background-image: url('../bilder/gestaltung/kirchenjahr/epiphanias1_2.jpg');
}

.banner-epiphanias2 {
    background-image: url('../bilder/gestaltung/kirchenjahr/epiphanias2_2.jpg');
}

.banner-epiphanias3 {
    background-image: url('../bilder/gestaltung/kirchenjahr/epiphanias3_2.jpg');
}

.banner-epiphanias4 {
    background-image: url('../bilder/gestaltung/kirchenjahr/epiphanias4_2.jpg');
}

.banner-erntedank {
    background-image: url('../bilder/gestaltung/fest_gedenktage/erntedank.png');
}

.banner-exaudi {
    background-image: url('../bilder/gestaltung/kirchenjahr/exaudi_2.jpg');
}

.banner-fest-gedenktage {
    background-image: url('../bilder/gestaltung/fest_gedenktage/fest-gedenktage.png');
}

.banner-florian {
    background-image: url('../bilder/gestaltung/fest_gedenktage/05-04_florian.png');
}

.banner-friedhof {
    background-image: url('../bilder/friedhof/fh2.jpeg');
}

.banner-gemeindeblatt {
    background-image: url('../bilder/gestaltung/gemeindeblatt.jpg');
}

.banner-gemeindeleben {
    background-image: url('../bilder/gestaltung/gemeindeleben.jpg');
}

.banner-gemeinderaum {
    background-image: url('../bilder/gestaltung/gemeinderaum.jpg');
}

.banner-gesten {
    background-image: url('../bilder/gestaltung/sinnzeichen/gesten.jpg');
}

.banner-glauben {
    background-image: url('../bilder/gestaltung/glauben.png');
}

.banner-glocken {
    background-image: url('../bilder/glocken/img_8119.jpg');
}

.banner-gruendonnerstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/gruendonnerstag_2.jpg');
}

.banner-heiligabend {
    background-image: url('../bilder/gestaltung/kirchenjahr/heiligabend_2.jpg');
}

.banner-himmelfahrt {
    background-image: url('../bilder/gestaltung/kirchenjahr/himmelfahrt.png');
}

.banner-invokavit {
    background-image: url('../bilder/gestaltung/kirchenjahr/invokavit_2.jpg');
}

.banner-jahreslauf {
    background-image: url('../bilder/gestaltung/jahreslauf.jpg');
}

.banner-jakobus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/07-25_jakobus.png');
}

.banner-johannes {
    background-image: url('../bilder/gestaltung/fest_gedenktage/12-27_johannes.jpg');
}

.banner-johanni {
    background-image: url('../bilder/gestaltung/fest_gedenktage/06-24_johanni2.jpg');
}

.banner-jubilate {
    background-image: url('../bilder/gestaltung/kirchenjahr/jubilate.png');
}

.banner-judika {
    background-image: url('../bilder/gestaltung/kirchenjahr/judika_2.jpg');
}

.banner-kantate {
    background-image: url('../bilder/gestaltung/kirchenjahr/kantate.png');
}

.banner-kanzel {
    background-image: url('../bilder/restaurierung/kanzel/img_2712.jpg');
}

.banner-kardienstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/kardienstag_2.png');
}

.banner-karfreitag {
    background-image: url('../bilder/gestaltung/kirchenjahr/karfreitag.png');
}

.banner-karmontag {
    background-image: url('../bilder/gestaltung/kirchenjahr/karmontag_2.jpg');
}

.banner-karmittwoch {
    background-image: url('../bilder/gestaltung/kirchenjahr/karmittwoch_2.jpg');
}

.banner-karsamstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/karsamstag.png');
}

.banner-karwoche {
    background-image: url('../bilder/gestaltung/kirchenjahr/karwoche.png');
}

.banner-kinder {
    background-image: url('../bilder/gestaltung/fest_gedenktage/12-28_unschuldige_kinder_2.jpg');
}

.banner-kirchweihfest {
    background-image: url('../bilder/gestaltung/kirchenjahr/kirchweihfest.png');
}

.banner-kirche {
    background-image: url('../bilder/gestaltung/kirchenschiff.jpg');
}

.banner-konfirmation {
    background-image: url('../bilder/gestaltung/konfirmation2.jpg');
}

.banner-laetare {
    background-image: url('../bilder/gestaltung/kirchenjahr/laetare_2.jpg');
}

.banner-letzter-sonntag {
    background-image: url('../bilder/gestaltung/kirchenjahr/totensonntag.png');
}

.banner-lichtmess {
    background-image: url('../bilder/gestaltung/fest_gedenktage/02-02_lichtmess_2.png');
}

.banner-lit-dienste {
    background-image: url('../bilder/gestaltung/lit-dienst.png');
}

.banner-litfeiern {
    background-image: url('../bilder/gestaltung/andacht.jpg');
}

.banner-liturgie {
    background-image: url('../bilder/gestaltung/liturgie.jpg');
}

.banner-lukas {
    background-image: url('../bilder/gestaltung/fest_gedenktage/10-18_lukas.png');
}

.banner-mariae-heimsuchung {
    background-image: url('../bilder/gestaltung/fest_gedenktage/07-02_mariae-heimsuchung.png');
}

.banner-maria-magdalena {
    background-image: url('../bilder/gestaltung/fest_gedenktage/07-22_maria-magdalena.png');
}

.banner-markus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/04-25_markus_2.jpg');
}

.banner-martini {
    background-image: url('../bilder/gestaltung/fest_gedenktage/11-11_martini2.jpg');
}

.banner-matthaeus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/09-21_matthaeus.png');
}

.banner-matthias {
    background-image: url('../bilder/gestaltung/fest_gedenktage/02-24_matthias2.jpg');
}

.banner-michaelis {
    background-image: url('../bilder/gestaltung/fest_gedenktage/09-29_michaelis.png');
}

.banner-miserikordiasdomini {
    background-image: url('../bilder/gestaltung/kirchenjahr/miserikordiasdomini.png');
}

.banner-namensgebung {
    background-image: url('../bilder/gestaltung/fest_gedenktage/01-01_namensgebung.png');
}

.banner-neujahrstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/neujahrstag.png');
}

.banner-nikolai {
    background-image: url('../bilder/gestaltung/fest_gedenktage/12-06_nikolai2.jpg');
}

.banner-novemberpogrome {
    background-image: url('../bilder/gestaltung/fest_gedenktage/11-09_novemberpogrome.png');
}

.banner-ns-opfer {
    background-image: url('../bilder/gestaltung/fest_gedenktage/01-27_ns-opfer.png');
}

.banner-oesterliche-freudenzeit {
    background-image: url('../bilder/gestaltung/kirchenjahr/ostern.jpg');
}

.banner-okuli {
    background-image: url('../bilder/gestaltung/kirchenjahr/okuli_2.jpg');
}

.banner-osterdienstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/osterdienstag_2.jpg');
}

.banner-osterdonnerstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/osterdonnerstag_2.jpg');
}

.banner-osterfreitag {
    background-image: url('../bilder/gestaltung/kirchenjahr/osterfreitag_2.jpg');
}

.banner-ostermittwoch {
    background-image: url('../bilder/gestaltung/kirchenjahr/ostermittwoch_2.jpg');
}

.banner-ostermontag {
    background-image: url('../bilder/gestaltung/kirchenjahr/ostermontag.png');
}

.banner-ostersamstag {
    background-image: url('../bilder/gestaltung/kirchenjahr/ostersamstag.png');
}

.banner-palmsonntag {
    background-image: url('../bilder/gestaltung/kirchenjahr/palmsonntag_2.jpg');
}

.banner-passionszeit {
    background-image: url('../bilder/gestaltung/kirchenjahr/estomihi_2.jpg');
}

.banner-paulus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/01-25_paulus.png');
}

.banner-perikopen {
    background-image: url('../bilder/gestaltung/perikopenordnung.jpg');
}

.banner-petrus-paulus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/06-29_petrus-paulus.png');
}

.banner-pfarrer {
    background-image: url('../bilder/gestaltung/pfarrer.jpg');
}

.banner-pfingstmontag {
    background-image: url('../bilder/gestaltung/kirchenjahr/pfingstmontag.png');
}

.banner-pfingstsonntag {
    background-image: url('../bilder/gestaltung/kirchenjahr/pfingstsonntag_2.jpg');
}

.banner-philippus_jakobus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/05-03_philippus_JAKOBUS2.jpg');
}

.banner-publikationen {
    background-image: url('../bilder/gestaltung/medien.jpg');
}

.banner-quasimodogeniti {
    background-image: url('../bilder/gestaltung/kirchenjahr/quasimodogeniti.png');
}

.banner-reformationsfest {
    background-image: url('../bilder/gestaltung/fest_gedenktage/10-31_reformationsfest2.jpg');
}

.banner-regenbogenkids {
    background-image: url('../bilder/logos/regenbogenkids.jpg');
}

.banner-reminiszere {
    background-image: url('../bilder/gestaltung/kirchenjahr/reminiscere_2.jpg');
}

.banner-rogate {
    background-image: url('../bilder/gestaltung/kirchenjahr/rogate.png');
}

.banner-romantikorgel {
    background-image: url('../bilder/orgeln/thumbnails/orgel1.jpg');
}

.banner-schriften {
    background-image: url('../bilder/gestaltung/schriften.jpg');
}

.banner-septuagesimae {
    background-image: url('../bilder/gestaltung/kirchenjahr/septuagesimae.png');
}

.banner-seniorenkreis {
    background-image: url('../bilder/logos/seniorenkreis.png');
}

.banner-sexagesimae {
    background-image: url('../bilder/gestaltung/kirchenjahr/sexagesimae_2.jpg');
}

.banner-simon-judas {
    background-image: url('../bilder/gestaltung/fest_gedenktage/10-28_simon-judas.png');
}

.banner-sinnzeichen {
    background-image: url('../bilder/gestaltung/sinnzeichen/sinnzeichen.jpg');
}

.banner-spenden {
    background-image: url('../bilder/gestaltung/spenden.jpg');
}

.banner-stephanus {
    background-image: url('../bilder/gestaltung/fest_gedenktage/12-26_stephanus.png');
}

.banner-stoffe {
    background-image: url('../bilder/gestaltung/sinnzeichen/korporale_kelchtuch_palla.jpg');
}

.banner-taufe {
    background-image: url('../bilder/gestaltung/taufe2.jpg');
}

.banner-taufschale {
    background-image: url('../bilder/restaurierung/taufschale/dsc_2183.jpg');
}

.banner-termine {
    background-image: url('../bilder/gestaltung/termine.jpg');
}

.banner-thomas {
    background-image: url('../bilder/gestaltung/fest_gedenktage/07-03_thomas.png');
}

.banner-trauung {
    background-image: url('../bilder/gestaltung/trauung2.jpg');
}

.banner-trinitatis {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis_2.jpg');
}

.banner-trinitatis1 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis1.png');
}

.banner-trinitatis2 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis2.png');
}

.banner-trinitatis3 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis3.png');
}

.banner-trinitatis4 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis4.png');
}

.banner-trinitatis5 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis5.png');
}

.banner-trinitatis6 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis6.png');
}

.banner-trinitatis7 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis7.png');
}

.banner-trinitatis8 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis8.png');
}

.banner-trinitatis9 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis9.png');
}

.banner-trinitatis10_1 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis10_1.png');
}

.banner-trinitatis10_2 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis10_2.png');
}

.banner-trinitatis11 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis11.png');
}

.banner-trinitatis12 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis12.png');
}

.banner-trinitatis13 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis13.png');
}

.banner-trinitatis14 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis14.png');
}

.banner-trinitatis15 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis15.png');
}

.banner-trinitatis16 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis16.png');
}

.banner-trinitatis17 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis17.png');
}

.banner-trinitatis18 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis18.png');
}

.banner-trinitatis19 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis19.png');
}

.banner-trinitatis20 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis20.png');
}

.banner-trinitatis21 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis21.png');
}

.banner-trinitatis22 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis22.png');
}

.banner-trinitatis23 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis23.png');
}

.banner-trinitatis24 {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatis24.png');
}

.banner-trinitatiszeit {
    background-image: url('../bilder/gestaltung/kirchenjahr/trinitatiszeit.png');
}

.banner-valentin {
    background-image: url('../bilder/gestaltung/fest_gedenktage/02-14_valentin2.jpg');
}

.banner-verkuendigung {
    background-image: url('../bilder/gestaltung/fest_gedenktage/03-25_mariae_verkuendigung2.jpg');
}

.banner-vorletzter {
    background-image: url('../bilder/gestaltung/kirchenjahr/vorletztersonntag.png');
}

.banner-vorpassion {
    background-image: url('../bilder/gestaltung/kirchenjahr/vorpassion.png');
}

.banner-vorpassion4 {
    background-image: url('../bilder/gestaltung/kirchenjahr/vorpassion4.png');
}

.banner-vorpassion5 {
    background-image: url('../bilder/gestaltung/kirchenjahr/vorpassion5.png');
}

.banner-vortragekreuz {
    background-image: url('../bilder/restaurierung/vortragekreuz/img_9476.png');
}

.banner-weihnachten {
    background-image: url('../bilder/gestaltung/kirchenjahr/weihnachtstag_1_2.jpg');
}

.banner-weihrauch {
    background-image: url('../bilder/gestaltung/sinnzeichen/weihrauch.jpg');
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
    to right,
    rgba(20, 35, 55, 0.82) 0%,
    rgba(20, 35, 55, 0.55) 60%,
    rgba(20, 35, 55, 0.30) 100%
  );
}

.page-banner-content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 2.5rem;
}

.page-banner-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.6rem;
}

.page-banner-breadcrumb a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

.page-banner-breadcrumb a:hover {
    color: var(--gold-light);
}

.page-banner-breadcrumb span:last-child {
    color: var(--gold-light);
}

.page-banner-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(20px, 3vw, 30px);
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* ─── SEITENINHALT (Unterseiten) ─────────────────────────── */
.page-content {
    min-height: 50vh;
}

/* Links im Seiteninhalt – kein Browser-Blau */
.page-content a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: rgba(30, 58, 95, 0.35);
    text-underline-offset: 2px;
    transition: color 0.2s, text-decoration-color 0.2s;
}

.page-content a:hover {
    color: var(--gold);
    text-decoration-color: var(--gold-line);
}

/* ─── SECTIONS ───────────────────────────────────────────── */
.section {
    padding: 3rem 2.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.section.alt {
    background: var(--bg);
}

.section-header {
    margin-bottom: 2rem;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    color: var(--navy);
    font-weight: 400;
}

.section-title.centered {
    text-align: center;
}

.section-underline {
    width: 40px;
    height: 2px;
    background: var(--gold-line);
    margin-top: 6px;
}

.section-underline.centered {
    margin: 6px auto 0;
}

/* ─── TEXT & JAHRESLOSUNG ────────────────────────────────── */
.text-jahreslosung-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.text-block-content {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.85;
    font-style: italic;
    margin-bottom: 1rem;
}

.text-block-content:last-child {
    margin-bottom: 0;
}

.jahreslosung-placeholder {
    width: 100%;
    aspect-ratio: 3 / 4;
    background: var(--bg2);
    border: 2px dashed var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--muted);
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-align: center;
    padding: 1.5rem;
}

.jahreslosung-placeholder svg {
    color: var(--border);
}

.jahreslosung-hint {
    font-family: 'EB Garamond', serif;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--border);
    letter-spacing: 0;
}

.jahreslosung-img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
}

@media (max-width: 700px) {
    .text-jahreslosung-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* ─── AKTUELLES CARDS ────────────────────────────────────── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.news-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 2.5px solid var(--gold-line);
    padding: 1.25rem;
}

.news-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.news-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.news-date {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.news-title {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.4;
    margin-bottom: 0.4rem;
}

.news-text {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.6;
    font-style: italic;
}

.news-link {
    font-size: 0.85rem;
    color: var(--navy);
    margin-top: 0.6rem;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
}

.news-link:hover {
    color: var(--gold);
}

/* ─── GOTTESDIENSTE ──────────────────────────────────────── */
.gd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.gd-card {
    background: var(--white);
    padding: 1.25rem 1.1rem;
}

.gd-day {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.gd-time {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--navy);
    margin-bottom: 0.25rem;
}

.gd-desc {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.5;
}

.gd-loc {
    font-size: 0.75rem;
    color: var(--gold);
    margin-top: 0.4rem;
    letter-spacing: 0.03em;
}

/* ─── LITURGIE ───────────────────────────────────────────── */
.liturgie-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.liturgie-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.liturgie-value {
    font-size: 0.95rem;
    color: var(--navy);
    line-height: 1.5;
    font-weight: 500;
}

/* Erste liturgie-value direkt unter dem Label darf größer sein */
.liturgie-block > div > .liturgie-value:first-of-type {
    font-size: 1.05rem;
}

.liturgie-sub {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--muted);
    margin-top: 0.2rem;
}

/* Lesung-Trennlinie zwischen AT / Epistel / Evangelium */
.liturgie-block > div > .liturgie-sub + .liturgie-value {
    border-left: 2px solid var(--gold-line);
    padding-left: 0.6rem;
    margin-bottom: 0.15rem;
}

.kirchenjahr-badge {
    display: inline-block;
    border: 1px solid var(--gold-line);
    padding: 0.15rem 0.6rem;
    font-size: 0.75rem;
    color: var(--gold);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.06em;
    margin-top: 0.4rem;
    background: rgba(212, 168, 67, 0.06);
}

/* ─── Liturgische Farben – Varianten des Kirchenjahr-Badges ── */
.kirchenjahr-badge.farbe-violett {
    background: rgba(138, 99, 193, 0.18);
    color: #4a2870;
    border-color: #c5aee0;
}

.kirchenjahr-badge.farbe-gruen {
    background: rgba(60, 140, 90, 0.08);
    color: #1e5c30;
    border-color: #9ecfaa;
}

.kirchenjahr-badge.farbe-rot {
    background: rgba(180, 60, 50, 0.18);
    color: #7a0000;
    border-color: #d46060;
}

.kirchenjahr-badge.farbe-schwarz {
    background: rgba(30, 30, 30, 0.06);
    color: #1a1a1a;
    border-color: #a0a0a0;
}

.kirchenjahr-badge.farbe-rosa {
    background: rgba(220, 120, 170, 0.12);
    color: #b03070;
    border-color: #f0c8dd;
}

/* ─── GEMEINDE / KONTAKT / BILD ──────────────────────────── */
.bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.gemeinde-block h2,
.kontakt-block h2 {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--navy);
    margin-bottom: 0.3rem;
}

.gemeinde-block p {
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.75;
    font-style: italic;
    margin-bottom: 1.2rem;
}

.btn-outline {
    display: inline-block;
    border: 1.5px solid var(--navy);
    padding: 0.5rem 1.3rem;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--navy);
    text-decoration: none;
    background: transparent;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    display: flex;
    align-items: center;
    text-align: left;
}

.btn-outline:hover {
    background: var(--navy);
    color: #fff;
}

/* ─── Textlinks: intern und extern ──────────────────────────
   .link-intern  → interne Seiten, Goldton mit Unterstrich
   .link-extern  → externe Seiten, Navyblau + Pfeil-Icon
   ─────────────────────────────────────────────────────────── */
.link-intern {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: var(--gold-line);
    text-underline-offset: 3px;
    font-style: normal;
    transition: color 0.2s;
}

.link-intern:hover {
    color: var(--navy);
    text-decoration-color: var(--navy);
}

.link-extern {
    color: var(--navy-mid);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--navy-mid);
    text-underline-offset: 3px;
    font-style: normal;
    transition: color 0.2s;
}

.link-extern::after {
    content: '\2197';
    font-size: 0.75em;
    margin-left: 0.2em;
    text-decoration: none;
    display: inline-block;
}

.link-extern:hover {
    color: var(--gold);
    text-decoration-color: var(--gold);
}

.kirche-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--border);
}

.kirche-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder if no image */
.kirche-img-placeholder {
    width: 100%;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(160deg, #e8ddd0 0%, #c9bfb0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--navy);
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    opacity: 0.6;
}

.kirche-img-placeholder svg {
    color: var(--navy);
    opacity: 0.4;
}

.kirche-img-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.kontakt-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 0.85rem;
}

.kontakt-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.kontakt-icon svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kontakt-icon--facebook {
    background: #1877F2;
}

.kontakt-icon--facebook svg {
    fill: #fff;
    stroke: none;
    width: 13px;
    height: 13px;
}

.kontakt-link {
    color: #1877F2;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.kontakt-link:hover {
    color: var(--navy);
    text-decoration: underline;
}

.kontakt-text {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.55;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
footer {
    background: var(--navy);
    padding: 1.5rem 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    border-top: 2px solid var(--gold-line);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-cross {
    width: 20px;
    height: 20px;
    position: relative;
    flex-shrink: 0;
}

.footer-cross::before,
.footer-cross::after {
    content: '';
    position: absolute;
    background: var(--gold-light);
    border-radius: 1px;
}

.footer-cross::before {
    width: 2.5px;
    height: 20px;
    left: 8.75px;
    top: 0;
}

.footer-cross::after {
    width: 20px;
    height: 2.5px;
    left: 0;
    top: 6px;
}

.footer-name {
    font-family: 'Cinzel', serif;
    font-size: 1.0rem;
    color: #fff;
    letter-spacing: 0.06em;
}

.footer-name-sub {
    font-size: 0.83rem;
    color: rgba(255, 255, 255, 0.45);
    font-style: italic;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s;
}

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

.footer-copy {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'EB Garamond', serif;
}

/* ─── HAMBURGER-BUTTON ───────────────────────────────────── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* Animiertes X beim Öffnen */
.hamburger.is-open span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.hamburger.is-open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.is-open span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero-content {
        padding: 3rem 1.5rem;
        max-width: 100%;
    }

    .bottom-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .section {
        padding: 2rem 1.5rem;
    }

    .liturgie-block {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* ─── Nav: Hamburger-Modus ───────────────────────── */
    .hamburger {
        display: flex;
    }

    nav {
        flex-wrap: nowrap;
        padding: 0.9rem 1.25rem;
        position: relative;
    }

    /* Hauptmenü-Liste: standardmäßig ausgeblendet */
    nav > ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy);
        border-top: 2px solid var(--gold-line);
        border-bottom: 2px solid var(--gold-line);
        flex-direction: column;
        gap: 0;
        padding: 0.5rem 0;
        z-index: 500;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    /* Sichtbar wenn is-open */
    nav > ul.is-open {
        display: flex;
    }

    nav > ul > li {
        border-bottom: 0.5px solid rgba(201,168,76,0.15);
    }

    nav > ul > li:last-child {
        border-bottom: none;
    }

    nav > ul > li > a {
        display: block;
        padding: 0.75rem 1.25rem;
        font-size: 1rem !important;
        color: rgba(255,255,255,0.85) !important;
    }

    nav ul li.active a {
        border-bottom: none;
        padding-bottom: 0;
        color: var(--gold-light) !important;
    }

    /* Dropdown-Pfeil */
    nav ul li.has-dropdown > a::after {
        float: right;
        transition: transform 0.25s;
    }

    nav ul li.has-dropdown.is-open > a::after {
        transform: rotate(180deg);
    }

    /* Erste Ebene Dropdown */
    .dropdown {
        position: static;
        display: none;
        box-shadow: none;
        border-top: 1px solid rgba(201,168,76,0.15);
        border-bottom: none;
        background: rgba(0,0,0,0.15);
        padding: 0.25rem 0;
        min-width: 0;
        width: 100%;
    }

    .dropdown.is-open {
        display: block;
    }

    /* Brücken-Pseudo-Element deaktivieren */
    .has-dropdown::after {
        display: none;
    }

    .dropdown li a {
        padding: 0.6rem 1.25rem 0.6rem 2rem;
        white-space: normal;
        font-size: 0.9rem;
    }

    /* Subdropdown-Pfeil */
    .dropdown li.has-subdropdown > a::after {
        content: ' ▾';
        float: right;
        margin-right: 0;
        margin-left: 0;
        transition: transform 0.25s;
    }

    .dropdown li.has-subdropdown.is-open > a::after {
        transform: rotate(180deg);
    }

    /* Zweite Ebene Subdropdown */
    .subdropdown {
        position: static;
        display: none;
        box-shadow: none;
        border-top: 1px solid rgba(201,168,76,0.1);
        border-right: none;
        background: rgba(0,0,0,0.1);
        min-width: 0;
        width: 100%;
        padding: 0.15rem 0;
    }

    .subdropdown.is-open {
        display: block;
    }

    .subdropdown li a {
        padding-left: 3rem;
        font-size: 0.85rem;
    }
}

/* ─── DATENSCHUTZ ────────────────────────────────────────── */
.ds-toc {
    background: var(--bg2);
    border-left: 3px solid var(--gold-line);
    padding: 1.4rem 1.8rem;
    margin-bottom: 2.5rem;
    max-width: 680px;
}

.ds-toc-title {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.8rem;
}

.ds-toc ol {
    padding-left: 1.2rem;
    margin: 0;
}

.ds-toc ol li {
    font-size: 0.9rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
    line-height: 1.5;
}

.ds-toc ol li a {
    color: var(--navy);
    text-decoration: none;
    transition: color 0.2s;
}

.ds-toc ol li a:hover {
    color: var(--gold);
}

.ds-block {
    max-width: 760px;
    margin-bottom: 0;
}

.ds-block h2 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--navy);
    margin-bottom: 0.3rem;
    margin-top: 0;
    letter-spacing: 0.04em;
}

.ds-block .section-underline {
    margin-bottom: 1.1rem;
}

.ds-block p {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 0.9rem;
}

.ds-block ul {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

.ds-block ul li {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.8;
    margin-bottom: 0.2rem;
}

.ds-contact-box {
    background: var(--navy);
    color: #fff;
    padding: 1.4rem 1.8rem;
    margin: 1.2rem 0 1.5rem 0;
    max-width: 420px;
    border-left: 3px solid var(--gold-line);
}

.ds-contact-box .ds-contact-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 0.6rem;
}

.ds-contact-box p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
}

.ds-contact-box a {
    color: var(--gold-light);
    text-decoration: none;
}

.ds-contact-box a:hover {
    text-decoration: underline;
}

.ds-note {
    background: rgba(181, 136, 42, 0.07);
    border-left: 3px solid var(--gold-line);
    padding: 1rem 1.4rem;
    margin: 1.2rem 0;
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.75;
    max-width: 680px;
}

.ds-note strong {
    color: var(--navy);
    font-weight: 500;
}

.ds-rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin: 1.2rem 0;
    max-width: 680px;
}

.ds-right-card {
    background: var(--white);
    padding: 1rem 1.1rem;
}

.ds-right-card .ds-right-para {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.ds-right-card .ds-right-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--navy);
    line-height: 1.4;
}

.ds-authority-box {
    border: 1px solid var(--border);
    padding: 1.2rem 1.6rem;
    margin: 1.2rem 0;
    max-width: 480px;
    background: var(--white);
}

.ds-authority-box .ds-authority-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.6rem;
}

.ds-authority-box p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

.ds-authority-box a {
    color: var(--navy);
    text-decoration: none;
}

.ds-authority-box a:hover {
    color: var(--gold);
}

.ds-stand {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
    max-width: 680px;
}

.ds-section-num {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--gold-light);
    background: var(--navy);
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .ds-rights-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ds-contact-box,
    .ds-authority-box {
        max-width: 100%;
    }
}

/* ─── IMPRESSUM ──────────────────────────────────────────── */
.imp-block {
    max-width: 760px;
    margin-bottom: 0;
}

.imp-block h2 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--navy);
    margin-bottom: 0.3rem;
    margin-top: 0;
    letter-spacing: 0.04em;
}

.imp-block .section-underline {
    margin-bottom: 1.4rem;
}

.imp-block p {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--muted);
    margin-bottom: 0.9rem;
}

.imp-section-num {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.15em;
    color: var(--gold-light);
    background: var(--navy);
    padding: 0.15rem 0.5rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* Kachel-Grid für die Pflichtangaben */
.imp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-top: 0.5rem;
}

.imp-card {
    background: var(--white);
    padding: 1.1rem 1.3rem;
}

.imp-card-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
}

.imp-card-value {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.7;
}

.imp-card-value a {
    color: var(--navy);
    text-decoration: none;
}

.imp-card-value a:hover {
    color: var(--gold);
}

.imp-card-sub {
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
}

/* Inhaltlich Verantwortlicher */
.imp-responsible {
    border-left: 3px solid var(--gold-line);
    padding: 0.8rem 1.2rem;
    background: var(--bg2);
    display: inline-block;
    margin-top: 0.3rem;
}

.imp-responsible-name {
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    color: var(--navy);
    letter-spacing: 0.04em;
    margin-bottom: 0.2rem;
}

.imp-responsible-addr {
    font-size: 0.85rem;
    color: var(--muted);
}

/* Stand-Zeile (wird auch in Datenschutz verwendet) */
.imp-stand {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    color: var(--gold);
    text-transform: uppercase;
    margin-top: 2rem;
    padding-top: 1.2rem;
    border-top: 1px solid var(--border);
    max-width: 680px;
}

@media (max-width: 600px) {
    .imp-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   JAHRESLAUF-UNTERSEITEN  (Namensraum: jl-)
   Unterseiten unter "Glauben im Leben → Der Jahreslauf"
   Layout: Fließtext + Steckbrief nebeneinander, darunter zwei Fotos
   ═══════════════════════════════════════════════════════════════ */
/* ─── Haupt-Grid: Text links, Steckbrief rechts ─────────────── */
.jl-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
    align-items: start;
}

/* ─── Fließtext-Bereich ─────────────────────────────────────── */
.jl-text {
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.9;
    font-style: italic;
}

.jl-text p + p {
    margin-top: 1rem;
}

/* ─── Steckbrief-Karte ──────────────────────────────────────── */
.jl-steckbrief {
    background: var(--navy);
    border-top: 3px solid var(--gold-line);
    padding: 1.8rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Christogramm-Zeile: Α – Kreuz – Ω */
.jl-christogramm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(212, 168, 67, 0.25);
}

.jl-alpha-omega {
    font-family: 'EB Garamond', serif;
    font-size: 1.3rem;
    color: var(--gold-light);
    letter-spacing: 0.05em;
}

/* Violettes Kreuz als reines CSS-Element */
.jl-kreuz {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.jl-kreuz::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 100%;
    background: #7B5FB5;
    transform: translateX(-50%);
}

.jl-kreuz::after {
    content: '';
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    height: 4px;
    background: #7B5FB5;
}

/* Titel des Tages */
.jl-sb-titel {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    color: var(--gold-light);
    text-align: center;
    text-transform: uppercase;
}

/* Kirchenjahr-Zuordnung */
.jl-sb-zeit {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: rgba(201, 168, 76, 0.65);
    text-align: center;
    margin-top: -0.8rem;
    font-family: 'Cinzel', serif;
}

/* Trennlinie im Steckbrief */
.jl-sb-divider {
    height: 1px;
    background: rgba(212, 168, 67, 0.2);
}

/* Spruch-Block */
.jl-sb-spruch-label {
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.jl-sb-spruch {
    font-family: 'EB Garamond', serif;
    font-size: 0.95rem;
    color: #fff;
    line-height: 1.75;
    font-style: italic;
}

.jl-sb-fundstelle {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--gold-light);
    text-align: right;
    margin-top: 0.6rem;
}

/* ─── Foto-Bereich (zweite Section) ─────────────────────────── */
.jl-foto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.jl-foto-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jl-foto-wrap img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
}

.jl-foto-caption {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
    line-height: 1.5;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
    .jl-grid {
        grid-template-columns: 1fr;
    }

    .jl-steckbrief {
        max-width: 480px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .jl-foto-grid {
        grid-template-columns: 1fr;
    }
}

/* ─── Liturgische Farbvarianten des Steckbriefs ─────────────────
   Verwendung: <div class="jl-steckbrief jl-farbe-ROT"> usw.
   Ohne Modifier-Klasse gilt die Standardfarbe Violett (Advent,
   Passionszeit). Die Modifier überschreiben nur Kreuz und Akzente,
   der navy-Hintergrund des Steckbriefs bleibt immer gleich.
   ─────────────────────────────────────────────────────────────── */
/* VIOLETT – Standard, kein Modifier nötig (Advent, Passionszeit) */
/* Kreuzfarbe bereits in .jl-kreuz::before / ::after gesetzt */
/* ROT – Pfingsten, Reformationstag, Apostel, Märtyrer */
.jl-steckbrief.jl-farbe-rot {
    border-top-color: #C0392B;
}

.jl-steckbrief.jl-farbe-rot .jl-kreuz::before,
.jl-steckbrief.jl-farbe-rot .jl-kreuz::after {
    background: #C0392B;
}

.jl-steckbrief.jl-farbe-rot .jl-christogramm {
    border-bottom-color: rgba(192, 57, 43, 0.35);
}

/* GRÜN – Trinitatiszeit (Sonntage nach Trinitatis) */
.jl-steckbrief.jl-farbe-gruen {
    border-top-color: #2E7D4F;
}

.jl-steckbrief.jl-farbe-gruen .jl-kreuz::before,
.jl-steckbrief.jl-farbe-gruen .jl-kreuz::after {
    background: #2E7D4F;
}

.jl-steckbrief.jl-farbe-gruen .jl-christogramm {
    border-bottom-color: rgba(46, 125, 79, 0.35);
}

/* GOLDEN / WEISS – Weihnachten, Ostern, Hochfeste */
.jl-steckbrief.jl-farbe-golden {
    border-top-color: var(--gold-line);
}

.jl-steckbrief.jl-farbe-golden .jl-kreuz::before,
.jl-steckbrief.jl-farbe-golden .jl-kreuz::after {
    background: var(--gold-line);
}

.jl-steckbrief.jl-farbe-golden .jl-christogramm {
    border-bottom-color: rgba(212, 168, 67, 0.45);
}

/* SCHWARZ – Karfreitag, Totensonntag, Buß- und Bettag */
.jl-steckbrief.jl-farbe-schwarz {
    border-top-color: #4A4A4A;
}

.jl-steckbrief.jl-farbe-schwarz .jl-kreuz::before,
.jl-steckbrief.jl-farbe-schwarz .jl-kreuz::after {
    background: #4A4A4A;
}

.jl-steckbrief.jl-farbe-schwarz .jl-christogramm {
    border-bottom-color: rgba(74, 74, 74, 0.4);
}

/* ROSA – Laetare (3. Fastensonntag), Ausnahme in der Passionszeit */
.jl-steckbrief.jl-farbe-rosa {
    border-top-color: #C2607A;
}

.jl-steckbrief.jl-farbe-rosa .jl-kreuz::before,
.jl-steckbrief.jl-farbe-rosa .jl-kreuz::after {
    background: #C2607A;
}

.jl-steckbrief.jl-farbe-rosa .jl-christogramm {
    border-bottom-color: rgba(194, 96, 122, 0.35);
}

/* ═══════════════════════════════════════════════════════════════
   KIRCHENJAHR-NAVIGATOR  (Namensraum: kj-)
   Dreistufiges Akkordeon: Festkreis → Station → Sonn-/Festtag
   Liturgische Farben als linker Randbalken und Farbpunkt
   ═══════════════════════════════════════════════════════════════ */
/* ─── Gesamtcontainer ───────────────────────────────────────── */
.kj-navigator {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 820px;
}

/* ─── Ebene 1: Festkreis ────────────────────────────────────── */
.kj-festkreis {
}

.kj-festkreis-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1.1rem;
    background: var(--navy);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s;
}

.kj-festkreis-btn:hover {
    background: var(--navy-mid);
}

.kj-festkreis-btn[aria-expanded="true"] .kj-chevron {
    transform: rotate(90deg);
}

/* Farbpunkt liturgische Farbe */
.kj-farb-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1.5px solid rgba(255,255,255,0.4);
}

.kj-festkreis-name {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: #fff;
    flex: 1;
}

.kj-chevron {
    font-size: 0.65rem;
    color: var(--gold-light);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

/* Inhalt Ebene 1 */
.kj-festkreis-body {
    border-left: 4px solid var(--navy);
    display: none;
}

.kj-festkreis-body.kj-open {
    display: block;
}

/* ─── Ebene 2: Station ──────────────────────────────────────── */
.kj-station {
    border-bottom: 1px solid var(--border);
}

.kj-station:last-child {
    border-bottom: none;
}

.kj-station-btn {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 1.1rem;
    background: var(--white);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}

.kj-station-btn:hover {
    background: var(--bg2);
}

.kj-station-btn[aria-expanded="true"] .kj-chevron2 {
    transform: rotate(90deg);
}

/* Farbstreifen liturgische Farbe */
.kj-farb-stripe {
    width: 3px;
    height: 1.1em;
    flex-shrink: 0;
    border-radius: 0;
}

.kj-station-name {
    font-family: 'EB Garamond', serif;
    font-size: 0.88rem;
    color: var(--navy-mid);
    flex: 1;
    letter-spacing: 0.03em;
}

.kj-chevron2 {
    font-size: 0.6rem;
    color: var(--gold);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

/* Inhalt Ebene 2 */
.kj-station-body {
    display: none;
    padding: 0.3rem 0 0.3rem 2.2rem;
    background: var(--bg);
}

.kj-station-body.kj-open {
    display: block;
}

/* ─── Ebene 3: Sonn-/Festtag ────────────────────────────────── */
.kj-tag {
    display: block;
    padding: 0.28rem 0.5rem;
    font-family: 'EB Garamond', serif;
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bg2);
    text-decoration: none;
    color: var(--muted);
    font-style: italic;
}

.kj-tag:last-child {
    border-bottom: none;
}

/* Verlinkter Eintrag – hat eigene Seite */
a.kj-tag {
    color: var(--navy);
    font-style: normal;
}

a.kj-tag:hover {
    color: var(--gold);
    text-decoration: underline;
    text-decoration-color: var(--gold-line);
    text-underline-offset: 2px;
}

/* Nicht-verlinkter Platzhalter */
span.kj-tag {
    color: var(--muted);
    font-style: italic;
}

/* ─── Liturgische Farbwerte ─────────────────────────────────── */
/* Dots / Stripes – dieselben Farben wie .jl-farbe-* */
.kj-c-violett {
    background: #7B5FB5;
}

.kj-c-golden {
    background: var(--gold-line);
}

.kj-c-rot {
    background: #C0392B;
}

.kj-c-gruen {
    background: #2E7D4F;
}

.kj-c-schwarz {
    background: #4A4A4A;
}

.kj-c-rosa {
    background: #C2607A;
}

.kj-c-grau {
    background: #888780;
}

/* Randbalken Ebene 1 passend zur Farbe */
.kj-festkreis-body.kj-c-violett {
    border-left-color: #7B5FB5;
}

.kj-festkreis-body.kj-c-golden {
    border-left-color: var(--gold-line);
}

.kj-festkreis-body.kj-c-rot {
    border-left-color: #C0392B;
}

.kj-festkreis-body.kj-c-gruen {
    border-left-color: #2E7D4F;
}

.kj-festkreis-body.kj-c-schwarz {
    border-left-color: #4A4A4A;
}

.kj-festkreis-body.kj-c-rosa {
    border-left-color: #C2607A;
}

.kj-festkreis-body.kj-c-grau {
    border-left-color: #888780;
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 600px) {
    .kj-festkreis-name {
        font-size: 0.78rem;
    }

    .kj-station-name {
        font-size: 0.82rem;
    }

    .kj-tag {
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   NEWSLETTER-FORMULAR  (Namensraum: nl-)
   Brevo-HTML-Formular im Design der Homepage
   ═══════════════════════════════════════════════════════════════ */
.fb-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.nl-form {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin-top: 1.5rem;
}

.nl-form-row {
    display: flex;
    gap: 1.2rem;
}

.nl-form-row .nl-field {
    flex: 1;
}

.nl-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.nl-field label {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
}

.nl-required {
    color: var(--gold);
    margin-left: 2px;
}

.nl-field input[type="text"],
.nl-field input[type="email"] {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0.55rem 0.85rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    -webkit-appearance: none;
}

.nl-field input[type="text"]:focus,
.nl-field input[type="email"]:focus {
    border-color: var(--gold-line);
    box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.15);
}

.nl-field input::placeholder {
    color: var(--border);
    font-style: italic;
}

.nl-field-hint {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
}

.nl-field-error {
    font-size: 0.78rem;
    color: #661d1d;
    font-style: normal;
    font-family: 'EB Garamond', serif;
    min-height: 1rem;
}

.nl-captcha {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.nl-datenschutz {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.65;
    font-style: italic;
}

.nl-datenschutz a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: rgba(30, 58, 95, 0.35);
    text-underline-offset: 2px;
}

.nl-datenschutz a:hover {
    color: var(--gold);
    text-decoration-color: var(--gold-line);
}

.nl-submit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: var(--navy);
    color: #fff;
    border: none;
    padding: 0.75rem 2.2rem;
    cursor: pointer;
    transition: background 0.2s;
}

.nl-submit:hover {
    background: var(--navy-mid);
}

.nl-message {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    border-left: 3px solid;
}

.nl-message--error {
    color: #661d1d;
    background-color: #fff5f5;
    border-color: #ff4949;
}

.nl-message--success {
    color: #085229;
    background-color: #e7faf0;
    border-color: #13ce66;
}

@media (max-width: 600px) {
    .nl-form-row {
        flex-direction: column;
        gap: 1.4rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ANSPRECHPARTNER  (Namensraum: ap-)
   Gruppen mit Kategorie-Überschrift, darunter Einzel-Einträge
   als CSS-Grid-Zeilen – kein <table>-Element.
   ═══════════════════════════════════════════════════════════════ */
/* ─── Kategoriegruppe ───────────────────────────────────────── */
.ap-gruppe {
    margin-top: 2rem;
}

.ap-gruppe:first-child {
    margin-top: 1.2rem;
}

/* Kategorie-Überschrift */
.ap-kategorie {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--navy);
    background: var(--bg2);
    border-top: 2px solid var(--gold-line);
    border-bottom: 1px solid var(--border);
    padding: 7px 14px;
}

/* ─── Einzelner Eintrag ─────────────────────────────────────── */
.ap-eintrag {
    display: grid;
    grid-template-columns: 22% 28% 1fr;
    gap: 0;
    border-bottom: 1px solid var(--border);
    background: var(--white);
}

.ap-eintrag:last-child {
    border-bottom: none;
}

/* Zebra-Streifen */
.ap-eintrag:nth-child(even) {
    background: var(--bg);
}

.ap-eintrag > div {
    padding: 10px 14px;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--muted);
}

/* Erste Spalte: Funktion/Bereich */
.ap-rolle {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem !important;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--navy) !important;
}

/* Links innerhalb der Einträge */
.ap-eintrag a {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: rgba(30, 58, 95, 0.3);
    text-underline-offset: 2px;
}

.ap-eintrag a:hover {
    color: var(--gold);
    text-decoration-color: var(--gold-line);
}

/* E-Mail-Adressen */
.ap-email {
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--muted);
}

/* ─── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ap-eintrag {
        grid-template-columns: 1fr;
    }

    .ap-eintrag > div {
        padding: 5px 12px;
    }

    .ap-rolle {
        background: var(--bg2);
        padding-top: 9px !important;
        border-top: 2px solid var(--navy);
    }

    .ap-eintrag:nth-child(even) .ap-rolle {
        background: var(--bg2);
    }
}

/* ─── Kirche: Bild-Text-Layout ───────────────────────────────
   Zweispaltiges Grid: Bildspalte links (ca. 38%), Text rechts.
   Verwendung:
     <div class="kirche-bild-text">
       <div class="kirche-bild-col"> … Bilder … </div>
       <div class="kirche-text-col"> … h2/h3/p … </div>
     </div>
   Auf schmalen Viewports stapeln sich Bild und Text vertikal,
   Bild erscheint dann oberhalb des Textes.
   ──────────────────────────────────────────────────────────── */
.kirche-bild-text {
    display: grid;
    grid-template-columns: 38% 1fr;
    gap: 2.5rem;
    align-items: start;
    margin-top: 1.5rem;
}

.kirche-bild-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.kirche-bild-col img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border);
}

.kirche-bild-caption {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
    line-height: 1.5;
    margin-top: -0.5rem;
}

.kirche-text-col h2 {
    margin-top: 0;
}

.kirche-text-col h3 {
    margin-top: 1.5rem;
    color: var(--navy);
}

.kirche-text-col p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
}

@media (max-width: 900px) {
    .kirche-bild-text {
        grid-template-columns: 1fr;
    }
}

a[href$=".pdf"]::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.35em;
    vertical-align: -0.15em;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ─── Disposition: dreispaltig auch auf dem Smartphone ───────
   Überschreibt den ap-eintrag-Responsive-Umbruch für Tabellen,
   die auf allen Viewports dreispaltig bleiben müssen.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ap-eintrag.ap-eintrag--fixed {
        grid-template-columns: 22% 28% 1fr;
    }

    .ap-eintrag.ap-eintrag--fixed > div {
        padding: 5px 8px;
        font-size: 0.78rem;
    }

    .ap-eintrag.ap-eintrag--fixed .ap-rolle {
        background: inherit;
        padding-top: 5px;
        border-top: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GEBÜHRENTABELLEN  (Namensraum: ap-eintrag Modifier)
   Erdgrabstätten: 4 Spalten   → ap-eintrag--erd
   Urnengrabstätten: 5 Spalten → ap-eintrag--urne
   Kopfzeilen beider Tabellen: ap-eintrag--gebuehr-head
   Kein Umbruch auf Mobilgeräten – horizontales Scrollen per Wrapper.
   ═══════════════════════════════════════════════════════════════ */
.ap-eintrag--erd {
    grid-template-columns: 24% 22% 22% 1fr;
}

.ap-eintrag--urne {
    grid-template-columns: 20% 18% 18% 18% 1fr;
}

/* Kopfzeilen */
.ap-eintrag--gebuehr-head {
    background: var(--bg2);
}

.ap-eintrag--gebuehr-head .ap-rolle {
    color: var(--navy) !important;
    font-size: 0.72rem !important;
}

/* Scroll-Wrapper – umschließt je eine ap-gruppe im HTML */
.ap-gruppe--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Feste Mindestbreite verhindert Zeilenumbrüche in den Zellen */
.ap-gruppe--scroll .ap-gruppe {
    min-width: 560px;

    /* Erdgrabstätten: 4 Spalten */
}

.ap-gruppe--scroll.ap-gruppe--scroll-urne .ap-gruppe {
    min-width: 680px;

    /* Urnengrabstätten: 5 Spalten */
}

/* Responsive: --erd und --urne brechen NICHT um (überschreibt frühere @media-Regel) */
@media (max-width: 640px) {
    .ap-eintrag--erd,
    .ap-eintrag--urne {
        grid-template-columns: 24% 22% 22% 1fr;
    }

    .ap-eintrag--urne {
        grid-template-columns: 20% 18% 18% 18% 1fr;
    }

    .ap-eintrag--erd .ap-rolle,
    .ap-eintrag--urne .ap-rolle {
        background: inherit;
        padding-top: 10px;
        border-top: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE-BANNER  (Namensraum: cb-)
   Leiste am unteren Bildschirmrand – erscheint beim ersten Besuch.
   Lädt Google Analytics nur nach Zustimmung.
   ═══════════════════════════════════════════════════════════════ */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--navy);
    border-top: 3px solid var(--gold-line);
    padding: 1rem 2.5rem;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.35);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

#cookie-banner.cb-visible {
    transform: translateY(0);
}

.cb-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.cb-icon {
    color: var(--gold-light);
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

.cb-icon svg {
    width: 34px;
    height: 34px;
}

.cb-text {
    flex: 1;
    min-width: 200px;
}

.cb-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0 0 0.2rem 0;
}

.cb-body {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.92rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.55;
    margin: 0;
}

.cb-body strong {
    color: #fff;
    font-weight: 600;
}

.cb-body a {
    color: var(--gold-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cb-body a:hover {
    color: var(--gold-line);
}

.cb-actions {
    display: flex;
    gap: 0.7rem;
    flex-shrink: 0;
}

.cb-btn {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.55rem 1.4rem;
    border: 1.5px solid var(--gold-line);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

.cb-btn--accept {
    background: var(--gold-light);
    color: var(--navy);
}

.cb-btn--accept:hover {
    background: var(--gold-line);
    border-color: var(--gold-line);
}

.cb-btn--decline {
    background: transparent;
    color: var(--gold-light);
}

.cb-btn--decline:hover {
    background: rgba(201,168,76,0.12);
}

@media (max-width: 600px) {
    #cookie-banner {
        padding: 1rem 1.2rem;
    }

    .cb-icon {
        display: none;
    }

    .cb-inner {
        gap: 0.75rem;
    }

    .cb-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ─── Link-Grid: responsive Buttonzeile ─────────────────────
   Ersetzt inline style="display:grid; grid-template-columns:…"
   Buttons umbrechen automatisch auf kleinen Displays.
   ──────────────────────────────────────────────────────────── */
.link-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.link-grid .btn-outline {
    flex: 1 1 0;
    min-width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* =========================
   Newsletter Formular
   ========================= */
.nl-form {
    max-width: 700px;
}

.nl-field {
    margin-bottom: 25px;
}

.nl-row {
    display: flex;
    gap: 20px;
}

.nl-row .nl-field {
    flex: 1;
}

/* Labels */
.nl-form label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--navy);
    margin-bottom: 6px;
}

/* Inputs */
.nl-form input[type="text"],
.nl-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border);
    background-color: #fdfdfd;
    font-family: 'EB Garamond', serif;
    font-size: 16px;
}

/* Placeholder */
.nl-form input::placeholder {
    color: var(--border);
    font-style: italic;
}

/* Hinweistext */
.nl-form small {
    display: block;
    font-size: 12px;
    color: var(--border);
    margin-top: 5px;
}

/* Checkbox */
.nl-checkbox {
    margin-top: 15px;
    font-family: 'EB Garamond', serif;
    font-size: 15px;
}

.nl-checkbox input {
    margin-right: 8px;
}

/* Trennlinie */
.nl-divider {
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

/* Button */
.nl-submit {
    background-color: var(--navy);
    color: #fff;
    padding: 12px 28px;
    border: none;
    font-family: 'Cinzel', serif;
    letter-spacing: 1px;
    cursor: pointer;
}

.nl-submit:hover {
    opacity: 0.9;
}

/* reCAPTCHA */
.g-recaptcha {
    margin-top: 15px;
}

/* Textblock unten */
.nl-datenschutz {
    font-size: 14px;
    margin-top: 10px;
}

/* Cookie-Banner – angepasst an Seitenlayout */
#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f5f5f5;
    color: #333;
    border-top: 1px solid #ddd;
    padding: 1rem 0;
    z-index: 9999;
    display: none;
}

.cookie-content {
    max-width: 1100px;

    /* an Seitenbreite anpassen */
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: inherit;
}

.cookie-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 0.5rem;
}

/* Buttons wie auf deiner Seite (neutral, ruhig) */
#cb-accept,
#cb-decline {
    font-size: 0.9rem;
    padding: 0.4rem 0.9rem;
    border-radius: 2px;
    cursor: pointer;
    font-family: inherit;
}

/* Primärer Button */
#cb-accept {
    background: #3e4857;

    /* deine dunkle Buttonfarbe */
    color: #fff;
    border: none;
}

/* Sekundärer Button */
#cb-decline {
    background: transparent;
    color: #3e4857;
    border: 1px solid #3e4857;
}

/* Hover subtil */
#cb-accept:hover,
#cb-decline:hover {
    opacity: 0.85;
}

/* Mobile Optimierung */
@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-buttons {
        width: 100%;
    }

    #cb-accept,
    #cb-decline {
        flex: 1;
        text-align: center;
    }
}

#cookie-banner {
    display: none;
}

#cookie-banner.cb-visible {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════
   PAGEFIND – SUCHFUNKTION
   Suche-Button in der Nav, Such-Modal, Pagefind-UI-Overrides
   ═══════════════════════════════════════════════════════════════ */
/* ─── Suche-Button in der Nav ────────────────────────────────── */
.nav-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.2s;
}

.nav-search-btn:hover {
    color: var(--gold-light);
}

.nav-search-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

/* ─── Modal-Overlay ──────────────────────────────────────────── */
#search-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(30, 58, 95, 0.78);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: flex-start;
    justify-content: center;
    padding-top: 90px;
}

#search-modal.is-open {
    display: flex;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(-14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Modal-Fenster ──────────────────────────────────────────── */
#search-modal-inner {
    background: var(--bg);
    border-top: 2px solid var(--gold-line);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    width: min(660px, 94vw);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease;
}

/* ─── Modal-Kopfzeile (Navy wie Nav) ─────────────────────────── */
#search-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--navy);
    border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}

#search-modal-header svg {
    width: 18px;
    height: 18px;
    stroke: var(--gold-light);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    flex-shrink: 0;
}

#search-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
}

#search-modal-close {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    font-family: 'EB Garamond', serif;
    color: rgba(255, 255, 255, 0.6);
    padding: 2px 6px;
    transition: color 0.2s;
}

#search-modal-close:hover {
    color: var(--gold-light);
}

/* ─── Modal-Inhalt ───────────────────────────────────────────── */
#search-modal-body {
    overflow-y: auto;
    padding: 18px 22px 22px;
    flex: 1;
}

#search-hint {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 0.82rem;
    font-style: italic;
    color: var(--muted);
    margin-top: 10px;
    text-align: right;
}

/* ─── Pagefind-UI: Design-Token-Anpassung ────────────────────── */
:root {
    --pagefind-ui-scale: 0.95;
    --pagefind-ui-primary: var(--navy);
    --pagefind-ui-text: var(--text);
    --pagefind-ui-background: var(--bg);
    --pagefind-ui-border: var(--border);
    --pagefind-ui-border-width: 1.5px;
    --pagefind-ui-border-radius: 0px;
    --pagefind-ui-font: 'EB Garamond', Georgia, serif;
}

/* Suchfeld */
.pagefind-ui__search-input {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 1rem !important;
    border: 1.5px solid var(--border) !important;
    background: var(--white) !important;
    color: var(--text) !important;
}

.pagefind-ui__search-input:focus {
    outline: none !important;
    border-color: var(--navy) !important;
}

/* Ergebnis-Titel */
.pagefind-ui__result-link {
    font-family: 'Cinzel', serif !important;
    font-size: 0.82rem !important;
    letter-spacing: 0.04em !important;
    color: var(--navy) !important;
}

.pagefind-ui__result-link:hover {
    color: var(--gold) !important;
}

/* Ergebnis-Textauszug */
.pagefind-ui__result-excerpt {
    font-family: 'EB Garamond', Georgia, serif !important;
    font-size: 0.95rem !important;
    color: var(--muted) !important;
    line-height: 1.65 !important;
}

/* Trennlinie zwischen Ergebnissen */
.pagefind-ui__result {
    border-bottom: 0.5px solid var(--border) !important;
}

/* „Mehr anzeigen"-Button: wie .btn-outline */
.pagefind-ui__button {
    font-family: 'Cinzel', serif !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    background: transparent !important;
    color: var(--navy) !important;
    border: 1.5px solid var(--navy) !important;
    border-radius: 0 !important;
    padding: 0.5rem 1.3rem !important;
    transition: background 0.2s, color 0.2s !important;
    cursor: pointer;
}

.pagefind-ui__button:hover {
    background: var(--navy) !important;
    color: #fff !important;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
    .nav-search-btn {
        margin-right: 14px;
    }

    #search-modal {
        padding-top: 70px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FEST- & GEDENKTAGE – AKKORDEON  (fgt.html)
   Anhängen ans Ende von style.css
   ═══════════════════════════════════════════════════════════════ */
/* ─── Akkordeon-Container ────────────────────────────────────── */
.akkordeon {
    margin: 2rem 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.akk-item {
    border-bottom: 1px solid var(--border);
}

.akk-item:last-child {
    border-bottom: none;
}

/* ─── Akkordeon-Trigger (Button) ─────────────────────────────── */
.akk-trigger {
    width: 100%;
    background: var(--bg2);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    text-align: left;
    transition: background 0.2s;
}

.akk-trigger:hover {
    background: #e5e0d5;
}

.akk-trigger[aria-expanded="true"] {
    background: var(--navy);
    color: #fff;
}

.akk-trigger[aria-expanded="true"] .akk-title {
    color: #fff;
}

.akk-trigger[aria-expanded="true"] .akk-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--gold-light);
}

.akk-trigger[aria-expanded="true"] .akk-arrow {
    transform: rotate(180deg);
    color: var(--gold-light);
}

/* ─── Trigger-Innenlayout ────────────────────────────────────── */
.akk-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.akk-badge {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(181, 136, 42, 0.12);
    color: var(--gold);
    border: 1px solid rgba(181, 136, 42, 0.35);
    padding: 0.2rem 0.65rem;
    border-radius: 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

.akk-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--navy);
    line-height: 1.3;
}

.akk-arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    color: var(--gold);
    font-size: 1.1rem;
    line-height: 1;
}

/* ─── Akkordeon-Panel ────────────────────────────────────────── */
.akk-panel {
    display: none;
    padding: 1.6rem 1.8rem 1.8rem;
    background: var(--white);
    border-top: 2px solid var(--gold-line);
}

.akk-panel.is-open {
    display: block;
}

.akk-panel p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--muted);
    margin-bottom: 1rem;
}

.akk-panel p:last-child {
    margin-bottom: 0;
}

.akk-panel strong {
    color: var(--text);
}

/* ─── Rang-Sublabel & Listen ─────────────────────────────────── */
.rang-sublabel {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--navy);
    margin: 1.2rem 0 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}

.rang-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.rang-list li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--muted);
    padding: 0.2rem 0 0.2rem 1.4rem;
    position: relative;
}

.rang-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--gold);
}

.rang-list li a {
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(181, 136, 42, 0.35);
    transition: color 0.2s, border-color 0.2s;
}

.rang-list li a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ─── Hinweis-Box ────────────────────────────────────────────── */
.rang-hinweis {
    background: rgba(181, 136, 42, 0.07);
    border-left: 3px solid var(--gold-line);
    padding: 0.8rem 1.1rem;
    margin: 1rem 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--muted);
}

.rang-hinweis strong {
    color: var(--text);
}

/* ─── Kalender-Link (wird durch Kalender-Grid ersetzt,
       bleibt aber für eventuelle spätere Nutzung) ─────────────── */
.fgt-kalender-link {
    display: inline-block;
    margin-top: 0.4rem;
    font-family: 'Cinzel', serif;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 2px solid var(--gold-line);
    padding-bottom: 0.1rem;
    transition: color 0.2s, border-color 0.2s;
}

.fgt-kalender-link:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   FEST- & GEDENKTAGE – KALENDER-GRID  (panel-kalender)
   ═══════════════════════════════════════════════════════════════ */
/* ─── Legende ────────────────────────────────────────────────── */
.fgt-cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.2rem;
    margin-bottom: 0.9rem;
    padding: 0.65rem 0.9rem;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 3px;
}

.fgt-cal-leg-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
}

.fgt-cal-leg-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ─── 12-Monats-Grid ─────────────────────────────────────────── */
.fgt-cal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
}

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

@media (max-width: 380px) {
    .fgt-cal {
        grid-template-columns: 1fr;
    }
}

/* ─── Monatskachel ───────────────────────────────────────────── */
.fgt-cal-month {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.65rem 0.8rem 0.8rem;
}

.fgt-cal-mhead {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 1px solid var(--gold-line);
    padding-bottom: 0.28rem;
    margin-bottom: 0.45rem;
}

.fgt-cal-empty {
    font-size: 0.78rem;
    color: var(--border);
    font-style: italic;
    padding: 0.15rem 0;
}

/* ─── Einzeleintrag ──────────────────────────────────────────── */
.fgt-cal-entry {
    display: flex;
    align-items: flex-start;
    gap: 0.38rem;
    padding: 0.17rem 0;
}

.fgt-cal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.28rem;
}

/* Gruppenfarben */
.fgt-cal-dot-g1 {
    background: #b5882a;
}

/* Christusfeste */
.fgt-cal-dot-g2 {
    background: #9B1C1C;
}

/* Apostel */
.fgt-cal-dot-g3 {
    background: #9B1C1C;
}

/* Heilige */
.fgt-cal-dot-g4 {
    background: #9B1C1C;
}

/* Bekenntnisfeste */
.fgt-cal-dot-g5 {
    background: #2a6b3a;
}

/* Schöpfung & Dank */
.fgt-cal-inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1.35;
}

.fgt-cal-date {
    font-size: 0.68rem;
    color: var(--muted);
    display: block;
}

.fgt-cal-inner a {
    font-size: 0.8rem;
    color: var(--navy);
    text-decoration: none;
    border-bottom: 1px solid rgba(181, 136, 42, 0.3);
    transition: color 0.2s;
    line-height: 1.3;
}

.fgt-cal-inner a:hover {
    color: var(--gold);
}

.fgt-cal-inner span.fgt-cal-nolink {
    font-size: 0.8rem;
    color: var(--muted);
    line-height: 1.3;
}

/* ─── Akkordeon-Badges: Gruppenfarben (passend zur Kalender-Legende)
       Ans Ende von style.css anfügen, NACH den bestehenden .akk-* Regeln
   ─────────────────────────────────────────────────────────────────── */
/* Gruppe 6 (Übersicht / Kalender) – behält das allgemeine Gold-Styling */
/* Geöffneter Zustand: alle Badges einheitlich hell auf Navy-Hintergrund */
.akk-trigger[aria-expanded="true"] .akk-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--gold-light);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   EHRENAMT  (Namensraum: ea-)
   Seite ehrenamt.html – Bereichs-Kacheln, Hinweis-Kasten,
   Kontakt-Box, Intern-Button-Bereich, Banner
   ═══════════════════════════════════════════════════════════════ */
/* ─── Banner ─────────────────────────────────────────────────── */
.banner-ehrenamt {
    background-image: url('../bilder/gestaltung/ehrenamt.png');
}

/* ─── Bereichs-Kacheln (Grid) ────────────────────────────────── */
.ea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.ea-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold-line);
    padding: 1.5rem 1.4rem 1.4rem;
}

.ea-card-icon {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
    display: block;
}

.ea-card-title {
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    letter-spacing: 0.07em;
    color: var(--navy);
    margin-bottom: 0.55rem;
}

.ea-card-text {
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--muted);
    font-style: italic;
}

/* ─── Hinweis-Kasten ─────────────────────────────────────────── */
.ea-hinweis {
    background: rgba(181, 136, 42, 0.07);
    border-left: 3px solid var(--gold-line);
    padding: 1.1rem 1.4rem;
    margin: 1.6rem 0 0;
    font-size: 0.95rem;
    color: var(--muted);
    line-height: 1.8;
    font-style: italic;
    max-width: 680px;
}

.ea-hinweis strong {
    color: var(--navy);
    font-style: normal;
}

/* ─── Kontakt-Box ────────────────────────────────────────────── */
.ea-kontakt {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background: var(--navy);
    padding: 1.5rem 1.8rem;
    margin-top: 1.8rem;
    max-width: 560px;
    border-left: 3px solid var(--gold-line);
}

.ea-kontakt-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ea-kontakt-icon svg {
    width: 20px;
    height: 20px;
    stroke: var(--gold-light);
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ea-kontakt-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 0.35rem;
}

.ea-kontakt-text {
    font-size: 0.92rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
}

.ea-kontakt-text a {
    color: var(--gold-light);
    text-decoration: none;
}

.ea-kontakt-text a:hover {
    text-decoration: underline;
}

/* ─── Interner Bereich – Button-Wrap ─────────────────────────── */
.ea-intern-wrap {
    margin-top: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
}

.ea-intern-hint {
    font-size: 0.88rem;
    color: var(--muted);
    font-style: italic;
    max-width: 560px;
    line-height: 1.7;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .ea-kontakt {
        flex-direction: column;
        gap: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BÜCHER FÜR DEN WEG  —  Namensraum: buch-
   Dieses Snippet am Ende der style.css anfügen.
   ═══════════════════════════════════════════════════════════════ */
/* ─── Buchtipp des Monats – Gold-Section ─────────────────────── */
.section-gold {
    background: linear-gradient(135deg, #F7EDD3 0%, #F0E0B0 60%, #EDD89A 100%);
    border-top: 3px solid var(--gold-line);
    border-bottom: 3px solid var(--gold-line);
    padding: 3rem 2.5rem;
}

.buch-monat-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.2rem;
    align-items: start;
    margin-top: 0.5rem;
    max-width: 860px;
}

.buch-monat-cover {
    width: 100px;
    height: 142px;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 4px 4px 0 rgba(181,136,42,0.4);
    border: 1px solid rgba(181,136,42,0.3);
}

.buch-monat-badge {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--gold);
    padding: 0.2rem 0.85rem;
    margin-bottom: 0.9rem;
}

.buch-monat-titel {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--navy);
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.buch-monat-autor {
    font-size: 0.95rem;
    color: #8A6515;
    font-style: italic;
    margin-bottom: 1rem;
}

.buch-monat-text {
    font-size: 1rem;
    color: #4A3A10;
    line-height: 1.8;
}

.buch-monat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 1rem;
}

.buch-monat-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7A5C10;
    border: 1px solid rgba(181,136,42,0.5);
    background: rgba(255,255,255,0.45);
    padding: 0.12rem 0.55rem;
}

/* ─── Kategorie-Navigation ───────────────────────────────────── */
.buch-nav {
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    padding: 1.1rem 2.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: center;
}

.buch-nav-label {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    flex-shrink: 0;
    margin-right: 0.5rem;
}

.buch-nav-link {
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    color: var(--navy);
    text-decoration: none;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--border);
    background: var(--white);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.buch-nav-link:hover {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}

/* ─── Kategorie-Label ────────────────────────────────────────── */
.buch-kategorie-label {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--navy);
    padding: 0.18rem 0.7rem;
    margin-bottom: 1.6rem;
}

/* ─── Bücher-Grid ────────────────────────────────────────────── */
.buch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* ─── Buchkarte ──────────────────────────────────────────────── */
.buch-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--gold-line);
    display: flex;
    gap: 1.2rem;
    padding: 1.4rem;
    transition: box-shadow 0.2s;
}

.buch-card:hover {
    box-shadow: 0 4px 18px rgba(30,58,95,0.10);
}

/* ─── Cover-Platzhalter ──────────────────────────────────────── */
.buch-cover-placeholder {
    width: 72px;
    height: 102px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buch-cover-glaube {
    background: #6B2040;
}

.buch-cover-kirchenjahr {
    background: #2a5c3a;
}

.buch-cover-sachbuch {
    background: #4A6B20;
}

.buch-cover-biografie {
    background: #6B4A1A;
}

.buch-cover-belletristik {
    background: #4A2C5C;
}

.buch-cover-kinder {
    background: #2C6B5C;
}

/* ─── Buchinhalt ─────────────────────────────────────────────── */
.buch-info {
    flex: 1;
    min-width: 0;
}

.buch-titel {
    font-family: 'Cinzel', serif;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    color: var(--navy);
    line-height: 1.35;
    margin-bottom: 0.2rem;
}

.buch-autor {
    font-size: 0.85rem;
    color: var(--gold);
    font-style: italic;
    margin-bottom: 0.8rem;
}

.buch-text {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--muted);
}

.buch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.9rem;
}

.buch-tag {
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 0.12rem 0.55rem;
}

.buch-tag-hinweis {
    font-size: 0.78rem;
    color: var(--gold);
    font-style: italic;
    margin-top: 0.6rem;
    display: block;
}

/* ─── Bibelleseplan-Kacheln ──────────────────────────────────── */
.bibel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.bibel-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold-line);
    padding: 1.6rem 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.bibel-card-meta {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

.bibel-card-titel {
    font-family: 'Cinzel', serif;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    color: var(--navy);
    margin-top: 0.1rem;
}

.bibel-card-text {
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--muted);
    flex: 1;
}

.bibel-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--navy);
    color: #fff;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    padding: 0.55rem 1.2rem;
    transition: background 0.2s;
    align-self: flex-start;
}

.bibel-dl-btn:hover {
    background: var(--navy-mid);
}

.bibel-dl-btn svg {
    width: 14px;
    height: 14px;
    stroke: var(--gold-light);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ─── Mitmachen-Box ──────────────────────────────────────────── */
.buch-mitmachen {
    background: rgba(181, 136, 42, 0.07);
    border-left: 3px solid var(--gold-line);
    padding: 1.4rem 1.8rem;
    margin-top: 0.5rem;
    max-width: 720px;
}

.buch-mitmachen-titel {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    color: var(--navy);
    margin-bottom: 0.6rem;
}

.buch-mitmachen-text {
    font-size: 0.95rem;
    line-height: 1.78;
    color: var(--muted);
}

.buch-mitmachen-text strong {
    color: var(--text);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .buch-monat-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

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

    .buch-nav {
        padding: 1rem 1.2rem;
    }
}

@media (max-width: 540px) {
    .buch-card {
        flex-direction: column;
    }

    .buch-cover-placeholder {
        width: 100%;
        height: 72px;
    }
}

/* ─── Kategorie-Filter ───────────────────────────────────────── */
.buch-kat-hidden {
    display: none;
}

.buch-nav-link.buch-nav-aktiv {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}

/* Button-Reset für den Alle-Button */
button.buch-nav-link {
    cursor: pointer;
    font-family: 'EB Garamond', serif;
    font-size: 0.9rem;
    background: var(--white);
    border: 1px solid var(--border);
    padding: 0.25rem 0.75rem;
    color: var(--navy);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    line-height: normal;
}

button.buch-nav-link:hover {
    background: var(--navy);
    color: var(--gold-light);
    border-color: var(--navy);
}

/* ═══════════════════════════════════════════════════════════════
   FÜRBITTE-FORMULAR  —  Namensraum: fb-
   Dieses Snippet am Ende der style.css anfügen
   (nach dem buch- Snippet, falls bereits vorhanden).
   Außerdem werden hier fehlende nl-form-Ergänzungen
   (select, textarea, Checkbox) nachgereicht.
   ═══════════════════════════════════════════════════════════════ */
/* ─── nl-form Ergänzungen: select & textarea ─────────────────── */
.nl-field select,
.nl-field textarea {
    font-family: 'EB Garamond', serif;
    font-size: 1rem;
    color: var(--text);
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 0.55rem 0.85rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.nl-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231E3A5F' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.2rem;
    cursor: pointer;
}

.nl-field textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.65;
}

.nl-field select:focus,
.nl-field textarea:focus {
    border-color: var(--gold-line);
    box-shadow: 0 0 0 2px rgba(212,168,67,0.15);
}

/* ─── Bibelvers-Zitat auf der Einleitungsseite ───────────────── */
.fb-vers {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    max-width: 640px;
    margin-top: 2rem;
    padding: 1.2rem 1.5rem;
    border-left: 3px solid var(--gold-line);
    background: rgba(181,136,42,0.05);
}

.fb-vers-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--gold);
    margin-top: 0.15rem;
}

.fb-vers-text {
    font-family: 'EB Garamond', serif;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--navy);
    line-height: 1.7;
    display: block;
}

.fb-vers-quelle {
    display: block;
    margin-top: 0.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ─── Trennlinie im Formular ─────────────────────────────────── */
.fb-trennlinie {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.2rem 0;
}

/* ─── Optionaler Hinweis neben Feldbeschriftung ──────────────── */
.fb-optional {
    font-family: 'EB Garamond', serif;
    font-size: 0.85rem;
    color: var(--muted);
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0;
    text-transform: none;
}

/* ─── Checkbox-Feld ──────────────────────────────────────────── */
.fb-check-field {
    display: flex;
    flex-direction: column;
}

.fb-check-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    font-family: 'EB Garamond', serif;
    font-size: 0.97rem;
    color: var(--text);
    line-height: 1.65;
}

.fb-check-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.fb-check-box {
    display: inline-flex;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    background: var(--white);
    margin-top: 0.22rem;
    position: relative;
    transition: border-color 0.15s, background 0.15s;
}

.fb-check-label input[type="checkbox"]:checked + .fb-check-box {
    background: var(--navy);
    border-color: var(--navy);
}

.fb-check-label input[type="checkbox"]:checked + .fb-check-box::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

.fb-check-label input[type="checkbox"]:focus-visible + .fb-check-box {
    outline: 2px solid var(--gold-line);
    outline-offset: 2px;
}

/* ─── Ablauf-Schritte ────────────────────────────────────────── */
.fb-ablauf-grid {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.fb-ablauf-schritt {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

.fb-ablauf-nr {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    background: var(--navy);
    color: var(--white);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.fb-ablauf-schritt strong {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    color: var(--navy);
    margin-bottom: 0.3rem;
}

.fb-ablauf-schritt p {
    font-size: 0.93rem;
    line-height: 1.72;
    color: var(--muted);
    margin: 0;
}

/* ─── Hinweis-Box (Direkt-Kontakt) ──────────────────────────── */
.fb-hinweis-box {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1rem 1.3rem;
    background: var(--bg2);
    border-left: 3px solid var(--border);
    font-size: 0.93rem;
    line-height: 1.72;
    color: var(--muted);
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
    .fb-ablauf-nr {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .fb-vers {
        flex-direction: column;
    }
}

/* Abstand nach unten, wenn fb-hinweis-box vor Formfeldern steht */
.fb-hinweis-box--top {
    margin-bottom: 1.4rem;
}

/* Eingerückter Hinweistext unter Checkboxen */
.nl-field-hint--check {
    margin-top: 0.5rem;
    padding-left: 1.85rem;
}

/* Lade-/Deaktiviert-Zustand des Absende-Buttons */
.nl-submit:disabled,
.nl-submit.is-loading {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

/* Honeypot-Feld: visuell vollständig versteckt */
.fb-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}