/* ======================================================
   KIRCHSPIEL WEST — SHARED STYLES
   ====================================================== */

:root {
  --bg:        #F4F1EA;
  --surface:   #FCFAF5;
  --fg:        #14191C;
  --muted:     #6E7C84;
  --border:    #DDD6CB;

  /* Gemeinden */
  --c-buesum:   #0B5C73;
  --c-wessel:   #C9461F;
  --c-neuen:    #5A7A3C;
  --c-urlauber: #C4CE46;
  /* Kasualien-Eigenfarben */
  --c-taufe:    #0B5C73;
  --c-konfi:    #E8A33D;
  --c-trauung:  #C9461F;
  --c-abschied: #5A7A3C;
  --c-seelsorge:#4A3D5E;
  --c-rituale:  #B08D5C;
  /* Themen-Farben */
  --c-musik:    #6B4E8C;

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg); }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'ss01','cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width:100%; display:block; }
/* St. Jacobi Neuenkirchen: Bild von links anschneiden, sonst fehlt der Turm */
img[src*="p1ba02vj3j11ut3577d17it16e77"] { object-position: left center !important; }
a { color: inherit; text-decoration: none; }

.font-display { font-family: 'Fraunces', serif; font-variation-settings:"SOFT" 20; letter-spacing: -0.035em; font-weight: 300; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.7rem; }

.container-x { max-width: 1600px; margin-inline: auto; padding-inline: 24px; }
@media (min-width: 600px)  { .container-x { padding-inline: 36px; } }
@media (min-width: 900px)  { .container-x { padding-inline: 50px; } }
@media (min-width: 1400px) { .container-x { padding-inline: clamp(50px, 5vw, 96px); } }

/* ============================ */
/* Grain                        */
/* ============================ */
.grain::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:60;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: .75;
}

/* ============================ */
/* Custom Cursor                */
/* ============================ */
.cursor {
  position: fixed; top:0; left:0; width:10px; height:10px; border-radius:999px;
  background: var(--fg); transform: translate(-50%,-50%);
  pointer-events:none; z-index: 100; mix-blend-mode: difference;
  transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1), background .25s;
}
.cursor.hover { width: 56px; height: 56px; }
@media (hover:none) { .cursor { display:none; } }

/* ============================ */
/* Navigation                   */
/* ============================ */
.nav {
  position: fixed; top:0; left:0; right:0; z-index: 50;
  padding: 1.2rem 0;
  transition: background .35s, padding .35s, border-color .35s, color .35s;
  border-bottom: 0;
  /* Subtiler dunkler Schleier damit Text auf hellem UND dunklem Hintergrund liest */
  background: linear-gradient(180deg, rgba(20,25,28,.4) 0%, rgba(20,25,28,0) 100%);
  color: var(--surface);
}
.nav.scrolled {
  background: rgba(244,241,234,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-logo {
  font-family:'Fraunces', serif; font-size: 1.35rem; font-weight: 400; letter-spacing:-0.02em;
  color: inherit;
}
.nav-logo span { font-style: italic; font-weight: 300; }
.nav-links { display:none; gap:2rem; font-size:.92rem; align-items: center; }
@media (min-width: 900px) { .nav-links { display:flex; } }
.nav-links > a, .nav-links > .nav-dropdown > a {
  position: relative; padding: .4rem 0;
  color: inherit;
}
.nav-links > a::after, .nav-links > .nav-dropdown > a::after {
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:1px; background: currentColor; transform:scaleX(0); transform-origin:right;
  transition: transform .4s cubic-bezier(.7,0,.2,1);
}
.nav-links > a:hover::after,
.nav-links > .nav-dropdown:hover > a::after { transform: scaleX(1); transform-origin:left; }

/* Dropdown unter Nav-Link */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
/* Unsichtbare Hover-Brücke damit Maus-Übergang nicht abbricht */
.nav-dropdown::after {
  content: ""; position: absolute; top: 100%; left: -1rem; right: -1rem;
  height: 1rem; pointer-events: none;
}
.nav-dropdown:hover::after { pointer-events: auto; }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: -1.2rem;
  margin-top: .55rem;
  width: 22rem;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow:
    0 1px 0 rgba(20,25,28,.04),
    0 30px 80px -20px rgba(20,25,28,.35),
    0 8px 24px -8px rgba(20,25,28,.15);
  padding: .55rem .55rem .75rem;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .28s, transform .28s cubic-bezier(.2,.7,.2,1);
  z-index: 70;
}
.nav-dropdown-menu::before {
  content:""; position: absolute; top: -6px; left: 1.8rem;
  width: 10px; height: 10px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
  transform: rotate(45deg);
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav-dropdown-menu a {
  display: grid; grid-template-columns: 8px 1fr;
  grid-template-rows: auto auto; row-gap: 0; column-gap: .85rem;
  align-items: start;
  padding: .7rem .9rem;
  font-family:'Fraunces', serif; font-size: 1rem; font-weight: 400;
  color: var(--fg); white-space: normal;
  border-radius: 4px;
  transition: background .22s, color .22s, padding-left .22s;
  position: relative;
}
.nav-dropdown-menu a::before {
  content:""; width: 6px; height: 6px; border-radius: 99px;
  background: var(--c-dd, var(--border));
  grid-row: 1; grid-column: 1; align-self: center;
  transition: transform .25s, background .25s;
}
.nav-dropdown-menu a::after { display: none; }
.nav-dropdown-menu a .dd-main {
  grid-column: 2; grid-row: 1;
  display: block; margin: 0;
  font-size: 1rem; line-height: 1;
}
.nav-dropdown-menu a .dd-sub {
  grid-column: 2; grid-row: 2;
  display: block;
  font-family:'JetBrains Mono', monospace; font-size: .58rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  margin: 6px 0 0;
  line-height: 1;
}
.nav-dropdown-menu a:hover .dd-sub { color: var(--c-dd, var(--muted)); opacity: .85; }
.nav-dropdown-menu a:hover {
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 70%, transparent 100%);
  color: var(--c-dd, var(--fg));
  padding-left: 1.15rem;
}
.nav-dropdown-menu a:hover::before {
  transform: scale(1.4);
}
.nav-dropdown-menu a[data-g="buesum"]   { --c-dd: var(--c-buesum); }
.nav-dropdown-menu a[data-g="wessel"]   { --c-dd: var(--c-wessel); }
.nav-dropdown-menu a[data-g="neuen"]    { --c-dd: var(--c-neuen); }
.nav-dropdown-menu a[data-g="urlauber"] { --c-dd: var(--c-urlauber); }
.nav-dropdown-menu a[data-g="kirchspiel"] { --c-dd: var(--c-konfi); }
.nav-dropdown-menu a[data-g="musik"]      { --c-dd: var(--c-musik); }
.nav-dropdown-menu a[data-g="taufe"]      { --c-dd: var(--c-taufe); }
.nav-dropdown-menu a[data-g="konfi"]      { --c-dd: var(--c-konfi); }
.nav-dropdown-menu a[data-g="trauung"]    { --c-dd: var(--c-trauung); }
.nav-dropdown-menu a[data-g="abschied"]   { --c-dd: var(--c-abschied); }
.nav-dropdown-menu a[data-g="seelsorge"]  { --c-dd: var(--c-seelsorge); }
.nav-dropdown-menu a[data-g="rituale"]    { --c-dd: var(--c-rituale); }
/* Heading & Beschreibung im Menu */
.nav-dropdown-menu-title {
  font-family:'JetBrains Mono', monospace; font-size: .58rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
  padding: .8rem 1rem .55rem;
  margin-bottom: .35rem;
  display: flex; align-items: center; gap: .65rem;
}
.nav-dropdown-menu-title::before {
  content:""; flex-shrink: 0; width: 22px; height: 1px; background: var(--c-this, var(--c-buesum));
}
.nav-dropdown-menu-title::after {
  content:""; flex: 1; height: 1px; background: var(--border);
}
/* Wide-Variante (für Musik mit vielen Einträgen) */
.nav-dropdown-menu.wide { width: 24rem; }
/* Cols-Variante: Übersichtszeile + 2 echte Spalten via .dd-col */
.nav-dropdown-menu.cols {
  width: 36rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0 .8rem; padding: .55rem .55rem 1rem;
}
.nav-dropdown-menu.cols > .nav-dropdown-menu-title,
.nav-dropdown-menu.cols > .nav-dropdown-menu-title + a {
  grid-column: 1 / -1;
}
.nav-dropdown-menu.cols .dd-col { display: flex; flex-direction: column; min-width: 0; }
.nav-dropdown-menu.cols .dd-col .nav-dropdown-menu-group:first-child { padding-top: .85rem; }
/* In der Cols-Variante (Highlights):
   Main-Titel in eigene Zeile (kein Umbruch), Sub-Titel rechtsbündig darunter */
.nav-dropdown-menu.cols { width: 52rem; }
@media (max-width: 700px) { .nav-dropdown-menu.cols { width: 100% !important; } }
.nav-dropdown-menu.cols .dd-col a,
.nav-dropdown-menu.cols > .nav-dropdown-menu-title + a {
  grid-template-columns: 8px 1fr;
  grid-template-rows: auto auto;
  row-gap: 0;
  align-items: start;
  white-space: normal;
}
.nav-dropdown-menu.cols .dd-col a::before,
.nav-dropdown-menu.cols > .nav-dropdown-menu-title + a::before {
  grid-row: 1; grid-column: 1;
  align-self: center;
  width: 6px; height: 6px;
}
.nav-dropdown-menu.cols .dd-col a::after,
.nav-dropdown-menu.cols > .nav-dropdown-menu-title + a::after { display: none; }
.nav-dropdown-menu.cols .dd-col a .dd-main,
.nav-dropdown-menu.cols > .nav-dropdown-menu-title + a .dd-main {
  grid-column: 2; grid-row: 1;
  display: block;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-dropdown-menu.cols .dd-col a .dd-sub,
.nav-dropdown-menu.cols > .nav-dropdown-menu-title + a .dd-sub {
  grid-column: 2; grid-row: 2;
  display: block;
  text-align: left;
  margin: 6px 0 0;
  line-height: 1;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-dropdown-menu-sep { display: block; height: 1px; background: var(--border); margin: .35rem .5rem; }
.nav-dropdown-menu .nav-dropdown-menu-group {
  grid-column: 1 / -1;
  font-family:'JetBrains Mono', monospace; font-size:.56rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
  padding: .85rem 1rem .3rem;
  display: flex; align-items: center; gap: .55rem;
}
.nav-dropdown-menu .nav-dropdown-menu-group::before {
  content:""; width: 14px; height: 1px; background: currentColor; opacity: .5;
}
/* Erste Gruppe ohne extra Top-Padding wenn direkt nach Title */
.nav-dropdown-menu-title + .nav-dropdown-menu-group { padding-top: .4rem; }
/* Group nach Link → klare Trennung */
.nav-dropdown-menu a + .nav-dropdown-menu-group { margin-top: .15rem; }

/* ============== MEGA-MENU (Variante für Highlights) ============== */
/* Damit der Mega-Container die volle Viewport-Breite einnehmen kann,
   braucht der Trigger position: static (nicht relative). Wir scopen das
   per .mega-trigger nur dort, wo's gewollt ist. */
.nav-dropdown.mega-trigger { position: static; }
.nav-dropdown.mega-trigger::after {
  /* die Brücke breiter machen, damit der Hover-Weg bis zum Mega-Panel reicht */
  left: 0; right: 0;
}
.nav-mega {
  position: absolute;
  left: 0; right: 0; top: 100%;
  margin-top: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 40px 80px -20px rgba(20,25,28,.25);
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .28s, transform .28s cubic-bezier(.2,.7,.2,1);
  z-index: 70;
}
.nav-dropdown.mega-trigger:hover .nav-mega,
.nav-dropdown.mega-trigger:focus-within .nav-mega {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
.nav-mega-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 2.2rem clamp(1.5rem, 4vw, 3rem) 2.6rem;
  display: grid; gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .nav-mega-inner { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.nav-mega-col h4 {
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
  margin: 0 0 1.1rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--border);
}
.nav-mega-col[data-g="buesum"] h4 { color: var(--c-buesum); }
.nav-mega-col[data-g="wessel"] h4 { color: var(--c-wessel); }
.nav-mega-col[data-g="neuen"]  h4 { color: var(--c-neuen); }
.nav-mega-col[data-g="urlauber"] h4 { color: var(--c-urlauber); }
.nav-mega-card {
  display: grid; grid-template-columns: 56px 1fr; gap: 1rem;
  padding: .85rem .5rem;
  border-radius: 4px;
  color: var(--fg);
  transition: background .25s;
  align-items: start;
}
.nav-mega-card + .nav-mega-card { margin-top: .15rem; }
.nav-mega-card:hover { background: var(--bg); color: var(--c-dd, var(--fg)); }
.nav-mega-card-img {
  width: 56px; height: 56px; overflow: hidden;
  background: var(--border);
  border-radius: 4px;
}
.nav-mega-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.nav-mega-card:hover .nav-mega-card-img img { transform: scale(1.08); }
.nav-mega-card-name {
  font-family:'Fraunces', serif; font-weight: 400; font-size: 1.05rem;
  line-height: 1.2; letter-spacing: -0.01em;
  display: block;
}
.nav-mega-card-sub {
  display: block;
  font-family:'JetBrains Mono', monospace; font-size: .6rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  margin-top: .35rem;
}
.nav-mega-card[data-g="buesum"]   { --c-dd: var(--c-buesum); }
.nav-mega-card[data-g="wessel"]   { --c-dd: var(--c-wessel); }
.nav-mega-card[data-g="neuen"]    { --c-dd: var(--c-neuen); }
.nav-mega-card[data-g="urlauber"] { --c-dd: var(--c-urlauber); }

.nav-live {
  position: relative;
  display:inline-flex; align-items:center; gap:.55rem;
  padding: .5rem .9rem; border-radius: 999px;
  background: rgba(252,250,245,.95);
  color: var(--fg);
  font-family:'JetBrains Mono', monospace; font-size:.68rem; text-transform: uppercase; letter-spacing:.12em;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.nav.scrolled .nav-live {
  background: var(--fg);
  color: var(--surface);
}
.nav-live::before {
  content:""; width:.45rem; height:.45rem; border-radius:99px;
  background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.7);
  animation: pulse 1.8s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,222,128,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(74,222,128,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}
.nav-live-pop {
  position: absolute; top: calc(100% + .6rem); right: 0;
  min-width: 320px; max-width: 420px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -20px rgba(20,25,28,.25);
  padding: 1.1rem 1.2rem;
  text-transform: none; letter-spacing: 0;
  font-family: 'Inter', system-ui, sans-serif;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
  z-index: 60;
}
.nav-live.open .nav-live-pop { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nav-live-pop-date {
  font-family:'JetBrains Mono', monospace; font-size:.65rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
  margin-bottom: .8rem;
}
.nav-live-row { display:flex; gap:.7rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.nav-live-row:last-child { border-bottom: none; }
.nav-live-time {
  font-family:'JetBrains Mono', monospace; font-size:.78rem; font-weight: 500;
  width: 3.2rem; flex-shrink: 0;
  color: var(--fg);
}
.nav-live-body { display:flex; flex-direction: column; gap:.15rem; min-width: 0; }
.nav-live-parish {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:'JetBrains Mono', monospace; font-size:.6rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
.nav-live-parish::before { content:""; width:.45rem; height:.45rem; border-radius:99px; background: var(--lc, var(--fg)); }
.nav-live-parish[data-gem="buesum"]   { --lc: var(--c-buesum); }
.nav-live-parish[data-gem="wessel"]   { --lc: var(--c-wessel); }
.nav-live-parish[data-gem="neuen"]    { --lc: var(--c-neuen); }
.nav-live-parish[data-gem="urlauber"] { --lc: var(--c-urlauber); }
.nav-live-title { font-size: .9rem; line-height: 1.3; }
.nav-live-people { font-family:'JetBrains Mono', monospace; font-size:.62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.nav-live-empty { font-size: .9rem; color: var(--muted); }

/* ============================ */
/* Section heading              */
/* ============================ */
.section-label {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  text-transform: uppercase; letter-spacing: .14em;
}
.section-label::before {
  content:""; width: 28px; height:1px; background: currentColor;
}

/* ============================ */
/* Buttons                      */
/* ============================ */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  padding: 1.05rem 1.7rem;
  border: 1px solid var(--fg); border-radius: 999px;
  font-weight: 500; font-size: .92rem;
  background: transparent; color: var(--fg);
  cursor: pointer; position: relative; overflow: hidden;
  transition: color .35s cubic-bezier(.2,.7,.2,1);
}
.btn::before {
  content:""; position: absolute; inset:0; background: var(--fg);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.7,0,.2,1); z-index:-1;
}
.btn:hover { color: var(--surface); }
.btn:hover::before { transform: translateY(0); }
.btn-solid { background: var(--fg); color: var(--surface); }
.btn-solid::before { background: var(--surface); }
.btn-solid:hover { color: var(--fg); }

/* ============================ */
/* Mask reveal                  */
/* ============================ */
.reveal-line { display:block; overflow:hidden; padding-bottom: .05em; }
.reveal-line > span { display:inline-block; transform: translateY(110%); will-change: transform; }

/* ============================ */
/* Marquee                      */
/* ============================ */
.marquee { display:flex; gap:0; white-space:nowrap; will-change: transform; }
.marquee-track { display:flex; gap:3rem; padding-right:3rem; animation: marquee 38s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ============================ */
/* Selection                    */
/* ============================ */
::selection { background: var(--fg); color: var(--bg); }

/* ============================ */
/* Reduced motion               */
/* ============================ */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================ */
/* Gemeinde-Tag (chip)          */
/* ============================ */
.tag {
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .35rem .65rem .35rem .55rem;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; text-transform: uppercase; letter-spacing:.12em;
  color: var(--fg);
}
.tag::before {
  content:""; width:.55rem; height:.55rem; border-radius:99px;
  background: var(--tag-color, var(--fg));
}
.tag-buesum   { --tag-color: var(--c-buesum);   }
.tag-wessel   { --tag-color: var(--c-wessel);   }
.tag-neuen    { --tag-color: var(--c-neuen);    }
.tag-urlauber { --tag-color: var(--c-urlauber); }

/* ============================ */
/* Kategorie-Farben             */
/* (für Blog-Karten — nach KAT, */
/*  nicht nach Gemeinde)        */
/* ============================ */
:root {
  --c-cat-jugend:      #5A7A3C;  /* grün */
  --c-cat-mohltied:    #C9461F;  /* rot */
  --c-cat-konzert:     #6B4E8C;  /* violett */
  --c-cat-predigt:     #0B5C73;  /* meerblau */
  --c-cat-kinder:      #E8A33D;  /* gelb-orange */
  --c-cat-familie:     #D67C2E;  /* terracotta */
  --c-cat-ehrenamt:    #3E8E7E;  /* türkis */
  --c-cat-foerder:     #8B7355;  /* sand */
  --c-cat-andacht:     #5A6B7D;  /* schiefer */
  --c-cat-magazin:     #1F4D5C;  /* tiefes blau */
  --c-cat-default:     #2D3A3F;  /* anthrazit */
}

/* ============================ */
/* Contact Drawer (Team Member) */
/* ============================ */
.contact-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 25, 28, .55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.2,.7,.2,1);
}
.contact-modal.open { opacity: 1; pointer-events: auto; }

/* Center-Popup — editorial */
.contact-modal-box {
  position: relative;
  width: 100%; max-width: 640px;
  max-height: calc(100vh - 3rem);
  background: var(--bg);
  display: grid;
  grid-template-rows: minmax(320px, 42vh) 1fr;
  overflow-y: auto;
  transform: translateY(24px) scale(.97);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.contact-modal.open .contact-modal-box { transform: translateY(0) scale(1); }
@media (min-width: 700px) {
  .contact-modal-box { grid-template-rows: minmax(360px, 48vh) 1fr; }
}

/* HEAD: Foto-Vollbild mit Gemeindefarben-Gradient */
.contact-modal-head {
  position: relative;
  background: var(--c-this, var(--fg));
  overflow: hidden;
  isolation: isolate;
}
.contact-modal-head img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.95);
}
.contact-modal-head::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(20,25,28,.18) 0%, rgba(20,25,28,.05) 30%, rgba(20,25,28,.55) 75%, rgba(20,25,28,.92) 100%);
}
.contact-modal-close {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 3;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid rgba(252,250,245,.5);
  color: var(--surface);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s, border-color .25s;
}
.contact-modal-close:hover { transform: rotate(90deg); background: var(--surface); color: var(--fg); border-color: var(--surface); }

.contact-modal-head-text {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: clamp(1.5rem, 4vw, 2.8rem);
  color: var(--surface);
}
.contact-modal-role {
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  text-transform: uppercase; letter-spacing: .18em; opacity: .85;
  margin-bottom: .65rem;
  display: inline-flex; align-items: center; gap: .55rem;
}
.contact-modal-role::before {
  content:""; width:.5rem; height:.5rem; border-radius:99px;
  background: var(--c-this, var(--surface));
  box-shadow: 0 0 0 4px rgba(252,250,245,.15);
}
.contact-modal-name {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: .95; letter-spacing: -0.035em;
  margin: 0;
}
.contact-modal-tags { margin-top: 1.2rem; display: flex; gap: .4rem; flex-wrap: wrap; }
.contact-modal-tag {
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  text-transform: uppercase; letter-spacing: .16em;
  padding: .35rem .65rem .35rem .55rem;
  background: transparent; color: var(--surface);
  border: 1px solid rgba(252,250,245,.4);
  display:inline-flex; align-items:center; gap:.45rem;
}
.contact-modal-tag::before {
  content:""; width:.4rem; height:.4rem; border-radius:99px; background: var(--mtg, var(--surface));
}
.contact-modal-tag[data-g="buesum"]   { --mtg: var(--c-buesum); }
.contact-modal-tag[data-g="wessel"]   { --mtg: var(--c-wessel); }
.contact-modal-tag[data-g="neuen"]    { --mtg: var(--c-neuen); }
.contact-modal-tag[data-g="urlauber"] { --mtg: var(--c-urlauber); }

/* BODY */
.contact-modal-body {
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--bg);
}
.contact-modal-section-label {
  font-family:'JetBrains Mono', monospace; font-size:.65rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
  display: flex; align-items: center; gap: .65rem;
  margin-bottom: 1.5rem;
}
.contact-modal-section-label::before { content:""; width: 28px; height: 1px; background: currentColor; }

.contact-modal-focus {
  font-family:'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 2vw, 1.85rem); line-height: 1.3; letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 2.5rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--c-this, var(--fg));
  max-width: 28em;
}

/* Editorial-Style Rows: keine Boxen, sondern Linien-getrennt */
.contact-rows {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--border);
}
.contact-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  transition: padding-left .35s cubic-bezier(.2,.7,.2,1), color .25s;
}
.contact-row:hover { padding-left: .8rem; color: var(--c-this, var(--fg)); }
.contact-row svg.contact-row-icon {
  flex-shrink: 0; width: 18px; height: 18px; stroke-width: 1.5;
  color: var(--c-this, var(--fg));
  opacity: .8;
}
.contact-row-text { min-width: 0; }
.contact-row-label {
  font-family:'JetBrains Mono', monospace; font-size:.6rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--muted);
  margin-bottom: .15rem;
}
.contact-row-value {
  font-family:'Fraunces', serif; font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.2; letter-spacing: -0.01em;
  word-break: break-word;
}
.contact-row-arrow {
  width: 16px; height: 16px;
  color: var(--muted);
  opacity: .5;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s, color .25s;
}
.contact-row:hover .contact-row-arrow {
  transform: translateX(4px);
  opacity: 1;
  color: var(--c-this, var(--fg));
}
.contact-modal-empty {
  font-family:'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: 1.1rem; color: var(--muted); line-height: 1.5;
  padding: 1rem 0;
}

/* ============================ */
/* Like Heart                   */
/* ============================ */
.kw-like {
  position: absolute; top: .85rem; right: .85rem; z-index: 4;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(252,250,245,.85);
  backdrop-filter: blur(4px);
  border: none; cursor: pointer;
  color: var(--fg);
  font-size: 1rem;
  transition: background .25s, color .25s, transform .25s cubic-bezier(.2,.7,.2,1);
}
.kw-like:hover { transform: scale(1.1); background: var(--surface); }
.kw-like svg { width: 16px; height: 16px; }
.kw-like.liked { background: var(--c-wessel); color: var(--surface); }
.kw-like.liked svg { fill: currentColor; stroke: currentColor; }
.kw-like-count {
  position: absolute; top: .85rem; right: 3.2rem; z-index: 4;
  padding: .35rem .65rem;
  background: rgba(252,250,245,.85);
  backdrop-filter: blur(4px);
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  font-weight: 500;
  display: none;
}
.kw-like-count.show { display: inline-block; }

/* ============================ */
/* Special Hero Card            */
/* ============================ */
.special-hero {
  position: relative;
  background: var(--c-this, var(--fg));
  color: var(--surface);
  overflow: hidden;
  isolation: isolate;
  border-radius: 4px;
}
.special-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .42; z-index: -1;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.special-hero:hover img { transform: scale(1.05); }
.special-hero::before {
  content:""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--c-this, var(--fg)) 0%, rgba(20,25,28,.85) 100%);
  mix-blend-mode: multiply;
}
.special-hero-inner {
  padding: clamp(3rem, 6vw, 5rem);
  display: grid; gap: 2rem;
  min-height: 480px;
}
@media (min-width: 900px) {
  .special-hero-inner { grid-template-columns: 1.4fr 1fr; align-items: end; }
}
.special-overline {
  font-family: 'JetBrains Mono', monospace; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .2em; opacity: .9;
  display: inline-flex; align-items: center; gap: .55rem;
}
.special-overline::before { content:""; width:.55rem; height:.55rem; border-radius:99px; background: var(--surface); }
.special-name {
  font-family: 'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 5rem); line-height: .92; letter-spacing: -0.04em;
  margin: 1rem 0;
}
.special-name em { font-style: italic; }
.special-desc {
  max-width: 38rem; line-height: 1.55; font-size: 1.05rem;
  opacity: .92;
}
.special-meta {
  font-family: 'JetBrains Mono', monospace; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .14em; opacity: .85;
  display: flex; flex-direction: column; gap: .6rem;
}
.special-meta b { font-weight: 500; font-size: 1.05rem; text-transform: none; letter-spacing: 0; }

/* ============================ */
/* Footer                       */
/* ============================ */
.site-footer {
  background: var(--fg); color: var(--surface);
  padding: 5rem 0 2rem;
}
.site-footer a { color: var(--surface); }
.footer-grid { display:flex; flex-direction: column; gap: 3rem; }
.footer-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.4rem, 5vw, 4.5rem);
  font-weight: 300; letter-spacing: -0.035em; line-height: .95;
  margin: 0;
}
.footer-headline em { font-style: italic; color: var(--c-urlauber); }
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 700px)  { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .footer-cols { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
.footer-col {
  font-family:'Inter', system-ui, sans-serif;
  font-size: .85rem;
  line-height: 1.65;
  opacity: .92;
}
.footer-col-title {
  font-family:'JetBrains Mono', monospace;
  font-size: .65rem;
  text-transform: uppercase; letter-spacing: .16em;
  opacity: .55;
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: .55rem;
}
.footer-col-title::before {
  content: ''; width: .5rem; height: .5rem; border-radius: 999px;
  background: var(--footer-c, var(--c-urlauber));
}
.footer-col[data-g="buesum"]   { --footer-c: var(--c-buesum); }
.footer-col[data-g="wessel"]   { --footer-c: var(--c-wessel); }
.footer-col[data-g="urlauber"] { --footer-c: var(--c-urlauber); }
.footer-col[data-g="follow"]   { --footer-c: #ccc; }
.footer-col strong {
  display: block; font-weight: 500; opacity: 1;
  margin-bottom: .2rem;
}
/* Logos im Footer — alle exakt gleich hoch, automatisch breit */
.footer-logos {
  display: flex; align-items: flex-end;
  gap: 1.4rem; flex-wrap: wrap;
  margin-bottom: 1.2rem;
  min-height: 60px;
}
.footer-logo {
  display: block;
  height: 56px; width: auto;
  max-width: 130px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
}
/* Social-Icons: kein Rahmen, harmonischer Look */
.footer-socials {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: 1rem;
}
.footer-socials a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 0; padding: 0;
  color: rgba(252,250,245,.7);
  transition: color .25s, transform .25s;
  border-bottom: 0 !important;
}
.footer-socials a:hover {
  color: var(--footer-c, var(--c-urlauber));
  transform: translateY(-2px);
  background: transparent;
}
.footer-socials svg { width: 20px; height: 20px; }
.footer-col a {
  display: inline-block;
  color: var(--surface);
  border-bottom: 1px solid rgba(252,250,245,.25);
  padding-bottom: .05em;
  transition: border-color .25s;
}
.footer-col a:hover { border-bottom-color: var(--footer-c, var(--c-urlauber)); }
.footer-col .footer-sep { display: block; height: 1px; background: rgba(252,250,245,.12); margin: .9rem 0; border: none; }

.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(252,250,245,.15);
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items: center;
  font-family:'JetBrains Mono', monospace; font-size: .68rem; opacity:.55;
  text-transform: uppercase; letter-spacing: .12em;
}

/* ============================ */
/* Pills (Filter überall)       */
/* ============================ */
.pill {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem .5rem .75rem; border-radius: 999px;
  background: transparent; border: 1px solid var(--border);
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; color: var(--fg);
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.pill::before {
  content:""; width:.5rem; height:.5rem; border-radius:99px;
  background: var(--pill-c, var(--fg));
}
.pill:hover { border-color: var(--pill-c, var(--fg)); transform: translateY(-1px); }
.pill.active {
  background: var(--pill-c, var(--fg));
  border-color: var(--pill-c, var(--fg));
  color: var(--surface);
}
.pill.active::before { background: var(--surface); }
.pill[data-gem="buesum"]   { --pill-c: var(--c-buesum); }
.pill[data-gem="wessel"]   { --pill-c: var(--c-wessel); }
.pill[data-gem="neuen"]    { --pill-c: var(--c-neuen); }
.pill[data-gem="urlauber"] { --pill-c: var(--c-urlauber); }
.pill[data-gem="all"]      { --pill-c: var(--fg); }
.pill[data-cat="all"]      { --pill-c: var(--fg); }

/* ============================ */
/* USPs (auf jeder Seite)       */
/* ============================ */
.usps { padding: 7rem 0 6rem; }
.usps-head { margin-bottom: 4rem; }
.usps-title { font-family:'Fraunces', serif; font-weight: 300; font-size: clamp(2.8rem, 7vw, 6rem); line-height:.92; letter-spacing: -0.04em; }
.usps-title em { font-style: italic; font-weight: 400; }
.usps-grid { display: flex; flex-direction: column; gap: 1.5rem; }
.usp-card {
  position: relative;
  background: var(--c-usp, var(--fg));
  color: var(--surface);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr;
  min-height: 460px;
  max-height: 600px;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 800px) {
  .usp-card { grid-template-columns: 1.2fr 1fr; min-height: 500px; max-height: 600px; }
}
.usp-card:hover { transform: translateY(-4px); }
.usp-card[data-c="buesum"]   { --c-usp: var(--c-buesum); }
.usp-card[data-c="wessel"]   { --c-usp: var(--c-wessel); }
.usp-card[data-c="neuen"]    { --c-usp: var(--c-neuen); }
.usp-card[data-c="urlauber"] { --c-usp: var(--c-urlauber); }
.usp-content {
  padding: clamp(2rem, 4vw, 3.5rem);
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  position: relative; z-index: 2;
}
.usp-overline {
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  text-transform: uppercase; letter-spacing: .18em; opacity: .85;
  display: inline-flex; align-items: center; gap: .55rem;
}
.usp-overline::before { content:""; width:.55rem; height:.55rem; border-radius:99px; background: var(--surface); }
.usp-name {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.5rem, 5.5vw, 4.5rem); line-height:.95; letter-spacing: -0.04em;
  margin: 1rem 0;
}
.usp-name em { font-style: italic; }
.usp-desc {
  max-width: 32rem; line-height: 1.55; font-size: 1.05rem;
  opacity: .92; margin: 0 0 1rem;
}
.usp-cta {
  display: inline-flex; align-items: center; gap: .6rem;
  align-self: start;
  padding: .9rem 1.4rem;
  background: var(--surface); color: var(--c-usp);
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 500;
  transition: gap .35s;
}
.usp-card:hover .usp-cta { gap: 1.1rem; }
.usp-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1.2rem; padding-top: 1.2rem;
  border-top: 1px solid rgba(252,250,245,.18);
}
.usp-traeger {
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  text-transform: uppercase; letter-spacing: .14em;
  opacity: .85;
  display: inline-flex; align-items: center; gap: .55rem;
}
.usp-traeger::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.usp-avatars { display: flex; align-items: center; }
.usp-avatar {
  width: 54px; height: 54px;
  border-radius: 999px;
  border: 2px solid var(--c-usp, var(--fg));
  background: var(--surface);
  margin-left: -14px;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-family:'Fraunces', serif; font-style: italic; font-weight: 400;
  font-size: 1.1rem; color: var(--c-usp, var(--fg));
  transition: transform .35s, z-index 0s;
  position: relative; z-index: 1;
}
.usp-avatar:first-child { margin-left: 0; }
.usp-avatar:hover { transform: translateY(-3px) scale(1.08); z-index: 2; }
.usp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.usp-image {
  position: relative; overflow: hidden; min-height: 280px;
  background: rgba(0,0,0,.15);
}
.usp-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
  filter: saturate(.95);
}
.usp-card:hover .usp-image img { transform: scale(1.04); }

/* ============================ */
/* Member-Card (Personen)       */
/* ============================ */
.member-card {
  background: transparent;
  display: flex; flex-direction: column;
  cursor: pointer;
  position: relative;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.member-card:hover { transform: translateY(-6px); }
.member-img {
  position: relative; aspect-ratio: 3/4; overflow: hidden;
  background: var(--member-c, var(--fg));
  margin-bottom: 1.1rem;
}
.member-img::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(180deg, transparent, var(--member-c, var(--fg)));
  opacity: 0; mix-blend-mode: multiply;
  transition: opacity .5s;
}
.member-card:hover .member-img::after { opacity: .25; }
.member-img img { width:100%; height:100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.member-card:hover .member-img img { transform: scale(1.04); }
.member-body { padding: 0; display:flex; flex-direction: column; gap:.5rem; }
.member-role {
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--member-c, var(--fg));
  display: inline-flex; align-items: center; gap: .55rem;
}
.member-role::before { content:""; width: 18px; height: 1px; background: currentColor; }
.member-name {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(1.6rem, 2vw, 1.9rem);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: .15rem 0 .1rem;
  transition: color .25s;
}
.member-card:hover .member-name { color: var(--member-c, var(--fg)); }
.member-tags { display:flex; gap:.3rem; flex-wrap: wrap; margin-top: .3rem; }
.member-tag {
  font-family:'JetBrains Mono', monospace; font-size:.58rem;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .25rem .5rem .25rem .4rem;
  border-radius: 999px;
  display: inline-flex; align-items:center; gap:.35rem;
  background: rgba(0,0,0,.04);
}
.member-tag::before { content:""; width:.4rem; height:.4rem; border-radius:99px; background: var(--tag-c, var(--fg)); }
.member-tag[data-g="buesum"]   { --tag-c: var(--c-buesum); }
.member-tag[data-g="wessel"]   { --tag-c: var(--c-wessel); }
.member-tag[data-g="neuen"]    { --tag-c: var(--c-neuen); }
.member-tag[data-g="urlauber"] { --tag-c: var(--c-urlauber); }
.member-focus { color: var(--muted); font-size:.88rem; line-height: 1.5; margin-top:.3rem; }

/* ============================ */
/* Highlight-Marker (★)         */
/* ============================ */
.hl-marker {
  display: none !important;
  position: absolute; top: .85rem; left: .85rem; z-index: 4;
  align-items: center; gap: .4rem;
  padding: .35rem .7rem .35rem .55rem;
  border-radius: 999px;
  background: var(--c-urlauber);
  color: var(--fg);
  font-family:'JetBrains Mono', monospace; font-size: .62rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  box-shadow: 0 6px 16px -6px rgba(232,163,61,.5), 0 0 0 3px rgba(252,250,245,.85);
}
.hl-marker svg { width: 12px; height: 12px; flex-shrink: 0; }
.hl-marker::after { content: "Highlight"; }
/* Auf Card-Listen mit wenig Platz nur Sternchen, ohne Label */
.event-card .hl-marker::after,
.jk-card .hl-marker::after { content: ""; }
.event-card .hl-marker,
.jk-card .hl-marker {
  padding: 0;
  width: 28px; height: 28px;
  justify-content: center;
}
/* feine Akzentlinie oben an Highlight-Cards */
.event-card.is-highlight::before,
.hi-card-highlight::before {
  content:""; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--c-urlauber); z-index: 3;
}

/* ============================ */
/* Schwebende Aktions-Buttons   */
/* ============================ */
.fab-up {
  position: fixed; right: 1.6rem; bottom: 1.6rem;
  width: 50px; height: 50px;
  border-radius: 999px;
  background: var(--fg); color: var(--surface);
  border: 0;
  display: inline-flex; align-items: center; justify-content: flex-end;
  cursor: pointer;
  z-index: 90;
  opacity: 0; transform: translateY(20px) scale(.85);
  pointer-events: none;
  overflow: hidden;
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  text-transform: uppercase; letter-spacing:.12em; white-space: nowrap;
  padding: 0;
  transition: opacity .35s, transform .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, width .35s cubic-bezier(.2,.7,.2,1), padding .35s cubic-bezier(.2,.7,.2,1), gap .35s cubic-bezier(.2,.7,.2,1);
  box-shadow: 0 14px 30px -10px rgba(20,25,28,.4);
  gap: 0;
}
.fab-up.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-up:hover {
  background: var(--c-konfi); color: var(--fg);
  width: auto;
  padding: 0 1.1rem 0 .9rem;
  gap: .55rem;
  justify-content: center;
}
.fab-up-label {
  display: inline-block;
  max-width: 0; opacity: 0;
  transition: max-width .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
}
.fab-up:hover .fab-up-label { max-width: 10rem; opacity: 1; }
.fab-up svg { width: 18px; height: 18px; flex-shrink: 0; margin-right: 16px; transition: margin .35s; }
.fab-up:hover svg { margin-right: 0; }

/* ============================ */
/* Subseiten Zurück-Pfeil       */
/* ============================ */
.sub-back {
  position: fixed; bottom: 1.6rem; left: 1.6rem;
  z-index: 45;
  display: inline-flex; align-items: center; gap: 0;
  width: 50px; height: 50px;
  padding: 0;
  background: var(--surface);
  color: var(--fg);
  border-radius: 999px;
  font-family:'JetBrains Mono', monospace; font-size:.68rem;
  text-transform: uppercase; letter-spacing:.12em; white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(20,25,28,.4);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: width .35s cubic-bezier(.2,.7,.2,1), gap .35s cubic-bezier(.2,.7,.2,1), padding .35s cubic-bezier(.2,.7,.2,1), background .25s, color .25s;
}
.sub-back-label {
  display: inline-block;
  max-width: 0; opacity: 0;
  transition: max-width .35s cubic-bezier(.2,.7,.2,1), opacity .25s;
}
.sub-back:hover {
  width: auto;
  gap: .55rem;
  padding: 0 1.1rem 0 .9rem;
  background: var(--c-konfi); color: var(--fg);
  border-color: var(--c-konfi);
}
.sub-back:hover .sub-back-label {
  max-width: 12rem; opacity: 1;
}
.sub-back svg { width: 16px; height: 16px; flex-shrink: 0; margin-left: 17px; }
.sub-back:hover svg { margin-left: 0; }
@media (max-width: 1023px) {
  .sub-back { bottom: 1.1rem; left: 1.1rem; width: 44px; height: 44px; }
  .sub-back svg { width: 14px; height: 14px; margin-left: 15px; }
}

/* ============================================================
   ============== KW DESIGN-SYSTEM (konsolidiert) =============
   ============================================================
   Drei Page-Typen + wiederverwendbare Komponenten.
   Jede Subseite setzt :root { --c-this: var(--c-XYZ); } und nutzt diese Klassen.
   ============================================================ */

/* === KW.HERO (Magazin/Highlights — solid color hero) === */
.kw-hero {
  position: relative;
  padding: clamp(6rem, 11vw, 9rem) 0 clamp(3rem, 6vw, 5rem);
  color: var(--surface);
  overflow: hidden; isolation: isolate;
  background: var(--c-this, var(--c-buesum));
}
.kw-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at top right, rgba(252,250,245,.12), transparent 50%),
    radial-gradient(ellipse at bottom left, rgba(20,25,28,.4), transparent 60%);
}
.kw-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: end;
}
@media (min-width: 900px) { .kw-hero-grid { grid-template-columns: 1.4fr 1fr; gap: 5rem; } }
.kw-hero-overline {
  font-family:'JetBrains Mono', monospace; font-size:.78rem;
  text-transform: uppercase; letter-spacing: .2em; opacity:.9;
  display:inline-flex; align-items:center; gap:.55rem;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}
.kw-hero-overline::before {
  content:""; width:.55rem; height:.55rem; border-radius:99px; background: var(--surface);
}
.kw-hero-title {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(3rem, 11vw, 9.5rem); line-height:.88; letter-spacing: -0.05em;
  margin: 0; color: var(--surface);
}
.kw-hero-title em { font-style: italic; }
.kw-hero-sub {
  max-width: 36rem; margin: clamp(1rem, 2vw, 1.5rem) 0 clamp(1.5rem, 3vw, 2rem);
  font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.55; opacity:.92;
}
.kw-hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.kw-hero .btn { color: var(--surface); border-color: rgba(252,250,245,.65); }
.kw-hero .btn::before { background: var(--surface); }
.kw-hero .btn:hover { color: var(--c-this, var(--fg)); }
.kw-hero .btn-solid {
  background: var(--surface); border-color: var(--surface); color: var(--c-this, var(--fg));
}
.kw-hero .btn-solid::before { background: var(--c-this, var(--fg)); }
.kw-hero .btn-solid:hover { color: var(--surface); }
.kw-hero-side {
  font-family:'JetBrains Mono', monospace; font-size:.78rem;
  text-transform: uppercase; letter-spacing: .14em; opacity:.92;
}
.kw-hero-side b {
  display: block; font-family:'Fraunces', serif; font-weight: 400;
  font-size: 1.4rem; text-transform: none; letter-spacing: -0.01em;
  margin-top: .25rem;
}
.kw-hero-side > div + div { margin-top: 1.2rem; }

/* === KW.INFO-STRIP === */
.kw-info-strip {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: clamp(1rem, 2vw, 1.4rem) 0;
}
.kw-info-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem;
}
@media (min-width: 700px) { .kw-info-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .kw-info-grid { grid-template-columns: repeat(4, 1fr); } }
.kw-info-item {
  font-family:'JetBrains Mono', monospace; font-size:.66rem;
  text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
}
.kw-info-item b {
  display: block; font-family:'Fraunces', serif; font-weight: 400;
  font-size: 1.1rem; letter-spacing: -0.01em; color: var(--fg);
  text-transform: none; margin-top: .3rem;
}

/* === KW.STORY === */
.kw-story { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.kw-story-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 1000px) { .kw-story-grid { grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } }
.kw-story-label {
  font-family:'JetBrains Mono', monospace; font-size:.7rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--c-this, var(--c-buesum));
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem;
}
.kw-story-label::before { content:""; width: 28px; height: 1px; background: currentColor; }
.kw-story-headline {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height:.95; letter-spacing: -0.04em;
  margin: 0 0 1.5rem;
}
.kw-story-headline em { font-style: italic; color: var(--c-this, var(--c-buesum)); }
.kw-story-text { font-family:'Fraunces', serif; font-weight: 300; font-size: 1.12rem; line-height: 1.65; color: rgba(20,25,28,.92); }
.kw-story-text p { margin: 0 0 1.3em; }
.kw-story-pull {
  font-family:'Fraunces', serif; font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.3;
  border-left: 2px solid var(--c-this, var(--c-buesum)); padding-left: 1.4rem;
  margin: 1.8rem 0; max-width: 28em;
}
.kw-story-img {
  position: relative; aspect-ratio: 4/5; max-width: 460px; margin-left: auto;
  background: var(--surface); overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(20,25,28,.5), 0 10px 30px -10px rgba(20,25,28,.2);
}
.kw-story-img img { width:100%; height:100%; object-fit: cover; display: block; }
.kw-story-img-cap {
  position: absolute; bottom: 0; left:0; right:0;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(180deg, transparent, rgba(20,25,28,.85));
  color: var(--surface);
  font-family:'JetBrains Mono', monospace; font-size:.66rem;
  text-transform: uppercase; letter-spacing:.14em;
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
}

/* === KW.PERSON-CARD === */
/* Vereinheitlichtes Personen-Layout (ersetzt b-member, k-people-grid .member-card etc.) */
.kw-people { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.kw-people-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 44rem; }
.kw-people-title {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4rem); line-height:.95; letter-spacing: -0.04em;
}
.kw-people-title em { font-style: italic; color: var(--c-this, var(--c-buesum)); }
.kw-people-grid {
  display: grid; grid-template-columns: 1fr; gap: 1.2rem;
}
@media (min-width: 600px) { .kw-people-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .kw-people-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kw-people-grid { grid-template-columns: repeat(4, 1fr); } }
.kw-people-grid.cols-3 { max-width: 1000px; }
.kw-people-grid.cols-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .kw-people-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.kw-people-grid.cols-2 { max-width: 720px; }
.kw-people-grid.cols-2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .kw-people-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }

/* === KW.SECTION-LABEL (einheitlich) === */
.kw-section-label {
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:'JetBrains Mono', monospace; font-size:.72rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--c-this, var(--c-buesum));
  margin-bottom: 1.2rem;
}
.kw-section-label::before {
  content:""; width: 28px; height:1px; background: currentColor;
}

/* === KW.CTA-CARD === */
.kw-cta { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem); }
.kw-cta-card {
  background: var(--c-this, var(--c-buesum)); color: var(--surface);
  padding: clamp(2rem, 4vw, 4rem);
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 800px) { .kw-cta-card { grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: end; } }
.kw-cta-title {
  font-family:'Fraunces', serif; font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.5rem); line-height:.95; letter-spacing: -0.04em;
}
.kw-cta-title em { font-style: italic; }
.kw-cta-actions { display: flex; flex-direction: column; gap: .9rem; }
.kw-cta-actions a {
  font-family:'Fraunces', serif; font-size: 1.1rem;
  border-bottom: 1px solid rgba(252,250,245,.5); padding-bottom: .25rem;
  transition: border-color .25s;
}
.kw-cta-actions a:hover { border-bottom-color: var(--surface); }

/* === KW.TIMELINE === */
.kw-timeline {
  display: grid; grid-template-columns: 1fr; gap: 1.4rem;
  border-left: 2px solid var(--c-this, var(--c-buesum));
  padding-left: 2rem; margin-left: .5rem;
}
.kw-tl-item {
  position: relative;
  font-family:'Fraunces', serif; font-weight: 300; font-size: 1.1rem; line-height: 1.55;
  color: rgba(20,25,28,.88);
}
.kw-tl-item::before {
  content: ""; position: absolute; left: -2.6rem; top: .55rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-this, var(--c-buesum));
  box-shadow: 0 0 0 4px var(--bg);
}
.kw-tl-year {
  display: block; font-family:'JetBrains Mono', monospace; font-size:.7rem;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--c-this, var(--c-buesum)); margin-bottom: .25rem;
}

/* === KW.GRID-CARD (für Listen wie Termine, Wege, Features) === */
.kw-cards { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 700px) { .kw-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kw-cards { grid-template-columns: repeat(3, 1fr); } }
.kw-cards.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 600px) { .kw-cards.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kw-cards.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.kw-card {
  background: var(--bg); border: 1px solid var(--border);
  padding: 1.6rem 1.6rem 1.8rem;
  display: flex; flex-direction: column; gap: .85rem;
  transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .25s;
  position: relative;
}
.kw-card:hover { transform: translateY(-3px); border-color: var(--c-this, var(--c-buesum)); }
.kw-card-tag {
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--c-this, var(--c-buesum));
}
.kw-card-title { font-family:'Fraunces', serif; font-weight: 400; font-size: 1.4rem; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.kw-card-title em { font-style: italic; color: var(--c-this, var(--c-buesum)); }
.kw-card-text { font-family:'Fraunces', serif; font-weight: 300; font-size: 1rem; line-height: 1.55; color: rgba(20,25,28,.85); margin: 0; flex: 1; }
.kw-card-meta {
  font-family:'JetBrains Mono', monospace; font-size:.6rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  display: flex; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--border); padding-top: .85rem; margin-top: .3rem;
}
.kw-card-meta b { color: var(--fg); font-family:'Fraunces', serif; font-weight: 400; font-size: .9rem; text-transform: none; letter-spacing: 0; }
.kw-card-dot {
  display: inline-block; width: .42rem; height: .42rem; border-radius: 99px;
  background: var(--c-this, var(--c-buesum)); margin-right: .35rem;
}

/* === KW.MOBILE === */
@media (max-width: 600px) {
  .kw-hero-grid > div + div { margin-top: 1rem; }
  .kw-story-pull { font-size: 1.2rem; padding-left: 1rem; }
}

/* === KW.PERSON-CARD — wiederverwendbare Personen-Karte === */
/* Variante 1: Vollkarte mit Foto oben + Body. Triggert .contact-modal. */
.person-card {
  display: flex; flex-direction: column; gap: 0;
  background: var(--bg); border: 1px solid var(--border);
  overflow: hidden; cursor: pointer;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s, box-shadow .25s;
  position: relative;
  --pc-color: var(--c-this, var(--c-buesum));
}
.person-card:hover {
  transform: translateY(-4px);
  border-color: var(--pc-color);
  box-shadow: 0 18px 40px -20px rgba(20,25,28,.25);
}
.person-card-img {
  aspect-ratio: 1 / 1;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.person-card-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.person-card:hover .person-card-img img { transform: scale(1.05); filter: saturate(1.05); }
.person-card-img::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(20,25,28,.35));
  opacity: 0; transition: opacity .35s;
}
.person-card:hover .person-card-img::after { opacity: 1; }
.person-card-body {
  padding: 1.1rem 1.2rem 1.3rem;
  display: flex; flex-direction: column; gap: .45rem;
}
.person-card-role {
  font-family:'JetBrains Mono', monospace; font-size:.62rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--muted);
}
.person-card-name {
  font-family:'Fraunces', serif; font-weight: 400;
  font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--fg);
  transition: color .25s;
}
.person-card:hover .person-card-name { color: var(--pc-color); }
.person-card-tags {
  display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .2rem;
}
.person-card-tag {
  font-family:'JetBrains Mono', monospace; font-size: .56rem;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .25rem .55rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--muted);
}
.person-card-tag[data-g="buesum"]   { color: var(--c-buesum);   border-color: rgba(11,92,115,.3); }
.person-card-tag[data-g="wessel"]   { color: var(--c-wessel);   border-color: rgba(201,70,31,.3); }
.person-card-tag[data-g="neuen"]    { color: var(--c-neuen);    border-color: rgba(90,122,60,.3); }
.person-card-tag[data-g="urlauber"] { color: var(--c-urlauber); border-color: rgba(196,206,70,.5); }
.person-card-focus {
  font-family:'Fraunces', serif; font-weight: 300; font-size: .95rem;
  line-height: 1.45; color: rgba(20,25,28,.7);
  margin-top: .3rem;
}

/* === KW.STAGE für PDF-Reader === */
.kw-pdf-stage {
  display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
}
.kw-pdf-pages {
  display: flex; gap: 0; max-width: 100%;
  background: linear-gradient(180deg, #1c2024 0%, #14191c 50%, #0d1014 100%);
  padding: 1.5rem 1.4rem 1.3rem;
  border-radius: 4px;
  position: relative;
  box-shadow:
    0 40px 80px -20px rgba(20,25,28,.55),
    0 12px 30px -10px rgba(20,25,28,.25),
    inset 0 0 0 1px rgba(252,250,245,.04);
}
.kw-pdf-pages::before {
  content:""; position: absolute; top: 1.5rem; bottom: 1.3rem;
  left: 50%; width: 30px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.35) 70%, transparent 100%);
  z-index: 2; pointer-events: none;
}
.kw-pdf-canvas {
  background: var(--surface);
  display: block; max-width: 100%; height: auto;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 0 0 1px rgba(20,25,28,.05);
  position: relative; z-index: 1;
}
.kw-pdf-bar {
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px;
  font-family:'JetBrains Mono', monospace; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .14em;
}
.kw-pdf-btn {
  background: transparent; border: 0; padding: .4rem;
  cursor: pointer; color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  transition: background .25s, color .25s;
}
.kw-pdf-btn:hover { background: var(--bg); color: var(--c-this, var(--c-buesum)); }
.kw-pdf-btn:disabled { opacity: .3; cursor: not-allowed; }
.kw-pdf-btn svg { width: 18px; height: 18px; }
.kw-pdf-num { min-width: 6rem; text-align: center; color: var(--muted); }
.kw-pdf-num strong { color: var(--fg); font-weight: 500; }

/* === KW.MOBILE-NAV (Burger) === */
.nav-burger {
  display: none;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  cursor: pointer; padding: 0;
  position: relative; z-index: 80;
  color: inherit;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.nav-burger-bar {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.7,0,.2,1), top .35s, opacity .2s;
}
.nav-burger-bar:nth-child(1) { top: 16px; }
.nav-burger-bar:nth-child(2) { top: 21px; }
.nav-burger-bar:nth-child(3) { top: 26px; }
.nav-burger.open .nav-burger-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-burger.open .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger.open .nav-burger-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 1023px) {
  /* Burger sichtbar, Desktop-Nav-Links versteckt — Burger sitzt sicher in der Nav-Bar */
  .nav-burger { display: block; }
  .nav-live { display: none !important; }

  /* Klassische Desktop-Nav-Items ausblenden — wir ersetzen sie durch ein dezidiertes Overlay */
  .nav-links {
    display: none !important;
  }

  /* sub-back unterhalb der Nav-Bar zentriert lassen, aber bei offenem Menü verstecken */
  body.nav-open .sub-back { display: none; }

  /* Vollbild-Overlay-Menü — separates Element, nicht .nav-links */
  .mobile-nav {
    position: fixed; inset: 0;
    background: var(--surface);
    z-index: 200; /* über alles drüber, auch über .grain (60) und .nav (50) */
    opacity: 0; pointer-events: none;
    transform: translateY(-12px);
    transition: opacity .3s, transform .3s cubic-bezier(.2,.7,.2,1);
    display: flex; flex-direction: column;
    color: var(--fg);
  }
  .mobile-nav.open { opacity: 1; pointer-events: auto; transform: translateY(0); }

  .mobile-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .mobile-nav-logo {
    font-family:'Fraunces', serif; font-size: 1.35rem; font-weight: 400; letter-spacing:-0.02em;
    color: var(--fg);
  }
  .mobile-nav-logo span { font-style: italic; font-weight: 300; }
  .mobile-nav-close {
    width: 44px; height: 44px; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    color: var(--fg); position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-close::before, .mobile-nav-close::after {
    content:""; position: absolute; left: 12px; right: 12px; top: 21px; height: 2px;
    background: currentColor;
  }
  .mobile-nav-close::before { transform: rotate(45deg); }
  .mobile-nav-close::after  { transform: rotate(-45deg); }

  .mobile-nav-body {
    flex: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 1.5rem 1.4rem 4rem;
  }
  .mobile-nav-item {
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav-item > a,
  .mobile-nav-item > button.mobile-nav-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 1.1rem 0;
    background: transparent; border: 0; cursor: pointer;
    font-family:'Fraunces', serif; font-size: 1.4rem; font-weight: 400;
    color: var(--fg); text-align: left;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav-toggle-icon {
    width: 16px; height: 16px;
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
    flex-shrink: 0;
  }
  .mobile-nav-item.open .mobile-nav-toggle-icon { transform: rotate(180deg); }

  .mobile-nav-sub {
    max-height: 0; overflow: hidden;
    transition: max-height .35s cubic-bezier(.2,.7,.2,1);
  }
  .mobile-nav-item.open .mobile-nav-sub { max-height: 1200px; }
  .mobile-nav-sub-inner {
    padding: 0 0 1rem .8rem;
    display: flex; flex-direction: column; gap: .2rem;
  }
  .mobile-nav-sub-group {
    font-family:'JetBrains Mono', monospace; font-size:.62rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
    padding: .9rem .8rem .35rem;
  }
  .mobile-nav-sub a {
    display: grid; grid-template-columns: 8px 1fr; align-items: start; gap: .9rem;
    padding: .75rem .8rem;
    color: var(--fg); font-family: 'Inter', sans-serif; font-size: 1rem;
    border-radius: 8px;
    position: relative;
    transition: background .2s, color .2s, padding-left .2s;
  }
  .mobile-nav-sub a::before {
    content:""; width: 8px; height: 8px; border-radius: 99px;
    background: var(--c-mn, var(--c-konfi));
    margin-top: .45rem;
    transition: transform .25s;
  }
  .mobile-nav-sub a:hover, .mobile-nav-sub a:active {
    background: var(--bg);
    color: var(--c-mn, var(--fg));
    padding-left: 1.1rem;
  }
  .mobile-nav-sub a:hover::before, .mobile-nav-sub a:active::before { transform: scale(1.25); }
  .mobile-nav-sub a > .dd-main + .dd-sub { display: block; }
  .mobile-nav-sub a .dd-main { font-weight: 500; line-height: 1.2; }
  .mobile-nav-sub a .dd-sub  {
    font-family:'JetBrains Mono', monospace; font-size: .6rem;
    text-transform: uppercase; letter-spacing: .14em; color: var(--muted);
    margin-top: .3rem; line-height: 1.3;
  }
  /* Gemeinde-Farbpunkte */
  .mobile-nav-sub a[data-g="buesum"]     { --c-mn: var(--c-buesum); }
  .mobile-nav-sub a[data-g="wessel"]     { --c-mn: var(--c-wessel); }
  .mobile-nav-sub a[data-g="neuen"]      { --c-mn: var(--c-neuen); }
  .mobile-nav-sub a[data-g="urlauber"]   { --c-mn: var(--c-urlauber); }
  .mobile-nav-sub a[data-g="kirchspiel"] { --c-mn: var(--c-konfi); }
  .mobile-nav-sub a[data-g="musik"]      { --c-mn: var(--c-musik); }
  .mobile-nav-sub a[data-g="taufe"]      { --c-mn: var(--c-taufe); }
  .mobile-nav-sub a[data-g="konfi"]      { --c-mn: var(--c-konfi); }
  .mobile-nav-sub a[data-g="trauung"]    { --c-mn: var(--c-trauung); }
  .mobile-nav-sub a[data-g="abschied"]   { --c-mn: var(--c-abschied); }
  .mobile-nav-sub a[data-g="seelsorge"]  { --c-mn: var(--c-seelsorge); }
  .mobile-nav-sub a[data-g="rituale"]    { --c-mn: var(--c-rituale); }

  body.nav-open { overflow: hidden; }
}

/* Auf großen Screens Mobile-Nav explizit weg */
@media (min-width: 1024px) {
  .mobile-nav { display: none; }
}

/* Hero-/Switcher-Tweaks für Mobile */
@media (max-width: 600px) {
  .switcher-inner { flex-direction: column; gap: .8rem; align-items: flex-start !important; padding: .8rem 0; }
  .switcher-label { font-size: .62rem; }
  .switcher-pills { gap: .3rem !important; }
  .pill { padding: .42rem .75rem; font-size: .62rem; }
}

/* === KW.MOBILE-HERO OVERRIDES === */
/* Subseiten-Heros sind oft "padding: 9rem 0 5rem". Auf Mobile → nach unten. */
@media (max-width: 600px) {
  .kasu-hero, .m-hero, .u-hero, .j-hero, .k-hero, .s-hero {
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
  }
  .b-hero-inner { padding: 6rem 0 2.5rem !important; }
  .b-hero { min-height: auto !important; }
  .b-title { font-size: clamp(3rem, 13vw, 5rem) !important; }
  .kasu-title, .m-title, .u-title, .j-title, .k-title, .s-title {
    font-size: clamp(2.6rem, 11vw, 4rem) !important;
  }
  /* Hero-Grids auf Mobile gestapelt, side-Info nicht zu groß */
  .m-hero-grid, .u-hero-grid, .j-hero-grid, .k-hero-grid, .s-hero-grid, .kw-hero-grid {
    gap: 1.5rem !important;
  }
  .kw-hero-side b { font-size: 1.15rem !important; }
  /* Story-Sektion gleiches */
  .m-story-grid, .u-story-grid, .j-story-grid, .k-story-grid, .b-story-grid, .kw-story-grid {
    gap: 2rem !important;
  }
  /* Magazine-Cover skaliert sich auch mobile passend */
  .m-magazine-wrap, .s-cover {
    max-width: 100% !important;
  }
}

/* === Section-Label-Margin auf Mobile kürzer === */
@media (max-width: 600px) {
  .section-label { font-size: .62rem; letter-spacing: .12em; }
  .b-section-title, .kw-story-headline { font-size: clamp(1.9rem, 7vw, 3rem) !important; }
}

/* === Container-Inner Padding extra für sehr kleine Screens === */
@media (max-width: 380px) {
  .container-x { padding-inline: 18px !important; }
}

/* === KW.FILTER FEEDBACK === */
/* Sanfter Fade beim Filtern. card.style.display = 'none' / '' bleibt — wir blenden Cards die NICHT 'none' sind sanft ein. */
[data-gem], [data-c] {
  transition: opacity .4s cubic-bezier(.2,.7,.2,1);
}
.filter-active [data-gem]:not([style*="display: none"]),
.filter-active [data-c]:not([style*="display: none"]) {
  animation: kw-pop .55s cubic-bezier(.2,.7,.2,1);
}
@keyframes kw-pop {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* === Filter-Empty-State (wenn eine Sektion nach Filter leer ist) === */
.filter-empty {
  text-align: center; padding: 3rem 1rem;
  font-family:'JetBrains Mono', monospace; font-size:.75rem;
  text-transform: uppercase; letter-spacing:.14em; color: var(--muted);
  grid-column: 1 / -1;
}