/* ============================================================
   SWITZERLAND MARATHON light – 2026
   Design system: modern, alpine, fast, accessible
   ============================================================ */

:root{
  /* Brand — SMlight red, the classic palette */
  --sml-red:        #E30613;
  --sml-red-dark:   #B30410;
  --sml-red-soft:   #FFE6E8;
  --accent:         #E30613;
  --accent-dark:    #B30410;
  --accent-soft:    #FFE6E8;
  --alpine-blue:    #0B5394;
  --alpine-blue-2:  #1976D2;
  --alpine-deep:    #062544;
  --gold:           #F59E0B;
  --gold-dark:      #D97706;

  /* Neutrals */
  --ink:            #0A1929;
  --ink-2:          #1F2A37;
  --muted:          #4B5563;
  --line:           #E5E7EB;
  --bg:             #FFFFFF;
  --bg-alt:         #F8FAFC;
  --bg-deep:        #061327;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-md: 0 10px 30px -10px rgba(2, 12, 27, .15);
  --shadow-lg: 0 30px 60px -20px rgba(2, 12, 27, .25);
  --shadow-red: 0 14px 30px -10px rgba(227, 6, 19, .45);

  /* Radius — sharp/sport */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-pill: 2px;

  /* Type scale (fluid) */
  --fs-xs:  clamp(.78rem, .72rem + .2vw, .85rem);
  --fs-sm:  clamp(.88rem, .82rem + .2vw, .95rem);
  --fs-md:  clamp(1rem, .94rem + .25vw, 1.05rem);
  --fs-lg:  clamp(1.15rem, 1rem + .6vw, 1.4rem);
  --fs-xl:  clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --fs-3xl: clamp(2.6rem, 1.4rem + 4.4vw, 5.5rem);

  /* Spacing */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;
  --sp-14: 6rem;
  --sp-20: 8rem;

  /* Container */
  --container: 1200px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------------- Reset ---------------- */
*, *::before, *::after { box-sizing: border-box; }
*{ margin: 0; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
a:hover{ color: var(--sml-red); }
button{ font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol{ list-style: none; padding: 0; }
h1, h2, h3, h4{ font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif; font-weight: 700; line-height: 1.05; letter-spacing: .01em; color: var(--ink); }
h1{ font-size: var(--fs-3xl); }
h2{ font-size: var(--fs-2xl); }
h3{ font-size: var(--fs-xl); }
p{ color: var(--muted); }

:focus-visible{ outline: 3px solid var(--sml-red); outline-offset: 3px; border-radius: 4px; }

/* ---------------- Utilities ---------------- */
.container{ width: min(var(--container), 100% - 2.5rem); margin-inline: auto; }
.eyebrow{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: var(--sml-red);
}
.eyebrow::before{ content: ""; width: 28px; height: 2px; background: var(--sml-red); display: inline-block; }
.text-balance{ text-wrap: balance; }
.hidden{ display: none !important; }
@media (max-width: 720px){ .hide-sm{ display: none; } }

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .9rem 1.6rem;
  font-weight: 700; font-size: var(--fs-sm); letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--sml-red) 0%, var(--sml-red-dark) 100%);
  color: #fff; box-shadow: var(--shadow-red);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 22px 40px -16px rgba(227, 6, 19, .55); color: #fff; }
.btn-ghost{ background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.25); }
.btn-ghost:hover{ background: rgba(255,255,255,.22); color: #fff; transform: translateY(-2px); }
.btn-dark{ background: var(--ink); color: #fff; }
.btn-dark:hover{ background: var(--alpine-deep); color: #fff; transform: translateY(-2px); }
.btn-outline{ background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.btn-outline:hover{ background: var(--ink); color: #fff; }
.btn-sm{ padding: .55rem 1rem; font-size: .72rem; }
.btn .arrow{ display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

/* ---------------- Header ---------------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: .9rem 0;
  background: rgba(10, 25, 41, 0);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), padding .25s var(--ease), box-shadow .3s var(--ease);
}
.site-header__inner{
  display: flex; align-items: center; gap: 1.5rem;
}
.site-header__inner .main-nav{ margin-left: auto; }
.site-header.is-scrolled{
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 4px 16px -6px rgba(2, 12, 27, .15);
  padding: .55rem 0;
}
.site-header.is-scrolled .main-nav a{ color: var(--ink); }
.site-header.is-scrolled .lang-switch a{ color: var(--ink); border-color: var(--line); }
.site-header.is-scrolled .hamburger span{ background: var(--ink); }
.brand{ display: flex; align-items: center; gap: .75rem; color: #fff; }
.brand svg{ width: 168px; height: auto; color: currentColor; }
.site-header.is-scrolled .brand{ color: var(--ink); }
.brand-tick{
  width: 4px; height: 36px; background: var(--sml-red); border-radius: 4px;
  transition: height .3s var(--ease);
}
.site-header.is-scrolled .brand-tick{ height: 28px; }

.main-nav{ display: flex; align-items: center; gap: 1.8rem; }
.main-nav a{
  color: #fff; font-size: .9rem; font-weight: 500;
  position: relative; padding: .25rem 0;
  transition: color .2s var(--ease);
}
.main-nav a::after{
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 0; height: 2px; background: var(--sml-red);
  transition: width .25s var(--ease);
}
.main-nav a:hover{ color: var(--sml-red); }
.main-nav a:hover::after, .main-nav a.is-active::after{ width: 100%; }

/* Red CTA in nav — kill nav underline, beef up padding to match nav rhythm */
.main-nav a.btn{ padding: .7rem 1.25rem; font-size: .78rem; }
.main-nav a.btn::after{ display: none; content: none; }
.main-nav a.btn:hover{ color: #fff; }
.site-header.is-scrolled .main-nav a.btn{ color: #fff; }
.site-header.is-scrolled .main-nav a.btn-primary{ color: #fff; }

.header-actions{ display: flex; align-items: center; gap: 1rem; }
.lang-switch{ display: flex; gap: .25rem; }
.lang-switch a{
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  color: rgba(255,255,255,.85); padding: .25rem .55rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-pill);
  transition: all .2s var(--ease);
}
.lang-switch a:hover, .lang-switch a.is-active{ background: var(--sml-red); color: #fff; border-color: var(--sml-red); }

.hamburger{ display: none; width: 32px; height: 22px; position: relative; }
.hamburger span{ position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; transition: all .3s var(--ease); }
.hamburger span:nth-child(1){ top: 0; }
.hamburger span:nth-child(2){ top: 50%; transform: translateY(-50%); }
.hamburger span:nth-child(3){ bottom: 0; }
.hamburger.is-open span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity: 0; }
.hamburger.is-open span:nth-child(3){ bottom: 50%; transform: translateY(50%) rotate(-45deg); }

@media (max-width: 980px){
  .main-nav{
    position: fixed; inset: 0; background: var(--bg-deep);
    flex-direction: column; justify-content: center; gap: 1.4rem;
    transform: translateY(-100%); transition: transform .4s var(--ease);
    padding: 4rem 2rem; overflow: auto;
  }
  .main-nav a{ color: #fff !important; font-size: 1.6rem; font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; }
  .main-nav.is-open{ transform: translateY(0); }
  .hamburger{ display: block; z-index: 200; }
  .lang-switch{ display: none; }
  /* When mobile menu is OPEN: force header dark, regardless of scroll state */
  .site-header.menu-open{
    background: var(--bg-deep) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
  .site-header.menu-open .brand{ color: #fff !important; }
  .site-header.menu-open .hamburger span{ background: #fff !important; }
}

/* ---------------- Hero (Sarnersee style) ---------------- */
.hero{
  position: relative; min-height: 100vh;
  display: flex; align-items: flex-end;
  color: #fff; isolation: isolate;
  padding: 8rem 0 4rem;
  overflow: hidden;
}
.hero::before{
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: image-set(
    url('../../images/2026/hero-runner.webp') type('image/webp'),
    url('../../images/2026/hero-runner.jpg') type('image/jpeg')
  );
  background-image: -webkit-image-set(
    url('../../images/2026/hero-runner.webp') type('image/webp'),
    url('../../images/2026/hero-runner.jpg') type('image/jpeg')
  );
  background-size: cover; background-position: center 35%;
}
@media (max-width: 720px){
  .hero::before{
    background-image: image-set(
      url('../../images/2026/hero-runner-800.webp') type('image/webp'),
      url('../../images/2026/hero-runner-800.jpg') type('image/jpeg')
    );
  }
}
.hero::after{
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,25,34,.65) 0%, rgba(10,25,34,.15) 40%, rgba(10,25,34,.85) 100%);
}
.hero__display{
  font-family: 'Inter', 'Arial Black', sans-serif;
  font-weight: 900; font-style: italic;
  font-size: clamp(2.4rem, 1rem + 5.5vw, 6.5rem);
  line-height: .92; letter-spacing: -.015em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.hero__display .accent{
  color: var(--sml-red);
  display: block;
  font-size: .42em;
  letter-spacing: .25em;
  font-weight: 700;
  font-style: italic;
  margin-top: .5em;
}
.hero__light{
  font-style: italic; font-weight: 300; text-transform: lowercase;
  letter-spacing: .01em;
}
.hero__date{
  font-family: 'Inter', sans-serif;
  font-style: italic; font-weight: 900;
  font-size: clamp(1.4rem, .8rem + 1.8vw, 2.4rem);
  color: var(--accent);
  margin-top: 1.5rem; line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.hero__lead{
  max-width: 56ch; margin-top: 1.5rem;
  color: rgba(255,255,255,.92); font-size: 1.05rem; line-height: 1.55;
}
.hero__cta{ display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2rem; }

@media (max-width: 720px){
  .hero{ padding: 7rem 0 3rem; min-height: 88vh; }
}

/* ---------------- Section base ---------------- */
section{ padding: var(--sp-14) 0; position: relative; }
.section-head{ max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-head h2{ margin-top: .5rem; }
.section-head p{ margin-top: 1rem; font-size: var(--fs-lg); }

/* ---------------- Race cards ---------------- */
.races{ background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.race-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; }
.race-card{
  position: relative; overflow: hidden;
  border-radius: var(--r-lg);
  background: #fff; padding: 1.75rem;
  border: 1px solid var(--line);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  display: flex; flex-direction: column; gap: 1rem;
}
.race-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.race-card__badge{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3.4rem; line-height: 1;
  background: linear-gradient(135deg, var(--sml-red), var(--sml-red-dark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: .02em;
}
.race-card__name{ font-size: 1.4rem; font-family: 'Bebas Neue', sans-serif; letter-spacing: .03em; }
.race-card__meta{ display: flex; flex-wrap: wrap; gap: .4rem .8rem; font-size: .82rem; color: var(--muted); margin-top: auto; }
.race-card__meta span{ display: inline-flex; align-items: center; gap: .35rem; }
.race-card__cta{ display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--sml-red); margin-top: .5rem; font-size: .85rem; }
.race-card__cta:hover{ color: var(--sml-red-dark); }
.race-card.is-featured{
  background: linear-gradient(135deg, var(--alpine-deep) 0%, var(--ink) 100%); color: #fff;
  border-color: transparent;
}
.race-card.is-featured .race-card__badge{ background: linear-gradient(135deg, #fff, rgba(255,255,255,.6)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.race-card.is-featured .race-card__name{ color: #fff; }
.race-card.is-featured .race-card__meta{ color: rgba(255,255,255,.7); }
.race-card.is-featured .race-card__cta{ color: var(--gold); }

/* ---------------- Feature blocks ---------------- */
.feature{
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center;
}
.feature.is-reverse{ direction: rtl; }
.feature.is-reverse > *{ direction: ltr; }
.feature__media{ border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; aspect-ratio: 4/3; }
.feature__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feature__media:hover img{ transform: scale(1.05); }
.feature__body h2{ margin-bottom: 1rem; }
.feature__body p{ margin-bottom: 1rem; }
.feature__list{ display: grid; gap: .75rem; margin: 1.5rem 0; }
.feature__list li{ position: relative; padding-left: 2rem; color: var(--ink-2); }
.feature__list li::before{
  content: ""; position: absolute; left: 0; top: .35em;
  width: 1.2rem; height: 1.2rem;
  background: var(--sml-red); border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / 75% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/></svg>") center / 75% no-repeat;
}
@media (max-width: 880px){
  .feature{ grid-template-columns: 1fr; gap: 2rem; }
  .feature.is-reverse{ direction: ltr; }
}

/* ---------------- Schedule ---------------- */
.schedule{ background: var(--alpine-deep); color: #fff; }
.schedule h2{ color: #fff; }
.schedule p{ color: rgba(255,255,255,.78); }
.schedule .section-head .eyebrow{ color: var(--gold); }
.schedule .section-head .eyebrow::before{ background: var(--gold); }
.schedule-list{
  display: grid; gap: .75rem;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg); padding: 1.5rem;
}
.schedule-row{
  display: grid; grid-template-columns: 110px 1fr auto; gap: 1.25rem; align-items: center;
  padding: 1rem; border-radius: var(--r-md);
  transition: background .25s var(--ease);
}
.schedule-row:hover{ background: rgba(255,255,255,.05); }
.schedule-row .time{ font-family: 'Bebas Neue', sans-serif; font-size: 1.6rem; color: var(--gold); letter-spacing: .03em; }
.schedule-row .what{ font-weight: 600; }
.schedule-row .what small{ display: block; font-weight: 400; opacity: .65; font-size: .78rem; margin-top: 2px; }
.schedule-row .tag{ font-size: .72rem; padding: .25rem .65rem; border-radius: var(--r-pill); background: rgba(245,158,11,.18); color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* ---------------- Pricing ---------------- */
.pricing{ background: var(--bg-alt); }
.price-table{
  background: #fff; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--line);
}
.price-table table{ width: 100%; border-collapse: collapse; }
.price-table th, .price-table td{ padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.price-table th{ background: var(--ink); color: #fff; font-family: 'Bebas Neue', sans-serif; font-weight: 400; letter-spacing: .06em; font-size: 1.1rem; }
.price-table tr:last-child td{ border-bottom: 0; }
.price-table tr.is-highlight td{ background: var(--sml-red-soft); font-weight: 600; color: var(--ink); }
.price-table td.amount{ font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; color: var(--sml-red); letter-spacing: .04em; }
@media (max-width: 720px){
  .price-table{ font-size: .8rem; }
  .price-table th, .price-table td{ padding: .65rem .75rem; }
}

/* ---------------- Info cards ---------------- */
.info-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.info-card{
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.75rem;
  transition: all .3s var(--ease);
}
.info-card:hover{ border-color: var(--sml-red); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-card .icon{
  width: 48px; height: 48px; border-radius: 3px;
  background: var(--sml-red-soft); color: var(--sml-red);
  display: grid; place-items: center; margin-bottom: 1rem;
}
.info-card h3{ font-size: 1.1rem; margin-bottom: .5rem; font-family: 'Inter', sans-serif; font-weight: 700; }
.info-card p{ font-size: .9rem; color: var(--muted); }

/* ---------------- CTA banner ---------------- */
.cta-banner{
  background:
    radial-gradient(900px 600px at 90% 0%, rgba(227, 6, 19, .35), transparent 60%),
    linear-gradient(120deg, var(--ink) 0%, var(--alpine-deep) 100%);
  color: #fff; padding: 5rem 0; position: relative; overflow: hidden;
}
.cta-banner::before{
  content: ""; position: absolute; inset: 0; opacity: .12;
  background-image: url('../../images/photo-runner-lone.jpg');
  background-size: cover; background-position: center;
}
.cta-banner__inner{
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: center;
}
.cta-banner h2{ color: #fff; max-width: 18ch; }
.cta-banner p{ color: rgba(255,255,255,.85); margin-top: 1rem; max-width: 50ch; }
.cta-banner .cta-banner__actions{ display: flex; gap: .8rem; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 880px){
  .cta-banner__inner{ grid-template-columns: 1fr; }
  .cta-banner__actions{ justify-content: flex-start; }
}

/* ---------------- Partner strip (real logos) ---------------- */
.partner-strip{ padding: 4rem 0 5rem; border-top: 1px solid var(--line); background: var(--bg); }
.partner-strip h4{
  text-align: center; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: .8rem; letter-spacing: .35em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .25rem;
}
.partner-strip .partner-sub{
  text-align: center; font-size: .75rem; color: var(--muted);
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 2.5rem;
}
.partner-row{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1.25rem; align-items: stretch;
  margin-bottom: 1rem;
}
.partner-row + .partner-row{ margin-top: 0; }
.partner-tile{
  background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center;
  padding: 1.5rem 1.25rem; aspect-ratio: 3 / 2;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
  border-radius: var(--r-sm);
}
.partner-tile:hover{ transform: translateY(-2px); border-color: var(--ink); }
.partner-tile img, .partner-tile svg{
  max-width: 75%; max-height: 60%; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.partner-tile:hover img, .partner-tile:hover svg{
  filter: grayscale(0);
  opacity: 1;
}
.partner-tile.is-svg svg{ color: var(--ink); width: 100%; }
.partner-note{ text-align: center; margin-top: 2.5rem; font-size: .85rem; color: var(--muted); }

/* ---------------- News grid (listing) ---------------- */
.news-feed{ padding: var(--sp-14) 0; }
.news-feed-grid{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
}
.news-card{
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.news-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.news-card__media{
  aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt);
}
.news-card__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.news-card:hover .news-card__media img{ transform: scale(1.05); }
.news-card__body{
  padding: 1.5rem; display: flex; flex-direction: column;
  flex: 1; gap: .65rem;
}
.news-card__head{
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
}
.news-card__head time{
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--sml-red);
}
.news-card__head .cat{
  font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  background: var(--bg-alt); color: var(--muted);
  padding: .25rem .6rem; border-radius: var(--r-sm);
  font-weight: 700;
}
.news-card__title{
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 1.15rem; line-height: 1.3; letter-spacing: -.005em;
  color: var(--ink); margin: 0;
}
.news-card__title a{ color: inherit; }
.news-card__title a:hover{ color: var(--sml-red); }
.news-card__excerpt{
  font-size: .9rem; color: var(--muted); line-height: 1.55;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__more{
  margin-top: auto; padding-top: .65rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--sml-red);
  display: inline-flex; align-items: center; gap: .35rem;
}
.news-card__more:hover{ color: var(--sml-red-dark); }
.news-card__more .arrow{ transition: transform .25s var(--ease); }
.news-card:hover .news-card__more .arrow{ transform: translateX(4px); }

/* News article (single page) */
.article-hero{
  position: relative; isolation: isolate; color: #fff;
  padding: 11rem 0 4rem;
  min-height: 60vh;
  display: flex; align-items: flex-end;
}
.article-hero::before{
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.article-hero::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(6,19,39,.55) 0%, rgba(6,19,39,.25) 30%, rgba(6,19,39,.92) 100%);
}
.article-hero .container{ max-width: 880px; }
.article-hero .breadcrumb{
  color: rgba(255,255,255,.85); font-size: .78rem; letter-spacing: .15em;
  text-transform: uppercase; margin-bottom: 1.25rem;
}
.article-hero .breadcrumb a{ color: rgba(255,255,255,.85); }
.article-hero .breadcrumb a:hover{ color: var(--sml-red); }
.article-hero .meta{ display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.article-hero .meta time{
  font-weight: 700; color: #fff; font-size: .82rem;
  letter-spacing: .15em; text-transform: uppercase;
  background: var(--sml-red); padding: .35rem .8rem;
}
.article-hero .meta .cat{
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px);
  padding: .35rem .8rem; border: 1px solid rgba(255,255,255,.2); font-weight: 700;
}
.article-hero h1{
  color: #fff; font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 1.1; letter-spacing: -.018em;
  max-width: 22ch;
}

.news-article{ padding: 4rem 0 var(--sp-14); }
.news-article .container{ max-width: 760px; }
.news-article .lead{
  font-size: 1.2rem; font-weight: 500; line-height: 1.55;
  color: var(--ink-2); margin: 0 0 2rem;
  padding-left: 1rem; border-left: 3px solid var(--sml-red);
}
.news-article h2{
  font-family: 'Inter', sans-serif; font-weight: 800;
  font-size: 1.45rem; line-height: 1.3; letter-spacing: -.01em;
  margin: 2.5rem 0 1rem; color: var(--ink);
}
.news-article .body p{ margin-bottom: 1.1rem; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
.news-article .body a{ color: var(--sml-red); font-weight: 600; }
.news-article .body a:hover{ color: var(--sml-red-dark); }

/* Pull quote */
.pull-quote{
  margin: 2.5rem -1rem; padding: 2rem 2rem 2rem 3.5rem;
  font-family: 'Inter', sans-serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.1rem, .9rem + .8vw, 1.45rem);
  line-height: 1.4; color: var(--ink);
  background: var(--bg-alt); border-left: 4px solid var(--sml-red);
  position: relative;
}
.pull-quote::before{
  content: "“"; position: absolute; left: .9rem; top: -.2rem;
  font-family: Georgia, serif; font-size: 4rem; line-height: 1;
  color: var(--sml-red); font-style: normal;
}
.pull-quote cite{
  display: block; margin-top: 1rem;
  font-style: normal; font-weight: 600; font-size: .85rem;
  color: var(--muted); letter-spacing: .04em;
}

/* Inline figure */
.article-figure{ margin: 2rem 0; }
.article-figure img{ width: 100%; height: auto; display: block; }
.article-figure figcaption{
  margin-top: .65rem; font-size: .82rem; color: var(--muted);
  font-style: italic;
}

/* Stat block */
.stat-block{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem; margin: 2.5rem 0;
  padding: 1.5rem; background: var(--bg-alt);
  border-top: 3px solid var(--sml-red);
}
.stat-block div{ text-align: center; }
.stat-block b{
  display: block; font-family: 'Inter', sans-serif; font-weight: 900;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.2rem);
  color: var(--sml-red); line-height: 1; letter-spacing: -.02em;
}
.stat-block small{
  display: block; margin-top: .35rem; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  font-weight: 600;
}

.news-back{
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.news-back a{ font-weight: 700; color: var(--sml-red); font-size: .9rem; }
.news-back a:hover{ color: var(--sml-red-dark); }

/* Related articles */
.related{ background: var(--bg-alt); padding: 4rem 0; }
.related h3{
  text-align: center; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: .85rem; letter-spacing: .25em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2rem;
}

/* ---------------- Press / News ---------------- */
.news-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.news-card{
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); transition: all .3s var(--ease);
}
.news-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.news-card__media{ aspect-ratio: 16/10; overflow: hidden; background: var(--bg-alt); }
.news-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card:hover .news-card__media img{ transform: scale(1.06); }
.news-card__body{ padding: 1.25rem; }
.news-card__date{ font-size: .72rem; color: var(--sml-red); font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.news-card__title{ font-size: 1.1rem; margin: .5rem 0; font-family: 'Inter', sans-serif; font-weight: 700; color: var(--ink); line-height: 1.3; }
.news-card__excerpt{ font-size: .88rem; color: var(--muted); }

/* ---------------- Footer ---------------- */
.site-footer{
  background:
    radial-gradient(circle at 90% 0%, rgba(227,6,19,.08), transparent 50%),
    var(--bg-deep);
  color: rgba(255,255,255,.7); padding: 4.5rem 0 1.75rem;
  position: relative; overflow: hidden;
}
.site-footer::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--sml-red) 0%, var(--sml-red) 25%, transparent 25%, transparent 100%);
}
.site-footer .brand{ color: #fff; margin-bottom: 1.25rem; }

.footer-top{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 3rem;
  padding-bottom: 3rem;
}
.footer-col h5{
  font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.25rem;
}
.footer-col p{ color: rgba(255,255,255,.7); font-size: .9rem; max-width: 36ch; line-height: 1.6; }
.footer-col ul li{ margin-bottom: .55rem; }
.footer-col ul li a{
  font-size: .9rem; color: rgba(255,255,255,.78);
  transition: color .2s var(--ease), padding-left .2s var(--ease);
  display: inline-flex; align-items: center;
}
.footer-col ul li a:hover{ color: var(--sml-red); padding-left: .35rem; }
.footer-col address{
  color: rgba(255,255,255,.92); font-style: normal;
  font-size: .9rem; line-height: 1.7;
}
.footer-col address a{
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(227,6,19,.6);
}
.footer-col address a:hover{ color: var(--sml-red); text-decoration-color: var(--sml-red); }

/* Newsletter signup */
.footer-newsletter{ margin-top: 1rem; }
.footer-newsletter form{
  display: flex; gap: 0;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  padding: .35rem; border-radius: var(--r-sm);
}
.footer-newsletter input[type="email"]{
  flex: 1; background: transparent; border: 0; padding: .55rem .75rem;
  color: #fff; font: 500 .88rem 'Inter', sans-serif; outline: 0; min-width: 0;
}
.footer-newsletter input[type="email"]::placeholder{ color: rgba(255,255,255,.5); }
.footer-newsletter button{
  background: var(--sml-red); color: #fff; font-weight: 700;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .55rem 1rem; border-radius: var(--r-sm);
  transition: background .2s var(--ease);
}
.footer-newsletter button:hover{ background: var(--sml-red-dark); }
.footer-newsletter small{ display: block; margin-top: .65rem; font-size: .72rem; color: rgba(255,255,255,.5); }

/* Social row */
.footer-social{
  display: flex; gap: .55rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.footer-social a{
  width: 38px; height: 38px; display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: #fff;
  border-radius: var(--r-sm);
  transition: all .25s var(--ease);
}
.footer-social a:hover{ background: var(--sml-red); transform: translateY(-2px); color: #fff; }
.footer-social svg{ width: 18px; height: 18px; }

/* Bottom bar */
.footer-meta{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .82rem;
}
.footer-meta a{ color: rgba(255,255,255,.65); }
.footer-meta a:hover{ color: var(--sml-red); }
.footer-meta nav{ display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-meta .meta-left{ display: flex; gap: .75rem; align-items: center; }
.footer-meta .meta-left .pulse{ width: 6px; height: 6px; background: var(--sml-red); border-radius: 50%; }

@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 540px){ .footer-top{ grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------------- Reveal animations ---------------- */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  .hero::before{ animation: none !important; }
}

/* ---------------- Page hero (interior pages) ---------------- */
.page-hero{
  position: relative; color: #fff; padding: 12rem 0 5rem; isolation: isolate;
  background:
    linear-gradient(120deg, rgba(6,19,39,.75), rgba(6,19,39,.55)),
    var(--bg-deep);
  background-size: cover; background-position: center;
}
.page-hero[data-bg="halbmarathon"]{ background-image: linear-gradient(120deg, rgba(6,19,39,.75), rgba(227,6,19,.4)), url('../../images/photo-runner-lone.jpg'); background-size: cover; background-position: center; }
.page-hero[data-bg="10km"]{ background-image: linear-gradient(120deg, rgba(6,19,39,.7), rgba(11,83,148,.5)), url('../../images/photo-runners-1.jpg'); background-size: cover; background-position: center; }
.page-hero[data-bg="5km"]{ background-image: linear-gradient(120deg, rgba(6,19,39,.7), rgba(245,158,11,.4)), url('../../images/photo-runners-2.jpg'); background-size: cover; background-position: center; }
.page-hero[data-bg="mini"]{ background-image: linear-gradient(120deg, rgba(11,83,148,.7), rgba(227,6,19,.4)), url('../../images/photo-finish.jpg'); background-size: cover; background-position: center; }
.page-hero[data-bg="strecken"]{ background-image: linear-gradient(120deg, rgba(6,19,39,.65), rgba(11,83,148,.5)), url('../../images/photo-sarnersee.jpg'); background-size: cover; background-position: center; }
.page-hero[data-bg="info"]{ background-image: linear-gradient(120deg, rgba(6,19,39,.75), rgba(6,19,39,.5)), url('../../images/photo-startline.jpg'); background-size: cover; background-position: center; }
.page-hero[data-bg="anmeldung"]{ background-image: linear-gradient(120deg, rgba(6,19,39,.7), rgba(227,6,19,.45)), url('../../images/photo-startline.jpg'); background-size: cover; background-position: center; }
.page-hero h1{ color: #fff; max-width: 16ch; }
.page-hero p{ color: rgba(255,255,255,.9); margin-top: 1rem; max-width: 50ch; font-size: var(--fs-lg); }
.breadcrumb{ font-size: .8rem; opacity: .85; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.breadcrumb a:hover{ color: var(--sml-red); }

/* Race detail layout */
.race-detail{ padding: var(--sp-14) 0; }
.detail-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: start; }
.detail-grid .info-stack > div{ display: grid; grid-template-columns: 160px 1fr; padding: 1rem 0; border-bottom: 1px solid var(--line); gap: 1rem; }
.detail-grid .info-stack b{ color: var(--ink); font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.05rem; font-weight: 400; }
.detail-grid .info-stack p{ font-size: .95rem; }
.detail-aside{
  position: sticky; top: 100px;
  background: var(--bg-alt); border-radius: var(--r-lg); padding: 1.75rem;
  border: 1px solid var(--line);
}
.detail-aside h3{ font-family: 'Bebas Neue', sans-serif; letter-spacing: .04em; font-size: 1.5rem; margin-bottom: .75rem; }
.detail-aside ul{ display: grid; gap: .5rem; margin: 1rem 0 1.5rem; }
.detail-aside ul li{ font-size: .9rem; display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: .35rem 0; }
.detail-aside ul li b{ color: var(--ink); font-weight: 600; }
@media (max-width: 880px){ .detail-grid{ grid-template-columns: 1fr; } .detail-aside{ position: static; } }

/* Tiny helpers */
.text-center{ text-align: center; }
.mt-1{ margin-top: .5rem; } .mt-2{ margin-top: 1rem; } .mt-3{ margin-top: 1.5rem; } .mt-4{ margin-top: 2rem; }
.mb-1{ margin-bottom: .5rem; } .mb-2{ margin-bottom: 1rem; } .mb-3{ margin-bottom: 1.5rem; } .mb-4{ margin-bottom: 2rem; }

/* Anchors offset for sticky header */
section[id]{ scroll-margin-top: 84px; }