/* =============================================================================
   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 ------------------------------------------------------------- */
/* Always reserve the scrollbar's space so locking scroll (overlay/lightbox)
   doesn't widen the layout and shift the header/headings to the right. */
html { scrollbar-gutter: stable; }
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: #44954a; }
#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); }
/* Separate desktop / mobile hero image sets (only when both exist). */
.m-hero__slide--mobile { display: none; }
@media (max-width: 768px) {
  .m-hero__slide--desktop { display: none; }
  .m-hero__slide--mobile  { display: block; }
}
.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); }
/* Initial state before the gallery scrolls into view (cards float in via is-entering). */
.m-gal-grid.is-pre .m-gal-card { opacity: 0; }
@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.1rem; background: #fff; border: 1px solid var(--line);
  border-left: 5px solid var(--green); border-radius: var(--radius-sm); padding: .7rem 1.2rem; margin-bottom: .7rem;
  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 52px; text-align: center; background: #eef6ee; border-radius: 10px; padding: .42rem .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: 50px; text-align: center; background: #eef6ee; border-radius: 10px; padding: .42rem .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.5rem; 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 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-event__range { font-size: .82rem; color: var(--muted); margin: 0; }
.m-event__meta { font-size: .8rem; color: var(--ink-soft); line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.m-event__meta i { color: var(--green); }
.m-event__metasep { color: var(--line); margin: 0 6px; }
/* These lines are <p>; `body.m-home p { margin: 0 0 1em }` (0,1,2) otherwise forces
   a 16px gap under each. `.m-home` prefix (0,2,0) wins, keeping the block compact. */
.m-home .m-event__name  { margin: 0 0 2px; line-height: 1.25; }
.m-home .m-event__range { margin: 0; line-height: 1.3; }
.m-home .m-event__meta  { margin: 2px 0 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(130% 130% at 18% 118%, #2c702c 0%, #1a4d1a 38%, var(--green-ink) 66%, #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 14px; border-radius: var(--radius);
  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; }
/* On phones the strip wraps to 2×2; make it an explicit grid so the inter-box
   divider can't end up stranded to the left of "Minuten" on the second row. */
@media (max-width: 540px) {
  .m-cd { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 0; width: 100%; max-width: 320px; padding: 16px 10px; position: relative; }
  .m-cd__box { min-width: 0; padding: 6px 10px; }
  .m-cd__box + .m-cd__box::before { display: none; }
  /* cross dividers: vertical between the columns, horizontal between the rows */
  .m-cd::before { content: ''; position: absolute; top: 14px; bottom: 14px; left: 50%; transform: translateX(-50%);
    width: 1px; background: rgba(255,255,255,.2); }
  .m-cd::after { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; transform: translateY(-50%);
    height: 1px; background: rgba(255,255,255,.2); }
}

/* 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; }
/* These cards are <a> links, so the global `body.m-home a { transition: color }`
   (specificity 0,1,2) beats `.m-feat` and strips the opacity/transform transition —
   the reveal then snapped instead of fading. `.m-home .m-feat` (0,2,0) wins it back.
   opacity → reveal fade; transform → reveal slide + hover lift. */
.m-home .m-feat { transition: transform .4s var(--ease), box-shadow .28s var(--ease), opacity .6s var(--ease), color .2s 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: 1fr 1fr; min-height: 48vh; }
@media (max-width: 880px) { .m-foot__grid { grid-template-columns: 1fr; } }
.m-foot__map { min-height: 340px; height: 100%; filter: grayscale(.2); }
.m-foot__map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }
.m-foot__body { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: linear-gradient(135deg, var(--green), var(--green-dark)); padding: clamp(40px,5vw,64px); }
.m-home .m-foot__body h2 { color: #fff; font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 800; text-transform: uppercase; margin-bottom: 48px; }
/* 2×2 grid of contact items: the grid is centred as a block, text left-aligned. */
.m-foot__addr { font-style: normal; color: #fff; margin: 0 auto; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 44px; max-width: 480px; }
.m-foot__item .lab { display: block; color: rgba(255,255,255,.72); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; }
.m-foot__item .val { display: block; font-weight: 700; line-height: 1.45; }
@media (max-width: 1100px) { .m-foot__addr { grid-template-columns: 1fr; gap: 18px; max-width: 320px; } }
.m-foot__social { display: flex; gap: 12px; justify-content: center; margin-top: 42px; }
/* .m-home prefix beats `body.m-home a { color: var(--green) }`, which otherwise
   rendered the icons green-on-green (invisible). */
.m-home .m-foot__social a { width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.45); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
  transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease); }
.m-home .m-foot__social a:hover { background: #fff; border-color: #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; }
}