/*
Theme Name: Sihlseelauf
Theme URI: https://www.sihlseelauf.ch
Author: Jan Birchler
Description: Theme für den Sihlseelauf Einsiedeln. Leitfarbe #037fbc, Streckenorange als Akzent, Fotoplätze über den Customizer, Startzeiten als Renntag-Ablauf.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sihlseelauf
Tags: event, sport, custom-colors, block-styles, wide-blocks
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  --ssl-blue:      #037fbc;   /* Leitfarbe */
  --ssl-blue-dk:   #02638f;
  --ssl-blue-ink:  #012f45;   /* Dunkelblau für Flächen und Footer */
  --ssl-blue-pale: #e7f2f9;   /* Zeilenraster, Chips */
  --ssl-orange:    #e8a020;   /* Akzent, gleiche Farbe wie die Streckenlinie */
  --ssl-ink:       #10191f;
  --ssl-grey:      #5d6b74;
  --ssl-paper:     #ffffff;
  --ssl-line:      #d8e0e5;
  --ssl-line-hard: #10191f;

  --ssl-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ssl-body:    "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --ssl-mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --ssl-r:    18px;  /* weiche Formen: Karten, Bilder */
  --ssl-r-sm: 10px;
  --ssl-max:  1220px;
  --ssl-gut:  clamp(20px, 5vw, 52px);
  --ssl-shadow: 0 18px 44px rgba(1, 47, 69, .12);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ssl-paper);
  color: var(--ssl-ink);
  font-family: var(--ssl-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ssl-blue-dk); text-underline-offset: 3px; }
a:hover { color: var(--ssl-ink); }
:focus-visible { outline: 3px solid var(--ssl-orange); outline-offset: 3px; }

h1, h2, h3, h4 {
  font-family: var(--ssl-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.015em;
  font-stretch: 88%;               /* schmal laufend: verträgt lange deutsche Wörter */
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7vw, 5rem); text-transform: uppercase; letter-spacing: -.02em; }
h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); text-transform: uppercase; }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.7rem); font-stretch: 95%; }
h4 { font-size: 1.05rem; font-stretch: 100%; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* Kilometer-Marke: das wiederkehrende Zeichen der Seite */
.ssl-km {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ssl-mono);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ssl-blue-dk);
  background: var(--ssl-blue-pale);
  padding: .38rem .7rem .34rem;
  border-left: 3px solid var(--ssl-blue);
}
.ssl-km--light { background: rgba(255,255,255,.14); color: #fff; border-left-color: var(--ssl-orange); }
.ssl-km--orange { background: rgba(232,160,32,.16); color: #8a5c05; border-left-color: var(--ssl-orange); }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}
.ssl-skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 999; background: #fff;
  padding: 12px 18px; width: auto; height: auto; clip: auto; clip-path: none;
}

/* ==========================================================================
   3. Raster
   ========================================================================== */
.ssl-wrap { width: 100%; max-width: var(--ssl-max); margin-inline: auto; padding-inline: var(--ssl-gut); }
.ssl-wrap--narrow { max-width: 840px; }
.ssl-section { padding-block: clamp(56px, 8vw, 108px); }
.ssl-section--tight { padding-block: clamp(36px, 5vw, 60px); }
.ssl-section--pale { background: var(--ssl-blue-pale); }
.ssl-section--ink { background: var(--ssl-blue-ink); color: #fff; }
.ssl-section--ink a { color: var(--ssl-orange); }

/* Abschnittskopf mit harter Oberkante – die kantige Hälfte des Mixes */
.ssl-head { border-top: 3px solid var(--ssl-line-hard); padding-top: 1.1rem; margin-bottom: clamp(28px, 4vw, 48px); }
.ssl-head h2 { margin: .5rem 0 0; }
.ssl-head p { color: var(--ssl-grey); max-width: 58ch; margin-top: .9rem; }
.ssl-section--ink .ssl-head { border-top-color: var(--ssl-orange); }
.ssl-section--ink .ssl-head p { color: rgba(255,255,255,.74); }

/* ==========================================================================
   4. Knöpfe – rund, als Gegenpol zu den harten Linien
   ========================================================================== */
.ssl-btn {
  --bg: var(--ssl-blue); --fg: #fff;
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--bg); color: var(--fg);
  font-family: var(--ssl-display); font-weight: 600; font-stretch: 100%;
  font-size: .96rem; letter-spacing: .02em;
  padding: .88rem 1.6rem; border: 2px solid var(--bg); border-radius: 100px;
  text-decoration: none; cursor: pointer;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.ssl-btn:hover { background: var(--ssl-blue-dk); border-color: var(--ssl-blue-dk); color: #fff; transform: translateY(-1px); }
.ssl-btn--orange { --bg: var(--ssl-orange); --fg: #241703; }
.ssl-btn--orange:hover { background: #d08f14; border-color: #d08f14; color: #241703; }
.ssl-btn--outline { --bg: transparent; --fg: currentColor; border-color: currentColor; }
.ssl-btn--outline:hover { background: #fff; border-color: #fff; color: var(--ssl-blue-ink); }
.ssl-btn--lg { padding: 1.05rem 2rem; font-size: 1.05rem; }
.ssl-btn__arrow { transition: transform .16s; }
.ssl-btn:hover .ssl-btn__arrow { transform: translateX(3px); }

/* ==========================================================================
   5. Kopfzeile
   ========================================================================== */
.ssl-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--ssl-line);
}
.ssl-header.is-stuck { border-bottom-color: var(--ssl-line-hard); }
.ssl-header__inner { display: flex; align-items: center; gap: 1.2rem; min-height: 72px; }

.ssl-brand { display: flex; align-items: center; gap: .75rem; margin-right: auto; text-decoration: none; color: var(--ssl-ink); }
.ssl-brand__mark {
  width: 38px; height: 38px; flex: none;
  background: var(--ssl-blue); color: #fff;
  display: grid; place-items: center;
  font-family: var(--ssl-mono); font-size: .95rem; font-weight: 600;
  border-radius: var(--ssl-r-sm) 3px var(--ssl-r-sm) 3px;   /* zwei runde, zwei harte Ecken */
}
.ssl-brand__name { font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%; font-size: 1.3rem; text-transform: uppercase; line-height: 1; }
.ssl-brand__meta { display: block; font-family: var(--ssl-mono); font-size: .66rem; letter-spacing: .1em; color: var(--ssl-grey); margin-top: 4px; text-transform: uppercase; }
.ssl-brand img { max-height: 48px; width: auto; }

.ssl-nav ul { display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.ssl-nav a {
  font-size: .95rem; font-weight: 500; color: var(--ssl-ink); text-decoration: none;
  padding: .5rem 0; display: block; position: relative;
}
.ssl-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--ssl-blue);
  transition: right .2s;
}
.ssl-nav a:hover::after, .ssl-nav .current-menu-item > a::after, .ssl-nav .current_page_item > a::after { right: 0; }
/* Klappmenü für die Lauf-Unterseiten */
.ssl-nav li { position: relative; }
.ssl-nav .sub-menu {
  display: none; position: absolute; top: 100%; left: -1rem;
  background: #fff; border: 1px solid var(--ssl-line); border-top: 3px solid var(--ssl-blue);
  min-width: 260px; padding: .4rem 0; flex-direction: column; gap: 0;
  box-shadow: var(--ssl-shadow); z-index: 20;
}
.ssl-nav li:hover > .sub-menu, .ssl-nav li:focus-within > .sub-menu { display: flex; }
.ssl-nav .sub-menu a { padding: .6rem 1rem; font-size: .92rem; }
.ssl-nav .sub-menu a::after { display: none; }
.ssl-nav .sub-menu a:hover { background: var(--ssl-blue-pale); color: var(--ssl-blue-dk); }
.ssl-nav .menu-item-has-children > a::before {
  content: "▾"; position: absolute; right: -.9rem; top: .5rem; font-size: .7rem; color: var(--ssl-grey);
}
@media (max-width: 940px) {
  .ssl-nav .sub-menu {
    display: flex; position: static; border: 0; box-shadow: none; min-width: 0;
    padding: 0 0 .6rem 1rem; border-left: 2px solid var(--ssl-blue);
  }
  .ssl-nav .sub-menu a { padding: .55rem 0; }
  .ssl-nav .menu-item-has-children > a::before { display: none; }
}

/* Sponsorenband direkt unter dem Seitenkopf */
.ssl-sponsorband { border-bottom: 0; }

/* Die Linien enden dort, wo auch die Logos enden – nicht am Fensterrand */
.ssl-sponsorband .ssl-sponsors {
  max-width: var(--ssl-max);
  margin-inline: auto;
  padding-inline: var(--ssl-gut);
}
.ssl-sponsorband .ssl-marquee,
.ssl-sponsorband .ssl-logos {
  border-top: 1px solid var(--ssl-line);
  border-bottom: 1px solid var(--ssl-line);
}

/* Folgt das Band direkt auf den Seitenkopf, entfällt dessen Linie –
   sonst lägen zwei Striche unterschiedlicher Breite übereinander. */
.ssl-page-head:has(+ .ssl-sponsorband) { border-bottom: 0; }
.ssl-sponsorband .ssl-marquee__set > * { min-height: 84px; padding: 1rem 1.9rem; }
.ssl-sponsorband .ssl-marquee img { max-height: 34px; }
.ssl-sponsorband .ssl-marquee__label { padding-left: 2.2rem !important; padding-right: 1.1rem !important; }
.ssl-sponsorband .ssl-logos { border-left: 0; border-right: 0; }
.ssl-sponsorband .ssl-logos > * { border-right: 0; border-bottom: 0; min-height: 84px; }

.ssl-burger { display: none; width: 46px; height: 46px; border: 0; background: transparent; padding: 11px; cursor: pointer; color: var(--ssl-ink); }
.ssl-burger span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform .22s, opacity .18s; }
.ssl-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ssl-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ssl-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 940px) {
  .ssl-burger { display: block; }
  .ssl-nav {
    position: fixed; inset: 72px 0 auto 0; background: #fff;
    border-bottom: 3px solid var(--ssl-line-hard);
    padding: .5rem var(--ssl-gut) 1.4rem; display: none;
  }
  .ssl-nav.is-open { display: block; }
  .ssl-nav ul { flex-direction: column; gap: 0; }
  .ssl-nav li + li { border-top: 1px solid var(--ssl-line); }
  .ssl-nav a { padding: 1rem 0; font-size: 1.1rem; }
  .ssl-header__cta { display: none; }
}

/* ==========================================================================
   6. Bühne
   ========================================================================== */
.ssl-hero {
  position: relative; color: #fff; isolation: isolate;
  background-color: var(--ssl-blue-ink);
  background-image:
    radial-gradient(circle at 78% 18%, rgba(3,127,188,.55), transparent 55%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 22px);
}
.ssl-hero__media { position: absolute; inset: 0; z-index: -2; }
.ssl-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.ssl-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(190deg, rgba(1,47,69,.42) 0%, rgba(1,47,69,.66) 48%, rgba(1,47,69,.92) 100%);
}
.ssl-hero__inner { padding-block: clamp(56px, 10vw, 116px) clamp(24px, 4vw, 48px); }
.ssl-hero__grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 5vw, 64px); align-items: end; }
@media (max-width: 860px) { .ssl-hero__grid { grid-template-columns: 1fr; } }

.ssl-hero h1 { margin: 1rem 0 .3em; }
.ssl-hero__lead { font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 38ch; color: rgba(255,255,255,.86); }
.ssl-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* Startnummer: das Erkennungszeichen der Seite */
.ssl-bib {
  background: #fff; color: var(--ssl-ink);
  width: clamp(200px, 26vw, 268px);
  border-radius: var(--ssl-r) var(--ssl-r) 4px 4px;
  overflow: hidden; box-shadow: var(--ssl-shadow);
  text-align: center; padding-top: 1.1rem;
  transform: rotate(-1.4deg);
}
.ssl-bib__top { font-family: var(--ssl-mono); font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ssl-grey); }
.ssl-bib__n {
  font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(4.6rem, 11vw, 7rem); line-height: .86; letter-spacing: -.04em;
  margin: .35rem 0 .1rem;
}
.ssl-bib__sub { font-family: var(--ssl-display); font-weight: 700; font-stretch: 88%; text-transform: uppercase; font-size: 1rem; letter-spacing: .02em; }
.ssl-bib__date { font-family: var(--ssl-mono); font-size: .7rem; color: var(--ssl-grey); margin: .3rem 0 1rem; }
.ssl-bib__bar { background: var(--ssl-orange); height: 12px; }
.ssl-bib__holes { display: flex; justify-content: space-between; padding: .5rem 1.4rem 0; }
.ssl-bib__holes i { width: 7px; height: 7px; border-radius: 50%; background: #d9dee1; display: block; }
@media (max-width: 860px) { .ssl-bib { transform: none; width: 190px; } }

/* Faktenband unter der Bühne */
.ssl-factbar { background: var(--ssl-blue); color: #fff; }
.ssl-factbar__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .ssl-factbar__inner { grid-template-columns: repeat(2, 1fr); } }
.ssl-factbar__cell { padding: 1.5rem 0 1.6rem 1.4rem; border-left: 1px solid rgba(255,255,255,.26); }
.ssl-factbar__cell:first-child { border-left: 0; padding-left: 0; }
@media (max-width: 860px) {
  .ssl-factbar__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .ssl-factbar__cell:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.26); }
}
.ssl-factbar__k { font-family: var(--ssl-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.ssl-factbar__v { font-family: var(--ssl-display); font-weight: 700; font-stretch: 88%; font-size: 1.3rem; margin-top: .4rem; text-transform: uppercase; }

/* Countdown in Ziffern wie eine Zeitmessung */
.ssl-countdown { display: flex; gap: 1px; background: rgba(255,255,255,.28); margin: 1.8rem 0 0; width: fit-content; }
.ssl-cd { background: var(--ssl-blue-ink); padding: .7rem 1rem .6rem; min-width: 76px; }
.ssl-cd__n { font-family: var(--ssl-mono); font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.ssl-cd__l { font-family: var(--ssl-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; opacity: .7; margin-top: .35rem; }
.ssl-countdown--done {
  display: inline-flex; align-items: center; gap: .7rem; background: transparent;
  border: 2px solid var(--ssl-orange); border-radius: 100px;
  padding: .7rem 1.4rem; font-family: var(--ssl-display); font-weight: 600;
  font-stretch: 100%; font-size: 1rem; letter-spacing: .01em;
}
.ssl-countdown--done::before { content: "●"; color: var(--ssl-orange); font-size: .7rem; }

/* ==========================================================================
   7. Renntag: nach Stunden gruppierte Zeitachse
   ========================================================================== */
.ssl-schedule { margin-block: 1.5rem; }

.ssl-hour {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: clamp(16px, 3vw, 44px);
  padding-block: clamp(18px, 2.5vw, 30px);
  border-top: 1px solid var(--ssl-line);
}
.ssl-hour:first-child { border-top: 3px solid var(--ssl-line-hard); }
.ssl-section--ink .ssl-hour { border-top-color: rgba(255,255,255,.18); }
.ssl-section--ink .ssl-hour:first-child { border-top-color: var(--ssl-orange); }

.ssl-hour__label {
  font-family: var(--ssl-mono);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ssl-grey); padding-top: .9rem;
}
.ssl-hour__label span {
  display: block;
  font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: .85; letter-spacing: -.04em;
  color: var(--ssl-blue); margin-bottom: .3rem;
}
.ssl-section--ink .ssl-hour__label span { color: var(--ssl-orange); }

.ssl-hour__items { border-left: 2px solid var(--ssl-line); }
.ssl-section--ink .ssl-hour__items { border-left-color: rgba(255,255,255,.2); }

.ssl-run {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 1rem; padding: .95rem 1rem .95rem 1.6rem;
  position: relative; text-decoration: none; color: inherit;
  transition: background .16s ease;
}
.ssl-run + .ssl-run { border-top: 1px solid var(--ssl-line-soft, #eef2f4); }
.ssl-section--ink .ssl-run + .ssl-run { border-top-color: rgba(255,255,255,.1); }
.ssl-run::before {
  content: ""; position: absolute; left: -6px; top: 50%; transform: translateY(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ssl-paper); border: 2px solid var(--ssl-line);
  transition: background .16s ease, border-color .16s ease;
}
.ssl-section--ink .ssl-run::before { background: var(--ssl-blue-ink); border-color: rgba(255,255,255,.35); }
.ssl-run:hover { background: var(--ssl-blue-pale); }
.ssl-section--ink .ssl-run:hover { background: rgba(255,255,255,.06); }
.ssl-run:hover::before { background: var(--ssl-blue); border-color: var(--ssl-blue); }

.ssl-run__time {
  display: block;
  font-family: var(--ssl-mono); font-size: .78rem; letter-spacing: .06em;
  color: var(--ssl-grey); margin-bottom: .25rem;
}
.ssl-section--ink .ssl-run__time { color: rgba(255,255,255,.65); }
.ssl-run__body { display: block; }
.ssl-run__dist {
  font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; text-transform: uppercase;
  display: inline-block; margin-right: .7rem;
}
.ssl-run__name { color: var(--ssl-grey); font-size: .96rem; }
.ssl-section--ink .ssl-run__name { color: rgba(255,255,255,.72); }
.ssl-run__name i { font-style: normal; display: block; font-size: .84rem; opacity: .8; margin-top: .1rem; }
/* Termine ohne Lauf: ruhiger, nicht anklickbar */
.ssl-run--info { cursor: default; }
.ssl-run--info:hover { background: transparent; }
.ssl-run--info::before { background: var(--ssl-line); border-color: var(--ssl-line); width: 8px; height: 8px; left: -5px; }
.ssl-section--ink .ssl-run--info::before { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.3); }
.ssl-run__dist--text {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  text-transform: none; letter-spacing: 0; color: var(--ssl-grey);
  margin-right: .6rem;
}
.ssl-section--ink .ssl-run__dist--text { color: rgba(255,255,255,.8); }

.ssl-schedule__note {
  font-size: .88rem; color: var(--ssl-grey); margin: 1.2rem 0 0;
  padding-left: 1.6rem; border-left: 3px solid var(--ssl-orange);
}
.ssl-section--ink .ssl-schedule__note { color: rgba(255,255,255,.7); }

.ssl-run__go { color: var(--ssl-blue); opacity: 0; transition: opacity .16s ease, transform .16s ease; }
.ssl-run:hover .ssl-run__go { opacity: 1; transform: translateX(3px); }

@media (max-width: 640px) {
  .ssl-hour { grid-template-columns: 1fr; gap: .6rem; }
  .ssl-hour__label { padding-top: 0; display: flex; align-items: baseline; gap: .5rem; }
  .ssl-hour__label span { font-size: 2rem; margin-bottom: 0; }
  .ssl-run { padding-right: 0; }
  .ssl-run__go { display: none; }
}

/* ==========================================================================
   8. Distanzkarten
   ========================================================================== */
.ssl-grid { display: grid; gap: 20px; }
.ssl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ssl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }

.ssl-card {
  background: #fff; border: 1px solid var(--ssl-line);
  border-radius: var(--ssl-r) var(--ssl-r) var(--ssl-r) 4px;   /* eine harte Ecke bleibt */
  padding: 1.5rem 1.6rem 1.4rem; display: flex; flex-direction: column;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
a.ssl-card { text-decoration: none; color: inherit; }
.ssl-card:hover { border-color: var(--ssl-blue); box-shadow: var(--ssl-shadow); transform: translateY(-2px); }
.ssl-card__tag { align-self: flex-start; margin-bottom: 1.2rem; }
.ssl-card__num {
  font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(2.8rem, 5.4vw, 3.6rem); line-height: .88; letter-spacing: -.035em;
}
.ssl-card__num small { font-size: .3em; font-weight: 600; letter-spacing: .04em; margin-left: .3em; text-transform: uppercase; }
.ssl-card__body { color: var(--ssl-grey); font-size: .95rem; margin-top: .85rem; flex: 1; }
.ssl-card__meta {
  margin-top: 1.2rem; padding-top: .85rem; border-top: 1px solid var(--ssl-line);
  display: flex; gap: 1.2rem; font-family: var(--ssl-mono); font-size: .78rem; color: var(--ssl-grey);
}
.ssl-card--lead { background: var(--ssl-blue); border-color: var(--ssl-blue); color: #fff; }
.ssl-card--lead .ssl-card__body { color: rgba(255,255,255,.82); }
.ssl-card--lead .ssl-card__meta { color: rgba(255,255,255,.75); border-top-color: rgba(255,255,255,.3); }
.ssl-card--lead .ssl-km { background: rgba(255,255,255,.18); color: #fff; border-left-color: var(--ssl-orange); }
.ssl-card--lead:hover { border-color: var(--ssl-orange); }
.ssl-card__go { margin-left: auto; color: var(--ssl-blue); font-weight: 500; }
.ssl-card--lead .ssl-card__go { color: #fff; }
a.ssl-card:hover .ssl-card__go { text-decoration: underline; }

/* Foto in der Karte */
.ssl-card__photo { margin: -1.5rem -1.6rem 1.2rem; }
.ssl-card__photo img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--ssl-r) var(--ssl-r) 0 0; }

/* Infozeilen */
.ssl-facts { border-top: 3px solid var(--ssl-line-hard); margin: 0; }
.ssl-fact-row { display: grid; grid-template-columns: minmax(170px, 250px) 1fr; gap: 1.6rem; padding: 1.1rem 0; border-bottom: 1px solid var(--ssl-line); }
.ssl-fact-row dt { font-family: var(--ssl-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ssl-blue-dk); padding-top: .18rem; }
.ssl-fact-row dd { margin: 0; }
@media (max-width: 640px) { .ssl-fact-row { grid-template-columns: 1fr; gap: .3rem; } }

/* ==========================================================================
   9. Fotos
   ========================================================================== */
.ssl-photo { margin: 0; position: relative; }
.ssl-photo img { width: 100%; object-fit: cover; border-radius: var(--ssl-r); }
.ssl-photo--full { margin-inline: calc(50% - 50vw); width: 100vw; }
.ssl-photo--full img { border-radius: 0; }
.ssl-photo figcaption {
  position: absolute; left: 0; bottom: 0;
  background: var(--ssl-blue); color: #fff;
  font-family: var(--ssl-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .55rem 1rem .5rem;
  border-radius: 0 var(--ssl-r-sm) 0 var(--ssl-r);
}
.ssl-photo--full figcaption { border-radius: 0 var(--ssl-r-sm) 0 0; }

.ssl-photostrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ssl-photostrip .ssl-photo img { aspect-ratio: 4/3; }
.ssl-photostrip .ssl-photo:nth-child(odd) img { border-radius: var(--ssl-r) 4px var(--ssl-r) 4px; }
.ssl-photostrip .ssl-photo:nth-child(even) img { border-radius: 4px var(--ssl-r) 4px var(--ssl-r); }

/* Platzhalter – nur für angemeldete Redaktion sichtbar */
.ssl-photo-empty {
  border: 2px dashed var(--ssl-blue); background: var(--ssl-blue-pale);
  border-radius: var(--ssl-r); min-height: 220px;
  display: grid; place-content: center; text-align: center; padding: 2rem; gap: .5rem;
}
.ssl-photo-empty strong { font-family: var(--ssl-display); font-stretch: 88%; text-transform: uppercase; font-size: 1.2rem; }
.ssl-photo-empty span { font-family: var(--ssl-mono); font-size: .76rem; color: var(--ssl-blue-dk); }

/* Kopf einer Lauf-Seite */
.ssl-race-head { border-bottom: 3px solid var(--ssl-line-hard); }
.ssl-race-head__grid { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.ssl-race-head__dist {
  font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%;
  font-size: clamp(3.4rem, 9vw, 6rem); line-height: .84; letter-spacing: -.04em;
  color: var(--ssl-blue);
}
.ssl-race-head__dist small { font-size: .26em; letter-spacing: .04em; margin-left: .2em; text-transform: uppercase; }
@media (max-width: 700px) { .ssl-race-head__grid { grid-template-columns: 1fr; gap: .4rem; } }
.ssl-race-photo { border-radius: var(--ssl-r); margin-block: 2em; }
.ssl-cats__meta { font-family: var(--ssl-mono); font-size: .8rem; color: var(--ssl-grey); margin-top: -.6em; }

/* Sprungziele nicht unter die Kopfzeile rutschen lassen */
.ssl-route[id], [id^="strecke"], [id="kinder"] { scroll-margin-top: 92px; }

/* ==========================================================================
   10. Streckenkarten (Rahmen um das Plugin)
   ========================================================================== */
.ssl-route { border-top: 3px solid var(--ssl-line-hard); padding-top: 1.2rem; margin-block: 2.8rem; }
.ssl-route__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.4rem; margin-bottom: 1.2rem; }
.ssl-route__title { font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0; }
.ssl-route__meta { font-family: var(--ssl-mono); font-size: .8rem; color: var(--ssl-grey); }
.ssl-route__map { border: 1px solid var(--ssl-line); border-radius: var(--ssl-r); overflow: hidden; }
.ssl-route .leaflet-container { border-radius: 0; font-family: var(--ssl-body); }
.ssl-route__foot { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.1rem; align-items: center; }
.ssl-route__note { font-size: .88rem; color: var(--ssl-grey); margin: 0; }
.ssl-route__photo { margin-bottom: 14px; }

/* ==========================================================================
   11. Inhalt
   ========================================================================== */
.ssl-content > * { margin-block: 1.2em; }
.ssl-content > :first-child { margin-top: 0; }
.ssl-content h2 { margin-top: 2.4em; padding-top: .9rem; border-top: 3px solid var(--ssl-line-hard); }
.ssl-content h3 { margin-top: 1.9em; }
.ssl-content ul, .ssl-content ol { padding-left: 1.2em; }
.ssl-content li { margin-bottom: .4em; }
.ssl-content img { border-radius: var(--ssl-r); }
.ssl-content figure { margin: 2em 0; }
.ssl-content figcaption { font-family: var(--ssl-mono); font-size: .76rem; color: var(--ssl-grey); margin-top: .6rem; }
.ssl-content blockquote { margin: 2em 0; padding: .2em 0 .2em 1.4rem; border-left: 4px solid var(--ssl-orange); font-size: 1.12rem; }
.ssl-content hr { border: 0; border-top: 3px solid var(--ssl-line-hard); margin: 3em 0; }
.ssl-content .wp-block-gallery img { border-radius: var(--ssl-r-sm); }

/* Tabellen als Ranglisten-Optik */
.ssl-content table, .ssl-table {
  width: 100%; border-collapse: collapse; font-size: .95rem; background: #fff;
  font-variant-numeric: tabular-nums; border: 1px solid var(--ssl-line);
}
.ssl-content table th, .ssl-table th {
  text-align: left; background: var(--ssl-blue); color: #fff;
  font-family: var(--ssl-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .8rem 1rem; font-weight: 500;
}
.ssl-content table td, .ssl-table td { padding: .72rem 1rem; border-top: 1px solid var(--ssl-line); }
.ssl-content table td:first-child, .ssl-table td:first-child { font-family: var(--ssl-mono); color: var(--ssl-blue-dk); width: 4.5rem; }
.ssl-content table tr:nth-child(even) td, .ssl-table tr:nth-child(even) td { background: #f7fafc; }
.ssl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-block: 1.6em; }
.wp-block-table { overflow-x: auto; }

/* ==========================================================================
   12. Sponsoren
   ========================================================================== */
.ssl-sponsors__tier + .ssl-sponsors__tier { margin-top: 2.4rem; }
.ssl-sponsors__label { margin: 0 0 1rem; }
.ssl-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--ssl-line); border-left: 1px solid var(--ssl-line); }
.ssl-logos > * { display: grid; place-items: center; padding: 1.4rem 1rem; border-right: 1px solid var(--ssl-line); border-bottom: 1px solid var(--ssl-line); min-height: 104px; }
.ssl-logos img { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .65; transition: filter .2s, opacity .2s; }
.ssl-logos a:hover img { filter: none; opacity: 1; }
.ssl-logos--lead { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ssl-logos--lead > * { min-height: 150px; }
.ssl-logos--lead img { max-height: 80px; filter: none; opacity: 1; }

/* Laufband: zieht ruhig durch, hält bei Mausberührung und bei Tastaturfokus an */
.ssl-marquee {
  --ssl-marquee-time: 34s;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ssl-marquee__track {
  display: flex; width: max-content;
  animation: ssl-slide var(--ssl-marquee-time) linear infinite;
}
.ssl-marquee:hover .ssl-marquee__track,
.ssl-marquee:focus-within .ssl-marquee__track { animation-play-state: paused; }
.ssl-marquee__set { display: flex; align-items: center; }

/* Keine Trennlinien, nur Luft – das beruhigt den Lauf */
.ssl-marquee__set > * {
  display: grid; place-items: center;
  padding: 1.4rem 2.2rem;
  flex: none;
}
.ssl-marquee img {
  max-height: 44px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter .3s ease, opacity .3s ease;
}
.ssl-marquee a:hover img, .ssl-marquee a:focus-visible img { filter: none; opacity: 1; }

/* Stufenname: kleine Marke, die mitläuft, ohne sich vorzudrängen */
.ssl-marquee__label {
  padding-left: 2.6rem !important;
  padding-right: 1.4rem !important;
}
.ssl-marquee__label b {
  display: block;
  font-family: var(--ssl-mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ssl-blue);
  white-space: nowrap;
  opacity: .85;
}

@keyframes ssl-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Ohne Bewegung: normales Raster zum Wischen */
@media (prefers-reduced-motion: reduce) {
  .ssl-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .ssl-marquee__track { animation: none; }
  .ssl-marquee__set[aria-hidden="true"] { display: none; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.ssl-footer { background: var(--ssl-blue-ink); color: rgba(255,255,255,.8); padding-block: clamp(48px, 7vw, 84px) 30px; }
.ssl-footer a { color: #fff; }
.ssl-footer a:hover { color: var(--ssl-orange); }
.ssl-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
@media (max-width: 800px) { .ssl-footer__grid { grid-template-columns: 1fr; gap: 32px; } }
.ssl-footer h4 { color: #fff; font-family: var(--ssl-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(255,255,255,.2); }
.ssl-footer ul { list-style: none; margin: 0; padding: 0; }
.ssl-footer li { margin-bottom: .5rem; }
.ssl-footer__brand { font-family: var(--ssl-display); font-weight: 800; font-stretch: 88%; font-size: 1.7rem; text-transform: uppercase; color: #fff; margin-bottom: .9rem; }
.ssl-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.ssl-social a { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.28); display: grid; place-items: center; border-radius: var(--ssl-r-sm) 3px var(--ssl-r-sm) 3px; transition: background .18s, border-color .18s; }
.ssl-social a:hover { background: var(--ssl-blue); border-color: var(--ssl-blue); }
.ssl-social svg { width: 18px; height: 18px; fill: currentColor; }
.ssl-footer__bottom { margin-top: 42px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--ssl-mono); font-size: .74rem; color: rgba(255,255,255,.55); }

/* ==========================================================================
   14. Handy-Anmeldeknopf
   ========================================================================== */
.ssl-mobile-cta { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90; display: none; }
.ssl-mobile-cta .ssl-btn { width: 100%; justify-content: center; box-shadow: var(--ssl-shadow); }
@media (max-width: 940px) { .ssl-mobile-cta { display: block; } body { padding-bottom: 78px; } }

/* ==========================================================================
   15. Seitenkopf, Beiträge
   ========================================================================== */
.ssl-page-head { border-bottom: 1px solid var(--ssl-line); padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.ssl-breadcrumb { font-family: var(--ssl-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ssl-grey); margin-bottom: 1rem; }
.ssl-page-head h1 { margin-bottom: .25em; }
.ssl-page-head__lead { color: var(--ssl-grey); font-size: 1.12rem; max-width: 62ch; }

.ssl-news { border-top: 3px solid var(--ssl-line-hard); }
.ssl-news__item { display: grid; grid-template-columns: 120px 1fr; gap: 1.6rem; padding: 1.5rem 0; border-bottom: 1px solid var(--ssl-line); text-decoration: none; color: inherit; }
.ssl-news__item:hover { background: var(--ssl-blue-pale); }
.ssl-news__date { font-family: var(--ssl-mono); font-size: .78rem; color: var(--ssl-grey); padding-top: .3rem; }
.ssl-news__item h3 { margin: 0 0 .3em; }
.ssl-news__item p { color: var(--ssl-grey); font-size: .95rem; margin: 0; }
@media (max-width: 640px) { .ssl-news__item { grid-template-columns: 1fr; gap: .4rem; } }

.ssl-pagination { display: flex; gap: .4rem; margin-top: 2rem; flex-wrap: wrap; }
.ssl-pagination .page-numbers { padding: .5rem .95rem; border: 1px solid var(--ssl-line); text-decoration: none; font-family: var(--ssl-mono); font-size: .85rem; }
.ssl-pagination .current { background: var(--ssl-blue); color: #fff; border-color: var(--ssl-blue); }

/* ==========================================================================
   16. WordPress-Standards
   ========================================================================== */
.alignwide { max-width: min(1400px, 100%); margin-inline: auto; }
.alignfull { max-width: 100%; }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 1.6em 1.2em 0; }
.alignright { float: right; margin: 0 0 1.2em 1.6em; }
.wp-caption { max-width: 100%; }
.sticky, .gallery-caption, .bypostauthor { display: block; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }