/* ═══ JOST ═══ */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Jost 500 und 600 — vorher erst im Fußbereich, also am Seitenende */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jost-v20-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══ CORMORANT GARAMOND ═══ */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-300italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/cormorant-garamond-v21-latin-600italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════
   DESIGN TOKENS — LIGHT + DARK
═══════════════════════════════════════════ */
:root {
  --purple-dark:  #1e1248;
  --purple-mid:   #3b2283;
  --purple-main:  #5a32b0;
  --purple-light: #8b5fe8;
  --gold:         #e6b65c;
  --gold-light:   #eed69b;
  /* Gold ist auf hellem Grund unlesbar (1,8:1). Für Text auf weißen
     Flächen dient diese dunklere Fassung — 6,1:1. */
  --gold-text:    #7a5c18;
  --gold-pale:    #f7ecd0;

  --bg:           #f8f6ff;
  --bg-soft:      #ede8f8;
  --bg-card:      #ffffff;
  --text:         #120d2b;
  --text-mid:     #3d3160;
  --text-muted:   #6b5d90;
  --border:       rgba(90,50,176,0.10);
  --border-gold:  rgba(230,182,92,0.25);
  --h-a:          #140b38;
  --h-b:          #1e1248;
  --h-c:          #291868;
  --nav-bg:       #f4f1fc;
  --foot-bg:      #080516;
  --focus-ring:   #eed69b;
  --shadow:       rgba(90,50,176,0.08);
  --shadow-h:     rgba(90,50,176,0.20);
  --glass:        rgba(255,255,255,0.60);
  --glass-border: rgba(255,255,255,0.80);
}
[data-theme="dark"] {
  --gold-text: var(--gold-light);
  --bg:           #1a1828;
  --bg-soft:      #231f35;
  --bg-card:      #221e32;
  --text:         #ede8ff;
  --text-mid:     #baaee8;
  --text-muted:   #b8aedd;
  --border:       rgba(139,95,232,0.18);
  --border-gold:  rgba(230,182,92,0.20);
  --h-a:          #1e1248;
  --h-b:          #271868;
  --h-c:          #301f7a;
  --nav-bg:       #140d38;
  --foot-bg:      #09080f;
  --shadow:       rgba(0,0,0,0.40);
  --shadow-h:     rgba(90,50,176,0.35);
  --glass:        rgba(34,30,50,0.70);
  --glass-border: rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px;overflow-x:clip}
body{
  font-family:'Jost',sans-serif;
  background:var(--bg);color:var(--text);
  /* clip statt hidden: hidden macht body zum eigenen Scrollbereich,
     sobald html selbst ein overflow trägt — dann klebt die Kopfleiste
     an body und scrollt mit dem Inhalt weg. clip schneidet nur ab.
     hidden bleibt davor als Rückfall für sehr alte Browser. */
  overflow-x:hidden;overflow-x:clip;line-height:1.65;
  transition:background .4s ease,color .4s ease;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  html{scroll-behavior:auto}
}

/* ═══════════════════════════════════════════
   SCROLLBAR
═══════════════════════════════════════════ */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--purple-dark),var(--purple-mid));
  border-radius:10px;border:2px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover{background:var(--purple-mid)}
*{scrollbar-width:thin;scrollbar-color:var(--purple-dark) var(--bg-soft)}

/* ── SKIP LINK ── */
.skip-link{
  position:absolute;top:-120px;left:1rem;
  background:var(--gold);color:var(--purple-dark);
  font-weight:600;padding:.7rem 1.2rem;letter-spacing:.04em;
  border-radius:0 0 10px 10px;text-decoration:none;
  font-size:.88rem;z-index:9999;transition:top .2s;
}
.skip-link:focus{top:0;outline:3px solid var(--purple-dark);outline-offset:2px}

/* ── GLOBAL FOCUS ── */
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:3px;border-radius:4px;
}
:focus:not(:focus-visible){outline:none}

/* ═══ GRADIENT ANIMATION ═══ */

/* ═══ SUBTLE TEXTURE OVERLAY ═══ */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  opacity:.5;pointer-events:none;z-index:0;
}

/* ═══ SHARED OVERLAY ═══ */
#overlay{
  position:fixed;inset:0;
  background:rgba(5,2,15,.78);
  backdrop-filter:blur(8px);
  z-index:450;opacity:0;pointer-events:none;
  transition:opacity .4s ease;
}
#overlay.active{opacity:1;pointer-events:all}

/* ═══════════════════════════════════════════
   SIDE NAVIGATION
═══════════════════════════════════════════ */
#sidenav{
  position:fixed;top:0;right:-440px;
  width:min(420px,82vw);height:100vh;
  background:var(--nav-bg);
  z-index:500;display:flex;flex-direction:column;
  transition:right .5s cubic-bezier(.77,0,.18,1);
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(45,27,105,.6) transparent;
  border-left:1px solid rgba(139,95,232,.15);
}
#sidenav::-webkit-scrollbar{width:4px}
#sidenav::-webkit-scrollbar-track{background:transparent}
#sidenav::-webkit-scrollbar-thumb{background:rgba(45,27,105,.5);border-radius:6px}
#sidenav.open{right:0}

.snav-head{
  padding:2rem 2.25rem 1.4rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;align-items:center;flex-shrink:0;
}
.snav-logo{
  font-family:'Cormorant Garamond',serif;
  color:var(--gold-light);font-size:1.05rem;line-height:1.35;
  letter-spacing:.02em;
}
.snav-logo span{
  display:block;font-size:.68rem;color:rgba(139,95,232,.8);
  font-family:'Jost',sans-serif;margin-top:3px;letter-spacing:.14em;text-transform:uppercase;
}
.snav-close{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;cursor:pointer;
  color:rgba(255,255,255,.55);
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:background .25s,color .25s,border-color .25s;
}
.snav-close:hover,.snav-close:focus-visible{
  background:rgba(230,182,92,.15);
  border-color:var(--gold);color:var(--gold-light);
}

.snav-nav{padding:1.2rem 0;flex:1}
.snav-section{margin-bottom:.05rem}

/* Akkordeon-Button (Hauptmenüpunkt) */
.snav-group-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:.6rem 2.25rem;
  color:rgba(255,255,255,.68);background:none;border:none;cursor:pointer;
  font-size:.9rem;font-weight:400;letter-spacing:.01em;font-family:inherit;
  -webkit-appearance:none;appearance:none;
  border-left:2px solid transparent;text-align:left;
  transition:color .2s,background .2s,border-color .2s,padding-left .2s;
}
.snav-group-btn:hover,.snav-group-btn:focus-visible{
  color:#fff;background:rgba(255,255,255,.04);
  border-left-color:var(--gold);padding-left:calc(2.25rem + 8px);
}
.snav-group-btn.open{color:#fff;border-left-color:var(--gold)}
.snav-chevron{
  flex-shrink:0;width:14px;height:14px;fill:currentColor;
  transition:transform .25s ease;
}
.snav-group-btn.open .snav-chevron{transform:rotate(180deg)}

/* Untermenü */
.snav-sub{
  overflow:hidden;max-height:0;
  transition:max-height .3s ease;
}
.snav-sub.open{max-height:400px}

.snav-nav a{
  display:block;padding:.55rem 2.25rem;
  color:rgba(255,255,255,.68);text-decoration:none;
  font-size:.9rem;font-weight:400;letter-spacing:.01em;
  border-left:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s,padding-left .25s;
}
.snav-nav a:hover,.snav-nav a:focus-visible{
  color:#fff;background:rgba(255,255,255,.04);
  border-left-color:var(--gold);padding-left:calc(2.25rem + 8px);
}
.snav-nav .sub{
  padding:.45rem 2.25rem .45rem 3.2rem;font-size:.82rem;
  color:rgba(255,255,255,.44);border-left:2px solid transparent;
}
.snav-nav .sub:hover,.snav-nav .sub:focus-visible{
  padding-left:calc(3.2rem + 8px);color:rgba(255,255,255,.82)
}

.snav-foot{
  padding:1.4rem 2.25rem 2rem;
  border-top:1px solid rgba(255,255,255,.06);flex-shrink:0;
}
.snav-contact{font-size:.78rem;color:rgba(255,255,255,.35);line-height:2;font-style:normal}
.snav-contact strong{color:rgba(238,214,155,.75);font-weight:500}
.snav-contact a{color:rgba(139,95,232,.8);text-decoration:none}
.snav-contact a:hover,.snav-contact a:focus-visible{color:var(--gold-light);text-decoration:underline}

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
#site-header{
  position:sticky;top:0;z-index:100;
  background:linear-gradient(135deg,var(--h-a) 0%,var(--h-b) 50%,var(--h-c) 100%);
  box-shadow:0 1px 0 rgba(139,95,232,.2),0 4px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(20px);
  transition:transform .3s ease;
}
@media(max-width:768px){
  #site-header{position:fixed;top:0;left:0;right:0;width:100%}
  body{padding-top:72px}
}
.hdr-inner{
  max-width:1300px;margin:0 auto;
  padding:0 1.75rem;
  display:flex;align-items:center;justify-content:space-between;
  height:72px;gap:1rem;
}
.hdr-logo{
  display:flex;align-items:center;gap:1rem;
  text-decoration:none;flex-shrink:0;
}
.logo-cross{
  width:38px;height:38px;flex-shrink:0;
  background:linear-gradient(145deg,var(--gold),var(--gold-light));
  display:flex;align-items:center;justify-content:center;
  border-radius:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.15),0 4px 16px rgba(230,182,92,.35);
}
.logo-cross svg{width:20px;height:20px;fill:var(--purple-dark)}
.logo-text{color:#fff}
.logo-text strong{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:1.1rem;font-weight:600;letter-spacing:.02em;
}
.logo-text span{
  display:block;font-size:.63rem;color:rgba(139,95,232,.9);
  letter-spacing:.14em;text-transform:uppercase;margin-top:1px;
}

.hdr-controls{display:flex;align-items:center;gap:.55rem}

/* Burger — Maße und Anmutung wie beim Umschalter daneben,
   damit die beiden Knöpfe im Kopfbereich ein Paar ergeben. */
.burger-btn{
  width:38px;height:38px;flex-shrink:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4.5px;
  border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  transition:background .2s,border-color .2s;
}
.burger-btn:hover{background:rgba(255,255,255,.20)}
.burger-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.burger-btn span{
  display:block;width:20px;height:1.5px;
  background:rgba(255,255,255,.85);border-radius:2px;
  transition:transform .3s ease,opacity .3s ease;
}
.burger-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ═══════════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════════ */
.hero{position:relative;height:560px;overflow:hidden;background:var(--purple-dark)}
.slide{
  position:absolute;inset:0;
  display:flex;align-items:flex-end;
  opacity:0;transition:opacity 1.2s ease;pointer-events:none;
}
.slide.active{opacity:1;pointer-events:auto}
/* Erste Slide sofort sichtbar — kein Transition-Delay für LCP */
.slide:first-child{opacity:1;pointer-events:auto}
.slide:first-child:not(.active){opacity:0;transition:none}
.slide-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 10s ease;
}
.slide.active .slide-bg{transform:scale(1.05)}
.slide-overlay{
  position:absolute;inset:0;
  background:linear-gradient(
    to top,
    rgba(8,3,20,.95) 0%,
    rgba(30,18,72,.45) 40%,
    rgba(30,18,72,.18) 65%,
    transparent 100%
  );
}
/* decorative gold line at bottom */
.slide-overlay::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.5;
}
.slide-content{position:relative;z-index:2;padding:3rem 3.5rem;max-width:660px}
.slide-tag{
  display:inline-block;
  font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-light);font-weight:600;
  margin-bottom:.65rem;
  padding:.25rem .75rem;
  background:rgba(230,182,92,.12);
  border:1px solid rgba(230,182,92,.25);
  border-radius:20px;
}
.slide-content h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2rem,4.5vw,3.4rem);
  color:#fff;font-weight:300;
  text-shadow:0 2px 30px rgba(0,0,0,.5);
  line-height:1.15;letter-spacing:.01em;
}
.slide-content p{margin-top:.65rem;color:rgba(255,255,255,.62);font-size:.92rem;letter-spacing:.02em}

.slider-dots{
  position:absolute;bottom:2rem;right:2.5rem;
  display:flex;gap:6px;z-index:3;align-items:center;
}
.dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.25);cursor:pointer;
  border:1.5px solid transparent;transition:background .35s,width .35s,border-radius .35s;
  padding:0;position:relative;
}
/* Touch-Zielbereich 44×44px via Pseudo-Element – visuell unverändert */
.dot::before{
  content:'';position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  min-width:44px;min-height:44px;
}
.dot.active{background:var(--gold);width:22px;border-radius:3px}

.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:3;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.7);width:42px;height:42px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:1.2rem;
  transition:background .25s,border-color .25s,color .25s;
  backdrop-filter:blur(8px);
}
.slider-arrow:hover,.slider-arrow:focus-visible{
  background:rgba(230,182,92,.2);
  border-color:rgba(230,182,92,.5);color:var(--gold-light);
}
.slider-arrow.prev{left:1.5rem}
.slider-arrow.next{right:1.5rem}
#slider-announce{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ═══ GOLD BANNER ═══ */
.gold-banner{
  background:linear-gradient(90deg,var(--purple-dark) 0%, #2a1960 40%, var(--purple-dark) 100%);
  border-top:1px solid rgba(230,182,92,.2);
  border-bottom:1px solid rgba(230,182,92,.2);
  padding:.9rem 2rem;text-align:center;
  position:relative;overflow:hidden;
}
.gold-banner::before{
  content:'';position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:600px;height:120px;
  background:radial-gradient(ellipse,rgba(230,182,92,.08) 0%,transparent 70%);
  pointer-events:none;
}
.gold-banner p{font-size:.83rem;color:rgba(238,214,155,.75);font-weight:400;letter-spacing:.04em}
.gold-banner a{
  color:#f0d98a !important;font-weight:700;
  text-decoration:none;border-bottom:1px solid rgba(240,217,138,.4);
  transition:border-color .2s,color .2s;
}
.gold-banner a:hover{border-bottom-color:#fff;color:#fff !important}

/* ═══════════════════════════════════════════
   SECTION SYSTEM
═══════════════════════════════════════════ */
.cards-section{
  background:var(--bg);
  padding:5rem 1.75rem;
  position:relative;
  overflow:hidden;
}
/* Subtle decorative radial behind content */
.cards-section::before{
  content:'';position:absolute;
  top:0;left:50%;transform:translateX(-50%);
  width:900px;height:600px;
  background:radial-gradient(ellipse at 50% 0%,rgba(90,50,176,.06) 0%,transparent 65%);
  pointer-events:none;
}
.cards-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}

.section-intro{text-align:center;margin-bottom:3.5rem}
.eyebrow{
  display:inline-block;font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--purple-main);font-weight:600;
  margin-bottom:.65rem;
  padding:.3rem .9rem;
  background:var(--bg-soft);
  border:1px solid var(--border);
  border-radius:20px;
}
[data-theme="dark"] .eyebrow{background:rgba(90,50,176,.12);border-color:rgba(139,95,232,.2)}
.section-intro h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.9rem,3.5vw,2.75rem);
  color:var(--text);font-weight:300;
  letter-spacing:.02em;line-height:1.2;
}

/* ═══ CARDS GRID ═══ */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.75rem;
}
@media(max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards-grid{grid-template-columns:1fr}}

.card{
  background:var(--bg-card);border-radius:20px;overflow:hidden;
  box-shadow:0 2px 20px var(--shadow);
  border:1px solid var(--border);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
  text-decoration:none;color:var(--text);
  display:flex;flex-direction:column;
  position:relative;
}
.card::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.06) 0%,transparent 60%);
  pointer-events:none;z-index:1;opacity:0;
  transition:opacity .35s;
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 60px var(--shadow-h);
  border-color:var(--border-gold);
}
.card:hover::before{opacity:1}
.card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;transform:translateY(-5px)}

.card-img{height:185px;overflow:hidden;position:relative;flex-shrink:0}
.card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.card:hover .card-img img,.card:focus-visible .card-img img{transform:scale(1.06)}
/* gradient overlay on image */
.card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 55%);
  pointer-events:none;
}

.card-body{padding:1.5rem 1.5rem 1.6rem;flex:1;display:flex;flex-direction:column;position:relative;z-index:2}
.card-tag{
  display:inline-block;font-size:.58rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--purple-main);font-weight:600;margin-bottom:.5rem;
}
[data-theme="dark"] .card-tag{color:var(--purple-light)}
.card h2{
  font-family:'Cormorant Garamond',serif;
  font-size:1.3rem;font-weight:400;
  color:var(--text);margin-bottom:.55rem;line-height:1.3;
  letter-spacing:.01em;
}
.card p{font-size:.875rem;color:var(--text-mid);line-height:1.7;flex:1;font-weight:300}

.card-links{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.35rem}
.card-links a{
  font-size:.7rem;font-weight:500;color:var(--purple-main);
  background:var(--bg-soft);border-radius:20px;padding:.3rem .75rem;
  text-decoration:none;transition:background .2s,color .2s;
  border:1px solid var(--border);
}
.card-links a:hover,.card-links a:focus-visible{background:var(--purple-main);color:#fff;border-color:transparent}

.card-more{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1rem;font-size:.78rem;font-weight:500;
  color:var(--purple-main);transition:gap .25s,color .2s;text-decoration:none;
  letter-spacing:.04em;text-transform:uppercase;font-size:.65rem;
}
[data-theme="dark"] .card-more{color:var(--purple-light)}
.card-more:hover,.card-more:focus-visible{gap:.7rem;color:var(--gold)}
.card-more::after{content:'→';font-size:.8rem}

/* Card accent image fallback backgrounds */
.card-accent-1 .card-img{background:linear-gradient(135deg,#271460,#5a32b0)}
.card-accent-2 .card-img{background:linear-gradient(135deg,#0d3d6e,#2a7ab8)}
.card-accent-3 .card-img{background:linear-gradient(135deg,#5a0f2e,#b03060)}
.card-accent-4 .card-img{background:linear-gradient(135deg,#0f5a2e,#30b072)}
.card-accent-5 .card-img{background:linear-gradient(135deg,#5a4a0f,#b09030)}
.card-accent-6 .card-img{background:linear-gradient(135deg,#0d2d6e,#2a50b8)}
.card-accent-7 .card-img{background:linear-gradient(135deg,#4a0f5a,#a030b0)}
/* ═══ CODE INLINE ═══ */
code{
  font-family:'Courier New',monospace;font-size:.82em;
  background:var(--bg-soft);color:var(--text-mid);
  padding:.15em .45em;border-radius:5px;
  border:1px solid var(--border);
  white-space:nowrap;
}
[data-theme="dark"] code{
  background:rgba(139,95,232,.18);
  color:#e8e0ff;
  border-color:rgba(139,95,232,.3);
}

.card-accent-8 .card-img{background:linear-gradient(135deg,#5a200f,#b05030)}

.iban-block{
  font-family:'Courier New',monospace;font-size:.72rem;
  background:var(--bg-soft);padding:.65rem .9rem;
  border-radius:10px;margin-top:.85rem;line-height:2;
  color:var(--text-mid);border:1px solid var(--border);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow-x:auto;
  scrollbar-width:none;
}
.iban-block::-webkit-scrollbar{display:none}

/* ═══ WIDE 2-CARD GRID ═══ */
.wide-cards-section{
  background:var(--bg);
  padding:0 1.75rem 5rem;
  position:relative;z-index:1;
}
.wide-cards-inner{max-width:1280px;margin:0 auto}
.wide-cards-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.75rem;
}
@media(max-width:760px){.wide-cards-grid{grid-template-columns:1fr}}

.wide-card{
  background:var(--bg-card);border-radius:20px;overflow:hidden;
  box-shadow:0 2px 20px var(--shadow);border:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.wide-card:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 60px var(--shadow-h);
  border-color:var(--border-gold);
}
.wide-card-img{overflow:hidden;position:relative;background:var(--bg-soft)}
.wide-card-img img{
  width:100%;height:auto;max-height:300px;
  object-fit:contain;display:block;
  transition:transform .6s ease;
}
.wide-card:hover .wide-card-img img{transform:scale(1.04)}
.wide-card.card-accent-3 .wide-card-img{background:linear-gradient(135deg,#5a0f2e,#b03060)}
.wide-card.card-accent-7 .wide-card-img{background:linear-gradient(135deg,#4a0f5a,#a030b0)}

.wide-card-body{padding:1.8rem 2rem;flex:1;display:flex;flex-direction:column}
.wide-card-body h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.2rem,2.2vw,1.6rem);color:var(--text);
  font-weight:400;margin:.35rem 0 .7rem;letter-spacing:.01em;
}
.wide-card-body p{font-size:.9rem;color:var(--text-mid);line-height:1.75;margin-bottom:1.2rem;font-weight:300}

.angebote-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.angebote-links a{
  font-size:.8rem;font-weight:500;color:var(--purple-main);
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:24px;padding:.4rem 1.05rem;
  text-decoration:none;transition:background .2s,color .2s,border-color .2s;
  letter-spacing:.01em;
}
.angebote-links a:hover,.angebote-links a:focus-visible{
  background:var(--purple-main);color:#fff;border-color:transparent;
}
[data-theme="dark"] .angebote-links a{color:var(--purple-light)}
[data-theme="dark"] .angebote-links a:hover,
[data-theme="dark"] .angebote-links a:focus-visible{background:var(--purple-main);color:#fff;border-color:transparent}

.kontakt-adresse{
  font-style:normal;color:var(--text-mid);
  font-size:.92rem;line-height:2.2;margin-top:auto;font-weight:300;
}
.kontakt-adresse a{color:var(--purple-main);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.kontakt-adresse a:hover{border-bottom-color:var(--purple-main)}
[data-theme="dark"] .kontakt-adresse a{color:var(--purple-light)}

/* ═══ CONTACT STRIP ═══ */
.contact-strip{
  background:linear-gradient(135deg,#10073a 0%,var(--purple-mid) 40%,#3c1680 70%,var(--purple-dark) 100%);
  background-size:100% 100%;
  padding:4rem 1.75rem;
  position:relative;overflow:hidden;
}
.contact-strip::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,0.03)'/%3E%3C/svg%3E");
  pointer-events:none;
}
.cstrip-inner{
  max-width:1280px;margin:0 auto;position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:2.5rem;flex-wrap:wrap;
}
.contact-strip h2{
  font-family:'Cormorant Garamond',serif;
  color:#fff;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:300;letter-spacing:.02em;
}
.contact-strip p{color:rgba(255,255,255,.52);font-size:.9rem;margin-top:.35rem}
.cdetail{color:rgba(255,255,255,.62);font-size:.9rem;line-height:2.2;font-style:normal;font-weight:300}
.cdetail a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(238,214,155,.25);transition:border-color .2s}
.cdetail a:hover,.cdetail a:focus-visible{border-bottom-color:var(--gold-light)}
.donate-box{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:1.4rem 1.65rem;max-width:330px;
  backdrop-filter:blur(10px);
}
.donate-box h3{
  font-family:'Cormorant Garamond',serif;
  color:var(--gold-light);font-size:1.05rem;
  margin-bottom:.85rem;font-weight:400;letter-spacing:.03em;
}
.donate-box .iban-block{
  background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.08);
  color:rgba(255,255,255,.55);
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
footer{
  background:linear-gradient(135deg,var(--foot-bg) 0%,#0d0620 100%);
  padding:2.75rem 1.75rem 2rem;
  border-top:1px solid rgba(139,95,232,.1);
}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-links{
  display:flex;justify-content:center;flex-wrap:wrap;
  margin-bottom:1.5rem;list-style:none;gap:0;
}
.footer-links li{display:flex;align-items:center}
.footer-links li+li::before{
  content:'·';display:inline-block;
  color:rgba(255,255,255,.15);margin:0 .1rem;
  font-size:1rem;line-height:1;
}
.footer-links button{
  color:#e1e1e1;font-size:.8rem;
  background:none;border:none;cursor:pointer;
  font-family:inherit;padding:.35rem 1rem;
  transition:color .2s;line-height:1;letter-spacing:.01em;
}
.footer-links button:hover,.footer-links button:focus-visible{color:var(--gold-light)}
.footer-copy{
  text-align:center;color:rgba(255,255,255,.45);
  font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.5rem;
}

/* ═══════════════════════════════════════════
   MODALS
═══════════════════════════════════════════ */
.modal-wrap{
  position:fixed;inset:0;z-index:600;
  display:flex;align-items:flex-start;justify-content:center;
  /* Der Rahmen selbst scrollt — dadurch bleibt auch ein langes Fenster
     vollständig erreichbar, oben wie unten. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:2rem 1rem;opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.modal-wrap.open{opacity:1;pointer-events:all}

.modal{
  background:var(--bg-card);border-radius:24px;
  padding:2.5rem 2.25rem;max-width:640px;width:100%;
  margin:auto;
  position:relative;z-index:1;
  box-shadow:0 30px 100px rgba(0,0,0,.6),0 0 0 1px rgba(139,95,232,.1);
  border:1px solid var(--border);
  transform:translateY(20px) scale(.98);
  transition:transform .35s cubic-bezier(.34,1.1,.64,1),opacity .3s ease;
  scrollbar-width:none;
}
.modal::-webkit-scrollbar{display:none}
.modal-wrap.open .modal{transform:translateY(0) scale(1)}

.modal-hdr{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:1.75rem;gap:1rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--border);
}
.modal-hdr h2{
  font-family:'Cormorant Garamond',serif;color:var(--text);
  font-size:1.5rem;line-height:1.2;font-weight:400;letter-spacing:.02em;
}
.modal-close{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:10px;cursor:pointer;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:background .2s,color .2s;flex-shrink:0;
}
.modal-close:hover,.modal-close:focus-visible{background:var(--purple-main);color:#fff;border-color:transparent}

.modal-body{color:var(--text-mid);font-size:.9rem;line-height:1.85;font-weight:300}
.modal-body h3{
  font-family:'Cormorant Garamond',serif;color:var(--text);
  font-size:1.15rem;margin:1.4rem 0 .5rem;font-weight:400;letter-spacing:.01em;
}
.modal-body p{margin-bottom:.85rem}
.modal-body a{color:var(--purple-main);border-bottom:1px solid transparent;text-decoration:none;transition:border-color .2s,color .2s}
.modal-body a:hover{border-bottom-color:var(--purple-main)}
[data-theme="dark"] .modal-body a{color:var(--gold-light)}
[data-theme="dark"] .modal-body a:hover{border-bottom-color:var(--gold-light)}
.modal-body ul{padding-left:1.35rem;margin-bottom:.85rem}
.modal-body li{margin-bottom:.4rem}
.modal-body code{
  font-size:.8rem;background:var(--bg-soft);
  padding:.15rem .45rem;border-radius:5px;color:var(--purple-main);
  border:1px solid var(--border);
}
[data-theme="dark"] .modal-body code{
  background:rgba(139,95,232,.18);color:#e8e0ff;border-color:rgba(139,95,232,.3);
}

.a11y-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.75rem 0 1rem}
.a11y-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:8px;padding:.4rem .85rem;
  font-size:.76rem;color:var(--purple-main);font-weight:500;
}
.a11y-badge svg{width:13px;height:13px;flex-shrink:0;fill:var(--purple-main)}
[data-theme="dark"] .a11y-badge{color:var(--gold-light);border-color:var(--border-gold)}
[data-theme="dark"] .a11y-badge svg{fill:var(--gold-light)}

/* ═══ SCROLL ANIMATIONS ═══ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:translateY(0)}
}
.will-anim{opacity:0}
.anim{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both}

/* ═══ RESPONSIVE ═══ */
@media(max-width:640px){
  .hero{height:400px}
  .slide-content{padding:2rem 1.5rem}
  .cards-grid{grid-template-columns:1fr}
  .cstrip-inner{flex-direction:column}
  .logo-text strong{font-size:.95rem}
  .modal{padding:2rem 1.5rem;border-radius:18px}
  /* Gestapelt linksbündig — passend zum ebenfalls gestapelten Kontaktbereich */
  .footer-links{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .footer-links li+li::before{display:none}
  .footer-links button{padding-left:0;text-align:left}
  .footer-copy{text-align:left}
}

/* ═══ HEADER LOGO IMAGE ═══ */
.logo-img-wrap {
  background: #ffffff;
  border-radius: 12px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 4px 20px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.08) inset;
  transition: box-shadow .3s ease, transform .3s ease;
  flex-shrink: 0;
}
.hdr-logo:hover .logo-img-wrap,
.hdr-logo:focus-visible .logo-img-wrap {
  box-shadow:
    0 0 0 1px rgba(230,182,92,0.4),
    0 6px 24px rgba(0,0,0,0.4),
    0 1px 0 rgba(255,255,255,0.08) inset;
  transform: translateY(-1px);
}
.hdr-logo-img {
  height: 44px;
  width: auto;
  display: block;
  border-radius: 6px;
}
@media(max-width:480px) {
  .hdr-logo-img { height: 36px; }
  .logo-img-wrap { padding: 4px 8px; border-radius: 10px; }
}


/* ═══════════════════════════════════════════
   STICKY BOTTOM BAR
═══════════════════════════════════════════ */
.sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 40%, var(--gold) 100%);
  background-size: 100% 100%;
  box-shadow: 0 -2px 30px rgba(0,0,0,0.35), 0 -1px 0 rgba(255,255,255,0.25) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 52px;
  padding: 0;
}

/* Trennlinie zwischen den Links */
.sticky-bar-link + .sticky-bar-link::before {
  content: '';
  display: block;
  width: 1px;
  height: 24px;
  background: rgba(30, 18, 72, 0.18);
  flex-shrink: 0;
}

.sticky-bar-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 0 2rem;
  text-decoration: none;
  color: var(--purple-dark);
  font-family: 'Jost', sans-serif;
  font-size: .83rem;
  font-weight: 600;
  letter-spacing: .03em;
  height: 100%;
  transition: background .2s, color .2s;
  white-space: nowrap;
  position: relative;
  flex: 1;
  max-width: 260px;
}
.sticky-bar-link:hover,
.sticky-bar-link:focus-visible {
  background: rgba(30, 18, 72, 0.10);
  color: var(--purple-dark);
}
.sticky-bar-link:focus-visible {
  outline: 2px solid var(--purple-dark);
  outline-offset: -3px;
  border-radius: 0;
}

.sticky-bar-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
/* Telefon: fill-basiert */
.sticky-bar-link .icon-phone {
  fill: var(--purple-dark);
  stroke: none;
}
/* Mail: fill-basiert */
.sticky-bar-link .icon-mail {
  fill: var(--purple-dark);
  stroke: none;
}
/* Sticky bar icons & text: immer dunkellila, auch im Dark Mode */
[data-theme="dark"] .sticky-bar-link { color: var(--purple-dark); }
[data-theme="dark"] .sticky-bar-link .icon-phone { fill: var(--purple-dark); stroke: none; }
[data-theme="dark"] .sticky-bar-link .icon-mail { fill: var(--purple-dark); stroke: none; }

/* Label: sichtbar ab 540px, darunter versteckt */
.sticky-bar-label {
  display: inline;
}
@media (max-width: 539px) {
  .sticky-bar-label { display: none; }
  .sticky-bar-link { padding: 0 1rem; }
  .sticky-bar-link svg { width: 22px; height: 22px; }
}

/* Footer-Abstand damit nichts hinter der Bar verschwindet */
footer { padding-bottom: calc(2rem + 52px); }


/* ═══ KONTAKTFORMULAR ═══ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.1rem;
}
.form-group label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-group input,
.form-group select,
.form-group textarea {
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  font-weight: 300;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .65rem .9rem;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  width: 100%;
  line-height: 1.5;
}
.form-group textarea {
  resize: vertical;
  min-height: 110px;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: .65;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--purple-main);
  box-shadow: 0 0 0 3px rgba(90,50,176,.12);
  background: var(--bg-card);
}
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group select,
[data-theme="dark"] .form-group textarea {
  color-scheme: dark;
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(139,95,232,.25);
}
[data-theme="dark"] .form-group label {
  color: var(--text-mid);
}
[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: .8;
}
[data-theme="dark"] .form-hint {
  color: var(--text-muted);
}
[data-theme="dark"] .form-group input:focus,
[data-theme="dark"] .form-group select:focus,
[data-theme="dark"] .form-group textarea:focus {
  border-color: var(--purple-light);
  box-shadow: 0 0 0 3px rgba(139,95,232,.18);
  background: rgba(255,255,255,.09);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media(max-width:480px) { .form-row { grid-template-columns: 1fr; } }

.form-submit {
  width: 100%;
  margin-top: .5rem;
  padding: .8rem 1.5rem;
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-main));
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: 'Jost', sans-serif;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(90,50,176,.25);
}
.form-submit:hover {
  opacity: .92;
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(90,50,176,.35);
}
.form-submit:active { transform: translateY(0); }
.form-submit:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Erfolgs-/Fehlermeldung */
.form-feedback {
  display: none;
  margin-top: .9rem;
  padding: .7rem 1rem;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 500;
  text-align: center;
}
.form-feedback.success {
  background: rgba(48,176,114,.12);
  border: 1px solid rgba(48,176,114,.28);
  color: #1e8a56;
}
[data-theme="dark"] .form-feedback.success { color: #5ddfa0; }
.form-feedback.error {
  background: rgba(176,48,48,.10);
  border: 1px solid rgba(176,48,48,.25);
  color: #a02020;
}
[data-theme="dark"] .form-feedback.error { color: #f07070; }

/* Pflichtfeld-Hinweis */
.form-required-note {
  font-size: .72rem;
  color: var(--text-mid);
  margin-bottom: 1.1rem;
}
.form-required-note .req { margin-left: 1px; margin-right: 2px; }
.req { color: #8a6520; margin-left: 2px; }
[data-theme="dark"] .req { color: var(--gold); }


.sticky-bar-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
  color: var(--purple-dark);
}

/* ── Sticky Bar: Farben robust erzwingen ── */
.sticky-bar,
.sticky-bar a,
.sticky-bar button,
.sticky-bar .sticky-bar-link,
.sticky-bar .sticky-bar-btn {
  color: var(--purple-dark) !important;
}
.sticky-bar svg.icon-phone {
  /* Alle drei Symbole sind Flächen — Konturmodus zerlegte sie in
     ein Geflecht aus Umrissen. */
  fill: var(--purple-dark) !important;
  stroke: none !important;
}
.sticky-bar svg.icon-mail {
  fill: var(--purple-dark) !important;
  stroke: none !important;
}
.sticky-bar svg.icon-form {
  fill: var(--purple-dark) !important;
  stroke: none !important;
}
.sticky-bar svg {
  color: var(--purple-dark) !important;
}


/* ═══════════════════════════════════════════
   KONTAKT-FORMULAR
═══════════════════════════════════════════ */
.contact-form { margin-top: 1.5rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
@media(max-width:480px) { .form-row { grid-template-columns: 1fr; } }

.form-group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .85rem;
}
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-group label .req {
  color: #8a6520;
  margin-left: .15rem;
}
[data-theme="dark"] .form-group label .req {
  color: var(--gold);
}

.form-group input,
.form-group textarea,
.form-group select {
  background: var(--bg-soft);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .7rem 1rem;
  font-family: 'Jost', sans-serif;
  font-size: .9rem;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  width: 100%;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-muted);
  opacity: .6;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--purple-main);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(90,50,176,.12);
}
.form-group input.invalid,
.form-group textarea.invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.1);
}
.form-group textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.6;
}

.form-hint {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: .2rem;
}
.form-hint.error {
  color: #c0392b;
  display: none;
}
.form-group input.invalid ~ .form-hint.error,
.form-group textarea.invalid ~ .form-hint.error { display: block; }

.form-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.25rem 0;
}

.form-submit {
  width: 100%;
  margin-top: .25rem;
  padding: .85rem 1.5rem;
  background: linear-gradient(135deg, var(--purple-mid), var(--purple-main));
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: 'Jost', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(90,50,176,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}
.form-submit:hover { opacity: .9; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(90,50,176,.4); }
.form-submit:active { transform: translateY(0); }
.form-submit svg { width: 16px; height: 16px; fill: #fff; flex-shrink: 0; }

/* Erfolgs-Banner */
.form-success {
  display: none;
  align-items: center;
  gap: .75rem;
  background: rgba(39,174,96,.1);
  border: 1px solid rgba(39,174,96,.3);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  color: #1e8449;
  font-size: .88rem;
  font-weight: 500;
}
[data-theme="dark"] .form-success { color: #82e0aa; }
.form-success.show { display: flex; }
.form-success svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }


/* ── DARK MODE: Links & Buttons in Gold ── */

/* Modal-Inhalte */
[data-theme="dark"] .modal-body a             { color: var(--gold-light); border-bottom-color: rgba(238,214,155,.25); }
[data-theme="dark"] .modal-body a:hover       { color: var(--gold); border-bottom-color: var(--gold); }

/* Sidenav Kontakt */
[data-theme="dark"] .snav-contact a           { color: var(--gold-light); }
[data-theme="dark"] .snav-contact a:hover     { color: var(--gold); }

/* Contact Strip */
[data-theme="dark"] .cdetail a               { color: var(--gold-light); }
[data-theme="dark"] .cdetail a:hover         { color: var(--gold); }

/* Kontaktadresse in Wide-Card */
[data-theme="dark"] .kontakt-adresse a       { color: var(--gold-light); }
[data-theme="dark"] .kontakt-adresse a:hover { color: var(--gold); }

/* Footer Buttons */
[data-theme="dark"] .footer-links button      { color: var(--gold-light); }
[data-theme="dark"] .footer-links button:hover{ color: var(--gold); }

/* Gold-Banner Link */
[data-theme="dark"] .gold-banner a            { color: #f0d98a !important; }

/* Card-More Pfeil-Link */
[data-theme="dark"] .card-more                { color: var(--gold-light); }
[data-theme="dark"] .card-more:hover          { color: var(--gold); }

/* Card-Links Buttons */
[data-theme="dark"] .card-links a             { color: var(--gold-light); border-color: rgba(238,214,155,.25); background: rgba(238,214,155,.06); }
[data-theme="dark"] .card-links a:hover       { background: var(--gold); color: var(--purple-dark); border-color: transparent; }

/* Neuigkeiten CTAs */
[data-theme="dark"] .news-card-cta            { color: var(--gold-light); }
[data-theme="dark"] .news-card:hover .news-card-cta { color: var(--gold); }

/* Artikel Zurück-Button & Nav-Links */
[data-theme="dark"] .back-btn                 { background: var(--gold); color: var(--purple-dark); }
[data-theme="dark"] .back-btn:hover           { background: var(--gold-light); }
[data-theme="dark"] .article-nav-link         { color: var(--gold-light); }
[data-theme="dark"] .article-nav-link:hover   { color: var(--gold); }

/* Card Tags & Eyebrow */
[data-theme="dark"] .card-tag                 { color: var(--gold-light); }
[data-theme="dark"] .eyebrow                  { color: var(--gold-light); border-color: rgba(238,214,155,.2); background: rgba(238,214,155,.06); }

/* Globale Content-Links im Dark Mode */
[data-theme="dark"] .article-body a,
[data-theme="dark"] .godi-info-box a,
[data-theme="dark"] .plan-table a,
[data-theme="dark"] .reg-time-card a       { color: var(--gold-light); }
[data-theme="dark"] .article-body a:hover,
[data-theme="dark"] .godi-info-box a:hover,
[data-theme="dark"] .plan-table a:hover,
[data-theme="dark"] .reg-time-card a:hover  { color: var(--gold); text-decoration: underline; }

/* IBAN-Block Links */
[data-theme="dark"] .iban-block a             { color: var(--gold-light); }

/* Formular Links */
[data-theme="dark"] .contact-form a           { color: var(--gold-light); }

/* ── LIGHT MODE SIDENAV ── */
[data-theme="light"] #sidenav {
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 40px rgba(90,50,176,.12);
}
[data-theme="light"] .snav-head {
  border-bottom-color: var(--border);
}
[data-theme="light"] .snav-logo {
  color: var(--purple-dark);
}
[data-theme="light"] .snav-logo span {
  color: var(--purple-main);
}
[data-theme="light"] .snav-close {
  background: var(--bg-soft);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="light"] .snav-close:hover,
[data-theme="light"] .snav-close:focus-visible {
  background: var(--purple-main);
  border-color: var(--purple-main);
  color: #fff;
}
[data-theme="light"] .snav-label {
  color: var(--purple-main);
}
[data-theme="light"] .snav-group-btn {
  color: var(--text-mid);
}
[data-theme="light"] .snav-group-btn:hover,
[data-theme="light"] .snav-group-btn:focus-visible,
[data-theme="light"] .snav-group-btn.open {
  color: var(--purple-dark);
  background: var(--bg-soft);
  border-left-color: var(--gold);
}
[data-theme="light"] .snav-nav a {
  color: var(--text-mid);
}
[data-theme="light"] .snav-nav a:hover,
[data-theme="light"] .snav-nav a:focus-visible {
  color: var(--purple-dark);
  background: var(--bg-soft);
  border-left-color: var(--gold);
}
[data-theme="light"] .snav-nav .sub {
  color: var(--text-muted);
}
[data-theme="light"] .snav-nav .sub:hover,
[data-theme="light"] .snav-nav .sub:focus-visible {
  color: var(--text);
}
[data-theme="light"] .snav-foot {
  border-top-color: var(--border);
}
[data-theme="light"] .snav-contact {
  color: var(--text-muted);
}
[data-theme="light"] .snav-contact strong {
  color: var(--purple-dark);
}
[data-theme="light"] .snav-contact a {
  color: var(--purple-main);
}
[data-theme="light"] .snav-contact a:hover {
  color: var(--gold);
}


/* ── NAV OPEN: kein Layout-Shift ── */
html.nav-open {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* ═══════════════════════════════════════════
   VERANSTALTUNGSKALENDER
═══════════════════════════════════════════ */
.kalender-section{
  background:var(--bg-soft);
  padding:5rem 1.75rem;
  position:relative;z-index:1;
}
.kalender-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(90,50,176,0.06) 0%,transparent 70%);
  pointer-events:none;
}
.kalender-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}

.kalender-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:1.2rem;margin-bottom:2.5rem;
}
.kalender-head-text{flex:1}
.kalender-head-text .section-tag{
  display:inline-block;font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);font-weight:600;margin-bottom:.55rem;
}
.kalender-head-text h2{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:300;
  color:var(--text);letter-spacing:.02em;line-height:1.2;
}
.kalender-filter{
  display:flex;gap:.45rem;flex-wrap:wrap;
}
.kf-btn{
  font-family:'Jost',sans-serif;font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--bg-card);color:var(--text-muted);
  border:1px solid var(--border);border-radius:30px;
  padding:.4rem 1.1rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  white-space:nowrap;
}
.kf-btn:hover,.kf-btn:focus-visible{
  background:var(--purple-main);color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(90,50,176,.25);
}
.kf-btn.active{
  background:var(--purple-dark);color:#fff;border-color:transparent;
  box-shadow:0 4px 18px rgba(30,18,72,.35);
}
[data-theme="dark"] .kf-btn{background:rgba(255,255,255,.04);border-color:rgba(139,95,232,.2)}

/* ── Monats-Nav + Datums-Chips ── */
.kalender-nav{
  display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;
}
.knav-top{
  display:flex;align-items:center;gap:.6rem;
}
.knav-btn{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:50%;width:34px;height:34px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-mid);
  transition:background .2s,border-color .2s,color .2s;
}
.knav-btn:hover,.knav-btn:focus-visible{
  background:var(--purple-main);color:#fff;border-color:transparent;
}
.knav-month{
  font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;font-weight:400;color:var(--text);letter-spacing:.04em;
}
.knav-date-row{
  display:flex;gap:.4rem;flex-wrap:wrap;
}
.kday-chip{
  display:flex;flex-direction:column;align-items:center;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:10px;padding:.35rem .55rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .15s;
  min-width:38px;
}
.kday-chip:first-child{
  /* "Alle"-Chip */
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  font-weight:500;color:var(--text-mid);padding:.35rem .8rem;
  flex-direction:row;gap:0;
}
.kday-chip:hover,.kday-chip:focus-visible{
  background:var(--bg-soft);border-color:var(--purple-main);
  transform:translateY(-1px);
}
.kday-chip.active{
  background:var(--purple-dark);color:#fff;border-color:transparent;
}
.kday-chip.active .kdc-dow,.kday-chip.active .kdc-day{color:#fff}
.kdc-dow{
  font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);font-weight:500;line-height:1;margin-bottom:2px;
}
.kdc-day{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;line-height:1;font-weight:600;color:var(--text);
}
[data-theme="dark"] .kday-chip{background:rgba(255,255,255,.04);border-color:rgba(139,95,232,.15)}
[data-theme="dark"] .kday-chip.active{background:#fff;border-color:transparent}
[data-theme="dark"] .kday-chip.active .kdc-dow{color:var(--purple-main)}
[data-theme="dark"] .kday-chip.active .kdc-day{color:var(--purple-dark)}

/* ── Event Grid ── */
.kalender-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.9rem;
}
@media(max-width:760px){.kalender-list{grid-template-columns:1fr}}

.k-event{
  background:var(--bg-card);
  border:1px solid var(--border);border-radius:16px;
  display:grid;grid-template-columns:64px 1fr auto;
  align-items:center;gap:1rem;padding:1rem 1.25rem;
  animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  position:relative;overflow:hidden;
}
.k-event::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:3px 0 0 3px;
  background:var(--ev-color,var(--purple-main));
}
.k-event:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px var(--shadow-h);
  border-color:var(--border-gold);
}

/* Date box mit Wochentag */
.k-date{
  text-align:center;flex-shrink:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg-soft);border-radius:10px;padding:.45rem .3rem;
  min-width:54px;
}
.k-date-dow{
  font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ev-color,var(--purple-main));font-weight:600;line-height:1;margin-bottom:1px;
}
.k-date-day{
  font-family:'Cormorant Garamond',serif;
  font-size:1.55rem;line-height:1;font-weight:600;color:var(--text);
}
.k-date-mon{
  font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-top:2px;font-weight:500;
}
.k-body{min-width:0}
.k-tag{
  display:inline-block;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--ev-color,var(--purple-main));margin-bottom:.25rem;
}
.k-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;font-weight:400;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:.2rem;letter-spacing:.01em;
}
.k-meta{
  font-size:.72rem;color:var(--text-muted);font-weight:300;
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
}
.k-meta span{display:flex;align-items:center;gap:.3rem}
.k-meta svg{opacity:.6;flex-shrink:0}
.k-badge{
  flex-shrink:0;
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  background:rgba(90,50,176,.08);color:var(--purple-main);
  border:1px solid rgba(90,50,176,.15);border-radius:20px;
  padding:.28rem .7rem;white-space:nowrap;
}
[data-theme="dark"] .k-badge{background:rgba(139,95,232,.12);color:var(--purple-light);border-color:rgba(139,95,232,.2)}

.kalender-empty{
  text-align:center;padding:3rem 1rem;color:var(--text-muted);
  font-size:.9rem;display:none;
}
.kalender-empty.visible{display:block}

/* Gesamtübersicht Button */
.kal-overview-btn{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--purple-dark);color:#fff;
  padding:.65rem 1.6rem;border-radius:30px;
  font-family:'Jost',sans-serif;font-size:.78rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:1px solid rgba(255,255,255,.12);
  transition:background .2s,box-shadow .2s,transform .2s;
}
.kal-overview-btn:hover{
  background:var(--purple-main);
  box-shadow:0 6px 20px rgba(90,50,176,.35);
  transform:translateY(-1px);
}
[data-theme="dark"] .kal-overview-btn{background:rgba(139,95,232,.2);border-color:rgba(139,95,232,.3)}
[data-theme="dark"] .kal-overview-btn:hover{background:var(--purple-main)}

/* ── Pagination ── */
.kal-pagination{
  display:none;align-items:center;justify-content:center;
  gap:1rem;margin-top:2rem;
}
.kpag-btn{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:50%;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-mid);
  transition:background .2s,color .2s,border-color .2s;
}
.kpag-btn:hover:not(:disabled){background:var(--purple-main);color:#fff;border-color:transparent}
.kpag-btn:disabled{opacity:.3;cursor:default}
.kpag-info{
  font-size:.78rem;color:var(--text-muted);letter-spacing:.04em;
}

@media(max-width:600px){
  .k-event{grid-template-columns:54px 1fr;gap:.75rem;padding:.85rem 1rem}
  .k-badge{display:none}
  .kalender-head{flex-direction:column;align-items:flex-start}
  .knav-date-row{gap:.3rem}
  .kday-chip{min-width:34px;padding:.3rem .45rem}
  .kdc-day{font-size:.95rem}
}

/* ── Sidenav Split (Link + Chevron) ── */
.snav-split{display:flex;align-items:center}
.snav-split-link{
  flex:1;display:block;padding:.6rem 1rem .6rem 2.25rem;
  color:rgba(255,255,255,.68);text-decoration:none;
  font-size:.9rem;font-weight:400;letter-spacing:.01em;
  border-left:2px solid transparent;
  transition:color .2s,background .2s,border-color .2s;
}
.snav-split-link:hover,.snav-split-link:focus-visible{
  color:#fff;background:rgba(255,255,255,.04);border-left-color:var(--gold);
}
.snav-split-btn{
  flex-shrink:0;background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.45);padding:.6rem .9rem .6rem .3rem;
  display:flex;align-items:center;transition:color .2s;
}
.snav-split-btn:hover,.snav-split-btn:focus-visible{color:#fff}
.snav-split-btn.open{color:var(--gold)}
.snav-split-btn .snav-chevron{transition:transform .25s ease}
.snav-split-btn.open .snav-chevron{transform:rotate(180deg)}
[data-theme="light"] .snav-split-link{color:var(--text-mid)}
[data-theme="light"] .snav-split-link:hover,[data-theme="light"] .snav-split-link:focus-visible{color:var(--purple-dark);background:var(--bg-soft);border-left-color:var(--gold)}
[data-theme="light"] .snav-split-btn{color:var(--text-muted)}
[data-theme="light"] .snav-split-btn:hover{color:var(--purple-dark)}
[data-theme="light"] .snav-split-btn.open{color:var(--gold)}

/* ── Dark Mode CTAs ── */
[data-theme="dark"] .back-btn{background:var(--gold);color:var(--purple-dark)}
[data-theme="dark"] .back-btn:hover{background:var(--gold-light)}
[data-theme="dark"] .article-nav-link{color:var(--gold-light)}
[data-theme="dark"] .article-nav-link:hover{color:var(--gold)}
[data-theme="dark"] .article-breadcrumb a{color:var(--gold-light)}
[data-theme="dark"] .article-breadcrumb a:hover{color:var(--gold)}
[data-theme="dark"] .article-body a,.godi-info-box a{color:var(--gold-light)}
[data-theme="dark"] .article-body a:hover{color:var(--gold)}

/* Mobile Header fixed */
@media(max-width:768px){
  #site-header{position:fixed;top:0;left:0;right:0;width:100%}
  body{padding-top:72px}
}

/* ── Breadcrumb ── */
.article-breadcrumb{font-size:.72rem;color:var(--text-muted);letter-spacing:.06em;margin-bottom:2.5rem}
.article-breadcrumb a{color:var(--purple-main);text-decoration:none}
.article-breadcrumb a:hover{text-decoration:underline}

/* ── Artikel-Seite ── */
/* So breit wie die Startseite (1280px Inhalt) — mit ihrem seitlichen
   Rand, sonst stünde der Text auf Laptops direkt am Fensterrand. */
.article-wrap{max-width:calc(1280px + 3.5rem);margin:0 auto;padding:3rem 1.75rem 5rem}
.article-kicker{font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text);font-weight:600;margin-bottom:.6rem}
.article-title{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,4vw,2.6rem);font-weight:300;color:var(--text);line-height:1.2;margin-bottom:1.5rem;letter-spacing:.01em}
.article-hero{width:100%;max-height:400px;object-fit:cover;border-radius:16px;margin-bottom:2.5rem;display:block}
.article-body{font-size:1rem;line-height:1.85;color:var(--text)}
.article-body p{margin-bottom:1.2rem}
.article-body ul,.article-body ol{margin:0 0 1.2rem 1.4rem}
.article-body li{margin-bottom:.4rem}
.article-body a{color:var(--purple-main);text-decoration:none}
.article-body a:hover{text-decoration:underline}
.article-body strong{font-weight:600;color:var(--text)}
.article-body h3{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;color:var(--text);margin:1.8rem 0 .6rem}



.back-btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--purple-dark);color:#fff;padding:.55rem 1.3rem;border-radius:30px;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;font-weight:500;margin-top:2.5rem;transition:background .2s}
.back-btn:hover{background:var(--purple-main)}

/* ── Info Box ── */
.info-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem;margin:1.5rem 0}
.info-box h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:var(--text);margin:0 0 .8rem}
.info-row{display:flex;gap:.5rem;font-size:.85rem;color:var(--text-mid);margin-bottom:.35rem;align-items:baseline}
.info-box strong,.info-row strong,.info-box b,.info-row b{
  font-weight:600;color:var(--text);
}
.info-label{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;flex-shrink:0;min-width:80px}

/* ── Presbyterium Mitglieder ── */
.presby-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.presby-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem}
.presby-name{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;color:var(--text);margin-bottom:.2rem}
.presby-role{font-size:.72rem;color:var(--text-muted);letter-spacing:.04em}

/* ── Gemeinde Übersichtsseite ── */
.gem-hero{background:var(--purple-dark);padding:4.5rem 1.75rem 3.5rem;position:relative;overflow:hidden}
.gem-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 60% 50%,rgba(139,95,232,.22) 0%,transparent 70%);pointer-events:none}
.gem-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.gem-hero-tag{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.7rem;display:block}
.gem-hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:300;color:#fff;line-height:1.15;letter-spacing:.02em}
.gem-hero-sub{font-size:.9rem;color:rgba(255,255,255,.65);margin-top:.8rem;max-width:620px}

.gem-section{padding:4rem 1.75rem 6rem;background:var(--bg-soft)}
.gem-inner{max-width:1280px;margin:0 auto}

/* ── Bezirk-Block (prominente Karte für 3 aktive Pfarrbezirke) ── */
.bezirke-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
@media(max-width:900px){.bezirke-grid{grid-template-columns:1fr}}

.bezirk-card{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s}
.bezirk-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px var(--shadow-h);border-color:var(--border-gold)}
.bezirk-img{height:220px;overflow:hidden;position:relative;background:linear-gradient(135deg,#271460,#5a32b0)}
.bezirk-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.4) 0%,transparent 60%);pointer-events:none}
.bezirk-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.bezirk-card:hover .bezirk-img img{transform:scale(1.05)}
.bezirk-body{padding:1.5rem;flex:1}
.bezirk-nr{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.4rem}
.bezirk-name{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:300;color:var(--text);margin-bottom:.5rem;letter-spacing:.01em}
.bezirk-info{font-size:.82rem;color:var(--text-muted);line-height:1.6;margin-bottom:.8rem}
.bezirk-pfarrer{font-size:.8rem;color:var(--text-mid);font-weight:500}
.bezirk-cta{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-main);font-weight:600;margin-top:.8rem;display:block}
[data-theme="dark"] .bezirk-cta{color:var(--gold-light)}

/* ── Weitere Seiten Grid ── */
.gem-links-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:var(--text);margin:0 0 1.2rem;letter-spacing:.02em}
.gem-links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.9rem}
.gem-link-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.3rem;text-decoration:none;color:inherit;display:flex;align-items:center;gap:1rem;transition:transform .2s,box-shadow .2s,border-color .2s}
.gem-link-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px var(--shadow-h);border-color:var(--border-gold)}
.gem-link-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,var(--purple-dark),var(--purple-main));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gem-link-icon svg{width:20px;height:20px;fill:#fff}
.gem-link-label{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;color:var(--text)}
.gem-link-sub{font-size:.72rem;color:var(--text-muted);margin-top:.1rem}

@media(max-width:600px){
  .article-wrap{padding:2rem 1rem 4rem}
  .gem-hero{padding:3rem 1.25rem 2.5rem}
  .bezirke-grid{grid-template-columns:1fr}
}
/* ═══════════════════════════════════════════
   CMS-ELEMENTE — zentral statt pro Seite
═══════════════════════════════════════════ */

/* Zwischenüberschriften im Artikelkörper */
.article-body h2{
  font-family:'Cormorant Garamond',serif;font-size:1.85rem;font-weight:600;
  color:var(--text);margin:2.8rem 0 .9rem;padding-top:1.6rem;
  border-top:1px solid var(--border);scroll-margin-top:90px;
}
.article-body h2:first-of-type{border-top:none;padding-top:0;margin-top:.6rem}

/* Aufklapp-Listen */
.article-body details{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:14px;padding:.2rem 1.3rem;margin:1.3rem 0;
}
.article-body details>summary{
  cursor:pointer;font-family:'Cormorant Garamond',serif;font-size:1.18rem;
  padding:1rem 0;color:var(--text);list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.article-body details>summary::-webkit-details-marker{display:none}
.article-body details>summary::after{content:'+';color:var(--gold);font-weight:600;font-size:1.3rem}
.article-body details[open]>summary::after{content:'–'}
.article-body details h4{margin:1rem 0 .3rem}

/* Zweispaltige Vers-/Aufzählungslisten */
.article-body .vlist{columns:2;column-gap:2.2rem;margin:.4rem 0 1rem;padding-left:1.1rem}
.article-body .vlist li{break-inside:avoid;margin-bottom:.6rem;font-size:.9rem;color:var(--text-mid)}
@media(max-width:640px){.article-body .vlist{columns:1}}

/* Sprungmarken-Leiste */
.ang-subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.4rem}
.ang-subnav a{
  font-size:.72rem;letter-spacing:.04em;padding:.45rem .95rem;
  border:1px solid var(--border);border-radius:30px;
  color:var(--text-mid);text-decoration:none;transition:all .2s;
}
.ang-subnav a:hover{border-color:var(--border-gold);color:var(--gold-light);background:var(--bg-card)}

/* Bilder im Fließtext */
.km-img{width:100%;border-radius:12px;margin:1.2rem 0;display:block;object-fit:cover}
.km-img-wrap{display:flex;gap:1rem;flex-wrap:wrap;margin:1.2rem 0}
.km-img-wrap img{flex:1 1 45%;min-width:180px;border-radius:12px;object-fit:cover;max-height:220px}
.km-portrait,.ag-logo{
  float:right;margin:0 0 1rem 1.5rem;border-radius:12px;width:140px;
  object-fit:cover;clear:right;background:var(--bg-card);
}
@media(max-width:500px){.km-portrait,.ag-logo{float:none;width:100%;margin:1rem 0}}
.article-body figure{margin:1.4rem 0}
.article-body figcaption{font-size:.78rem;color:var(--text-muted);margin-top:.45rem;text-align:center}

/* Download- und Terminlisten */
.download-list,.event-list{list-style:none;padding-left:0;margin:1rem 0}
.download-list li,.event-list li{
  padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.92rem;
}
.download-list li:last-child,.event-list li:last-child{border-bottom:none}
.download-list a{color:var(--purple-main);text-decoration:none}
.download-list a:hover{text-decoration:underline}
[data-theme="dark"] .download-list a{color:var(--gold-light)}
.download-list a::before{content:'📄 ';}
.event-list strong{color:var(--text);font-weight:600}


/* ═══════════════════════════════════════════
   KARTEN-RASTER im Artikelbereich
   (die Übersichtsseiten nutzen eine eigene,
   waagerechte Form — hier die stehende Karte)
═══════════════════════════════════════════ */
.article-body .gem-links-grid{margin:1.4rem 0}
.article-body .gem-link-card{
  flex-direction:column;align-items:flex-start;gap:.45rem;
  position:relative;overflow:hidden;padding:1.4rem 1.35rem;
}
.article-body .gem-link-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--purple-main),var(--gold));
}
.article-body .gem-link-label{font-size:1.12rem;line-height:1.25;margin-top:.2rem}
.article-body .gem-link-sub{flex:1;font-size:.8rem;line-height:1.55}
.gem-link-cta{
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--purple-main);margin-top:.6rem;display:inline-block;
}
[data-theme="dark"] .gem-link-cta{color:var(--gold-light)}

/* Bild auf einer Karte */
.gem-link-card.has-img{padding:0;overflow:hidden}
.gem-link-img{width:100%;height:150px;object-fit:cover;display:block;flex-shrink:0}
.gem-link-card.has-img .gem-link-text{padding:1.15rem 1.35rem 1.4rem;display:flex;flex-direction:column;flex:1}
.article-body .gem-link-card.has-img::before{display:none}

/* Porträt auf einer Personen-Karte */
.presby-card.has-img{
  display:flex;align-items:center;gap:.9rem;
  padding:.75rem .9rem;text-align:left;
}
.presby-img{
  width:56px;height:56px;flex-shrink:0;border-radius:50%;object-fit:cover;
  border:1px solid var(--border);background:var(--bg-soft);
}
.presby-card.has-img .presby-name{margin-bottom:.1rem}
@media(max-width:420px){
  .presby-card.has-img{gap:.7rem;padding:.7rem}
  .presby-img{width:46px;height:46px}
}

/* ═══════════════════════════════════════════
   TEXTLINKS IM INHALT
   Immer unterstrichen, im Hellmodus schwarz,
   im Dunkelmodus weiß. Bedienelemente wie
   Karten, Knöpfe und Sprungleisten bleiben
   von dieser Regel unberührt.
═══════════════════════════════════════════ */
.article-body a:not(.btn):not(.back-btn):not(.article-nav-link):not(.gem-link-card),
.godi-info-box a,
.info-box a,
.modal-body a{
  color:#000;
  text-decoration:underline;
  text-underline-offset:.15em;
  border-bottom:none;
}
.article-body a:not(.btn):not(.back-btn):not(.article-nav-link):not(.gem-link-card):hover,
.godi-info-box a:hover,
.info-box a:hover,
.modal-body a:hover{
  color:#000;
  text-decoration-thickness:2px;
}

[data-theme="dark"] .article-body a:not(.btn):not(.back-btn):not(.article-nav-link):not(.gem-link-card),
[data-theme="dark"] .godi-info-box a,
[data-theme="dark"] .info-box a,
[data-theme="dark"] .modal-body a{
  color: var(--gold-light);
  text-decoration:underline;
}
[data-theme="dark"] .article-body a:not(.btn):not(.back-btn):not(.article-nav-link):not(.gem-link-card):hover,
[data-theme="dark"] .godi-info-box a:hover,
[data-theme="dark"] .info-box a:hover,
[data-theme="dark"] .modal-body a:hover{
  color: var(--gold-light);
  text-decoration-thickness:2px;
}

/* Verweise in Aufzählungen und Download-Listen ebenso */
.download-list a{color:#000;text-decoration:underline}
[data-theme="dark"] .download-list a{color: var(--gold-light)}

/* ═══════════════════════════════════════════
   VIDEO — Platzhalter bis zur Einwilligung
═══════════════════════════════════════════ */
.ekb-video{margin:1.6rem 0}
.ekb-video iframe,
.ekb-video-platz{
  width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block;
}
.ekb-video-platz{
  background:linear-gradient(135deg,var(--purple-dark),var(--purple-mid));
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
}
.ekb-video-info{text-align:center;max-width:34rem}
.ekb-video-symbol{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;margin-bottom:.9rem;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.3rem;padding-left:4px;
}
.ekb-video-titel{
  font-family:'Cormorant Garamond',serif;font-size:1.35rem;color:#fff;margin:0 0 .4rem;
}
.ekb-video-text{
  font-size:.84rem;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 1.1rem;
}
.ekb-video-knopf{
  font-family:'Jost',sans-serif;font-size:.85rem;font-weight:600;
  padding:.7rem 1.6rem;border-radius:30px;border:none;cursor:pointer;
  background:var(--gold);color:var(--purple-dark);transition:background .2s;
}
.ekb-video-knopf:hover{background:var(--gold-light)}
.ekb-video-mehr{
  display:block;margin:.7rem auto 0;background:none;border:none;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:.75rem;color:rgba(255,255,255,.6);
  text-decoration:underline;
}
.ekb-video-mehr:hover{color:#fff}
.ekb-video figcaption{
  font-size:.78rem;color:var(--text-muted);margin-top:.5rem;text-align:center;
}
@media(max-width:520px){
  .ekb-video-symbol{width:46px;height:46px;font-size:1.1rem}
  .ekb-video-titel{font-size:1.15rem}
}

/* Medien, die im Fließtext eingefügt wurden */
.article-body img{max-width:100%;height:auto;border-radius:12px;margin:1rem 0}
.article-body video{width:100%;border-radius:12px;margin:1.2rem 0;background:#000}
.article-body figure.ekb-video{margin:1.6rem 0}

/* ═══════════════════════════════════════════
   NACH-OBEN-KNOPF
   Sitzt über der Kontaktleiste (52px hoch) und
   erscheint erst, wenn ein Stück gescrollt wurde.
═══════════════════════════════════════════ */
#stt{
  position:fixed;
  right:1.25rem;
  bottom:calc(52px + 1.25rem);
  z-index:290;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-gold);
  border-radius:50%;
  background:var(--bg-card);
  color:var(--gold);
  cursor:pointer;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
  /* bis zum Scrollen ausgeblendet */
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
#stt svg{width:22px;height:22px;fill:currentColor}
#stt:hover{background:var(--gold);color:var(--purple-dark);border-color:transparent}
#stt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#stt.stt-vis{opacity:1;visibility:visible;transform:translateY(0)}

[data-theme="light"] #stt{color:var(--purple-main);border-color:var(--border)}
[data-theme="light"] #stt:hover{background:var(--purple-main);color:#fff}

@media(max-width:640px){
  #stt{right:.9rem;bottom:calc(52px + .9rem);width:40px;height:40px}
  #stt svg{width:20px;height:20px}
}
@media(prefers-reduced-motion:reduce){
  #stt{transition:opacity .01s}
}

/* ═══════════════════════════════════════════
   GOTTESDIENST — Zeiten, Plan und Kennzeichen
   Wiederhergestellt: diese Regeln fehlten,
   dadurch waren die Unterseiten unformatiert.
═══════════════════════════════════════════ */
.reg-times{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.5rem 0}
.reg-time-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1rem 1.2rem}
.reg-time-card h4{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;color:var(--text);margin:0 0 .3rem}
.reg-time-card .time{font-size:.82rem;color:var(--purple-main);font-weight:600;margin-bottom:.15rem}
[data-theme="dark"] .reg-time-card .time{color:var(--gold-light)}
.reg-time-card .loc{font-size:.75rem;color:var(--text-muted)}

.plan-badge{
  display:inline-block;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;padding:.15rem .5rem;border-radius:var(--r-pille,999px);
}
.badge-a{background:rgba(90,50,176,.1);color:var(--purple-main)}
.badge-fg{background:rgba(230,182,92,.12);color:var(--gold)}
.badge-k{background:rgba(48,176,114,.1);color:#30b072}
.badge-t{background:rgba(42,122,184,.1);color:#2a7ab8}
[data-theme="dark"] .badge-a{background:rgba(139,95,232,.15);color:var(--purple-light)}

.plan-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;font-size:.75rem;color:var(--text-muted)}
.plan-legend span{display:flex;align-items:center;gap:.3rem}

/* Datumszeile über einem Beitrag */
.article-meta{
  font-size:.78rem;color:var(--text-muted);
  letter-spacing:.04em;margin:0 0 1.2rem;
}

/* ═══════════════════════════════════════════
   BEREICHSÜBERSICHTEN UND KARTEN
   Von allen Übersichtsseiten genutzt.
═══════════════════════════════════════════ */
/* Gestaltung der Bereichsübersicht — bewusst hier und nicht in
   site.css, damit die Seite auch bei älterem Stylesheet stimmt. */
/* ═══════════════════════════════════════════
   BEREICHSÜBERSICHT
   Gemeinsame Gestaltung für Kirchenmusik,
   Angebote, Diakonie und Ökumene.
═══════════════════════════════════════════ */
.ueb-hero{background:var(--purple-dark);padding:5rem 1.75rem 4rem;position:relative;overflow:hidden}
.ueb-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 60% 50%,rgba(139,95,232,.25) 0%,transparent 70%);
  pointer-events:none;
}
.ueb-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.ueb-hero-tag{
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;margin-bottom:.7rem;display:block;
}
.ueb-hero-title{
  font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,3.2rem);
  font-weight:300;color:#fff;line-height:1.15;letter-spacing:.02em;
}
.ueb-hero-sub{font-size:.9rem;color:rgba(255,255,255,.65);margin-top:.8rem;max-width:560px}

.ueb-section{padding:4rem 1.75rem 6rem;background:var(--bg-soft)}
.ueb-inner{max-width:1280px;margin:0 auto}
.ueb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.ueb-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ueb-grid{grid-template-columns:1fr}}

.ueb-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:16px;
  overflow:hidden;display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.ueb-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px var(--shadow-h);border-color:var(--border-gold)}
.ueb-card-img{
  height:180px;overflow:hidden;position:relative;flex-shrink:0;
  background:linear-gradient(135deg,#271460,#5a32b0);
}
.ueb-card-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 55%);
  pointer-events:none;
}
.ueb-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ueb-card:hover .ueb-card-img img{transform:scale(1.06)}
.ueb-card-body{padding:1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.ueb-card-tag{
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--purple-main);font-weight:600;margin-bottom:.4rem;
}
[data-theme="dark"] .ueb-card-tag{color:var(--gold-light)}
.ueb-card-title{
  font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;
  color:var(--text);line-height:1.3;margin-bottom:.5rem;
}
.ueb-card-text{font-size:.82rem;color:var(--text-muted);line-height:1.6;flex:1}
.ueb-card-cta{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--purple-main);font-weight:600;margin-top:.9rem;
}
[data-theme="dark"] .ueb-card-cta{color:var(--gold-light)}
.ueb-card:hover .ueb-card-cta{color:var(--gold)}
.ueb-leer{color:var(--text-muted);font-size:.9rem;text-align:center;padding:3rem 0}

/* ═══════════════════════════════════════════
   BEREICHSÜBERSICHT
   Aus der Gottesdienst-Übersicht übernommen,
   damit alle Bereichsseiten gleich aussehen.
═══════════════════════════════════════════ */
.godi-hero{background:var(--purple-dark);padding:5rem 1.75rem 4rem;position:relative;overflow:hidden}
.godi-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 60% 50%,rgba(139,95,232,0.25) 0%,transparent 70%);pointer-events:none}
.godi-hero-inner{max-width:1280px;margin:0 auto;position:relative;z-index:1}
.godi-hero-tag{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:.7rem;display:block}
.godi-hero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:300;color:#fff;line-height:1.15;letter-spacing:.02em}
.godi-hero-sub{font-size:.9rem;color:rgba(255,255,255,.65);margin-top:.8rem;max-width:560px}
.godi-section{padding:4rem 1.75rem 6rem;background:var(--bg-soft)}
.godi-inner{max-width:1280px;margin:0 auto}
.godi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.godi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.godi-grid{grid-template-columns:1fr}}
.godi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.godi-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px var(--shadow-h);border-color:var(--border-gold)}
.godi-card-img{position:relative;flex-shrink:0;background:linear-gradient(135deg,#271460,#5a32b0)}
.godi-card-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.35) 0%,transparent 55%);pointer-events:none}
.godi-card-img img{transition:transform .6s ease}
.godi-card:hover .godi-card-img img{transform:scale(1.06)}
.godi-card-body{padding:1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.godi-card-tag{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--purple-main);font-weight:600;margin-bottom:.4rem}
[data-theme="dark"] .godi-card-tag{color:var(--gold-light)}
.godi-card-title{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;color:var(--text);line-height:1.3;margin-bottom:.5rem}
.godi-card-text{font-size:.82rem;color:var(--text-muted);line-height:1.6;flex:1;margin-bottom:.9rem}
.godi-card-cta{font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--purple-main);font-weight:600}
[data-theme="dark"] .godi-card-cta{color:var(--gold-light)}

/* ── Weiterlesen-Hinweis auf den Bereichskarten ──────────
   Textform, kein Knopf. Verlinkt ist nur dieser Hinweis,
   nicht Überschrift oder Beschreibung. Die Farbe folgt dem
   Akzent und wechselt mit Hell- und Dunkelmodus.            */
a.godi-card-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  align-self:flex-start;margin-top:1rem;
  text-decoration:none;
  transition:gap .2s,color .2s;
}
/* Beim Überfahren dunkler statt goldener werden — Gold auf weißem
   Grund wäre im Hellmodus nicht lesbar (1,9:1). */
a.godi-card-cta:hover,
a.godi-card-cta:focus-visible{gap:.7rem;color:var(--purple-dark)}
[data-theme="dark"] a.godi-card-cta:hover,
[data-theme="dark"] a.godi-card-cta:focus-visible{color:var(--gold)}
.godi-card:focus-within{border-color:var(--border-gold)}

/* Nur für Vorleseprogramme sichtbar */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}
/* ── Bilder: überall gleich hoch und oben gerundet ──────────
   Die Rundung wird zusätzlich am Bildbereich gesetzt, damit sie
   auch dann greift, wenn die Karte kein overflow:hidden erbt. */
.godi-card{overflow:hidden;border-radius:16px}
.godi-card-img{
  height:180px;                 /* feste Höhe wie in der Gottesdienst-Übersicht */
  border-radius:16px 16px 0 0;
  overflow:hidden;
}
.godi-card-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
}
/* Karten ohne Bild bekommen dieselbe Fläche, damit die Reihe
   nicht verspringt */
.godi-card-img:empty{
  background:linear-gradient(135deg,#271460,#5a32b0);
}
@media(max-width:560px){
  .godi-card-img{height:200px}   /* auf schmalen Bildschirmen etwas höher */
}

/* ── Großer Kalender der Kalenderseite ── */
/* ── Kalender-Seite Layout ── */
.kal-page{ background:var(--bg-soft); min-height:100vh; }
.kal-page-hero{
  background:linear-gradient(135deg,var(--h-a) 0%,var(--h-b) 50%,var(--h-c) 100%);
  padding:4rem 1.75rem 3.5rem;
  position:relative;overflow:hidden;
}
.kal-page-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 90% at 80% 50%,rgba(139,95,232,.3) 0%,transparent 65%),
    radial-gradient(ellipse 40% 60% at 20% 80%,rgba(230,182,92,.12) 0%,transparent 60%);
  pointer-events:none;
}
.kal-page-hero::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(238,214,155,.3),transparent);
}
.kal-page-hero-inner{
  max-width:1400px;margin:0 auto;
  position:relative;z-index:1;
  display:flex;align-items:flex-end;justify-content:space-between;
  flex-wrap:wrap;gap:1.2rem;
}
.kal-page-hero-text span{
  font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:600;display:block;margin-bottom:.5rem;
}
.kal-page-hero-text h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,4vw,2.8rem);font-weight:300;
  color:#fff;line-height:1.15;letter-spacing:.02em;
}
.kal-view-tabs{
  display:flex;gap:.4rem;flex-wrap:wrap;
}
.kal-tab{
  font-family:'Jost',sans-serif;font-size:.7rem;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.65);
  border:1px solid rgba(255,255,255,.12);border-radius:30px;
  padding:.45rem 1.2rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,box-shadow .2s;
  white-space:nowrap;
}
.kal-tab:hover{ background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25); }
.kal-tab.active{
  background:var(--gold);color:var(--purple-dark);border-color:transparent;
  font-weight:600;box-shadow:0 4px 14px rgba(230,182,92,.4);
}
/* ── Controls Bar ── */
.kal-controls{
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  padding:.8rem 1.75rem;
  position:sticky;top:72px;z-index:50;
  backdrop-filter:blur(12px);
  box-shadow:0 2px 16px var(--shadow);
}
.kal-controls-inner{
  max-width:1400px;margin:0 auto;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.kal-nav-btn{
  background:var(--bg-soft);border:1px solid var(--border);
  border-radius:50%;width:36px;height:36px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-mid);
  transition:background .2s,color .2s,transform .2s,box-shadow .2s;
}
.kal-nav-btn:hover{
  background:var(--purple-main);color:#fff;border-color:transparent;
  transform:scale(1.05);box-shadow:0 4px 12px rgba(90,50,176,.3);
}
.kal-period-label{
  font-family:'Cormorant Garamond',serif;
  font-size:1.25rem;font-weight:400;color:var(--text);
  letter-spacing:.03em;min-width:200px;
}
.kal-today-btn{
  font-family:'Jost',sans-serif;font-size:.7rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--bg-soft);color:var(--text-muted);
  border:1px solid var(--border);border-radius:20px;
  padding:.3rem .9rem;cursor:pointer;margin-left:.25rem;
  transition:background .2s,color .2s;
}
.kal-today-btn:hover{ background:var(--purple-main);color:#fff;border-color:transparent; }
/* Filter Chips */
.kal-filters{
  display:flex;gap:.35rem;flex-wrap:wrap;margin-left:auto;
}
.kal-fchip{
  font-family:'Jost',sans-serif;font-size:.65rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  background:var(--bg-soft);color:var(--text-muted);
  border:1px solid var(--border);border-radius:20px;
  padding:.28rem .8rem;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s;
  white-space:nowrap;
}
.kal-fchip:hover,.kal-fchip.active{
  background:var(--purple-dark);color:#fff;border-color:transparent;
}
[data-theme="dark"] .kal-fchip{ background:rgba(255,255,255,.04);border-color:rgba(139,95,232,.2); }
/* ── MAIN CONTENT AREA ── */
.kal-main{ max-width:1400px;margin:0 auto;padding:2.5rem 1.75rem 6rem; }
/* ════ MONTH VIEW ════ */
/* ════ MONTH GRID ════ */
.kal-month-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  /* Erste Zeile: die Wochentage. Sie liegen wegen display:contents
     im selben Raster und dürfen NICHT mitgedehnt werden — deshalb
     ausdrücklich auto. */
  grid-template-rows:auto;
  /* Alle weiteren Zeilen gleich hoch. Mit min-height allein wuchsen
     nur die Zeilen mit Terminen; beim Zoomen fiel der Unterschied
     auf. 1fr richtet jede Zeile an der höchsten aus. */
  grid-auto-rows:1fr;
  border:1px solid var(--border);
  border-radius:20px;overflow:hidden;
  background:var(--bg-card);
  box-shadow:0 4px 32px var(--shadow);
}
.kal-dow-header{ display:contents; }
.kal-dow-cell{
  background:var(--purple-dark);
  padding:.65rem .4rem;text-align:center;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.kal-day{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  /* 135 px: Tagesnummer 26, drei einzeilige Termine 66, Abstände 10,
     „+ n weitere" 17, Innenabstand 16 — zusammen 134. Bei weniger
     wäre die letzte Zeile angeschnitten, seit die Felder ihren
     Inhalt nicht überlaufen lassen. Längere Titel dehnen die Zeile;
     alle anderen ziehen mit, weil die Zeilen gleich hoch sind. */
  min-height:135px;padding:.5rem .4rem;
  display:flex;flex-direction:column;gap:.2rem;
  overflow:hidden;                     /* sprengt sonst die Zeilenhöhe */
  position:relative;
  transition:background .15s;
}
.kal-day:nth-child(7n){ border-right:none; }
.kal-day.other-month{
  background:var(--bg-soft);
}
.kal-day.other-month .kal-day-num{ opacity:.3; }
.kal-day.today{
  background:rgba(90,50,176,.05);
}
[data-theme="dark"] .kal-day.today{ background:rgba(139,95,232,.08); }
.kal-day.today .kal-day-num{
  background:var(--purple-main);color:#fff;
  border-radius:50%;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem;
  box-shadow:0 2px 8px rgba(90,50,176,.4);
}
.kal-day-num{
  font-size:.82rem;font-weight:500;color:var(--text-mid);
  margin-bottom:.35rem;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  transition:background .15s;
}
.kal-day-events{ display:flex;flex-direction:column;gap:3px; }
.kal-day-ev{
  font-size:.74rem;line-height:1.3;
  padding:.2rem .45rem;border-radius:6px;
  /* Umbrechen statt auspunkten: „Vorabendgottesdienst vor der
     Konfirmation" wurde nach zwei Wörtern abgeschnitten. Zwei Zeilen
     sind die Grenze — sonst schiebt ein langer Titel den ganzen
     Monat auseinander, weil alle Zeilen gleich hoch sind. */
  /* Nur an Wortgrenzen umbrechen — kein Trennstrich mitten im Wort.
     break-word statt anywhere: Ein Wort wird nur dann getrennt, wenn
     es allein nicht in die Zeile passt, sonst liefe es aus der Zelle. */
  white-space:normal;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
  cursor:pointer;font-weight:500;
  transition:transform .15s,opacity .15s;
}
.kal-day-ev:hover{ opacity:.85;transform:translateX(1px); }
.kal-day-more{
  font-size:.68rem;color:var(--text-muted);
  padding:.1rem .4rem;cursor:pointer;
  font-weight:500;letter-spacing:.04em;
}
.kal-day-more:hover{ color:var(--purple-main); }
[data-theme="dark"] .kal-day-more:hover{ color:var(--gold-light); }
/* ════ WEEK VIEW ════ */
.kal-week-wrap{ overflow-x:auto; }
.kal-week-grid{
  display:grid;
  grid-template-columns:64px repeat(7,1fr);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  background:var(--bg-card);min-width:600px;
}
.kal-week-corner{ background:var(--bg-soft);border-bottom:1px solid var(--border);border-right:1px solid var(--border); }
.kal-week-day-header{
  padding:.5rem .4rem;text-align:center;
  background:var(--bg-soft);border-bottom:1px solid var(--border);border-right:1px solid var(--border);
}
.kal-week-day-header .wdh-dow{
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);font-weight:600;
}
.kal-week-day-header .wdh-date{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;line-height:1;font-weight:400;color:var(--text);
}
.kal-week-day-header.today .wdh-date{color:var(--purple-main);font-weight:600;}
.kal-time-col{
  font-size:.62rem;color:var(--text-muted);
  text-align:right;padding:.3rem .5rem 0 0;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.kal-week-cell{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:.2rem;min-height:48px;
  position:relative;
}
.kal-week-cell:last-child,.kal-week-day-header:last-child{ border-right:none; }
/* ════ LIST / AGENDA VIEW ════ */
.kal-list-month-group{ margin-bottom:2.5rem;max-width:780px;margin-left:auto;margin-right:auto; }
.kal-list-month-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem;font-weight:300;color:var(--text);
  letter-spacing:.03em;margin-bottom:1rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.kal-list-items{ display:flex;flex-direction:column;gap:.6rem; }
.kal-list-item{
  display:grid;grid-template-columns:64px 1fr auto;
  align-items:center;gap:1.2rem;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:14px;padding:1rem 1.3rem;
  position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.kal-list-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--ev-color,var(--purple-main));
  border-radius:0 3px 3px 0;
}
.kal-list-item:hover{
  transform:translateX(4px);
  box-shadow:0 6px 24px var(--shadow-h);
  border-color:var(--border-gold);
}
.kal-list-date{
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.kal-list-date .ldd{
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ev-color,var(--purple-main));font-weight:600;
}
.kal-list-date .ldn{
  font-family:'Cormorant Garamond',serif;
  font-size:1.8rem;line-height:1;font-weight:300;color:var(--text);
}
.kal-list-body{ min-width:0; }
.kal-list-tag{
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ev-color,var(--purple-main));font-weight:600;margin-bottom:.2rem;
}
.kal-list-title{
  font-family:'Cormorant Garamond',serif;
  font-size:1.05rem;font-weight:400;color:var(--text);
  overflow:hidden;
  /* Umbrechen statt abschneiden, an Wortgrenzen. */
  white-space:normal;overflow-wrap:break-word;}
.kal-list-meta{
  font-size:.72rem;color:var(--text-muted);
  display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.15rem;
}
.kal-list-badge{
  flex-shrink:0;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;background:rgba(90,50,176,.08);color:var(--purple-main);
  border:1px solid rgba(90,50,176,.15);border-radius:16px;padding:.22rem .65rem;
  white-space:nowrap;
}
[data-theme="dark"] .kal-list-badge{background:rgba(139,95,232,.2);color:#d4b8ff;border-color:rgba(139,95,232,.35)}
/* Event Detail Popup */
.kal-popup-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.kal-popup-overlay.open{display:flex;}
.kal-popup{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:24px;max-width:440px;width:100%;
  padding:2rem 2.2rem;position:relative;
  box-shadow:0 32px 80px rgba(0,0,0,.45);
  animation:fadeUp .3s cubic-bezier(.22,1,.36,1) both;
}
.kal-popup::before{
  content:'';position:absolute;top:0;left:2rem;right:2rem;height:2px;
  background:linear-gradient(90deg,var(--purple-main),var(--gold));
  border-radius:0 0 2px 2px;
}
.kal-popup-close{
  position:absolute;top:1rem;right:1rem;
  background:var(--bg-soft);border:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:background .2s,color .2s;
}
.kal-popup-close:hover{background:var(--purple-main);color:#fff;}
.kal-popup-cat{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:.5rem;}
.kal-popup-title{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:300;color:var(--text);margin-bottom:1rem;line-height:1.3;}
.kal-popup-row{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--text-muted);margin-bottom:.4rem;}
.kal-popup-row svg{flex-shrink:0;opacity:.6;}
/* Empty state */
.kal-empty{
  text-align:center;padding:4rem 1rem;color:var(--text-muted);
}
.kal-empty svg{opacity:.25;margin-bottom:1rem;}
.kal-empty p{font-size:.9rem;}
@media(max-width:700px){
  .kal-main{padding:1.5rem 1rem 4rem;}
  .kal-day{min-height:60px;}
  .kal-controls-inner{gap:.6rem;}
  .kal-filters{margin-left:0;width:100%;}
  .kal-list-item{grid-template-columns:48px 1fr;}
  .kal-list-badge{display:none;}
  .kal-page-hero-inner{flex-direction:column;align-items:flex-start;}
}

/* ═══════════════════════════════════════════
   UMSCHALTER HELL / DUNKEL
   Schlanke Form wie im CMS: ein runder Knopf,
   der immer nur ein Symbol zeigt — Sonne im
   Hellmodus, Mond im Dunkelmodus.
═══════════════════════════════════════════ */
.theme-btn{
  width:38px;height:38px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  color:#fff;
  transition:background .2s,border-color .2s,color .2s;
}
.theme-btn:hover{background:rgba(255,255,255,.20)}
.theme-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.theme-btn svg{width:18px;height:18px;display:block}

/* Immer nur ein Symbol sichtbar — ohne Zutun von JavaScript */
.theme-btn .i-sun,
.theme-btn .i-moon{display:flex;align-items:center;justify-content:center}
.theme-btn .i-sun{display:none}
[data-theme="light"] .theme-btn .i-sun{display:flex}
[data-theme="light"] .theme-btn .i-moon{display:none}

@media(max-width:640px){
  .theme-btn,.burger-btn{width:34px;height:34px}
  .theme-btn svg{width:16px;height:16px}
  .burger-btn span{width:18px}
}

/* ── Eingefügte Bausteine auf Vollseiten ──────────────────
   Startseite und Bereichsübersichten bringen Abschnitte mit eigener
   Breite mit. Was jemand im CMS dazwischensetzt — Text, Bild,
   Info-Kasten — bekommt hier denselben Rahmen wie auf den
   Artikelseiten, statt von Rand zu Rand zu laufen. */
.voll-abschnitt{
  padding:3rem 1.75rem;
  background:var(--bg);
}
.voll-abschnitt > .article-body{
  max-width:1280px;
  margin:0 auto;
}
/* Zwei Abschnitte hintereinander sollen nicht doppelt Luft lassen */
.voll-abschnitt + .voll-abschnitt{padding-top:0}

@media(max-width:640px){
  .voll-abschnitt{padding:2rem 1.25rem}
}
/* Zeiten-Karten stehen direkt über den Karten des Bereichs —
   unten kein zusätzlicher Abstand, sonst klafft eine Lücke. */
.godi-section--nurluft{padding-bottom:0}

/* ── Gottesdienst: Zeiten, Plan und Kennzeichen ──────────
   Diese Regeln lagen im Stilblock der Gottesdienst-Übersicht.
   Beim Umbau auf Bausteine ist dieser Block entfallen — die
   Zeiten-Tabelle und der Gottesdienstplan standen seitdem
   unformatiert da. */
.godi-info-box{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:1.4rem 1.6rem;margin:1.5rem 0}
.godi-info-box h3{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;color:var(--text);margin:0 0 .8rem;letter-spacing:.01em}
.godi-info-box table{width:100%;border-collapse:collapse;font-size:.85rem}
.godi-info-box th{text-align:left;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding:.3rem .5rem .3rem 0;border-bottom:1px solid var(--border)}
.godi-info-box td{padding:.45rem .5rem .45rem 0;border-bottom:1px solid var(--border);color:var(--text-mid);vertical-align:top}
.godi-info-box tr:last-child td{border-bottom:none}
.godi-info-box .loc{font-size:.8rem;color:var(--text-muted)}
.plan-table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:1rem}
.plan-table thead th{text-align:left;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);font-weight:600;padding:.5rem .75rem;border-bottom:2px solid var(--border);background:var(--bg-soft)}
.plan-table tbody tr{border-bottom:1px solid var(--border);transition:background .15s}
.plan-table tbody tr:hover{background:var(--bg-soft)}
.plan-table td{padding:.6rem .75rem;color:var(--text-mid);vertical-align:top}
.plan-table td:first-child{font-weight:500;color:var(--text);white-space:nowrap}

/* Vierte Ebene — kleiner als h3, aber noch als Überschrift erkennbar.
   Fehlte bisher, weil der Editor nur eine Überschriftenstufe anbot. */
.article-body h4{
  font-family:'Jost',sans-serif;
  font-size:1rem;font-weight:600;letter-spacing:.01em;
  color:var(--text);margin:1.4rem 0 .4rem;
}

/* Telefon und E-Mail auf einer Ansprechpartner-Karte */
.presby-wege{margin-top:.35rem;display:flex;flex-direction:column;gap:.1rem}
.presby-wege a{font-size:.74rem;color:var(--text-mid);text-decoration:none;overflow-wrap:anywhere}
.presby-wege a:hover{color:var(--purple-main);text-decoration:underline}
[data-theme="dark"] .presby-wege a:hover{color:var(--gold-light)}

/* ════════════════════════════════════════════════════════════
   BARRIEREFREIHEIT — Einstellungen der Besucher
   Die Klassen setzt ein kleines Skript im Kopf der Seite, noch bevor
   etwas gezeichnet wird. Sonst sähe man beim Laden kurz die normale
   Fassung aufblitzen.
════════════════════════════════════════════════════════════ */

/* Schriftgröße: Die Seite rechnet fast überall in rem — die Grundgröße
   zieht also alles mit. */
html.a11y-s1{font-size:20px}   /* 125 % */
html.a11y-s2{font-size:24px}   /* 150 % */
html.a11y-s3{font-size:28px}   /* 175 % */
html.a11y-s4{font-size:32px}   /* 200 % */

/* Graustufen über eine Ebene mit backdrop-filter: Ein filter auf der
   ganzen Seite würde feststehende Elemente (Kopfleiste, Fenster) aus
   ihrer Position reißen. Die Ebene lässt Klicks durch. */
html.a11y-grau body::after{
  content:'';position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  -webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);
}
@supports not ((backdrop-filter:grayscale(1)) or (-webkit-backdrop-filter:grayscale(1))){
  html.a11y-grau{filter:grayscale(1)}
}

/* Links unterstrichen */
html.a11y-links a:not(.a11y-knopf){text-decoration:underline !important;text-underline-offset:.18em}

/* Hoher Kontrast — hell */
html.a11y-hoch{
  --bg:#ffffff;--bg-soft:#ffffff;--bg-card:#ffffff;
  --text:#000000;--text-mid:#000000;--text-muted:#1a1a1a;
  --border:#000000;--border-gold:#000000;
  --gold-text:#4a3300;--purple-main:#2e0f78;
  --shadow:transparent;--shadow-h:transparent;
}
html.a11y-hoch a{color:#2e0f78}
html.a11y-hoch .card,html.a11y-hoch .godi-card,html.a11y-hoch .info-box,
html.a11y-hoch .presby-card,html.a11y-hoch .kal-day{border-color:#000 !important}
/* Hoher Kontrast — dunkel */
html.a11y-hoch[data-theme="dark"]{
  --bg:#000000;--bg-soft:#000000;--bg-card:#000000;
  --text:#ffffff;--text-mid:#ffffff;--text-muted:#e6e6e6;
  --border:#ffffff;--border-gold:#ffffff;
  --gold-text:#ffd966;--gold-light:#ffd966;
}
html.a11y-hoch[data-theme="dark"] a{color:#ffd966}
html.a11y-hoch[data-theme="dark"] .card,html.a11y-hoch[data-theme="dark"] .info-box,
html.a11y-hoch[data-theme="dark"] .presby-card,html.a11y-hoch[data-theme="dark"] .kal-day{border-color:#fff !important}

/* Negativer Kontrast: schwarzer Grund, weiße Schrift, gelbe Verweise.
   Bilder bleiben, wie sie sind — umgekehrte Fotos helfen niemandem. */
html.a11y-negativ,html.a11y-negativ[data-theme="dark"]{
  --bg:#000000;--bg-soft:#000000;--bg-card:#000000;
  --text:#ffffff;--text-mid:#ffffff;--text-muted:#ffffff;
  --border:#ffffff;--border-gold:#ffeb3b;
  --gold:#ffeb3b;--gold-light:#ffeb3b;--gold-text:#ffeb3b;
  --purple-main:#000000;--purple-dark:#000000;--purple-mid:#000000;
  --h-a:#000000;--h-b:#000000;--h-c:#000000;--nav-bg:#000000;--foot-bg:#000000;
  --shadow:transparent;--shadow-h:transparent;
}
html.a11y-negativ body{background:#000;color:#fff}
html.a11y-negativ a{color:#ffeb3b !important}
html.a11y-negativ .card,html.a11y-negativ .info-box,html.a11y-negativ .presby-card,
html.a11y-negativ .godi-card,html.a11y-negativ .kal-day,html.a11y-negativ .modal{
  border:1px solid #fff !important;background:#000 !important}

/* ── Knopf links oben und Fenster ───────────────────────────── */
/* Alles in festen Pixeln: Das Fenster darf beim Vergrößern der Schrift
   weder wachsen noch wandern — sonst trifft der nächste Klick daneben. */
.a11y-knopf{
  position:fixed;left:12.8px;top:86.4px;z-index:285;
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--purple-main);color:#fff;border:2px solid #fff;
  box-shadow:0 4px 16px rgba(0,0,0,.25);cursor:pointer;
  transition:transform .15s,background .15s;
}
.a11y-knopf:hover{transform:scale(1.06);background:var(--purple-dark)}
.a11y-knopf:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.a11y-knopf svg{width:26px;height:26px}
html.a11y-negativ .a11y-knopf{background:#000;border-color:#ffeb3b;color:#ffeb3b}
@media(max-width:700px){.a11y-knopf{top:73.6px;left:9.6px;width:42px;height:42px}}

.a11y-huelle{position:fixed;inset:0;z-index:700;display:flex;align-items:flex-start;
  justify-content:flex-start;padding:86.4px 12.8px 16px;background:rgba(10,8,20,.45)}
.a11y-huelle[hidden]{display:none}
.a11y-fenster{
  font-size:15px;line-height:1.4;
  width:100%;max-width:360px;max-height:calc(100vh - 112px);overflow:auto;
  background:var(--bg-card);color:var(--text);border:1px solid var(--border);
  border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:17.6px 19.2px 19.2px;
}
.a11y-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:12.8px}
.a11y-kopf h2{font-family:'Cormorant Garamond',serif;font-size:21.6px;font-weight:400;margin:0}
.a11y-zu{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:transparent;color:var(--text);cursor:pointer;font-size:16px}
.a11y-raster{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:5.6px;text-align:left;
  padding:12px 12.8px;border-radius:12px;border:1.5px solid var(--border);
  background:var(--bg-soft);color:var(--text);cursor:pointer;font:inherit;font-size:13.1px;line-height:1.3;
}
.a11y-opt svg{width:22px;height:22px}
.a11y-opt[aria-pressed="true"]{border-color:var(--purple-main);box-shadow:inset 0 0 0 1px var(--purple-main)}
[data-theme="dark"] .a11y-opt[aria-pressed="true"]{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.a11y-opt:focus-visible,.a11y-zu:focus-visible,.a11y-schrift button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.a11y-breit{grid-column:1/-1}
.a11y-schrift{display:flex;align-items:center;gap:8px;width:100%}
.a11y-schrift button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);
  background:var(--bg-card);color:var(--text);cursor:pointer;font:inherit;font-weight:600}
.a11y-schrift button:disabled{opacity:.35;cursor:not-allowed}
.a11y-schrift-wert{flex:1;text-align:center;font-weight:600}
.a11y-standard{margin-top:12.8px;width:100%;justify-content:center;flex-direction:row}
.a11y-fuss{margin-top:12.8px;font-size:12.2px;text-align:center}
.a11y-fuss button{background:none;border:0;color:var(--text-mid);text-decoration:underline;cursor:pointer;font:inherit}

/* Die Kopfleiste bleibt jetzt stehen (72px). Sprungmarken — seiten-
   interne Verlinkungen, „Direkt zum Inhalt“ — landen sonst unter ihr. */
html{scroll-padding-top:calc(72px + 1rem)}

/* ════════════════════════════════════════════════════════════
   STANDORTBLOCK — Info-Box mit einem Ort
   Links der Ort, rechts die Ansprechpartner. Ohne Ansprechpartner
   steht der Ort allein in der linken Hälfte.
════════════════════════════════════════════════════════════ */
.standort{margin:2rem 0}
.standort .standort-titel{font-family:'Cormorant Garamond',serif;font-size:1.35rem;font-weight:400;color:var(--text);margin:0 0 .9rem}
.standort-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;align-items:start}
@media(max-width:760px){.standort-grid{grid-template-columns:1fr}}
.standort-karte{background:var(--bg-card);border:1px solid var(--border);border-radius:20px;
  padding:1.3rem 1.4rem;box-shadow:0 4px 24px var(--shadow)}
.standort-karte .info-row{padding:.55rem 0}
.standort-karte .info-row:last-child{border-bottom:0}
.standort .standort-name{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:600;color:var(--text);margin:0 0 .5rem;line-height:1.2}
.standort .standort-kicker{font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin-bottom:.8rem}
.standort-person{display:flex;gap:1rem;align-items:flex-start;padding:.8rem 0;border-top:1px solid var(--border)}
.standort-kicker + .standort-person{border-top:0;padding-top:0}
.standort-foto{width:72px;height:72px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--border-gold)}
.standort .standort-pname{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:600;color:var(--text);line-height:1.2}
.standort-rolle{font-size:.8rem;color:var(--text-muted);margin:.1rem 0 .45rem}
.standort-weg{font-size:.86rem;line-height:1.6;overflow-wrap:anywhere}
.standort-weg a{color:var(--purple-main);text-decoration:none}
.standort-weg a:hover{text-decoration:underline}
[data-theme="dark"] .standort-weg a{color:var(--gold-light)}
.standort-hinweis{font-size:.8rem;color:var(--text-mid);margin-top:.35rem;line-height:1.5}

/* „.standort“ davor: .article-body h3/h4 wiegt sonst schwerer, und der
   Name des Ortes erschien klein in der Textschrift. */

/* Platzhalter für Personen ohne Foto — Standortblock und Karten */
.foto-platzhalter{display:inline-flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:var(--bg-soft);color:var(--text-muted)}
.foto-platzhalter svg{width:78%;height:78%;fill:currentColor;opacity:.55}
span.presby-img.foto-platzhalter{border-radius:50%}


/* ════════════════════════════════════════════════════════════
   VOR / ZURÜCK AM ENDE EINER SEITE
   Volle Titel — vorher auf 40 Zeichen gekürzt, obwohl Platz war.
   Nebeneinander je eine Hälfte, auf schmalen Bildschirmen untereinander.
════════════════════════════════════════════════════════════ */
.article-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.article-nav > span:empty{display:block}
.article-nav-link{display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.2rem;
  border:1px solid var(--border);border-radius:16px;background:var(--bg-card);
  text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s,box-shadow .2s}
.article-nav-link:hover{border-color:var(--border-gold);transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}
.article-nav-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.article-nav-link--nach{text-align:right;align-items:flex-end}
.article-nav-kicker{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.article-nav-titel{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:600;line-height:1.3;
  overflow-wrap:break-word;hyphens:manual}
.article-nav-link:hover .article-nav-titel{color:var(--purple-main)}
[data-theme="dark"] .article-nav-link .article-nav-titel{color:var(--gold-light)}
[data-theme="dark"] .article-nav-link:hover .article-nav-titel{color:var(--gold)}
@media(max-width:640px){
  .article-nav{grid-template-columns:1fr;gap:.7rem}
  .article-nav > span:empty{display:none}
  .article-nav-link--nach{text-align:left;align-items:flex-start}
}

/* ════════════════════════════════════════════════════════════
   PERSONENFOTOS: ÜBER DEM NAMEN, LEICHTES HOCHFORMAT 4:5
   Gilt im Standortblock und auf den Ansprechpartner-Karten.
   Die Fotos werden serverseitig auf 480 × 600 zugeschnitten;
   aspect-ratio hält das Format, falls einmal ein Original ankommt.
   Steht am Ende, damit es die älteren Regeln (rund, neben dem Namen)
   ablöst.
════════════════════════════════════════════════════════════ */
.presby-card.has-img{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;padding:1rem}
.presby-grid .presby-img,.presby-grid .presby-img.foto-platzhalter{
  margin:0;width:100%;max-width:220px;height:auto;aspect-ratio:4/5;border-radius:12px;object-fit:cover}
.standort-person{flex-direction:column;align-items:flex-start;gap:.75rem}
/* „.standort“ und „.presby-grid“ davor: .article-body img zieht Bilder
   sonst auf volle Breite. */
.standort .standort-foto,.standort .standort-foto.foto-platzhalter{
  width:100%;max-width:200px;height:auto;aspect-ratio:4/5;border-radius:12px;object-fit:cover;
  border:1px solid var(--border-gold);margin:0}
.foto-platzhalter svg{width:62%;height:62%}
@media(max-width:640px){
  .standort .standort-foto,.standort .standort-foto.foto-platzhalter{max-width:180px}
}

/* Standortblock: Ortskarte breiter als die Ansprechpartner-Karte,
   Beschriftungen in fester Spalte — so beginnen alle Angaben bündig,
   auch wenn eine Beschriftung länger ist („Gottesdienste“). */
.standort .standort-grid{grid-template-columns:3fr 2fr}
.standort .standort-karte .info-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;align-items:baseline}
.standort .standort-karte .info-label{min-width:0;overflow-wrap:anywhere}
@media(max-width:760px){
  .standort .standort-grid{grid-template-columns:1fr}
  .standort .standort-karte .info-row{grid-template-columns:7.5rem minmax(0,1fr);gap:.7rem}
}


/* ════════════════════════════════════════════════════════════
   STANDORTBLOCK — Personenkarten
   „Ansprechpartner“ als eigene Beschriftung über den Karten. Jede Person
   eine Karte, das Foto füllt sie oben aus. Die Ortskarte beginnt auf
   gleicher Höhe wie die erste Personenkarte.
════════════════════════════════════════════════════════════ */
.standort .standort-grid--personen{
  /* Personenkarten mit fester Breite nebeneinander, der Ort nimmt den
     Rest — so bleibt er breiter, und Fotos werden nicht riesig. */
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:". kicker" "ort personen";
  row-gap:.6rem;
}
.standort .standort-grid--personen > .standort-karte{grid-area:ort}
.standort .standort-grid--personen > .standort-kicker{grid-area:kicker;margin:0;align-self:end}
.standort .standort-grid--personen > .standort-personen{grid-area:personen}
.standort-personen{display:flex;flex-direction:row;gap:1rem;align-items:stretch}   /* gleich hohe Karten */
.standort-pkarte{width:250px;flex-shrink:0;background:var(--bg-card);border:1px solid var(--border);border-radius:20px;
  overflow:hidden;box-shadow:0 4px 24px var(--shadow)}
.standort .standort-pkarte .standort-foto,.standort .standort-pkarte .standort-foto.foto-platzhalter{
  display:flex;width:100%;max-width:none;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:0;border-radius:0;margin:0}
.standort-ptext{padding:1rem 1.3rem 1.2rem}
@media(max-width:1000px){
  .standort-pkarte{width:210px}
}
@media(max-width:760px){
  .standort .standort-grid--personen{grid-template-columns:1fr;grid-template-areas:"ort" "kicker" "personen"}
  .standort-personen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .standort-pkarte{width:auto}
}
/* Schmale Handys: eine Person pro Zeile — sonst bricht die E-Mail-Adresse
   in der halben Breite mitten im Wort um. */
@media(max-width:480px){
  .standort-personen{grid-template-columns:1fr}
  .standort .standort-grid--personen > .standort-kicker{margin-top:.6rem}
}

/* ════════════════════════════════════════════════════════════
   ANSPRECHPARTNER IM STANDORTBLOCK — Rechner zweispaltig
   Ortskarte links (3/5), rechts die Personen untereinander. Jede
   Personenkarte: Foto links bündig ohne Rand, Text rechts daneben.
   Auf dem Handy: Foto oben randlos, Text darunter.
   Steht am Ende und löst die Karten mit fester Breite ab.
════════════════════════════════════════════════════════════ */
.standort .standort-grid--personen{grid-template-columns:3fr 2fr}
.standort-personen{display:flex;flex-direction:column;gap:1rem;align-items:stretch}
.standort-pkarte{width:auto;display:grid;grid-template-columns:40% minmax(0,1fr);align-items:stretch}
.standort .standort-pkarte .standort-foto,.standort .standort-pkarte .standort-foto.foto-platzhalter{
  width:100%;height:100%;min-height:100%;aspect-ratio:4/5;object-fit:cover;border:0;border-radius:0;margin:0}
.standort-ptext{padding:1.1rem 1.2rem;display:flex;flex-direction:column;justify-content:center;min-width:0}
.standort-weg{overflow-wrap:anywhere}
@media(max-width:1000px){ .standort-pkarte{width:auto} }
@media(max-width:760px){
  .standort .standort-grid--personen{grid-template-columns:1fr}
  .standort-personen{display:flex;flex-direction:column}
  .standort-pkarte{grid-template-columns:1fr}
  .standort .standort-pkarte .standort-foto,.standort .standort-pkarte .standort-foto.foto-platzhalter{height:auto}
}

/* ════════════════════════════════════════════════════════════
   ANSPRECHPARTNER-KARTEN (z. B. Presbyterium)
   Foto über dem Namen wie gehabt, aber ohne Innenabstand: immer so
   breit wie die Karte selbst. Nur der Text hat Abstand zum Rand.
════════════════════════════════════════════════════════════ */
.presby-card.has-img{padding:0;overflow:hidden;gap:0;display:flex;flex-direction:column;align-items:stretch}
.presby-grid .presby-img,.presby-grid .presby-img.foto-platzhalter{
  display:flex;width:100%;max-width:none;height:auto;aspect-ratio:4/5;object-fit:cover;
  border:0;border-radius:0;margin:0}
.presby-card.has-img > div{padding:.9rem 1rem 1.1rem}

/* ════════════════════════════════════════════════════════════
   PERSONENKARTEN: AKZENTSTRICH UND GRUPPEN
   Name · Bezeichnung — Abstand — Mobil · E-Mail.
   Akzentstrich 2px zwischen Bild und Text: unter dem Bild, wo es über
   dem Text steht; senkrecht daneben in der zweispaltigen Karte.
   Hell violett, dunkel gold.
════════════════════════════════════════════════════════════ */
:root{--person-akzent:var(--purple-main)}
[data-theme="dark"]{--person-akzent:var(--gold)}

/* Gruppen: Kontaktwege mit Abstand zur Bezeichnung */
.standort-rolle{margin-bottom:0}
/* erster Kontaktweg nach Bezeichnung (oder Name, falls keine) */
.standort-rolle + .standort-weg,.standort-pname + .standort-weg{margin-top:.8rem}
.presby-card .presby-wege{margin-top:.8rem}

/* Presbyterium & Co.: Bild oben → Strich darunter */
.presby-card.has-img > div{border-top:2px solid var(--person-akzent)}

/* Standortblock, Rechner: zweispaltig → Strich senkrecht */
.standort-ptext{border-left:2px solid var(--person-akzent)}
/* Standortblock, Handy: Bild oben → Strich darunter */
@media(max-width:760px){
  .standort-ptext{border-left:0;border-top:2px solid var(--person-akzent)}
}


/* Platzhalter: Figur so breit wie die Karte, unten bündig an der Linie */
.foto-platzhalter{align-items:flex-end;justify-content:center}
.foto-platzhalter svg{display:block;width:100%;height:auto;max-height:100%;opacity:.55;fill:currentColor}

/* ════════════════════════════════════════════════════════════
   STANDORTBLOCK MIT MEHREREN ANSPRECHPARTNERN
   Ab zwei Personen stehen die Karten nebeneinander statt untereinander:
   Foto oben (quadratisch), Text darunter. Eine Person bleibt wie oben.
   Rechner: Ort links, Personen rechts nebeneinander.
   Tablet: Ort oben, Personen darunter nebeneinander.
════════════════════════════════════════════════════════════ */
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-personen{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1rem;align-items:stretch}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte{
  grid-template-columns:1fr;grid-template-rows:auto 1fr}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte .standort-foto,
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte .standort-foto.foto-platzhalter{
  height:auto;min-height:0;aspect-ratio:1/1}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-ptext{
  border-left:0;border-top:2px solid var(--person-akzent);justify-content:flex-start}
@media(min-width:1001px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte + .standort-pkarte){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
}
@media(min-width:761px) and (max-width:1000px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte){
    grid-template-columns:1fr;grid-template-areas:"ort" "kicker" "personen"}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) > .standort-kicker{margin-top:.6rem}
}
@media(min-width:481px) and (max-width:760px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-personen{
    grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:480px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-personen{
    grid-auto-flow:row;grid-template-columns:1fr}
}

/* Mehrere Ansprechpartner, Rechner: Karten so hoch wie die Ortskarte.
   Die Ortskarte bestimmt die Zeilenhöhe, das Foto füllt nur den Platz,
   den der Text übrig lässt (flex-basis 0 → zählt nicht zur Höhe). */
@media(min-width:1001px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte){align-items:stretch}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) > .standort-kicker{align-self:end}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte{
    display:flex;flex-direction:column}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte .standort-foto,
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte .standort-foto.foto-platzhalter{
    flex:1 1 0;min-height:90px;height:auto;aspect-ratio:auto;object-fit:cover;object-position:50% 25%}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-ptext{flex:0 0 auto}
}

/* ════════════════════════════════════════════════════════════
   ÜBERNOMMENE ALTSEITEN: Tabellen, Linklisten, Bilder im Text
════════════════════════════════════════════════════════════ */
.article-body table{width:100%;border-collapse:collapse;font-size:.88rem;margin:1rem 0 1.5rem;display:block;overflow-x:auto}
.article-body th,.article-body td{padding:.6rem .7rem;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.article-body th{font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.article-body td img{width:72px;height:72px;object-fit:cover;border-radius:50%;margin:0}
.article-body td{overflow-wrap:anywhere}
.article-body .alt-bild img{max-width:min(100%,560px)}
.article-body ul.link-liste{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}
.article-body ul.link-liste li{margin:0}
.article-body ul.link-liste a{display:block;padding:.75rem 1rem;border:1px solid var(--border);border-radius:12px;background:var(--bg-card);text-decoration:none;height:100%}
.article-body ul.link-liste a:hover{border-color:var(--border-gold)}

/* Karten-Raster im Artikel: einheitlich hoch, Text oben, „Mehr erfahren“ unten */
.article-body .gem-links-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:stretch}
.article-body .gem-link-card:not(.has-img){align-items:stretch}
.article-body .gem-link-card:not(.has-img) .gem-link-text{display:flex;flex-direction:column;width:100%;min-height:100%}
.article-body .gem-link-card .gem-link-label{font-size:1.15rem;font-weight:600;line-height:1.25}
.article-body .gem-link-card .gem-link-sub{font-size:.8rem;margin:.35rem 0 .9rem;line-height:1.45}
.article-body .gem-link-card .gem-link-cta{margin-top:auto}

/* Personenkarten: Mail/Telefon nie umbrechen. Die Schrift passt sich der
   Kartenbreite an (Container-Einheit), bei extrem langen Adressen … am Ende. */
.presby-card.has-img > div,.standort-ptext{container-type:inline-size}
.presby-wege a,.standort-weg a{
  white-space:nowrap;overflow-wrap:normal;word-break:normal;
  display:block;overflow:hidden;text-overflow:ellipsis;
  font-size:clamp(.62rem,5.6cqi,.8rem)}
.standort-weg{overflow-wrap:normal}

/* ════════════════════════════════════════════════════════════
   SCHNELLKONTAKTLEISTE (fixiert unten) — nichts darf dahinter liegen
   · Seite endet oberhalb der Leiste (padding-bottom)
   · Startseite: Bildlauf + Hinweisband passen auf den ersten Bildschirm
   · iPhone: Leiste über dem Home-Balken (safe-area)
════════════════════════════════════════════════════════════ */
:root{--sticky-h:52px;--hdr-h:72px}
body{padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom,0px))}
.sticky-bar{height:calc(var(--sticky-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.hero{height:clamp(340px,calc(100svh - var(--hdr-h) - 46px - var(--sticky-h) - env(safe-area-inset-bottom,0px)),560px)}
@media(max-width:768px){
  .hero{height:clamp(300px,calc(100svh - var(--hdr-h) - 60px - var(--sticky-h) - env(safe-area-inset-bottom,0px)),400px)}
}
/* Anker-Sprünge und Fokus nicht hinter Kopf/Leiste */
html{scroll-padding-top:var(--hdr-h);scroll-padding-bottom:calc(var(--sticky-h) + 1rem)}

/* ════════════════════════════════════════════════════════════
   AUFKLAPPER MIT BILD (Baustein „bild_aufklapper“)
   Klappen untereinander; geöffnet Bild + Text nebeneinander,
   abwechselnd links/rechts. Handy: Bild oben, Text darunter.
════════════════════════════════════════════════════════════ */
.bk-titel{margin:2.4rem 0 1rem}
.bk-liste{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0 2rem}
.article-body details.bk{margin:0;padding:0;border:1px solid var(--border);border-radius:16px;background:var(--bg-card);overflow:hidden}
.article-body details.bk>summary{padding:1rem 1.3rem;font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:600;color:var(--text);cursor:pointer}
.article-body details.bk[open]>summary{border-bottom:1px solid var(--border)}
.bk-inhalt{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:1.6rem;padding:1.4rem 1.3rem 1.6rem;align-items:start}
.bk-inhalt.bk-bild-rechts{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
.bk-inhalt.bk-bild-rechts .bk-bild{order:2}
.bk-inhalt.bk-ohne-bild{grid-template-columns:1fr}
.bk-bild{position:sticky;top:calc(var(--hdr-h,72px) + 1rem)}
.article-body .bk-bild img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin:0;display:block}
.bk-text>*:first-child{margin-top:0}
.bk-text>*:last-child{margin-bottom:0}
.bk-text p{margin:0 0 .9rem}
.bk-text .chronik{margin:0 0 .55rem;padding-left:.9rem;border-left:2px solid var(--border-gold)}
.bk-text .chronik strong{display:block;font-size:.78rem;letter-spacing:.06em;color:var(--gold-text,var(--gold))}
@media(max-width:760px){
  .bk-inhalt,.bk-inhalt.bk-bild-rechts{grid-template-columns:1fr;gap:1rem;padding:1rem}
  .bk-inhalt.bk-bild-rechts .bk-bild{order:0}
  .bk-bild{position:static}
}


/* Baustein „Spendenkonto“ auf Inhaltsseiten — gleiche Box wie im Fußbereich,
   auf dem dunklen Verlauf des Kontaktstreifens, damit die Farben passen. */
.donate-box--seite{
  max-width:420px;margin:2rem 0;
  background:linear-gradient(135deg,#10073a 0%,var(--purple-mid) 40%,#3c1680 70%,var(--purple-dark) 100%);
  border-color:rgba(255,255,255,.12);box-shadow:0 8px 30px var(--shadow)}
.article-body .donate-box--seite h3{font-family:'Cormorant Garamond',serif;color:var(--gold-light);font-size:1.15rem;margin:0 0 .85rem;font-weight:400}
.donate-box--seite .donate-text{color:rgba(255,255,255,.7);font-size:.88rem;line-height:1.6;margin:0 0 .2rem}
.donate-box--seite .iban-block{font-size:.8rem}

/* ════════════════════════════════════════════════════════════
   SCHNELLKONTAKTLEISTE — Neugestaltung
   Drei gleich breite Felder im Raster (statt Flex mit Trennstrich als
   erstem Kind — der schob auf dem Handy das mittlere Symbol aus der
   Mitte). Symbol im dunklen Kreis, Beschriftung daneben; auf dem Handy
   darunter. Trennlinien als Rand zwischen den Feldern.
════════════════════════════════════════════════════════════ */
:root{--sticky-h:58px}
.sticky-bar{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  justify-content:stretch;align-items:stretch;
  padding-left:max(.5rem,calc((100vw - 780px) / 2));padding-right:max(.5rem,calc((100vw - 780px) / 2));
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);
  border-top:1px solid rgba(255,255,255,.55);
  box-shadow:0 -6px 28px rgba(20,8,60,.28);
}
.sticky-bar-link + .sticky-bar-link::before{display:none}
.sticky-bar .sticky-bar-link{
  max-width:none;width:100%;flex:none;margin:0;padding:0 .75rem;
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  font-size:.86rem;font-weight:600;letter-spacing:.02em;
  border-radius:0;transition:background .2s;
}
.sticky-bar .sticky-bar-link + .sticky-bar-link{border-left:1px solid rgba(30,18,72,.14)}
.sticky-bar .sticky-bar-link:hover,.sticky-bar .sticky-bar-link:focus-visible{background:rgba(30,18,72,.08)}
.sticky-bar .sticky-bar-link svg{
  box-sizing:content-box;width:17px;height:17px;padding:8px;flex-shrink:0;
  background:var(--purple-dark);border-radius:50%;
  box-shadow:0 2px 8px rgba(30,18,72,.25);transition:transform .2s;
}
.sticky-bar .sticky-bar-link:hover svg{transform:translateY(-1px)}
.sticky-bar .sticky-bar-link svg[class^="icon"]{fill:var(--gold-light) !important;stroke:none !important}
.sticky-bar .sticky-bar-label{display:inline}
@media (max-width:539px){
  :root{--sticky-h:62px}
  .sticky-bar{padding-left:0;padding-right:0}
  .sticky-bar .sticky-bar-link{flex-direction:column;gap:.2rem;padding:0 .25rem;font-size:.68rem;letter-spacing:.04em}
  .sticky-bar .sticky-bar-link svg{width:16px;height:16px;padding:7px}
  .sticky-bar .sticky-bar-label{display:block;line-height:1}
}
footer{padding-bottom:2rem}

/* ════════════════════════════════════════════════════════════
   KOPFBEREICH — Feinschliff
   Tieferer Verlauf mit weichem Lichtschein, goldene Haarlinie unten,
   Logo als ruhige weiße Karte, Knöpfe als Glas-Kreise mit Goldrand
   beim Überfahren.
════════════════════════════════════════════════════════════ */
#site-header{
  background:
    radial-gradient(120% 180% at 12% -40%,rgba(139,95,232,.45) 0%,transparent 55%),
    radial-gradient(80% 160% at 100% 0%,rgba(230,182,92,.12) 0%,transparent 60%),
    linear-gradient(120deg,#12073a 0%,#231058 45%,#2e1470 100%);
  box-shadow:0 10px 30px -12px rgba(8,3,30,.65);
  -webkit-backdrop-filter:saturate(140%) blur(16px);backdrop-filter:saturate(140%) blur(16px);
}
#site-header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(238,214,155,.55) 20%,rgba(238,214,155,.85) 50%,rgba(238,214,155,.55) 80%,transparent 100%);
}
.hdr-inner{height:var(--hdr-h,72px)}
.logo-img-wrap{
  border-radius:14px;padding:6px 12px;
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 0 3px rgba(255,255,255,.08),0 8px 22px -6px rgba(0,0,0,.55);
}
.hdr-logo:hover .logo-img-wrap,.hdr-logo:focus-visible .logo-img-wrap{
  box-shadow:0 0 0 1px rgba(255,255,255,.5) inset,0 0 0 3px rgba(238,214,155,.45),0 10px 26px -6px rgba(0,0,0,.6);
}
.hdr-controls{gap:.6rem}
.theme-btn,.burger-btn{
  width:42px;height:42px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset,0 4px 14px -4px rgba(0,0,0,.5);
  transition:background .2s,border-color .2s,transform .2s;
}
.theme-btn:hover,.burger-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(238,214,155,.7);transform:translateY(-1px)}
.theme-btn{color:var(--gold-light)}
.burger-btn span{width:18px;background:#fff}
.burger-btn span:nth-child(2){width:12px;align-self:center;transform:translateX(3px)}
.burger-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
@media(max-width:480px){
  .theme-btn,.burger-btn{width:40px;height:40px}
  .hdr-inner{padding:0 1rem}
}

/* ════════════════════════════════════════════════════════════
   SPENDENKONTO — besser lesbar (Fußbereich und Baustein)
   Heller Text, größere Schrift, IBAN mit Sperrung, Kontoinhaber
   in normaler Schrift statt Schreibmaschine.
════════════════════════════════════════════════════════════ */
.donate-box .iban-block{
  font-family:'Jost',sans-serif;font-size:.86rem;line-height:1.75;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.28);border:1px solid rgba(238,214,155,.22);
  padding:.8rem 1rem;letter-spacing:.01em;white-space:normal;
}
.donate-box .iban-block .spk-nr{font-family:'Courier New',monospace;font-size:.9rem;letter-spacing:.06em;color:#fff;white-space:nowrap}
.donate-box .iban-block .spk-lbl{display:inline-block;min-width:2.6rem;color:var(--gold-light);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.donate-box .iban-block .spk-zusatz{color:rgba(255,255,255,.7);font-size:.8rem}
.donate-box--seite .donate-text{color:rgba(255,255,255,.85)}

/* ════════════════════════════════════════════════════════════
   HINWEISBAND (Banner unter dem Bildlauf) — Neugestaltung
   Text und Verweis als ruhige Zeile, der Verweis als goldene
   Kapsel mit Pfeil. Feiner Lichtstreif läuft einmal durch.
════════════════════════════════════════════════════════════ */
.gold-banner{
  background:
    radial-gradient(60% 220% at 50% 50%,rgba(230,182,92,.14) 0%,transparent 70%),
    linear-gradient(90deg,#140842 0%,#2a1463 50%,#140842 100%);
  border:0;padding:1rem 1.5rem;
  box-shadow:0 1px 0 rgba(238,214,155,.25) inset,0 -1px 0 rgba(238,214,155,.25) inset;
}
.gold-banner::before{
  width:40%;height:100%;left:-40%;top:0;transform:none;
  background:linear-gradient(90deg,transparent,rgba(255,240,200,.10),transparent);
  animation:banner-glanz 6s ease-in-out 1.5s 1 forwards;
}
@keyframes banner-glanz{to{left:120%}}
@media (prefers-reduced-motion:reduce){.gold-banner::before{animation:none;display:none}}
.gold-banner p{
  position:relative;z-index:1;margin:0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.55rem .9rem;
  font-size:.92rem;color:rgba(255,255,255,.88);letter-spacing:.03em;font-weight:400;
}
.gold-banner a{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem 1rem .42rem 1.1rem;border-radius:999px;border:0 !important;
  background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 100%);
  color:var(--purple-dark) !important;font-weight:600;font-size:.84rem;letter-spacing:.02em;
  box-shadow:0 4px 14px -4px rgba(230,182,92,.6);
  transition:transform .2s,box-shadow .2s;
}
.gold-banner a::after{content:'→';font-weight:700;transition:transform .2s}
.gold-banner a:hover,.gold-banner a:focus-visible{color:var(--purple-dark) !important;transform:translateY(-1px);box-shadow:0 6px 18px -4px rgba(230,182,92,.75)}
.gold-banner a:hover::after{transform:translateX(3px)}
.gold-banner a:focus-visible{outline:2px solid #fff;outline-offset:2px}
[data-theme="dark"] .gold-banner a{color:var(--purple-dark) !important}
@media(max-width:540px){
  .gold-banner{padding:.85rem 1rem}
  .gold-banner p{font-size:.85rem;flex-direction:column;gap:.5rem}
}

/* Menü: Untermenüs waren auf 400px Höhe begrenzt — „Neuigkeiten“ hat
   über 20 Einträge, der letzte wurde abgeschnitten und lief optisch in
   den nächsten Hauptpunkt. Grenze großzügig, Aufklappen bleibt weich.
   Lange Titel brechen sauber um, mit etwas Luft zwischen den Zeilen. */
.snav-sub{transition:max-height .45s ease}
.snav-sub.open{max-height:3000px;padding-bottom:.35rem}
.snav-nav .sub{line-height:1.4}

/* Startseite: Bildlauf + Hinweisband + Schnellkontaktleiste müssen auf den
   ersten Bildschirm passen. Das Band ist mit der goldenen Kapsel höher
   geworden — Höhe jetzt als Variable, der Bildlauf rechnet sie ab.
   Das Band bekommt eine feste Mindesthöhe, damit die Rechnung stimmt. */
:root{--banner-h:64px}
.gold-banner{min-height:var(--banner-h);box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.hero{height:clamp(320px,calc(100svh - var(--hdr-h,72px) - var(--banner-h) - var(--sticky-h) - env(safe-area-inset-bottom,0px)),560px)}
@media(max-width:768px){
  .hero{height:clamp(280px,calc(100svh - var(--hdr-h,72px) - var(--banner-h) - var(--sticky-h) - env(safe-area-inset-bottom,0px)),400px)}
}
@media(max-width:540px){
  :root{--banner-h:98px}
}

/* Fett innerhalb eines Verweises übernimmt die Verweisfarbe.
   Vorher setzte „.article-body strong“ die Textfarbe — je nachdem, ob im
   Text <strong><a> oder <a><strong> stand, war ein Verweis gold oder weiß. */
.article-body a strong,.article-body a b,.article-body a em{color:inherit}

/* Kalender-Widget, dunkle Ansicht: aktiver Tages-Chip ist weiß — der
   „Alle“-Chip erbte aber weiße Schrift (.kday-chip.active{color:#fff})
   und war unsichtbar. Schrift im aktiven Chip dunkel, „Alle“ mittig. */
[data-theme="dark"] .kday-chip.active{color:var(--purple-dark)}
.kday-chip:first-child{align-items:center;justify-content:center;font-weight:600}

/* Kalender-Widget, dunkle Ansicht: Kategorie-Badge weiß auf kräftigerem
   Lila — vorher Hell-Lila auf Lila, kaum lesbar. */
[data-theme="dark"] .k-badge{color:#fff;background:rgba(139,95,232,.38);border-color:rgba(190,160,255,.4)}

/* ════════════════════════════════════════════════════════════
   BAUSTEIN „TEXT MIT ANSPRECHPARTNERN“
   Rechner: Text links, Karten rechts (untereinander).
   Handy: Text zuerst, Karten darunter.
════════════════════════════════════════════════════════════ */
.text-kontakte{display:grid;grid-template-columns:minmax(0,3fr) minmax(260px,2fr);gap:2.2rem;align-items:start;margin:1.5rem 0 2rem}
.tk-text>*:first-child{margin-top:0}
.tk-text>*:last-child{margin-bottom:0}
.tk-kontakte .presby-grid{grid-template-columns:1fr;margin:0}
.tk-kontakte h3,.tk-kontakte .person-cards-title{margin-top:0}
@media(max-width:860px){
  .text-kontakte{grid-template-columns:1fr;gap:1.4rem}
  .tk-kontakte .presby-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

/* Text mit Ansprechpartnern: Kartenspalte halb so breit (vorher 2 von 5
   Teilen, jetzt 1 von 5), mindestens 220px — Adressen skalieren mit */
.text-kontakte{grid-template-columns:minmax(0,4fr) minmax(220px,1fr)}
@media(max-width:860px){.text-kontakte{grid-template-columns:1fr}}

/* Unterseiten (Artikel) etwas schmaler als die Startseite: 1080 statt
   1280px Inhaltsbreite — ruhigere Zeilenlänge beim Lesen. Übersichts-
   seiten mit Kartenrastern („voll“) behalten die volle Breite. */
.article-wrap{max-width:calc(1080px + 3.5rem)}

/* ════════════════════════════════════════════════════════════
   STANDORT MIT MEHREREN ANSPRECHPARTNERN — neu
   Statt nebeneinander mit schmalem, beschnittenem Fotostreifen:
   Karten untereinander, Foto links im Hochformat (ganz sichtbar),
   Text rechts. Zwei Karten sind etwa so hoch wie die Ortskarte.
════════════════════════════════════════════════════════════ */
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-personen{
  display:grid;grid-auto-flow:row;grid-template-columns:1fr;grid-auto-columns:auto;gap:.8rem;align-items:stretch}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte{
  display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:none;flex-direction:initial}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte .standort-foto,
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-pkarte .standort-foto.foto-platzhalter{
  flex:none;width:104px;height:100%;min-height:128px;aspect-ratio:auto;object-fit:cover;object-position:50% 20%}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-ptext{
  border-top:0;border-left:2px solid var(--person-akzent);justify-content:center;padding:.9rem 1.1rem}
.standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-ptext .standort-pname{font-size:1.02rem}
@media(min-width:1001px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte + .standort-pkarte){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
@media(min-width:481px) and (max-width:760px){
  .standort .standort-grid--personen:has(.standort-pkarte + .standort-pkarte) .standort-personen{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Standortblock: Ortskarte beginnt direkt unter der Überschrift. Vorher
   stand sie eine Zeile tiefer, weil rechts „Ansprechpartner“ als eigene
   Zeile darüber lag — die Ortskarte reicht jetzt über beide Zeilen. */
@media(min-width:761px){
  .standort .standort-grid--personen{grid-template-areas:"ort kicker" "ort personen";grid-template-rows:auto 1fr}
  .standort .standort-grid--personen > .standort-karte,
  .standort .standort-grid--personen > .standort-ort{align-self:start}
  .standort .standort-grid--personen > .standort-kicker{align-self:start;margin:0 0 .6rem}
}
.standort .standort-titel{margin:0 0 .7rem}