/* =============================================================================
   Schützenbruderschaft Garbeck — modern.css
   Bold & contemporary design system (2026 rebuild).
   This sheet is now the SOLE stylesheet governing the public home page —
   the legacy Bootstrap + styles.schuetzen.css sheets are no longer loaded
   globally (modern.js injects them only inside the subpage overlay). Because
   Bootstrap's reset is therefore gone from the home page, this file ships its
   own reset (box-sizing + block-margin normalisation) below.
   ========================================================================== */

:root {
  --green:        #2d6a2d;
  --green-bright: #3a8f3a;
  --green-dark:   #1b4d1b;
  --green-ink:    #0e2a0e;
  --ink:          #15171a;
  --ink-soft:     #3a3f45;
  --muted:        #6b7280;
  --line:         #e6e8ec;
  --bg-light:     #ffffff;
  --bg-soft:      #f4f6f4;
  --bg-dark:      #15171a;
  --bg-darker:    #0f1113;
  --white:        #ffffff;
  --radius:       16px;
  --radius-sm:    10px;
  --shadow:       0 10px 40px rgba(0,0,0,.10);
  --shadow-lg:    0 24px 70px rgba(0,0,0,.18);
  --shadow-dark:  0 18px 50px rgba(0,0,0,.45);
  --container:    1180px;
  --ease:         cubic-bezier(.22,.61,.36,1);
  --font:         'Open Sans','Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display: 'Raleway','Open Sans',sans-serif;
}

/* ---- reset (replaces Bootstrap's normalize on the home page) ---------- */
*, *::before, *::after { box-sizing: border-box; }
body.m-home p,
body.m-home ul,
body.m-home ol,
body.m-home figure,
body.m-home blockquote,
body.m-home address { margin: 0; }
body.m-home ul,
body.m-home ol { padding: 0; list-style: none; }
body.m-home button { font: inherit; }
body.m-home p { margin: 0 0 1em; }
body.m-home p:last-child { margin-bottom: 0; }

/* ---- base ------------------------------------------------------------- */
html.m-ready { scroll-behavior: smooth; }
/* Disable scroll anchoring: when opening a subpage injects the legacy CSS, the
   page reflows and Firefox's scroll-anchoring repeatedly nudges the scroll
   position (it logs "Scroll Anchoring disabled… too many corrections") — that
   is the jump on open/close in Firefox. */
html, body { overflow-anchor: none; }
body.m-home {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-light);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.m-home img { max-width: 100%; }
body.m-home a { color: var(--green); text-decoration: none; transition: color .2s var(--ease); }
body.m-home a:hover { color: var(--green-bright); }
body.m-home h1,
body.m-home h2,
body.m-home h3,
body.m-home h4 { font-family: var(--font-display); line-height: 1.12; margin: 0; }

.m-container { max-width: var(--container); margin: 0 auto; padding: 0 24px; width: 100%; }

/* ---- section shells --------------------------------------------------- */
.m-section { position: relative; padding: clamp(32px, 4vw, 56px) 0 clamp(52px, 7vw, 96px); scroll-margin-top: 80px; }
.m-section--light  { background: var(--bg-light); color: var(--ink); }
.m-section--soft   { background: var(--bg-soft);  color: var(--ink); }
.m-section--dark   { background: var(--bg-dark);  color: #e9ecef; }
.m-section--darker { background: var(--bg-darker);color: #e9ecef; }

/* ---- section heading -------------------------------------------------- */
.m-head { text-align: center; max-width: 720px; margin: 0 auto clamp(40px,5vw,68px); }
.m-kicker {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase; color: var(--green-bright); margin-bottom: 14px;
}
.m-section--dark .m-kicker, .m-section--darker .m-kicker, .m-fest .m-kicker { color: #6fce6f; }
/* Section kickers hidden — kept in markup so they can be re-enabled easily. */
.m-kicker { display: none; }
.m-title { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; }
.m-section--dark .m-title, .m-section--darker .m-title, .m-fest .m-title { color: #fff; }
.m-sub { margin: 16px auto 0; color: var(--muted); font-size: 1.02rem; max-width: 560px; }
.m-section--dark .m-sub, .m-section--darker .m-sub, .m-fest .m-sub { color: rgba(255,255,255,.6); }
.m-head-rule { width: 64px; height: 4px; border: 0; border-radius: 4px;
  background: linear-gradient(90deg,var(--green),var(--green-bright)); margin: 22px auto 0; }

/* ---- buttons ---------------------------------------------------------- */
.m-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font); font-size: .9rem; font-weight: 700; letter-spacing: .02em;
  padding: 14px 30px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.m-btn:hover { transform: translateY(-2px); }
.m-btn--primary { background: var(--green); color: #fff !important; box-shadow: 0 10px 26px rgba(45,106,45,.35); }
.m-btn--primary:hover { background: var(--green-bright); color: #fff !important; }
.m-btn--ghost { background: transparent; color: var(--green) !important; border-color: var(--green); }
.m-btn--ghost:hover { background: var(--green); color: #fff !important; }
.m-btn--light { background: rgba(255,255,255,.12); color: #fff !important; border-color: rgba(255,255,255,.45); backdrop-filter: blur(6px); }
.m-btn--light:hover { background: #fff; color: var(--ink) !important; border-color: #fff; }

/* ---- reveal animation ------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html.m-ready { scroll-behavior: auto; }
}

/* =============================================================================
   HEADER / NAV
   ========================================================================== */
.m-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding: 22px 0;
}
.m-header.is-stuck { background: rgba(20,22,26,.92); backdrop-filter: blur(12px); box-shadow: 0 6px 26px rgba(0,0,0,.28); padding: 12px 0; }
/* Used briefly by modern.js to read the header's stuck height without the transition interfering. */
.m-header.is-measuring, .m-header.is-measuring * { transition: none !important; }
/* Top scrim: keeps header text legible over bright hero photos. Fades out once
   the header gets its own solid background on scroll. */
.m-header::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,6,.85) 0%, rgba(6,10,6,.48) 50%, rgba(6,10,6,.12) 82%, transparent 100%);
  transition: opacity .35s var(--ease); }
.m-header.is-stuck::before { opacity: 0; }
.m-header__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.m-brand { display: flex; align-items: center; gap: 12px; }
.m-brand img { width: 44px; height: auto; transition: width .35s var(--ease); }
.m-header.is-stuck .m-brand img { width: 38px; }
.m-brand span { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: .01em; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 16px rgba(0,0,0,.6); }
@media (max-width: 480px) { .m-brand span { display: none; } }

.m-nav { display: flex; align-items: center; gap: 2px; }
.m-nav a {
  position: relative; color: rgba(255,255,255,.92); font-size: .78rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding: 8px 11px; border-radius: 8px; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 12px rgba(0,0,0,.65);
}
.m-header.is-stuck .m-nav a, .m-header.is-stuck .m-brand span { text-shadow: none; }
.m-nav a::after {
  content: ''; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px;
  background: var(--green-bright); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.m-nav a:hover { color: #fff; }
.m-nav a:hover::after, .m-nav a.is-active::after { transform: scaleX(1); }
.m-nav a.is-active { color: #fff; }
/* Nav links: a LIGHT green (the dark var(--green) from the global
   `body.m-home a` rule was unreadable over the dark, green hero photos).
   #m-nav wins the specificity battle against body.m-home a (0,1,2). */
#m-nav a { color: #4ea64e; }
#m-nav a:hover { color: #8fd28f; }
#m-nav a.is-active { color: #fff; }

.m-burger { display: none; width: 46px; height: 46px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.12); cursor: pointer; align-items: center; justify-content: center; }
.m-burger span, .m-burger span::before, .m-burger span::after {
  content: ''; display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease); position: relative; }
.m-burger span::before { position: absolute; top: -7px; }
.m-burger span::after  { position: absolute; top: 7px; }
body.m-menu-open .m-burger span { background: transparent; }
body.m-menu-open .m-burger span::before { transform: translateY(7px) rotate(45deg); }
body.m-menu-open .m-burger span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1199px) {
  .m-burger { display: inline-flex; }
  /* No backdrop-filter on the (fixed) header here: it creates a containing block
     that would clip the fixed nav panel to the header's height. Solid bg instead. */
  .m-header.is-stuck { backdrop-filter: none; background: rgba(18,20,24,.97); }
  .m-nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); flex-direction: column;
    align-items: stretch; gap: 6px; padding: 96px 24px 32px; background: rgba(15,17,19,.98);
    backdrop-filter: blur(14px); transform: translateX(100%); transition: transform .35s var(--ease);
    box-shadow: -20px 0 60px rgba(0,0,0,.5); overflow-y: auto;
  }
  body.m-menu-open .m-nav { transform: translateX(0); }
  .m-nav a { font-size: .95rem; padding: 14px 16px; border-radius: 10px; }
  .m-nav a::after { display: none; }
  .m-nav a:hover, .m-nav a.is-active { background: rgba(255,255,255,.07); }
}

/* =============================================================================
   HERO
   ========================================================================== */
.m-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden; background: var(--green-ink); }
.m-hero__slides { position: absolute; inset: 0; }
.m-hero__slide { position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08); transition: opacity 1.4s var(--ease), transform 7s linear; }
.m-hero__slide.is-active { opacity: 1; transform: scale(1); }
.m-hero::after { content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,20,10,.55) 0%, rgba(10,20,10,.35) 40%, rgba(10,15,10,.78) 100%); }
.m-hero__inner { position: relative; z-index: 2; padding: 120px 24px; max-width: 900px; }
.m-hero__eyebrow { display: inline-block; color: #fff; font-size: .8rem; font-weight: 700;
  letter-spacing: .35em; text-transform: uppercase; margin-bottom: 22px;
  padding: 8px 18px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; }
.m-hero h1 { color: #fff; font-size: clamp(2rem, 5.2vw, 4.4rem); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.05; text-shadow: 0 4px 40px rgba(0,0,0,.4); }
.m-hero .m-hero__tag { color: rgba(255,255,255,.88); font-size: clamp(1rem,2.2vw,1.3rem);
  margin: 20px auto 0; max-width: 620px; text-align: center; }
.m-hero__cta { margin-top: 38px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.m-hero__scroll { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.8); font-size: 1.5rem; animation: m-bob 2s var(--ease) infinite; }
@keyframes m-bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,10px); } }
.m-hero__dots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 10px; }
.m-hero__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.4); transition: background .2s, width .2s; padding: 0; }
.m-hero__dots button.is-active { background: #fff; width: 26px; border-radius: 6px; }

/* =============================================================================
   AKTUELLES (news)
   ========================================================================== */
/* All entries share one narrow column so nothing is wider than the Instagram embed. */
.m-news { max-width: 470px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
/* Instagram's embed.js sizes its iframe to the container width, so the wrapper width controls it. */
.m-news-insta { width: 100%; margin: 0 auto; }
.m-news-insta .instagram-media { margin: 0 auto !important; }
.m-news-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.m-news-card__img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.m-news-card__body { padding: 28px 32px; }
.m-news-card .m-news-card__title { font-size: 1.4rem; font-weight: 800; color: var(--ink); margin-bottom: 18px; }
.m-news-card__text { color: var(--ink-soft); }
.m-news-card__text p { margin: 0 0 .6em; }
.m-news-card__meta { display: flex; align-items: center; gap: 8px; padding: 0 32px 24px; color: var(--muted); font-size: .82rem; }
.m-news-card__meta i { color: var(--green); }
.m-news-card--insta { text-align: center; padding: 40px 32px;
  background: linear-gradient(#fff,#fff) padding-box, linear-gradient(45deg,#f09433,#dc2743,#cc2366) border-box;
  border: 2px solid transparent; }
.m-insta-icon { font-size: 2.8rem; background: linear-gradient(45deg,#f09433,#dc2743,#cc2366,#bc1888);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.m-insta-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: #fff !important;
  background: linear-gradient(45deg,#f09433,#dc2743,#cc2366); padding: 12px 26px; border-radius: 999px; font-weight: 700; }
.m-insta-btn:hover { opacity: .9; color: #fff !important; }
.m-news-actions { text-align: center; margin-top: 40px; }

/* =============================================================================
   BILDER (gallery)
   ========================================================================== */
.m-gal-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin-bottom: 2.5rem; }
.m-gal-fbtn { cursor: pointer; border: 1px solid rgba(255,255,255,.2); background: transparent; color: #d6d9dd;
  font-size: .82rem; font-weight: 700; letter-spacing: .03em; padding: .5rem 1.2rem; border-radius: 999px;
  transition: all .2s var(--ease); }
.m-gal-fbtn:hover { color: #fff; border-color: var(--green-bright); }
.m-gal-fbtn.is-active { color: #fff; background: var(--green); border-color: var(--green); }
.m-gal-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
  align-content: start; transition: height .45s var(--ease); }
.m-gal-card { display: block; width: 100%; padding: 0; text-align: left; cursor: pointer; border: none;
  background: #1f2226; border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-dark);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), opacity .24s var(--ease); }
.m-gal-card:hover { transform: translateY(-5px); box-shadow: 0 26px 60px rgba(0,0,0,.6); }
.m-gal-card.is-leaving { opacity: 0; transform: translateY(10px) scale(.985); }
.m-gal-card.is-entering { animation: m-gal-in .5s var(--ease) both; animation-delay: var(--gd, 0ms); }
@keyframes m-gal-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .m-gal-card.is-entering { animation: none; }
  .m-gal-card.is-leaving { opacity: 1; transform: none; }
  .m-gal-grid { transition: none; }
}
.m-gal-card__img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #2a2d31; }
.m-gal-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.m-gal-card:hover .m-gal-card__img img { transform: scale(1.09); }
.m-gal-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #555; font-size: 2rem; }
.m-gal-card__ov { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(to top, rgba(45,106,45,.72), rgba(0,0,0,.05)); opacity: 0; transition: opacity .25s var(--ease); }
.m-gal-card:hover .m-gal-card__ov { opacity: 1; }
.m-gal-card__cta { color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.6); padding: .55rem 1.1rem; border-radius: 999px; }
.m-gal-card__meta { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .9rem 1.1rem 1.05rem; }
.m-gal-card__title { color: #f1f3f5; font-size: 1.02rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-gal-card__tag { flex: 0 0 auto; color: #8fd28f; font-size: .72rem; font-weight: 800; background: rgba(45,106,45,.25); border-radius: 999px; padding: .22rem .66rem; }
.m-gal-empty { grid-column: 1/-1; text-align: center; color: #888; padding: 2.5rem 0; }
.m-gal-panel { background: #0f1113; border-radius: var(--radius); overflow: hidden; margin-top: 2rem; box-shadow: var(--shadow-dark);
  opacity: 0; transform: translateY(-8px);
  transition: height .42s var(--ease), opacity .35s var(--ease), transform .42s var(--ease); }
.m-gal-panel.is-open { opacity: 1; transform: none; }
/* When opened inline (moved into the grid by modern.js) span the full row width. */
.m-gal-grid > .m-gal-panel { grid-column: 1 / -1; margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .m-gal-panel { transition: none; transform: none; } }
.m-gal-panel__bar { display: flex; justify-content: flex-end; padding: .8rem 1rem; background: #0a0b0c; }
.m-gal-panel__close { cursor: pointer; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #ddd;
  font-size: .82rem; font-weight: 700; border-radius: 999px; padding: .45rem 1.1rem; transition: all .2s var(--ease); }
.m-gal-panel__close:hover { color: #fff; background: var(--green); border-color: var(--green); }
.m-gal-loading { text-align: center; padding: 3rem 0; }
.m-home .m-extlink { text-align: center; margin: 4rem 0 0; padding-top: 2.2rem;
  border-top: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.6); font-size: .95rem; letter-spacing: .01em; }
.m-extlink a { display: inline-flex; align-items: center; gap: .45rem; margin-left: .35rem;
  color: #8fd28f !important; font-weight: 700; border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: color .2s var(--ease), border-color .2s var(--ease); }
.m-extlink a:hover { color: #fff !important; border-color: rgba(143,210,143,.7); }
.m-extlink a i { font-size: .82em; opacity: .8; }

/* spinner (shared) */
.m-spinner { display: inline-block; width: 36px; height: 36px; border: 4px solid rgba(255,255,255,.25);
  border-top-color: #fff; border-radius: 50%; animation: m-spin .75s linear infinite; }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* =============================================================================
   LIGHTBOX (shared by gallery)
   ========================================================================== */
.m-lb { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.93); display: flex; align-items: center; justify-content: center; }
.m-lb[hidden] { display: none; }
.m-lb__img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: var(--shadow-lg); }
.m-lb__btn { position: absolute; cursor: pointer; background: rgba(255,255,255,.1); border: 0; color: #fff;
  width: 50px; height: 50px; border-radius: 50%; font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
  transition: background .2s var(--ease); }
.m-lb__btn:hover { background: rgba(45,106,45,.9); }
.m-lb__close { top: 22px; right: 22px; }
.m-lb__prev { left: 22px; top: 50%; transform: translateY(-50%); }
.m-lb__next { right: 22px; top: 50%; transform: translateY(-50%); }
.m-lb__count { position: absolute; bottom: 22px; left: 0; right: 0; text-align: center; color: #cbd1d6; font-size: .85rem; letter-spacing: .05em; }
@media (max-width: 600px) { .m-lb__prev { left: 8px; } .m-lb__next { right: 8px; } .m-lb__close { top: 10px; right: 10px; } }

/* =============================================================================
   TERMINE (events)
   ========================================================================== */
.m-events { max-width: 720px; margin: 0 auto; }
.m-events-empty { text-align: center; color: var(--muted); padding: 2rem 0; }
.m-events-label { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: #b3b9c0; margin: 1.8rem 0 .9rem; }
.m-event { display: flex; align-items: center; gap: 1.3rem; background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--green); border-radius: var(--radius-sm); padding: 1rem 1.3rem; margin-bottom: .8rem;
  box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.m-event:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.m-event.is-past { border-left-color: #cdd2d8; opacity: .6; }
.m-event.is-ongoing { border-left-color: var(--green-dark); background: #f4faf4; }
.m-event__date { flex: 0 0 56px; text-align: center; background: #eef6ee; border-radius: 10px; padding: .55rem .25rem; line-height: 1.05; }
.m-event__date.is-range { flex: 0 0 auto; display: flex; align-items: center; gap: .35rem; background: transparent; padding: 0; }
.m-event__date-box { width: 52px; text-align: center; background: #eef6ee; border-radius: 10px; padding: .55rem .25rem; }
.m-event.is-past .m-event__date, .m-event.is-past .m-event__date-box { background: #f3f4f6; }
.m-event__sep { color: #c2c7cd; }
.m-event__day { display: block; font-size: 1.7rem; font-weight: 800; color: var(--green); line-height: 1; }
.m-event.is-past .m-event__day { color: #9aa0a6; }
.m-event__mon { display: block; font-size: .7rem; text-transform: uppercase; color: var(--muted); letter-spacing: .05em; margin-top: .15rem; }
.m-event__info { flex: 1; min-width: 0; }
.m-event__name { font-weight: 700; color: var(--ink); margin: 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-event__range { font-size: .82rem; color: var(--muted); margin: 0; }
.m-event__badge { flex: 0 0 auto; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--green-dark); background: #c8e6c9; border-radius: 999px; padding: .25rem .8rem; }

/* =============================================================================
   SCHÜTZENFEST (countdown over fixed image)
   ========================================================================== */
.m-fest { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 80% 0%, #1f5a1f 0%, var(--green-ink) 55%, #061806 100%); }
.m-fest::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 15% 110%, rgba(58,143,58,.35), transparent 60%); }
.m-fest::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(6,14,6,.30); }
.m-fest .m-container { position: relative; z-index: 1; }
/* Slim countdown strip (the Königspaar is the centerpiece below it). */
.m-cd { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  width: fit-content; max-width: 100%; margin: 0 auto clamp(34px,4.5vw,50px);
  padding: 18px 12px; border-radius: 999px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 30px rgba(3,12,3,.30); }
.m-cd__box { position: relative; display: flex; flex-direction: column; align-items: center;
  min-width: 92px; padding: 6px 28px; }
.m-cd__box + .m-cd__box::before { content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 1px; height: 58%; background: rgba(255,255,255,.18); }
.m-cd__num { font-size: 2.4rem; font-weight: 800; color: #fff; line-height: 1; }
.m-cd__lab { font-size: .64rem; color: rgba(255,255,255,.72); text-transform: uppercase; letter-spacing: .18em; margin-top: 8px; }

/* Königspaar — centerpiece / hero */
.m-king { max-width: 560px; margin: 0 auto; text-align: center; }
.m-king__eyebrow { font-size: .74rem; color: #aef0ae; text-transform: uppercase; letter-spacing: .24em; margin: 0 0 10px; }
.m-king__names { font-size: clamp(1.7rem,3.6vw,2.5rem); font-weight: 800; color: #fff; line-height: 1.12; margin: 0 0 26px; }
.m-home .m-king img { display: block; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 24px 54px rgba(3,10,3,.55), 0 0 0 5px rgba(255,255,255,.06); }

/* =============================================================================
   BRUDERSCHAFT (feature cards)
   ========================================================================== */
.m-feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1.2rem; }
.m-feat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 230px; padding: 40px 28px; border-radius: var(--radius); overflow: hidden; cursor: pointer;
  background: #1f2226; border: 1px solid rgba(255,255,255,.07); color: #fff;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
.m-feat:hover { transform: translateY(-5px); box-shadow: var(--shadow-dark); color: #fff; }
.m-feat::before { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease);
  background: linear-gradient(135deg, var(--green), var(--green-dark)); }
.m-feat:hover::before { opacity: 1; }
.m-feat > * { position: relative; z-index: 1; }
.m-feat__icon { font-size: 2.6rem; color: var(--green-bright); margin-bottom: 18px; transition: color .3s var(--ease); }
.m-feat:hover .m-feat__icon { color: #fff; }
.m-feat__title { color: #fff; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.m-feat__desc { font-size: .86rem; color: rgba(255,255,255,.6); margin: 0; }
.m-feat:hover .m-feat__desc { color: rgba(255,255,255,.85); }

/* Bruderschaft: 2×2 grid with the wappen as a centre medallion (legacy nod).
   Card content is pushed to the outer corners so the centre stays clear. */
#bruderschaft .m-feat-grid { position: relative; }
.m-feat-logo { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 3; width: 164px; height: 164px; border-radius: 50%;
  align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 36%, #20262a, #14181b);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.m-feat-logo img { width: 92px; height: auto; position: relative; top: 5px; }
@media (min-width: 620px) {
  #bruderschaft .m-feat-grid { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 820px; margin: 0 auto; }
  #bruderschaft .m-feat { min-height: 212px; }
  #bruderschaft .m-feat:nth-child(1) { align-items: flex-start; justify-content: flex-start; text-align: left;  padding: 34px 36px 34px 40px; }
  #bruderschaft .m-feat:nth-child(2) { align-items: flex-end;   justify-content: flex-start; text-align: right; padding: 34px 40px 34px 36px; }
  #bruderschaft .m-feat:nth-child(3) { align-items: flex-start; justify-content: flex-end;   text-align: left;  padding: 34px 36px 34px 40px; }
  #bruderschaft .m-feat:nth-child(4) { align-items: flex-end;   justify-content: flex-end;   text-align: right; padding: 34px 40px 34px 36px; }
  .m-feat-logo { display: flex; }
}

/* =============================================================================
   LINKS
   ========================================================================== */
.m-links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1.1rem; }
.m-link-card { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 18px 20px; box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.m-link-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.m-link-card img { width: 64px; height: 72px; object-fit: contain; flex-shrink: 0; }
.m-link-card__info { min-width: 0; }
.m-link-card__info h4 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-link-card__info h4 a { color: var(--ink); }
.m-link-card__info h4 a:hover { color: var(--green); }
.m-link-card__info em { display: block; font-size: .78rem; color: var(--muted);
  font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-link-card__info em i { color: var(--green); font-size: .72rem; margin-right: .4rem; }

/* =============================================================================
   DOWNLOADS
   ========================================================================== */
.m-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: .9rem; max-width: 820px; margin: 0 auto; }
.m-dl { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  transition: background .2s var(--ease), transform .2s var(--ease); }
.m-dl:hover { background: rgba(45,106,45,.18); transform: translateX(4px); }
.m-dl__icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.m-dl a { color: #fff; font-weight: 600; font-size: .96rem; }
.m-dl a:hover { color: #8fd28f; }

/* =============================================================================
   FOOTER / KONTAKT
   ========================================================================== */
.m-foot { background: var(--bg-darker); color: rgba(255,255,255,.85); }
.m-foot__grid { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 48vh; }
@media (max-width: 880px) { .m-foot__grid { grid-template-columns: 1fr; } }
.m-foot__map { min-height: 340px; }
.m-foot__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; filter: grayscale(.25); }
.m-foot__body { background: linear-gradient(135deg, var(--green), var(--green-dark)); padding: clamp(40px,5vw,64px); }
.m-foot__body h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; text-transform: uppercase; margin-bottom: 28px; }
.m-foot__addr { font-style: normal; line-height: 2; color: #fff; margin-bottom: 30px; }
.m-foot__addr .lab { color: rgba(255,255,255,.7); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.m-foot__addr .val { display: block; font-weight: 700; margin-bottom: 14px; }
.m-foot__social { display: flex; gap: 12px; }
.m-foot__social a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem; transition: background .2s var(--ease), transform .2s var(--ease); }
.m-foot__social a:hover { background: #fff; color: var(--green); transform: translateY(-3px); }
.m-copy { background: #0a0b0c; color: rgba(255,255,255,.6); text-align: center; padding: 18px 24px; font-size: .82rem; }
.m-copy a { color: rgba(255,255,255,.85); }
.m-copy a:hover { color: #8fd28f; }

/* =============================================================================
   SUBPAGE OVERLAY (replaces cbp-singlePage)
   ========================================================================== */
.m-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(15,17,19,.55); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .3s var(--ease); }
.m-overlay[hidden] { display: none; }
.m-overlay.is-open { opacity: 1; }
.m-overlay__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(960px, 100%); background: #fff;
  box-shadow: -30px 0 80px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .35s var(--ease);
  display: flex; flex-direction: column; }
.m-overlay.is-open .m-overlay__panel { transform: translateX(0); }
.m-overlay__bar { display: flex; justify-content: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: #fff; z-index: 2; }
.m-overlay__close { cursor: pointer; background: var(--bg-soft); border: 0; color: var(--ink); width: 42px; height: 42px;
  border-radius: 50%; font-size: 1.3rem; display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease); }
.m-overlay__close:hover { background: var(--green); color: #fff; }
.m-overlay__body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.m-overlay__loading { text-align: center; padding: 4rem 0; }
.m-overlay__loading .m-spinner { border-color: rgba(0,0,0,.15); border-top-color: var(--green); }

/* splash */
#splash { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 20px; transition: opacity .5s var(--ease);
  background:
    linear-gradient(rgba(6,14,6,.30), rgba(6,14,6,.30)),
    radial-gradient(60% 60% at 15% 110%, rgba(58,143,58,.35), transparent 60%),
    radial-gradient(120% 120% at 80% 0%, #1f5a1f 0%, var(--green-ink) 55%, #061806 100%); }
#splash img { width: 56px; }
#splash p { color: #fff; font-size: 1.05rem; letter-spacing: .04em; margin: 0; font-family: var(--font-display); font-weight: 700; }
#splash-spinner { width: 38px; height: 38px; border: 4px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: m-spin .75s linear infinite; }

/* =============================================================================
   RESPONSIVE (narrow phones) — the design otherwise scales via clamp()/auto-fit
   ========================================================================== */
@media (max-width: 560px) {
  .m-hero h1 { font-size: clamp(1.6rem, 8.4vw, 2.4rem); }
  .m-hero__inner { padding-left: 18px; padding-right: 18px; }
  .m-hero__cta { flex-direction: column; align-items: stretch; }
  .m-hero__cta .m-btn { justify-content: center; }

  /* Gallery filters: collapse the wrapping pill cloud into a single swipeable
     row that bleeds to the screen edges, so it stops eating vertical space. */
  .m-gal-filter {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    gap: .4rem; margin: 0 -24px 1.6rem; padding: 0 24px .35rem;
    scroll-snap-type: x proximity;
  }
  .m-gal-filter::-webkit-scrollbar { display: none; }
  /* .m-home prefix beats `body.m-home button { font: inherit }` so the smaller font sticks */
  .m-home .m-gal-fbtn { flex: 0 0 auto; font-size: .82rem; padding: .42rem .9rem; scroll-snap-align: start; }

  /* Events: let titles wrap instead of being clipped with an ellipsis on narrow screens. */
  .m-event { align-items: flex-start; gap: 1rem; padding: .9rem 1rem; }
  .m-event__name { white-space: normal; overflow: visible; text-overflow: clip; }
}