/* =========================================================================
   SV Bogel – Design System · Variante B ("Editorial / Hell")
   Bewusst kontrastierend zu Variante A: helles, warmes Layout, Rot als
   Block-Akzent, gemischte Typo (Kanit + Manrope), gerundete Formen.
   ========================================================================= */

:root {
  --red:      #ff3818;
  --red-ink:  #d0260c;
  --ink:      #17130f;
  --ink-soft: #3a352f;
  --paper:    #ffffff;
  --cream:    #f6f2ec;
  --sand:     #ece4d8;
  --muted:    #726a5e;
  --line:     #e5ddd0;

  --font-display: "Kanit", system-ui, "Segoe UI", sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow: 0 24px 50px -24px rgba(30, 20, 10, .35);
  --shadow-sm: 0 10px 24px -16px rgba(30, 20, 10, .3);
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* overflow-x: clip (nicht hidden!) – kappt horizontales Überlaufen, ohne
   einen Scroll-Container zu erzeugen, der position:sticky am Header bricht. */
html, body { overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Standard-Überschriften (kleinere Titel) in Manrope – gut lesbar */
h1, h2, h3, h4 { font-family: var(--font-body); font-weight: 800; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; }

/* Plakative Display-Headlines in Kanit, aufrecht + Versal (modern-sportlich) */
.hero h1, .h-sec, .feature h3, .poster__title, .cta-band h2 {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; line-height: .95; letter-spacing: -.005em;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
.section { padding: clamp(52px, 7vw, 104px) 0; }
.section--tint { background: var(--sand); }

/* Lane = vertikaler Rhythmus; Panel = eingerückte, abgerundete Card auf Creme */
.lane { padding: clamp(20px, 2.8vw, 38px) 0; }
.lane--first { padding-top: clamp(18px, 2.6vw, 36px); } /* etwas näher am Header */
.panel {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: clamp(20px, 3vw, 34px);
  padding: clamp(24px, 3.2vw, 44px);
}
/* Offene Sektion (ohne Card) – Inhalt bündig zu den Cards ausrichten */
.lane__pad { padding-inline: clamp(24px, 3.2vw, 44px); }

.kicker {
  font-family: var(--font-body); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .2em; color: var(--muted);
  display: inline-flex; align-items: center; gap: .85ch; margin-bottom: 3px;
}
.kicker::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px;
  background: var(--red); flex: none;
}

.h-sec { font-size: 2.5rem; }
.lead { color: var(--ink-soft); font-size: 1.08rem; }

.btn {
  display: inline-flex; align-items: center; gap: .6ch;
  font-family: var(--font-display); font-weight: 600; font-size: .98rem;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  background: var(--red); color: #fff; border: 2px solid var(--red);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--red-ink); border-color: var(--red-ink); box-shadow: var(--shadow-sm); }
.btn--ink { background: var(--ink); border-color: var(--ink); }
.btn--ink:hover { background: #000; border-color: #000; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
/* Weißer Button auf rotem Grund: beim Hover weiß bleiben, Text wird Marken-Rot
   (nicht dunkelrot füllen – das wirkt auf dem roten Band unschön). */
.btn--light:hover { background: #fff; border-color: #fff; color: var(--red-ink); }

/* ------------------------------------------------------------ Header (light) */
/* Skip-Link – nur bei Tastatur-Fokus sichtbar */
.skip-link {
  position: fixed; left: 14px; top: -80px; z-index: 200;
  background: var(--ink); color: #fff; font-weight: 700; font-size: .92rem;
  padding: 11px 18px; border-radius: 12px; box-shadow: var(--shadow);
  transition: top .22s var(--ease);
}
.skip-link:focus-visible { top: 14px; outline: 3px solid var(--red); outline-offset: 3px; }

.hdr {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s;
}
/* Verankerung: erst wenn Inhalt darunter scrollt, wird die Bar zur Milchglas-Fläche
   mit Haarlinie + weichem Schatten; gleichzeitig kondensiert die Höhe leicht. */
.hdr.is-scrolled {
  background: rgba(246,242,236,.82); backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(23,19,15,.07), 0 20px 44px -30px rgba(30,20,10,.6);
}
.hdr__in {
  height: 82px; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 20px; padding-inline: clamp(6px, 1.4vw, 22px);
  transition: height .3s var(--ease);
}
.hdr.is-scrolled .hdr__in { height: 66px; }
.brand { display: flex; align-items: center; gap: 12px; justify-self: start; }
.brand__emblem { height: 54px; transition: height .3s var(--ease); }
.hdr.is-scrolled .brand__emblem { height: 44px; }
.brand__name { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--ink); letter-spacing: -.01em; white-space: nowrap; }

/* Navigation: transparente Zeile mit einem magnetischen Pill-Indikator, der beim
   Hovern gleitet und im Ruhezustand unter der aktiven Seite parkt (JS-gesteuert). */
.pill-nav { position: relative; display: flex; align-items: center; gap: 2px; justify-self: center; }
.pill-nav__indicator {
  position: absolute; top: 50%; left: 0; height: 42px; width: 0;
  transform: translateY(-50%); border-radius: 999px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; z-index: 0;
  transition: transform .32s var(--ease), width .32s var(--ease), opacity .2s;
}
.pill-nav.is-ready .pill-nav__indicator { opacity: 1; }
.pill-nav__link {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  height: 42px; padding: 0 16px; border-radius: 999px;
  font-weight: 600; font-size: .96rem; color: var(--ink-soft); white-space: nowrap;
  transition: color .18s var(--ease);
}
.pill-nav__link:hover,
.pill-nav__link:focus-visible { color: var(--ink); }
/* Aktive Seite: dauerhaft per kurzem roten Balken markiert (unabhängig vom Hover-Highlight) */
.pill-nav__link[aria-current] { color: var(--ink); font-weight: 700; }
.pill-nav__link[aria-current]::before {
  content: ""; position: absolute; left: 50%; bottom: 6px; width: 20px; height: 3px;
  transform: translateX(-50%); background: var(--red); border-radius: 3px;
}

/* Flyout-Menü (Desktop) */
.pill-nav__item { position: relative; display: flex; align-items: center; }
.flyout {
  position: absolute; top: 100%; left: 50%; z-index: 60; min-width: 236px;
  padding-top: 14px; transform: translateX(-50%) translateY(6px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.has-flyout:hover > .flyout,
.has-flyout:focus-within > .flyout {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.flyout__panel {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 1px;
}
.flyout__panel::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg); border-radius: 3px 0 0 0;
}
.flyout__panel a {
  display: flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 12px;
  font-weight: 600; font-size: .92rem; color: var(--ink-soft); white-space: nowrap;
  transition: background .14s var(--ease), color .14s;
}
.flyout__panel a::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  opacity: 0; transform: translateX(-5px); transition: opacity .14s var(--ease), transform .14s var(--ease);
}
.flyout__panel a:hover { background: var(--cream); color: var(--ink); }
.flyout__panel a:hover::before { opacity: 1; transform: none; }

/* CTA rechts: leiser Ghost-Shop-Link + ein prägnanter roter Button (klare Hierarchie) */
.hdr__cta { display: flex; align-items: center; gap: 18px; justify-self: end; }
.hdr__shop {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: .95rem; color: var(--ink-soft);
  transition: color .16s var(--ease);
}
.hdr__shop-icon { width: 18px; height: 18px; flex: none; transition: transform .2s var(--ease); }
.hdr__shop:hover { color: var(--red-ink); }
.hdr__shop:hover .hdr__shop-icon { transform: translateY(-1px) scale(1.06); }
.hdr__cta .btn {
  height: 46px; padding: 0 22px; border-width: 1px; white-space: nowrap;
  box-shadow: 0 12px 26px -14px rgba(208,38,12,.65);
}

/* ------------------------------------------------------------ Hero (bildlos, kompakt) */
.hero { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 46px) 0 clamp(30px, 4.5vw, 56px); }
.hero__inner { position: relative; }
.hero__text { position: relative; z-index: 1; max-width: 820px; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: .85rem; color: var(--ink);
  background: #fff; border: 1px solid var(--line); padding: 8px 16px; border-radius: 999px; margin-bottom: 20px;
}
.hero__eyebrow b { color: var(--red-ink); }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
.hero h1 .mark { position: relative; color: var(--red); white-space: nowrap; }
.hero__lead { font-size: clamp(1.05rem, 1.8vw, 1.22rem); color: var(--ink-soft); max-width: 54ch; margin-top: 14px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.hero__stats { display: flex; gap: 30px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.stat .n { font-weight: 700; font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1; }
.stat .n span { color: var(--red); }
.stat .l { font-size: .82rem; color: var(--muted); margin-top: 6px; }

/* Dezentes Emblem-Wasserzeichen als Brand-Textur (ersetzt das Foto) */
.hero__wm {
  position: absolute; z-index: 0; right: -4%; top: 50%;
  transform: translateY(-50%) rotate(-7deg);
  width: min(38vw, 400px); opacity: .06; pointer-events: none;
}

/* ------------------------------------------------------------ Aktuelles (editorial) */
.news { background: var(--paper); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 34px; }
.sec-head .link { font-family: var(--font-display); font-weight: 600; color: var(--red-ink); white-space: nowrap; }
.sec-head__more { display: inline-block; margin-top: 6px; }

/* „Alle …"-Button unter Sektionslisten – nur mobil */
.see-all { display: none; }
@media (max-width: 640px) {
  .hide-mobile { display: none; }
  .see-all { display: flex; justify-content: center; margin-top: 24px; }
  .see-all .btn { width: 100%; max-width: 360px; justify-content: center; }
}

.chip { font-family: var(--font-display); font-weight: 600; font-size: .74rem; padding: 5px 11px; border-radius: 999px; background: var(--red); color: #fff; }
.chip--ink { background: var(--ink); }

/* Einheitliche News-Karten – gleiche Optik, Foto optional, komplett anklickbar */
.news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); align-items: start; }
/* Masonry: JS setzt je Karte grid-row-end: span <höhe+gap in px> */
.news__grid.is-masonry { grid-auto-rows: 1px; row-gap: 0; }
.news-card {
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.news-card__media { overflow: hidden; background: var(--sand); }
.news-card__media img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease); }
.news-card:hover .news-card__media img { transform: scale(1.04); }
.news-card__body { display: flex; flex-direction: column; gap: 10px; padding: clamp(18px, 1.8vw, 24px); flex: 1; }
.news-card__meta { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--muted); }
.news-card h3 { font-size: clamp(1.14rem, 1.5vw, 1.42rem); line-height: 1.22; letter-spacing: -.01em; font-weight: 700; }
.news-card p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.news-card__more { margin-top: auto; padding-top: 6px; font-weight: 700; color: var(--red-ink); }
.news-card__more::after { content: " →"; }

/* ------------------------------------------------------------ Abteilungen (typo cards) */
.dept-b { background: var(--paper); }
.dept-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dept-card {
  position: relative; display: flex; align-items: center; gap: 20px;
  background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 22px 24px; overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s, background .2s;
}
.dept-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--red); transform: scaleY(0); transform-origin: top; transition: transform .25s var(--ease); }
.dept-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); background: #fff; }
.dept-card:hover::after { transform: scaleY(1); }
.dept-card__icon {
  flex: none; width: 54px; height: 54px; border-radius: 15px;
  display: grid; place-items: center; color: var(--red);
  background: #fff; border: 1px solid var(--line);
  transition: background .2s var(--ease), color .2s, border-color .2s;
}
.dept-card__icon svg { width: 28px; height: 28px; }
.dept-card:hover .dept-card__icon { background: var(--red); border-color: var(--red); color: #fff; }
.dept-card__body { flex: 1; }
.dept-card__body h3 { font-size: 1.4rem; margin: 0 0 2px; letter-spacing: -.02em; }
.dept-card__body p { margin: 0; color: var(--muted); font-size: .9rem; }
.dept-card__arrow { color: var(--ink); font-size: 1.3rem; transition: transform .2s var(--ease); }
.dept-card:hover .dept-card__arrow { transform: translateX(4px); color: var(--red); }

/* ------------------------------------------------------------ Termine (timeline) */
.tl { position: relative; max-width: 760px; margin-left: 6px; padding-left: 34px; }
.tl::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl__item { position: relative; padding: 14px 0 22px; }
.tl__item::before { content: ""; position: absolute; left: -34px; top: 20px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--red); }
.tl__date { font-family: var(--font-display); font-weight: 600; color: var(--red-ink); font-size: .9rem; }
.tl__item h3 { font-size: 1.25rem; margin: 4px 0 2px; letter-spacing: -.01em; }
.tl__item p { margin: 0; color: var(--muted); font-size: .92rem; }
.tl-empty { color: var(--muted); }
.tl-empty .link { font-family: var(--font-body); color: var(--red-ink); font-weight: 600; }

/* Termine-Seite */
.termin-h { font-family: var(--font-body); font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 14px; }
.termin-archive { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.termin-archive__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.termin-archive__head .termin-h { margin: 0; }
.termin-list { display: grid; }
.termin-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.termin-row__date { color: var(--red-ink); font-weight: 600; font-size: .9rem; line-height: 1.4; }
.termin-row__time { display: block; color: var(--muted); font-weight: 500; }
.termin-row__title { font-weight: 600; }
.termin-row__meta { color: var(--muted); font-size: .88rem; margin-top: 2px; }
@media (max-width: 560px) {
  .termin-row { grid-template-columns: 1fr; gap: 2px; }
  .termin-row__time { display: inline; }
}

/* ------------------------------------------------------------ CTA band */
.cta-band { background: var(--red); color: #fff; }
.cta-band__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(40px, 6vw, 72px) 0; }
.cta-band h2 { font-size: clamp(2rem, 4.4vw, 3.3rem); max-width: 20ch; }
.cta-band p { margin: 8px 0 0; color: rgba(255,255,255,.9); max-width: 42ch; }

/* ------------------------------------------------------------ Sponsoren */
.sponsors { position: relative; }
.sponsors__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  justify-content: safe center;
  padding: 6px 4px;
  cursor: grab;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sponsors__track::-webkit-scrollbar { display: none; }
.sponsors__track:active { cursor: grabbing; }
.sponsors__col { display: flex; flex-direction: column; gap: 14px; flex: 0 0 auto; }
.sponsor { font-family: var(--font-display); font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--line); padding: 16px 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.sponsor img { max-height: 46px; width: auto; -webkit-user-drag: none; user-select: none; pointer-events: none; }
a.sponsor { text-decoration: none; transition: border-color .18s, box-shadow .18s; }
a.sponsor:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(0,0,0,.06); }

/* ------------------------------------------------------------ Footer (light) */
.ftr { background: var(--ink); color: #cbc4ba; padding: 60px 0 calc(48px + 96px); }
.ftr a { color: #cbc4ba; }
.ftr a:hover { color: var(--red); }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px; }
.ftr h4 { color: #fff; font-size: 1rem; }
.ftr__logos { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ftr__logos img { height: 44px; }
.ftr__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ftr__social { display: flex; gap: 10px; margin-top: 16px; }
.ftr__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--red); background: var(--red); color: #fff; transition: color .18s, border-color .18s, background .18s; }
.ftr__social a:hover { color: #cfc7bb; background: transparent; border-color: rgba(255,255,255,.18); }
.ftr__social svg { width: 20px; height: 20px; }
.ftr__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; font-size: .85rem; line-height: 1.4; color: #948b7f; }
.ftr__copy, .ftr__credit, .ftr__legal { line-height: 1.4; }
.ftr__copy { grid-column: 1; justify-self: start; }
.ftr__credit { grid-column: 2; justify-self: center; text-align: center; white-space: nowrap; }
.ftr__legal { grid-column: 3; justify-self: end; text-align: right; }
.ftr__heart { display: inline-block; width: 13px; height: 13px; vertical-align: middle; position: relative; top: -1px; color: var(--red); }
@media (max-width: 640px) {
  .ftr__bottom { grid-template-columns: 1fr; justify-items: center; gap: 10px; text-align: center; }
  .ftr__copy, .ftr__credit, .ftr__legal { grid-column: 1; justify-self: center; text-align: center; }
  .ftr__copy { order: 1; }
  .ftr__legal { order: 2; }
  .ftr__credit { order: 3; }
}

/* ------------------------------------------------------------ Mobile top bar + floating nav */
.mtop { display: none; }
.fnav { display: none; }
.ovl { display: none; }

/* Enger Header: Wortmarke weglassen, nur Emblem – verhindert umbrechende Labels */
@media (max-width: 1180px) {
  .hdr .brand__name { display: none; }
  .pill-nav__link { padding: 0 13px; font-size: .9rem; }
  .hdr__cta .btn { padding: 0 18px; }
  .hdr__in { gap: 12px; }
}
@media (max-width: 1010px) {
  .hdr__shop { display: none; } /* bleibt im Menü-Overlay und im Footer erreichbar */
}

@media (prefers-reduced-motion: reduce) {
  .pill-nav__indicator, .hdr__in, .brand__emblem,
  .flyout, .hdr__shop-arrow { transition: none !important; }
}

@media (max-width: 940px) {
  .hero__wm { display: none; }
  .news__grid { grid-template-columns: repeat(2, 1fr); }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}

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

@media (max-width: 860px) {
  .hdr { display: none; }
  .mtop { display: flex; align-items: center; justify-content: center; position: sticky; top: 0; z-index: 63; padding: 8px 0 9px; background: var(--cream); border-bottom: 1px solid var(--line); }
  .mtop .brand { flex-direction: column; gap: 4px; }
  .mtop .brand__emblem { height: 48px; }
  .mtop__name { font-family: var(--font-body); font-weight: 600; font-size: .76rem; letter-spacing: .05em; color: var(--muted); }

  /* Freischwebende Pill-Navigation */
  .fnav {
    display: flex; position: fixed; z-index: 65;
    left: 50%; transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 24px));
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 999px;
    box-shadow: 0 18px 40px -14px rgba(30,20,10,.4);
    padding: 8px;
  }
  .fnav a, .fnav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-family: var(--font-body); font-weight: 600; font-size: .66rem; color: var(--muted);
    background: none; border: 0; cursor: pointer; padding: 7px 0; border-radius: 999px;
  }
  .fnav svg { width: 23px; height: 23px; stroke: currentColor; }
  .fnav a[aria-current] { color: var(--red-ink); }
  .fnav a[aria-current] svg { stroke: var(--red-ink); }

  /* Burger, der beim Öffnen zum X morpht (derselbe Button schließt wieder) */
  .fnav .burger { position: relative; width: 23px; height: 22px; }
  .fnav .burger span {
    position: absolute; top: 50%; left: 1px; right: 1px; height: 2.4px; margin-top: -1.2px;
    border-radius: 3px; background: currentColor; transition: transform .3s var(--ease), opacity .2s;
  }
  .fnav .burger span:nth-child(1) { transform: translateY(-6px); }
  .fnav .burger span:nth-child(3) { transform: translateY(6px); }
  #navToggle[aria-expanded="true"] .burger span:nth-child(1) { transform: rotate(45deg); }
  #navToggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
  #navToggle[aria-expanded="true"] .burger span:nth-child(3) { transform: rotate(-45deg); }

  /* Menü-Card: cremefarben, erscheint über der Bottom-Pille (kein Vollbild) */
  .ovl {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(23,19,15,.4); opacity: 0; pointer-events: none;
    transition: opacity .26s var(--ease);
  }
  .ovl.is-open { opacity: 1; pointer-events: auto; }
  .ovl__card {
    position: fixed; z-index: 70; left: 50%;
    bottom: calc(102px + env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 24px));
    /* Höhe an den dynamischen Viewport binden, damit sie unter Chromes variabler
       Bottom-Bar immer zwischen Header und Bottom-Pille passt (vh als Fallback) */
    max-height: calc(100vh - 210px);
    max-height: calc(100dvh - 200px - env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--cream); border: 1px solid var(--line); border-radius: 26px;
    box-shadow: var(--shadow); padding: 12px 14px 16px;
    transform: translateX(-50%) translateY(18px) scale(.98); transform-origin: bottom center;
    opacity: 0; transition: opacity .26s var(--ease), transform .26s var(--ease);
  }
  .ovl.is-open .ovl__card { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  .ovl__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
  .ovl__item { display: block; }
  .ovl__row { display: flex; align-items: center; border-radius: 13px; transition: background .14s; }
  .ovl__link { flex: 1; min-width: 0; display: block; font-family: var(--font-body); font-weight: 600; font-size: 1.06rem; color: var(--ink); padding: 12px 14px; }
  /* Aktiver Bereich: nur Hintergrund + rote Schrift (keine Linie) */
  .ovl__row.is-current { background: rgba(208,38,12,.08); }
  .ovl__row.is-current .ovl__link { color: var(--red-ink); font-weight: 800; }
  /* Chevron rechts: klappt die Unterpunkte auf/zu */
  .ovl__toggle { flex: none; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; width: 46px; background: none; border: 0; color: var(--ink-soft); cursor: pointer; border-radius: 13px; }
  .ovl__chevron { width: 20px; height: 20px; transition: transform .25s var(--ease); }
  .ovl__toggle[aria-expanded="true"] .ovl__chevron { transform: rotate(180deg); }
  /* Untermenü – standardmäßig eingeklappt, slidet per JS auf */
  .ovl__submenu { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
  .ovl__submenu a { display: block; font-family: var(--font-body); font-weight: 500; font-size: .96rem; color: var(--ink-soft); padding: 9px 14px 9px 26px; border-radius: 11px; }
  .ovl__foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
  .ovl__foot .btn { width: 100%; justify-content: center; height: 50px; }
  .ovl__shop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; color: var(--ink); }
  .ovl__shop svg { width: 19px; height: 19px; flex: none; }
  .ovl__legal { text-align: center; font-size: .85rem; color: var(--muted); }
  .ovl__legal a { color: var(--muted); }
  /* Kein Focus-Ring in der mobilen Navigation (Pille + Menü-Card) */
  .fnav a:focus, .fnav a:focus-visible, .fnav button:focus, .fnav button:focus-visible,
  .ovl a:focus, .ovl a:focus-visible, .ovl button:focus, .ovl button:focus-visible { outline: none; }
  /* Scroll-Lock auf <html>, damit die sticky .mtop am Viewport bleibt (nicht am Body) */
  html.nav-open { overflow: hidden; }
}

/* Hover-Feedback der mobilen Nav nur auf echten Zeigergeräten – auf Touch bleibt
   der Hintergrund initial (kein „kleben bleibender" Hover nach dem Tippen). */
@media (hover: hover) and (max-width: 860px) {
  .ovl__row:hover { background: var(--sand); }
  .ovl__row.is-current:hover { background: rgba(208,38,12,.13); }
  .ovl__toggle:hover { color: var(--ink); }
  .ovl__submenu a:hover { background: var(--sand); color: var(--ink); }
}

@media (max-width: 620px) {
  .dept-list { grid-template-columns: 1fr; }
  .hero__stats { gap: 20px; }
  .ftr__grid { grid-template-columns: 1fr; }
  .cta-band__in { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* =========================================================================
   Typo-Finish: Anton NUR in den kursiven Display-Headlines.
   Alle Labels, Facts, Buttons, Nummern & Monogramme in Manrope.
   (Steht bewusst am Dateiende, damit es die früheren font-display-Regeln
   sicher überschreibt.)
   ========================================================================= */
.kicker, .hero__eyebrow, .btn, .sec-head .link, .chip, .tl__date,
.sponsor, .pill-nav a, .hdr__shop, .ovl__list a {
  font-family: var(--font-body);
}
/* Facts: kräftig, aber Manrope (nicht Anton) */
.stat .n {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -.02em;
}

/* =========================================================================
   News-Ausgabe: Card-Textbegrenzung, Archiv-Navigation, Detailseite, Rich-Text
   ========================================================================= */
.news-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card p  { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Archiv – Filter (Jahr + Monat als Selects) */
.sec-head--tight { margin-bottom: 14px; }
.arc-filters { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-bottom: 22px; }
.arc-field { display: flex; align-items: center; gap: 12px; }
.arc-field__label { font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); }
.select { position: relative; display: inline-block; }
.select select {
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 999px;
  padding: 12px 48px 12px 20px; cursor: pointer; box-shadow: var(--shadow-sm);
  transition: border-color .15s;
}
.select select:hover { border-color: var(--ink-soft); }
.select select:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.select::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--red); border-bottom: 2px solid var(--red);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.arc-empty { color: var(--muted); }

/* Detailseite */
.article { max-width: 820px; margin-inline: auto; }
.article__back { display: inline-block; margin-bottom: 20px; color: var(--red-ink); font-weight: 600; }
.article__back:hover { color: var(--red); }
.article__head { margin-bottom: 22px; }
.article__title { text-transform: none; letter-spacing: -.01em; font-size: clamp(1.8rem, 4vw, 2.8rem); margin-top: 12px; }
.article__media { border-radius: var(--r-md); overflow: hidden; margin: 8px 0 26px; background: var(--sand); }
.article__media img { width: 100%; height: auto; }
.article__lead { font-weight: 500; color: var(--ink); }

/* Rich-Text (CKEditor-Ausgabe) */
.prose { color: var(--ink-soft); line-height: 1.7; }
.prose > * + * { margin-top: 1em; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); font-family: var(--font-body); font-weight: 800; line-height: 1.2; margin-top: 1.4em; letter-spacing: -.01em; }
.prose h2 { font-size: 1.5rem; } .prose h3 { font-size: 1.25rem; }
.prose a { color: var(--red-ink); text-decoration: underline; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose img { border-radius: var(--r-sm); height: auto; }
.prose blockquote { margin: 1.2em 0; padding: .4em 1.1em; border-left: 3px solid var(--red); color: var(--ink); font-style: italic; }

/* =========================================================================
   Chronik – Kapitel-Langtext
   ========================================================================= */
.chronik__intro { max-width: 64ch; margin: 4px 0 24px; }
/* Mobil: Kapitel-Navigation als horizontale Zeile oben */
.chronik__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.chronik__nav a { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; font-size: .92rem; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.chronik__nav a:hover,
.chronik__nav a.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chronik__chapter { padding-top: 40px; scroll-margin-top: 100px; }
.chronik__chaptertitle { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.05rem); color: var(--red-ink); letter-spacing: .01em; margin: 0 0 16px; }
.chronik .prose img { display: block; margin: 22px 0; max-width: min(520px, 100%); border-radius: var(--r-sm); }

/* Desktop: sticky Seitenleiste links */
@media (min-width: 860px) {
  .chronik__layout { display: grid; grid-template-columns: 190px 1fr; gap: clamp(32px, 4vw, 56px); align-items: start; }
  .chronik__aside { position: sticky; top: 100px; }
  .chronik__nav { flex-direction: column; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0; border-bottom: none; }
  .chronik__nav a { justify-content: flex-start; }
  .chronik__main .chronik__chapter:first-child { padding-top: 0; }
}

/* =========================================================================
   Verein-Übersicht – Facts + Quicklinks
   ========================================================================= */
.stat-row { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 64px); margin: 8px 0 26px; }
.stat { display: flex; flex-direction: column; }
.stat .n { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--red-ink); }
.stat .l { margin-top: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.verein__intro { max-width: 64ch; }
.verein__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.verein__links a { display: inline-flex; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-weight: 600; font-size: .92rem; color: var(--ink); transition: background .15s, border-color .15s, color .15s; }
.verein__links a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.prose figure { margin: 22px 0; }
.prose figure img { margin: 0; max-width: min(360px, 100%); }
.prose figcaption { margin-top: 8px; color: var(--muted); font-size: .85rem; font-style: italic; }
/* Bild-Galerie: mehrspaltig, sobald Platz da ist */
.prose .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin: 22px 0; }
.prose .gallery figure { margin: 0; }
.prose .gallery img { width: 100%; max-width: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* =========================================================================
   Vorstand – Team-Grid
   ========================================================================= */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.team-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.team-card__photo { aspect-ratio: 1 / 1; background: var(--sand); display: grid; place-items: center; overflow: hidden; }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__mono { font-family: var(--font-display); font-weight: 700; font-size: 3rem; color: var(--red); }
.team-card__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: var(--red); opacity: .5; }
.team-card__placeholder svg { width: 46%; height: 46%; max-width: 120px; }
.team-card__body { padding: 15px 18px 20px; }
.team-card__role { display: block; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .11em; color: var(--red-ink); margin-bottom: 4px; }
.team-card__body h3 { font-size: 1.18rem; margin: 0 0 6px; letter-spacing: -.01em; }
.team-card__meta { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.team-contact { margin-top: 26px; color: var(--ink-soft); }
.team-contact a { color: var(--red-ink); font-weight: 600; }

/* =========================================================================
   Abteilung – Detailseite
   ========================================================================= */
.dept-detail__head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.dept-detail__icon { flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; color: var(--red); background: var(--cream); border: 1px solid var(--line); }
.dept-detail__icon svg { width: 34px; height: 34px; }
.dept-detail__tagline { margin: 6px 0 0; color: var(--muted); }
.dept-facts { margin: 0 0 8px; border-top: 1px solid var(--line); }
.dept-facts > div { display: grid; grid-template-columns: 160px 1fr; gap: 16px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.dept-facts dt { color: var(--muted); font-size: .82rem; font-weight: 600; }
.dept-facts dd { margin: 0; color: var(--ink); font-size: .95rem; }
.dept-facts a { color: var(--red-ink); }
@media (max-width: 520px) {
  .dept-detail__head { gap: 14px; }
  .dept-facts > div { grid-template-columns: 1fr; gap: 2px; }
}

/* =========================================================================
   Kontaktformular
   ========================================================================= */
.kontakt__intro { max-width: 62ch; }
.form { max-width: 640px; margin-top: 24px; display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form__field { display: grid; gap: 6px; }
.form__field > span { font-weight: 600; font-size: .85rem; color: var(--ink-soft); }
.form input, .form textarea, .form select {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; width: 100%; transition: border-color .15s;
}
.form textarea { resize: vertical; min-height: 130px; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--ink-soft); }
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; }
.select--block { display: block; width: 100%; }
.select--block select { padding-right: 44px; cursor: pointer; }
.form .btn { justify-self: start; margin-top: 4px; }
.form__errors { margin: 0; padding: 12px 16px; list-style: none; background: rgba(255,56,24,.08); border: 1px solid rgba(255,56,24,.3); border-radius: 12px; color: var(--red-ink); font-size: .9rem; }
.form__errors li + li { margin-top: 4px; }
.form-notice { margin: 0 0 8px; padding: 14px 18px; background: rgba(46,160,67,.12); border: 1px solid rgba(46,160,67,.4); border-radius: 12px; color: #1a7f37; font-weight: 600; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }

/* =========================================================================
   Cookie-Consent
   ========================================================================= */
.cc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
.cc[hidden] { display: none; }
.cc__inner {
  max-width: var(--wrap); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  background: var(--ink); color: #f0ece6; border-radius: var(--r-md);
  padding: 18px 22px; box-shadow: var(--shadow);
}
.cc__text { margin: 0; font-size: .9rem; line-height: 1.5; max-width: 62ch; }
.cc__text a { color: #fff; text-decoration: underline; }
.cc__actions { display: flex; gap: 10px; flex: none; }
.cc__actions .btn { padding: 11px 20px; }
.cc__actions .btn--outline { color: #fff; border-color: rgba(255,255,255,.5); background: transparent; }
.cc__actions .btn--outline:hover { background: rgba(255,255,255,.12); border-color: #fff; }
@media (max-width: 640px) {
  .cc__inner { flex-direction: column; align-items: stretch; }
  .cc__actions { justify-content: stretch; }
  .cc__actions .btn { flex: 1; justify-content: center; }
}

/* =========================================================================
   Bereichs-Layout mit Unternavigation (News · Verein · Abteilungen)
   Desktop: linke Sidebar-Spalte (~20/80). Mobil: horizontale Pill-Leiste.
   ========================================================================= */
.seclayout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(16px, 2vw, 28px); align-items: start; }
/* Im Bereichs-Layout füllt die Detail-Card die Spalte (kein zentriertes 820px-Panel),
   damit der Abstand zur Sidebar überall gleich klein ist wie bei den .panel-Seiten */
.seclayout .article { max-width: none; margin-inline: 0; }
.seclayout__aside { position: sticky; top: 92px; }

.subnav { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 12px; }
.subnav__title { display: block; font-family: var(--font-body); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: var(--muted); padding: 8px 12px 12px; }
.subnav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.subnav__link { display: block; padding: 10px 14px; border-radius: 13px; font-family: var(--font-body); font-weight: 600; font-size: .96rem; color: var(--ink-soft); transition: background .14s var(--ease), color .14s; }
.subnav__link.is-active { background: rgba(208,38,12,.09); color: var(--red-ink); }
@media (hover: hover) {
  .subnav__link:hover { background: var(--cream); color: var(--ink); }
  .subnav__link.is-active:hover { background: rgba(208,38,12,.12); color: var(--red-ink); }
}

/* Mobil: Sub-Navigation folgt dem Bottom-Nav-Pattern – fixierte, wischbare Pill-Leiste
   direkt über der Bottom-Pille. Rechts schneidet eine Pille an (Scroll-Hinweis). */
@media (max-width: 860px) {
  .seclayout { display: block; }
  .seclayout__aside {
    position: fixed; top: auto; z-index: 60;
    left: 50%; transform: translateX(-50%);
    bottom: calc(90px + env(safe-area-inset-bottom));
    width: min(440px, calc(100% - 24px)); padding: 6px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: 22px;
    box-shadow: 0 16px 34px -16px rgba(30,20,10,.42);
    overflow: hidden;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
  }
  /* beim Runterscrollen ausblenden (mehr Lesefläche), beim Hochscrollen wieder zeigen */
  .seclayout__aside.is-hidden {
    transform: translateX(-50%) translateY(calc(100% + 24px)); opacity: 0; pointer-events: none;
  }
  .subnav { background: none; border: 0; border-radius: 0; padding: 0; }
  .subnav__title { display: none; }
  .subnav__list {
    display: flex; gap: 6px; overflow-x: auto; padding: 0; margin: 0;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    /* rechter Rand blendet an → signalisiert horizontale Scrollbarkeit */
    -webkit-mask-image: linear-gradient(to right, #000 84%, transparent);
            mask-image: linear-gradient(to right, #000 84%, transparent);
  }
  .subnav__list::-webkit-scrollbar { display: none; }
  .subnav__link {
    flex: none; white-space: nowrap;
    background: transparent; border: 0; border-radius: 999px;
    padding: 9px 15px; font-size: .9rem; color: var(--ink-soft);
  }
  .subnav__link.is-active { background: rgba(208,38,12,.1); color: var(--red-ink); }
}

/* Chronik: Headline + Jahres-Inhaltsverzeichnis als gemeinsamer sticky Block (rechte Spalte) */
.chronik__stickyhead {
  position: sticky; top: 64px; z-index: 25;
  /* padding-top deckt beim Kleben den Bereich bis unter den Header ab; das negative
     margin-top hebt die optische Position im Ruhezustand wieder auf (Headline bleibt bei ~92px) */
  margin-top: -28px; padding-top: 28px; padding-bottom: 14px;
  background: var(--paper);
}
.chronik__toc {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 2px -16px 0; padding: 8px;
  border-radius: 999px; background: rgba(246,242,236,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.chronik__toc::-webkit-scrollbar { display: none; }
.chronik__toc a {
  flex: none; white-space: nowrap; padding: 8px 15px; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--ink-soft);
  transition: background .14s var(--ease), color .14s;
}
.chronik__toc a.is-active { background: rgba(208,38,12,.1); color: var(--red-ink); }
@media (hover: hover) { .chronik__toc a:hover { background: #fff; color: var(--ink); } }
/* Anker-Ziel nicht unter den fixierten Leisten (Header + sticky Kopf) verstecken */
.chronik__chapter { scroll-margin-top: 240px; }
/* Mobil: rechte Spalte entfällt → Kopf nicht sticky, TOC ausgeblendet */
@media (max-width: 860px) {
  .chronik__stickyhead { position: static; }
  .chronik__toc { display: none; }
  .chronik__chapter { scroll-margin-top: 90px; }
}