/* ==========================================================================
   TTC Thun — Hallenschwarz
   Design tokens and components, derived from the Claude Design mockup
   "TTC Thun Homepage v1 (Hallenschwarz)".
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Light.ttf") format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Semibold.ttf") format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-ExtraBold.ttf") format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:"Novecento Wide";src:url("../fonts/NovecentoWide-DemiBold.otf") format("opentype");font-weight:600;font-display:swap}

/* --- Tokens ---------------------------------------------------------------
   Two themes from one set of semantic names. Light is the v1 "Hallenschwarz"
   page palette; dark is design variant 1a of the same name — near-black
   #0B0D0F, the brighter club red #E30613, and #111A22 for raised surfaces.

   Names describe ROLE, never appearance, so no rule needs to know the theme:
     --bg / --bg-alt / --bg-invert   surfaces, back to front
     --fg-strong / --fg / --fg-muted text, loud to quiet
     --on-invert*                    text that always sits on --bg-invert
   -------------------------------------------------------------------------- */
:root{
  color-scheme:light;

  --accent:#C1121F;          /* fills: buttons, rules, borders */
  --accent-text:#C1121F;     /* accent-coloured TEXT — 7.6:1 on white */
  --accent-hover:#8E0D17;
  --accent-tint:#FDECEE;
  --accent-tint-border:#F6C9CD;
  --accent-on:#fff;

  --bg:#fff;
  --bg-alt:#F4F7F9;
  --bg-invert:#111A22;
  --bg-footer:#0E1620;

  --fg-strong:#111A22;
  --fg:#3A4750;
  --fg-body:#1C2831;
  --fg-muted:#5C6B75;
  --fg-quiet:#67757E;
  --fg-faint:#68717A;   /* was #8A939A (3.12:1 on white) — now 4.96:1 */

  --on-invert:#fff;
  --on-invert-soft:#C2CCD2;
  --on-invert-muted:#9AA7B0;
  --on-invert-line:rgba(255,255,255,.18);

  --border:#E7ECEF;
  --border-strong:#DDE4E8;

  --header-bg:rgba(255,255,255,.92);
  --hero-scrim:linear-gradient(90deg,rgba(17,26,34,.94) 0%,rgba(17,26,34,.72) 45%,rgba(17,26,34,.15) 100%);
  --hero-scrim-narrow:linear-gradient(180deg,rgba(17,26,34,.72) 0%,rgba(17,26,34,.88) 55%,rgba(17,26,34,.94) 100%);

  --shadow:0 2px 8px rgba(17,26,34,.06);
  --shadow-lift:0 10px 24px rgba(17,26,34,.10);

  --wrap:1200px;
  --gutter:32px;
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
  --ease:cubic-bezier(.2,0,.2,1);
}

[data-theme="dark"]{
  color-scheme:dark;

  /* Variant 1a uses the full-strength club red; it carries far better on
     near-black than the darker #C1121F, which muddies against #0B0D0F. */
  --accent:#E30613;          /* fills only: #fff on it is 5.3:1 */
  /* #E30613 as text is 3.99:1 on #0B0D0F and 3.60:1 on #111A22 — both below
     4.5:1, so accent TEXT lightens instead of reusing the fill colour. */
  --accent-text:#FF4D57;     /* 5.98:1 on page, 5.40:1 on raised */
  --accent-hover:#FF2A38;
  --accent-tint:rgba(227,6,19,.14);
  --accent-tint-border:rgba(227,6,19,.38);
  --accent-on:#fff;

  --bg:#0B0D0F;
  --bg-alt:#111A22;
  --bg-invert:#111A22;
  --bg-footer:#07090B;

  --fg-strong:#fff;
  --fg:#C2CCD2;
  --fg-body:#DDE4E8;
  --fg-muted:#9AA7B0;
  --fg-quiet:#9AA7B0;
  --fg-faint:#7C8894;

  --on-invert:#fff;
  --on-invert-soft:#C2CCD2;
  --on-invert-muted:#9AA7B0;
  --on-invert-line:rgba(255,255,255,.12);

  --border:rgba(255,255,255,.12);
  --border-strong:rgba(255,255,255,.20);

  --header-bg:rgba(11,13,15,.92);
  --hero-scrim:linear-gradient(90deg,rgba(11,13,15,.95) 0%,rgba(11,13,15,.60) 55%,rgba(11,13,15,.10) 100%);
  --hero-scrim-narrow:linear-gradient(180deg,rgba(11,13,15,.70) 0%,rgba(11,13,15,.90) 55%,rgba(11,13,15,.96) 100%);

  --shadow:0 2px 8px rgba(0,0,0,.45);
  --shadow-lift:0 10px 24px rgba(0,0,0,.55);
}

/* --- Reset ---------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--fg-body);background:var(--bg);
  transition:background-color 200ms var(--ease),color 200ms var(--ease);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
img{max-width:100%}
p,h1,h2,h3,h4,ul,figure{margin:0}
a{color:var(--accent-text);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:var(--accent-on);padding:12px 20px;font-weight:700;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;color:#fff;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);width:100%}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-block;border:0;font-family:inherit;font-size:16px;font-weight:700;
  padding:15px 26px;border-radius:var(--radius);cursor:pointer;text-align:center;
  transition:background 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease);
}
.btn--primary{background:var(--accent);color:var(--accent-on)}
.btn--primary:hover{background:var(--accent-hover);color:var(--accent-on);text-decoration:none}
.btn--ghost{border:1px solid rgba(255,255,255,.40);color:#fff;font-weight:600;background:transparent}
.btn--ghost:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.btn--outline{border:1px solid var(--accent);color:var(--accent-text);background:transparent;font-weight:700;padding:14px 24px}
.btn--outline:hover{background:var(--accent-tint);color:var(--accent-hover);text-decoration:none}

/* --- Eyebrow / section headings ------------------------------------------- */
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.eyebrow::before{content:"";display:block;width:44px;height:3px;background:var(--accent);flex-shrink:0}
.eyebrow span{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-quiet)}
.eyebrow--on-dark span{font-size:13px;color:var(--on-invert)}

.section-title{font-size:38px;line-height:1.12;font-weight:700;color:var(--fg-strong)}
.page-title{font-size:clamp(34px,6vw,52px);line-height:1.1;font-weight:700;color:var(--fg-strong)}
.lead{font-size:20px;line-height:1.6;color:var(--fg)}

/* --- Header --------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--header-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  padding-top:10px;padding-bottom:10px;min-height:100px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
}

/* Official club logo. One monochrome master, tonally inverted for each theme,
   so the artwork is identical on light and dark. */
.wordmark{display:flex;align-items:center;flex-shrink:0}
.wordmark:hover{text-decoration:none}
/* The official mark carries fine text ("TISCHTENNISCLUB", "PASSION.SPIN.SPEED.")
   and a bat that runs the full height, so it needs more room than a plain
   wordmark to stay legible. */
.wordmark__img{height:clamp(52px,6.2vw,80px);width:auto;display:block}
.wordmark__img.is-dark{display:none}
[data-theme="dark"] .wordmark__img.is-light{display:none}
[data-theme="dark"] .wordmark__img.is-dark{display:block}

.nav-toggle{
  display:none;order:3;border:1px solid var(--border-strong);background:var(--bg);
  border-radius:var(--radius);padding:9px 12px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--fg-strong);align-items:center;gap:8px;
}
.nav-toggle__bars{display:block;width:16px;height:10px;position:relative}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{
  content:"";position:absolute;left:0;right:0;height:2px;background:var(--fg-strong);border-radius:1px
}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars span{top:4px}
.nav-toggle__bars::after{bottom:0}

.site-nav{
  display:flex;gap:4px;order:3;flex:1 1 340px;min-width:0;
  justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
  scrollbar-width:thin;scrollbar-color:var(--on-invert-soft) transparent;
}
.site-nav::-webkit-scrollbar{height:4px}
.site-nav::-webkit-scrollbar-thumb{background:var(--on-invert-soft);border-radius:2px}
.site-nav a{
  font-size:15px;font-weight:600;padding:10px 14px;border-radius:var(--radius);
  white-space:nowrap;flex-shrink:0;color:var(--fg);background:transparent;
  transition:background 150ms var(--ease),color 150ms var(--ease);
}
.site-nav a:hover{background:var(--bg-alt);color:var(--fg-strong);text-decoration:none}
.site-nav a[aria-current="page"]{background:var(--accent-tint);color:var(--accent-text)}
.header-cta{
  flex-shrink:0;order:4;margin-left:auto;white-space:nowrap;
  background:var(--accent);color:var(--accent-on);font-size:15px;font-weight:700;padding:11px 18px;border-radius:var(--radius);
  transition:background 150ms var(--ease);
}
.header-cta:hover{background:var(--accent-hover);color:var(--accent-on);text-decoration:none}

@media (max-width:860px){
  :root{--gutter:20px}
  .nav-toggle{display:inline-flex}
  .site-nav{
    order:5;flex:1 0 100%;flex-wrap:wrap;overflow:visible;
    display:none;padding-top:8px;border-top:1px solid var(--border);margin-top:4px;
  }
  .site-nav.is-open{display:flex}
  .site-nav a{flex:1 1 auto;text-align:center}
  /* The CTA rides along inside the drawer instead of taking a permanent row —
     the hero already carries the same call to action above the fold. */
  .header-cta{order:6;flex:1 0 100%;margin-left:0;margin-bottom:4px;text-align:center;display:none}
  .site-nav.is-open ~ .header-cta{display:block}
}


/* --- Theme toggle ---------------------------------------------------------- */
.theme-toggle{
  order:2;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;cursor:pointer;font:inherit;
  background:transparent;color:var(--fg);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  transition:background 150ms var(--ease),color 150ms var(--ease),border-color 150ms var(--ease);
}
.theme-toggle:hover{background:var(--bg-alt);color:var(--fg-strong);border-color:var(--fg-faint)}
.theme-toggle svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
/* Show the icon for the theme you would switch TO. */
.theme-toggle .icon-moon{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:none}

/* Sponsor logos are dark artwork on transparent ground — they vanish on
   near-black. Variant 1a solves the same problem for the club logo with a
   white plate, so the tiles keep one here. */
[data-theme="dark"] .sponsor-tile:not(.sponsor-tile--empty){background:#fff;border-color:transparent}

/* Photographs carry more apparent brightness on a dark page than on white. */
[data-theme="dark"] a:hover{color:#FF7A80}
[data-theme="dark"] .hero__media img{filter:brightness(.88)}
[data-theme="dark"] .news-card__media img{filter:brightness(.92)}

@media (max-width:860px){
  .theme-toggle{order:2;margin-left:auto}
  .nav-toggle{margin-left:12px}
}

/* --- Hero ----------------------------------------------------------------- */
.hero{position:relative;background:var(--bg-invert);min-height:600px;display:flex;align-items:center;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;display:block}
.hero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:var(--hero-scrim);
}
.hero__body{position:relative;padding-top:88px;padding-bottom:88px}
.hero__inner{max-width:660px}
.hero h1{
  font-family:"Novecento Wide","Open Sans",sans-serif;font-weight:600;
  font-size:clamp(36px,6vw,60px);line-height:1.08;color:var(--on-invert);letter-spacing:.01em;
}
.hero p{margin-top:28px;font-size:20px;line-height:1.6;color:var(--on-invert-soft);max-width:540px}
.hero__actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
@media (max-width:860px){
  .hero__scrim{background:var(--hero-scrim-narrow)}
}
@media (max-width:600px){
  .hero{min-height:520px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
}

/* --- Fact bar ------------------------------------------------------------- */
.factbar{background:var(--bg-alt);border-bottom:1px solid var(--border)}
.factbar__inner{padding-top:32px;padding-bottom:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.fact{display:flex;flex-direction:column;gap:6px}
.fact dt{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-quiet)}
.fact dd{margin:0;font-size:17px;font-weight:600;color:var(--fg-strong)}

/* --- Generic section spacing ---------------------------------------------- */
.section{padding-top:96px;padding-bottom:96px}
.section--tight{padding-top:96px;padding-bottom:0}
.section--sponsors{padding-top:80px;padding-bottom:80px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:40px}
.link-more{font-size:15px;font-weight:600}

/* --- News cards ----------------------------------------------------------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.news-card{
  background:var(--bg);border:1px solid var(--border);border-top:4px solid var(--accent);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease);
}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.news-card__media{height:170px;background:var(--bg-alt)}
.news-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.news-card__body{padding:32px;display:flex;flex-direction:column;gap:12px}
.news-card__kicker{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.news-card h3{font-size:22px;line-height:1.2;font-weight:700;color:var(--fg-strong)}
.news-card p{font-size:16px;line-height:1.6;color:var(--fg)}
.news-card time{font-size:14px;color:var(--fg-faint)}

/* Placeholder tile, standing in for the mockup's <image-slot> */
.slot{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);color:var(--fg-faint);
  font-size:13px;line-height:1.4;text-align:center;padding:16px;
  border:1px dashed var(--border-strong);
}

/* --- Split section (Für alle) --------------------------------------------- */
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:64px;align-items:start}
.offers{display:grid;gap:16px;margin:0;padding:0}
.offer{display:flex;gap:16px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--border)}
.offer__num{font-size:13px;font-weight:700;color:var(--accent-text);min-width:24px}
.offer h3{font-size:18px;font-weight:600;color:var(--fg-strong)}
.offer p{margin-top:4px;font-size:16px;line-height:1.6;color:var(--fg-muted)}

/* --- Dark band ------------------------------------------------------------ */
.band-dark{background:var(--bg-invert)}
.band-dark__inner{
  padding-top:88px;padding-bottom:88px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:48px;align-items:center;
}
.band-dark h2{font-size:32px;line-height:1.14;font-weight:700;color:var(--on-invert)}
.band-dark p{margin-top:16px;font-size:18px;line-height:1.6;color:var(--on-invert-soft)}
.band-dark .btn{margin-top:28px;padding:14px 24px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px;margin:0}
.stat{border-left:1px solid var(--on-invert-line);padding-left:20px}
.stat__value{font-size:44px;font-weight:800;color:var(--on-invert);line-height:1}
.stat__label{margin-top:8px;font-size:14px;color:var(--on-invert-muted);line-height:1.4}

/* --- Sponsors ------------------------------------------------------------- */
.sponsor-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.sponsor-head h2{font-size:22px;font-weight:600;color:var(--fg-strong)}
.sponsor-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.sponsor-tile{
  height:96px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);
  display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;
}
.sponsor-tile img{max-width:100%;max-height:100%;object-fit:contain}
.sponsor-tile--empty{background:var(--bg-alt);border-style:dashed;color:var(--fg-faint);font-size:13px}

/* --- Sub pages ------------------------------------------------------------ */
.page{padding-top:72px;padding-bottom:96px}
.notice{
  margin-top:32px;background:var(--accent-tint);border:1px solid var(--accent-tint-border);
  border-radius:var(--radius-lg);padding:32px;display:grid;gap:12px;max-width:900px;
}
.notice h2{font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.notice ul{padding-left:20px;display:grid;gap:8px;font-size:16px;line-height:1.6;color:var(--fg)}

.league{margin-top:64px}
.league h2{font-size:28px;font-weight:700;color:var(--fg-strong);padding-bottom:16px;border-bottom:1px solid var(--border)}
.team-grid{margin-top:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.team-card{
  display:flex;flex-direction:column;gap:10px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow);
  transition:transform 220ms var(--ease),box-shadow 220ms var(--ease);
}
.team-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);text-decoration:none}
.team-card__name{font-size:19px;font-weight:700;color:var(--fg-strong)}
.team-card__league{font-size:15px;color:var(--fg-muted)}
.team-card__cta{margin-top:4px;font-size:15px;font-weight:600;color:var(--accent-text)}

/* Spielbetrieb */
.venue{background:var(--bg-alt);border-radius:var(--radius-xl);padding:32px}
.venue h2{font-size:22px;font-weight:700;color:var(--fg-strong)}
.venue address{margin-top:16px;font-size:17px;line-height:1.7;color:var(--fg);font-style:normal}
.venue__map{margin-top:24px;height:260px;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--border);border:1px solid var(--border)}
.venue__map iframe{width:100%;height:100%;border:0;display:block}
/* OSM tiles are a light artwork. On the near-black theme a raw white block
   glares, so knock it back rather than inverting — inverted maps make the
   place names much harder to read. */
[data-theme="dark"] .venue__map iframe{filter:brightness(.78) contrast(1.06) saturate(.9)}
.venue__links{margin-top:12px;font-size:15px;color:var(--fg-muted);display:flex;gap:10px;flex-wrap:wrap}
.venue__links a{font-weight:600}
.training{margin-top:24px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.training__head,.training__row{display:grid;grid-template-columns:64px 1fr 1fr;gap:16px;align-items:start}
.training__head{padding:14px 24px;background:var(--bg-alt);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-quiet)}
.training__row{padding:20px 24px;border-top:1px solid var(--border)}
.training__day{font-size:17px;font-weight:700;color:var(--accent-text)}
.training__slot{font-size:16px;color:var(--fg)}
.training__note{grid-column:1 / -1;font-size:15px;line-height:1.6;color:var(--fg-muted)}

/* Sponsoring */
.package-grid{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.package{
  border:1px solid var(--border);border-top:4px solid var(--accent);border-radius:var(--radius-lg);
  padding:32px;background:var(--bg);box-shadow:var(--shadow);
}
.package h2{font-size:20px;font-weight:700;color:var(--fg-strong)}
.package p{margin-top:10px;font-size:16px;line-height:1.6;color:var(--fg-muted)}
.cta-panel{
  margin-top:64px;background:var(--bg-invert);border-radius:var(--radius-xl);padding:56px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:32px;align-items:center;
}
.cta-panel h2{font-size:28px;line-height:1.14;font-weight:700;color:var(--on-invert)}
.cta-panel p{margin-top:16px;font-size:18px;line-height:1.6;color:var(--on-invert-soft)}
@media (max-width:600px){.cta-panel{padding:32px}}

/* Kontakt */
.contact{margin-top:48px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:48px;align-items:start}
.form{display:grid;gap:20px}
.field{display:grid;gap:8px}
.field > span{font-size:14px;font-weight:600;color:var(--fg-strong)}
.field input,.field textarea{
  font-family:inherit;font-size:16px;padding:13px 16px;border:1px solid var(--border-strong);
  border-radius:var(--radius);color:var(--fg-body);background:var(--bg);width:100%;
}
.field textarea{resize:vertical}
.field input:hover,.field textarea:hover{border-color:var(--fg-faint)}
.form__note{font-size:14px;line-height:1.6;color:var(--fg-muted)}
.contact-aside{background:var(--bg-alt);border-radius:var(--radius-xl);padding:32px;display:grid;gap:24px}
.contact-aside h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-quiet)}
.contact-aside p,.contact-aside address{margin-top:10px;font-size:17px;line-height:1.7;color:var(--fg);font-style:normal}

/* Impressum */
.legal{max-width:800px}
.legal__body{margin-top:40px;display:grid;gap:40px}
.legal h2{font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-quiet)}
.legal p{margin-top:14px;font-size:17px;line-height:1.7;color:var(--fg)}

/* --- Footer --------------------------------------------------------------- */
.site-footer{background:var(--bg-footer);color:var(--on-invert-muted);margin-top:auto}
.site-footer__inner{
  padding-top:64px;padding-bottom:32px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;
}
.site-footer__logo{height:52px;width:auto;display:block}
.site-footer address{margin-top:14px;font-size:15px;line-height:1.7;font-style:normal}
.site-footer h2{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-invert-soft)}
.site-footer nav{margin-top:14px;display:grid;gap:8px;font-size:15px}
.site-footer nav a{color:var(--on-invert-muted)}
.site-footer nav a:hover{color:var(--on-invert)}
.site-footer__legal{padding-top:24px;padding-bottom:40px;border-top:1px solid var(--on-invert-line);font-size:14px}

@media print{
  .site-header,.site-footer,.hero__media,.hero__scrim{background:none}
  .site-nav,.header-cta,.nav-toggle,.skip-link{display:none}
  body{color:#000}
}

.empty-note{padding:40px;text-align:center;font-size:16px;color:var(--fg-muted);
  background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-lg)}

/* Extra images on an archive entry, beyond the cover. */
.gallery{list-style:none;padding:0;margin:14px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.gallery img{width:100%;height:56px;object-fit:cover;border-radius:6px;
  border:1px solid var(--border);display:block;
  transition:transform 180ms var(--ease),border-color 180ms var(--ease)}
.gallery a:hover img{transform:scale(1.04);border-color:var(--accent)}

/* A post with no photo shows the club crest rather than an empty placeholder. */
.news-card__crest{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--bg-alt);border-bottom:1px solid var(--border);
}
.news-card__crest img{width:auto;height:64px;opacity:.85;display:block}
[data-theme="dark"] .news-card__crest img{opacity:.95}

/* --- Photo album ----------------------------------------------------------- */
.news-card__media{position:relative;display:block}
.news-card__media:hover img{transform:scale(1.03)}
.news-card__media img{transition:transform 320ms var(--ease)}
.news-card__count{
  position:absolute;right:10px;bottom:10px;background:rgba(11,13,15,.78);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 10px;border-radius:999px;
  pointer-events:none;
}
.gallery li{list-style:none}

/* An author `display` beats the hidden attribute's UA `display:none`, so the
   closed dialog must be hidden explicitly or it covers every page. */
.lightbox[hidden]{display:none}
.lightbox{
  position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:24px;background:rgba(7,9,11,.94);backdrop-filter:blur(6px);
}
body.has-lightbox{overflow:hidden}
.lightbox__figure{
  margin:0;flex:1 1 auto;min-width:0;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.lightbox__img{
  max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;
  border-radius:var(--radius-lg);box-shadow:0 24px 60px rgba(0,0,0,.6);background:#111A22;
}
.lightbox__cap{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
  color:#C2CCD2;font-size:15px;text-align:center;
}
.lightbox__count{color:#7C8894;font-variant-numeric:tabular-nums}
.lightbox__close,.lightbox__nav{
  flex-shrink:0;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#fff;border-radius:999px;cursor:pointer;font-family:inherit;line-height:1;
  transition:background 150ms var(--ease),border-color 150ms var(--ease);
}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.lightbox__nav{width:52px;height:52px;font-size:30px}
.lightbox__close{position:absolute;top:20px;right:20px;width:44px;height:44px;font-size:26px}
.lightbox :focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (max-width:640px){
  .lightbox{padding:12px;gap:4px}
  .lightbox__nav{width:42px;height:42px;font-size:24px}
  .lightbox__img{max-height:calc(100vh - 170px)}
}
@media (prefers-reduced-motion:reduce){
  .news-card__media:hover img{transform:none}
}

/* Clamped post text on the homepage cards. The clamp is applied by JS, so with
   scripting off the full text is shown rather than silently cut off. */
.news-card__text.is-clamped{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.news-card__more{
  align-self:flex-start;margin-top:-4px;padding:0;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:600;color:var(--accent-text);
}
.news-card__more:hover{text-decoration:underline;text-underline-offset:3px}

/* --- Vorstand -------------------------------------------------------------- */
.board-grid{
  list-style:none;padding:0;margin:40px 0 0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 24px;
}
.board-card{display:flex;flex-direction:column;gap:4px}
.board-card__photo{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:var(--radius-lg);
  background:var(--bg-alt);border:1px solid var(--border);margin-bottom:14px;display:block;
}
/* Until someone uploads a photo, their initials stand in — a dashed empty box
   would read as broken on a page about actual people. */
.board-card__initials{
  display:flex;align-items:center;justify-content:center;
  font-family:"Novecento Wide","Open Sans",sans-serif;font-weight:600;
  font-size:38px;letter-spacing:.04em;color:var(--accent-text);
  background:var(--accent-tint);border-color:transparent;
}
/* Reserve two lines so a role that wraps ("Marketing & Kommunikation") does not
   push its name out of line with the rest of the row. */
.board-card__role{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-quiet);line-height:1.4;min-height:2.8em}
.board-card__name{font-size:18px;font-weight:700;color:var(--fg-strong);line-height:1.3}