/* ============================================================
   MORITZ PIEGER — Stylesheet
   Papier, Haarlinien, ein Blau.
   Reihenfolge: Tokens → Reset → Basis → Header → Hero →
   Sektionen → Footer → Motion → Responsive
   ============================================================ */

/* ─── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* Farben. Alle Textpaare gegen WCAG AA geprüft (>= 4.5:1). */
  --paper:      #F4F3F0;   /* Grundfläche */
  --paper-2:    #E9E8E4;   /* Platzhalter-Füllung */
  --band:       #E7E6E1;   /* Abgesetzte Sektionen (statt Schwarz) */
  --ink:        #131417;   /* Fast-Schwarz, nur für Text */
  --ink-70:     #24252A;   /* Fliesstext, fast schwarz. 14.5:1 auf Papier */
  --ink-45:     #5F6068;   /* Kleine Labels. 5.6:1 Papier / 5.0:1 Band */
  --blue:       #0E3EFF;   /* Akzent. Weiss darauf = 6.8:1 */
  --blue-deep:  #0A2CBE;   /* Hover */
  --rule:       #D8D7D1;   /* Haarlinie auf Papier */
  --rule-band:  #CDCCC5;   /* Haarlinie auf Band */
  --cell-off:   #D6D5CF;   /* Leeres Streak-Feld */

  /* Typo. Drei Rollen, bewusst getrennt. */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Raster */
  --gutter: clamp(22px, 5.5vw, 80px);
  --maxw: 1440px;
  --hair: 1px;

  /* Abstände (4/8-Rhythmus, fluid) */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 28px;
  --s-4: 48px;
  --s-5: clamp(44px, 6vw, 80px);
  --s-6: clamp(48px, 6vw, 88px);
  /* Abstand ZWISCHEN zwei Abschnitten, als Gesamtwert gedacht.
     Weil jede Sektion oben und unten polstert, wird die Haelfte
     gesetzt: der Wert hier ist das, was man wirklich sieht. */
  --sec-gap: clamp(72px, 8.5vw, 124px);
  /* Der Hero laeuft enger als der Rest, damit die Buttons
     ohne Scrollen sichtbar bleiben. */
  --hero-top: clamp(40px, 5.5vw, 80px);
  /* Luft ober- und unterhalb des Tickers: rund 30% weniger als der
     normale Sektionsabstand --s-6. Beide Seiten aus einer Quelle,
     damit der Ticker mittig bleibt. */
  --ticker-gap: clamp(62px, 9.1vw, 129px);
  --hero-gap: clamp(28px, 3.4vw, 48px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast: 160ms;
  --t-mid: 320ms;
}

/* ─── 2. RESET ──────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* Hier statt auf body: overflow-x auf body allein macht body zu
     einem eigenen Scroll-Container (overflow-y wird dabei implizit
     auf auto gesetzt), und Sprung-Links wie #kontakt scrollen dann
     ins Leere, weil der Browser das Fenster statt body bewegt. */
  overflow-x:hidden;
  /* Basisgrösse auf die Wurzel, damit alle rem-Werte mitwachsen.
     In rem statt px, damit eine grössere Browser-Schriftgrösse
     beim Nutzer weiterhin greift. */
  font-size:clamp(1.0625rem, .96rem + .28vw, 1.1875rem);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; }
h1,h2,h3,p,dl,dd,figure,blockquote,ol,ul{ margin:0; }
ol,ul{ list-style:none; padding:0; }
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; }
a{ color:inherit; }

/* Fokus. Immer sichtbar, nie entfernen. */
:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:3px;
}

/* ─── 3. BASIS ──────────────────────────────────────────── */
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.62;
  font-variant-numeric:tabular-nums;
}

/* Display-Schrift nur für die grossen Sachen. */
h1,h2,.race-name,.rank-n,.stat-n,.foot-cta h2{
  font-family:var(--display);
}
/* Aussage-Saetze: Textschrift, schwer gesetzt. Weniger rund als Archivo. */
.streak-claim,.spon-lead,.why-lead,.pull blockquote,.goal h3,.rank-goal{
  font-family:var(--sans);
}

.mono{
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  line-height:1.5;
}

/* Sprachumschaltung. Funktioniert auch ohne JS (DE default). */
.lang-de .en{ display:none; }
.lang-en .de{ display:none; }

.skip{
  position:absolute; left:var(--gutter); top:-100px; z-index:200;
  background:var(--blue); color:#fff;
  padding:14px 22px; font-family:var(--mono); font-size:.82rem; font-weight:600;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{ top:12px; }

/* Scroll-Fortschritt */
.progress{
  position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
  pointer-events:none;
}
.progress i{
  display:block; height:100%; width:100%;
  background:var(--blue);
  transform:scaleX(0); transform-origin:0 50%;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  min-height:52px; padding:14px 26px;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600;
  text-decoration:none; cursor:pointer;
  border:2px solid var(--ink);
  transition:background var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }
/* Offizielles Markenzeichen: gefuellte Flaeche statt Kontur. Gleiche
   Ausnahme wie bei den Social-Icons im Footer. */
.btn svg.brand-solid{ fill:currentColor; stroke:none; }

/* Die beiden Markenzeichen stehen im Button fuer sich allein, ohne
   Schrift daneben. Sie duerfen deshalb groesser sein als der Pfeil
   im Haupt-Button, der nur Beiwerk zum Text ist. */
.btn-social svg{ width:22px; height:22px; }

/* Social-Buttons im Hero: ab Tablet nur das Zeichen, ohne Schrift.
   Grund ist reine Geometrie. Neben dem Portrait bleiben der Textspalte
   bei 1101px genau 559px, die drei Buttons mit voller Beschriftung
   brauchen aber 697px. Es fehlen also 138px, und mehr als rund 60px
   sind ueber Polster und Laufweite nicht zu holen. Ohne die beiden
   Schriftzuege passen sie mit 100px Reserve nebeneinander.
   Der Text bleibt im Quelltext stehen und wird nur optisch versteckt,
   damit Screenreader und Suchmaschinen ihn weiterhin lesen.
   Auf dem Handy kommt er zurueck, dort ist Platz. */
@media (min-width:721px){
  .btn-social{ padding-inline:16px; }
  .btn-social .btn-label{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
}
.btn-solid{ background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-solid:hover{ background:var(--blue-deep); border-color:var(--blue-deep); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn:active{ transform:translateY(1px); }

/* ─── 4. HEADER ─────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-3);
  padding:0 var(--gutter);
  height:68px;
  background:color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:var(--hair) solid var(--rule);
}
.monogram{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  /* Trefferfläche mindestens 44x44 (Apple HIG / MD) */
  min-height:44px; min-width:44px; margin-left:-8px; padding-inline:8px;
}
.monogram-logo{
  display:block;
  height:22px; width:auto;
}

.head-nav{ display:flex; gap:2px; }
.head-nav a{
  display:flex; align-items:center; gap:7px;
  padding:8px 12px; min-height:44px;
  text-decoration:none; white-space:nowrap;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:500; color:var(--ink-45);
  border-bottom:3px solid transparent;
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.head-nav a b{ color:var(--blue); font-weight:700; }
.head-nav a:hover, .head-nav a.is-active{ color:var(--ink); border-bottom-color:var(--blue); }

.head-tools{ display:flex; align-items:center; gap:var(--s-2); }
/* Schalter mit gleitendem Regler. Zwei echte Buttons statt eines
   Umschalters: so ist fuer Screenreader sichtbar, welche Sprachen es
   gibt und welche gerade aktiv ist. */
.lang-switch{
  position:relative;
  display:flex; align-items:center;
  padding:2px;
  border:2px solid var(--ink);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em;
}
.lang-thumb{
  position:absolute; top:2px; left:2px;
  width:calc(50% - 2px); height:calc(100% - 4px);
  background:var(--blue);
}
/* Erst nach dem ersten Zeichnen animieren, sonst faehrt der Regler
   beim Laden mit gespeichertem Englisch einmal quer ueber den Schalter.
   transform statt left: laeuft auf der Grafikkarte, kein Reflow. */
.lang-switch.ready .lang-thumb{
  transition:transform 340ms var(--ease-out);
}
.lang-switch.is-en .lang-thumb{ transform:translateX(100%); }
.lang-switch button{
  position:relative; z-index:1;
  min-width:36px; min-height:30px; cursor:pointer;
  color:var(--ink-45); font-family:inherit; font-size:inherit;
  letter-spacing:inherit; font-weight:600;
  transition:color 220ms var(--ease);
}
.lang-switch button[aria-pressed="true"]{ color:#fff; font-weight:700; }
.lang-switch button[aria-pressed="false"]:hover{ color:var(--ink); }

.head-mail{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:38px; min-width:38px; padding:6px 14px;
  background:var(--blue); color:#fff; text-decoration:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600;
  transition:background var(--t-fast) var(--ease);
}
.head-mail svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; }
.head-mail:hover{ background:var(--blue-deep); }

/* ─── 5. HERO ───────────────────────────────────────────── */
.hero{
  position:relative;
  /* Unten dieselbe Variable wie der obere Abstand der Sektionen (--s-6):
     so sitzt der Ticker exakt mittig zwischen Buttons und 'Der Athlet',
     auf jeder Bildschirmbreite. */
  padding:var(--hero-top) var(--gutter) var(--ticker-gap);
  max-width:var(--maxw); margin-inline:auto;
}
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:0 var(--s-5);
  align-items:start;
}
.kicker{
  grid-column:1;
  font-family:var(--mono); font-size:.84rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; color:var(--blue);
  padding-bottom:var(--s-3);
  border-bottom:var(--hair) solid var(--rule);
  margin-bottom:var(--s-3);
}
.hero-name{
  grid-column:1;
  font-size:clamp(2.6rem, 9vw, 7rem);
  line-height:.84;
  letter-spacing:-.045em;
  font-variation-settings:"wdth" 108,"wght" 900;
  font-weight:900;
  text-transform:uppercase;
  /* Der Strich darunter ist eine graue Haarlinie, keine schwere
     schwarze Kante mehr. Er braucht deshalb weniger Abstand,
     sonst schwebt er frei zwischen Name und Eckdaten. */
  margin-bottom:var(--s-3);
}
.hero-name .mask{ display:block; overflow:hidden; padding-bottom:.04em; }
.hero-name .line{ display:block; }

.hero-meta{
  grid-column:1;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:var(--hair) solid var(--rule);
  margin-bottom:var(--hero-gap);
}
.hero-meta > div{
  padding:var(--s-3) var(--s-2) var(--s-3) 0;
  border-right:var(--hair) solid var(--rule);
}
.hero-meta > div:last-child{ border-right:0; }
.hero-meta > div + div{ padding-left:var(--s-2); }
.hero-meta dt{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; font-weight:500; color:var(--ink-45);
  margin-bottom:10px;
}
.hero-meta dd{ font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.hero-cta{ grid-column:1; display:flex; flex-wrap:wrap; gap:14px; }

.hero-shot{ grid-column:2; grid-row:1 / span 6; }
.hero-shot figcaption{ margin-top:12px; color:var(--ink-45); font-weight:500; }

/* Platzhalter (Bilder/Videos) */
.ph{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, var(--rule) 9px 10px),
    var(--paper-2);
  border:2px solid var(--ink);
  color:var(--ink-70);
  overflow:hidden;
}
.ph::before{
  content:attr(data-ph);
  position:absolute; top:12px; left:12px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; font-weight:600;
  background:var(--ink); color:var(--paper); padding:5px 9px;
}
.ph-label{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:600;
  background:var(--paper); padding:8px 12px;
  border:var(--hair) solid var(--rule);
}
.ph-portrait{ aspect-ratio:3/4; }

.hero-portrait{
  display:block;
  width:100%; height:auto; aspect-ratio:3/4;
  object-fit:cover;
  border:2px solid var(--ink);
}

/* ─── 6. TICKER ─────────────────────────────────────────── */
.ticker{
  background:var(--blue); color:#fff;
  overflow:hidden; padding:18px 0;
}
.ticker-track{
  display:flex; align-items:center; gap:32px;
  width:max-content;
  animation:marquee 34s linear infinite;
  will-change:transform;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker span{
  font-family:var(--display);
  font-size:clamp(1.2rem,2.6vw,2.1rem); font-weight:900;
  letter-spacing:-.03em; text-transform:uppercase;
  font-variation-settings:"wdth" 105,"wght" 900;
  white-space:nowrap;
}
.ticker b{ opacity:.55; font-size:1.3rem; }
@keyframes marquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-33.333%,0,0)} }

/* ─── 7. SEKTIONEN ──────────────────────────────────────── */
.sec{
  max-width:var(--maxw); margin-inline:auto;
  padding:calc(var(--sec-gap) / 2) var(--gutter);
}
/* Sticky-Header darf Ankerziele nicht verdecken (WCAG 2.4.11) */
.sec,.site-foot,.hero{ scroll-margin-top:84px; }

.sec-rule{ border-top:var(--hair) solid var(--rule); }

/* Gegenstueck zum unteren Hero-Abstand: der Ticker sitzt mittig. */
.ticker + .sec{ padding-top:var(--ticker-gap); }

/* Abgesetzte Sektion: heller Grauton statt Schwarz. */
.sec-band{
  max-width:none; background:var(--band);
  --rule:var(--rule-band);
}
.sec-band > *{ max-width:var(--maxw); margin-inline:auto; }

/* Letzte Sektion vor dem Kontaktteil: unten enger, siehe .site-foot */
#sponsoring{ padding-bottom:clamp(44px, 5vw, 72px); }

.sec-head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline; gap:var(--s-2) var(--s-3);
  padding-bottom:var(--s-3);
  border-bottom:2px solid var(--ink);
  margin-bottom:var(--s-4);
}

.sec-head h2{
  font-size:clamp(1.8rem,4.4vw,3.4rem); line-height:1;
  letter-spacing:-.04em; font-weight:900;
  font-variation-settings:"wdth" 104,"wght" 900;
  text-transform:uppercase;
}
.sec-note{ color:var(--ink-45); text-align:right; font-weight:500; }

.two-col{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--s-5);
}
.col-text p{ color:var(--ink-70); margin-bottom:var(--s-3); max-width:62ch; }
/* Letzter Absatz braucht keinen eigenen Abstand: direkt danach
   kommt schon das Polster der Sektion, das addierte sich sonst. */
.col-text p:last-child{ margin-bottom:0; }
.col-text p b{ color:var(--ink); font-weight:600; }
/* Gleiche Groesse und Zeilenhoehe wie die uebrigen Absaetze.
   Betont wird nur ueber Gewicht und Farbe, nicht ueber den Grad.
   Selektor mit .col-text davor, damit kein !important noetig ist. */
.col-text p.lead{
  color:var(--ink);
  font-weight:700;
}

.pull{ align-self:start; }
/* Der blaue Strich steht senkrecht links am Zitat, nicht waagrecht
   darueber. Als ::before statt als border, damit er oben und unten
   um den Zeilendurchschuss eingerueckt werden kann: so ist er so
   hoch wie die Buchstaben, nicht wie die Zeilenkaesten. */
.pull blockquote{
  position:relative;
  padding-left:18px;
}
.pull blockquote::before{
  content:"";
  /* Gemessen an der Schrift: .34em von der Kastenoberkante bis zur
     Oberkante der Grossbuchstaben, .15em von unten bis zur Grundlinie.
     Bewusst NICHT bis zur Unterlaenge: die haengt nur bei j und g
     darunter, der Strich wirkt sonst nach unten verrutscht.
     In em, gilt also fuer jede Schriftgroesse und Zeilenzahl. */
  position:absolute; left:0; top:.34em; bottom:.15em;
  width:4px;
  background:var(--blue);
}
.pull blockquote{
  font-size:clamp(1.35rem,2.3vw,1.9rem);
  line-height:1.26; letter-spacing:-.025em; font-weight:700;
}
.pull em{ font-style:normal; color:var(--blue); }
.pull figcaption{
  margin-top:var(--s-2); padding-left:18px;
  color:var(--ink-45); font-weight:500;
}

/* ── Resultate ── */
.race{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"tag nums" "name nums";
  align-items:end; gap:8px var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:var(--hair) solid var(--rule);
  /* transform statt padding → kein Reflow beim Hover */
  transition:transform var(--t-mid) var(--ease);
}
.race:hover{ transform:translateX(14px); }
.race-tag{
  grid-area:tag; color:var(--ink-45);
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.race-tag b{ color:var(--rule); font-weight:400; }
.race-tag time{ color:var(--ink-70); }
.race-tag.is-next{ color:var(--blue); font-weight:700; }
.race-name{
  grid-area:name;
  font-size:clamp(1.7rem,4.8vw,3.8rem); line-height:1;
  letter-spacing:-.04em; font-weight:800;
  font-variation-settings:"wdth" 100,"wght" 800;
}
.race-next .race-name{ color:var(--ink-45); }

.race-nums{ grid-area:nums; display:flex; gap:var(--s-4); }
.rank{ display:flex; flex-direction:column; align-items:flex-start; }
.rank-n{
  font-size:clamp(2.6rem,6.4vw,5rem); line-height:.9;
  font-weight:900; letter-spacing:-.05em;
  font-variation-settings:"wdth" 92,"wght" 900;
}
.rank.is-best .rank-n{ color:var(--blue); }
.rank-goal{
  font-size:clamp(1.2rem,2.5vw,1.9rem); line-height:1.1;
  font-weight:800; letter-spacing:-.03em;
  border:2px dashed var(--ink-45);
  padding:8px 14px; margin-bottom:8px;
}
.rank-lb{ color:var(--ink-45); margin-top:12px; font-size:.8rem; font-weight:500; }

/* ── 365 / Streak ── */
.streak-claim{
  font-size:clamp(1.7rem,4.4vw,3.2rem); line-height:1.08;
  letter-spacing:-.035em; font-weight:800;
  max-width:18ch; margin-bottom:var(--s-4);
}
.streak-claim em{ font-style:normal; color:var(--blue); }
.streak{ margin-bottom:var(--s-3); }
.streak-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(10px, 1fr));
  gap:3px;
  margin-bottom:16px;
}
.streak-grid i{
  display:block; aspect-ratio:1;
  background:var(--cell-off);
  transform:scale(.35);
  opacity:.4;
}
.streak-grid i.on{
  background:var(--blue);
  transform:scale(1); opacity:1;
  transition:transform 520ms var(--ease-out), opacity 520ms var(--ease-out), background 520ms var(--ease-out);
  transition-delay:var(--d,0ms);
}
.streak figcaption{
  display:flex; align-items:center; gap:9px;
  color:var(--ink-45); font-weight:500;
}
/* Zeigt dieselbe Form und Farbe wie ein Feld im Raster darueber. */
.cell-key{
  flex:0 0 auto;
  width:.9em; height:.9em;
  background:var(--blue);
}
.streak-text{ color:var(--ink-70); max-width:58ch; margin-bottom:var(--s-4); }

.stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:var(--hair) solid var(--rule);
}
.stat{
  padding:var(--s-3) var(--s-2) 0 0;
  border-right:var(--hair) solid var(--rule);
}
.stat:last-child{ border-right:0; }
.stat + .stat{ padding-left:var(--s-2); }
.stat-n{
  font-size:clamp(2.2rem,5.4vw,4rem); line-height:1;
  font-weight:900; letter-spacing:-.05em;
  font-variation-settings:"wdth" 90,"wght" 900;
  margin-bottom:14px;
  display:flex; align-items:baseline; gap:.18em; flex-wrap:wrap;
}
/* Strich zwischen den Zahlen: eigene Flaeche statt Schriftzeichen,
   damit Laenge und Abstand exakt stimmen und nichts klebt. */
.stat-sep{
  align-self:center; flex:0 0 auto;
  width:.36em; height:3px;
  background:var(--ink-45);
  margin-inline:.14em;
}
/* Optisch versteckt, aber vorlesbar. */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.stat dt{
  font-family:var(--mono); font-size:.82rem; letter-spacing:.08em;
  text-transform:uppercase; font-weight:500; color:var(--ink-45); line-height:1.5;
}

/* ── Warum ── */
.why-lead{
  font-size:clamp(1.9rem,5vw,3.6rem); line-height:1.06;
  letter-spacing:-.04em; font-weight:800;
  /* Breit genug, damit der aktuelle Satz auf breiten Bildschirmen in
     einer Zeile steht. Auf schmalen Screens bricht text-wrap:balance
     ihn weiterhin sauber um, statt zu ueberlaufen. */
  max-width:38ch; margin-bottom:var(--s-4);
  text-wrap:balance;
}
.why-cols{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s-5);
}
.why-cols p{ color:var(--ink-70); max-width:56ch; }

/* ── Ziele ── */
.goals{ display:grid; gap:0; }
.goal{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:var(--s-3) var(--s-4);
  padding:var(--s-4) 0;
  border-bottom:var(--hair) solid var(--rule);
}
.goal-when{
  color:var(--blue); font-weight:700;
  font-size:1.15rem; letter-spacing:.03em;
  padding-top:6px;
}
.goal h3{
  font-size:clamp(1.35rem,2.8vw,2.2rem); line-height:1.08;
  letter-spacing:-.03em; font-weight:800; margin-bottom:12px;
}
.goal p{ color:var(--ink-70); max-width:60ch; }
.goal > h3, .goal > p{ grid-column:2; }
.goal > p{ margin-top:-8px; }

/* ── Media ── */
.media-intro{
  font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.38;
  letter-spacing:-.015em; max-width:46ch; margin-bottom:var(--s-5);
}
.media-intro b{ font-weight:700; }
.media-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-2); margin-bottom:var(--s-5);
}
/* Eigener Abspiel-Knopf statt der nativen Video-Steuerung: die
   sieht auf jedem Geraet anders aus und wuerde nicht zum Rest
   der Seite passen. Gleiche Formensprache wie die frueheren
   Platzhalter (Rahmen, Blau, Dreieck). */
.reel{
  position:relative;
  aspect-ratio:9/16;
  border:2px solid var(--ink);
  background:var(--paper-2);
  overflow:hidden;
  cursor:pointer;
}
.reel-video{ width:100%; height:100%; object-fit:cover; }
.reel-play{
  position:absolute; inset:0; margin:auto;
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  color:var(--blue);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  border-radius:50%;
  transition:opacity 200ms var(--ease), transform 200ms var(--ease);
}
.reel-play svg{ width:26px; height:26px; }
.reel-play:hover{ transform:scale(1.06); }
/* Waehrend der Wiedergabe verschwindet der Knopf, statt ueber
   dem Bild zu schweben. pointer-events:none, damit der Klick
   danach direkt das Video trifft und pausiert. */
.reel.is-playing .reel-play{ opacity:0; transform:scale(.85); pointer-events:none; }

/* ── Sponsoring ── */
.spon-lead{
  font-size:clamp(1.6rem,3.6vw,2.8rem); line-height:1.14;
  letter-spacing:-.035em; font-weight:800;
  max-width:24ch; margin-bottom:var(--s-5);
}
.offer{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s-4) var(--s-3);
  border-top:2px solid var(--ink);
  padding-top:var(--s-4); margin-bottom:var(--s-3);
}
.offer li{ border-right:var(--hair) solid var(--rule); padding-right:var(--s-3); }
.offer li:last-child{ border-right:0; }
.offer-n{
  display:block; color:var(--blue); font-weight:700;
  font-size:.92rem; margin-bottom:var(--s-2);
}
.offer h3{
  font-size:1.18rem; font-weight:700; letter-spacing:-.02em;
  margin-bottom:12px; line-height:1.22;
}
.offer p{ color:var(--ink-70); font-size:1rem; }

.spon-logos-head{ color:var(--ink-45); margin-bottom:var(--s-3); font-weight:500; }

/* Sponsoren: Teil von "Der Athlet", ohne eigene Linie oder Abschnitt.
   Blaue Mono-Ueberschrift wie die anderen Zwischentitel (Ziele, Kontakt),
   Logos darunter mittig. Das flex mit wrap und gap haelt es offen fuer
   weitere Logos. */
.partners{ margin-top:var(--s-6); text-align:center; }
.partners-label{
  color:var(--blue); font-weight:700; font-size:1.3rem;
  margin-bottom:var(--s-3);
}
.partners-logos{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:var(--s-4) var(--s-5);
}
.partners-logos img{
  display:block; height:auto;
  width:clamp(260px, 32vw, 400px);
}
.spon-logos ul{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-2);
}
.spon-logos li{
  display:flex; align-items:center; justify-content:center;
  text-align:center; min-height:140px; padding:var(--s-2);
  border:2px dashed var(--ink-45);
  color:var(--ink-45);
  font-family:var(--mono); font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; font-weight:500; line-height:1.7;
  transition:border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease);
}
.spon-logos li:hover{ border-color:var(--blue); color:var(--blue); }

/* ─── 8. FOOTER ─────────────────────────────────────────── */
.site-foot{
  background:var(--paper);
  border-top:var(--hair) solid var(--rule);
  padding:clamp(40px, 4.4vw, 64px) var(--gutter) var(--s-3);
  max-width:var(--maxw); margin-inline:auto;
}
.foot-grid{
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  /* Die Datenliste sitzt mittig zur Kontaktspalte, nicht oben buendig. */
  align-items:center;
  gap:var(--s-5); margin-bottom:var(--s-6);
}
.foot-kicker{
  color:var(--blue);
  font-size:1.05rem; font-weight:700; letter-spacing:.04em;
  margin-bottom:var(--s-3);
}
.foot-cta h2{
  font-size:clamp(2.2rem,6vw,4.5rem); line-height:.94;
  letter-spacing:-.045em; font-weight:900; text-transform:uppercase;
  font-variation-settings:"wdth" 104,"wght" 900;
  /* Die Adresse gehoert zur Ueberschrift und steht deshalb naeher
     daran als die uebrigen Bloecke zueinander. */
  margin-bottom:var(--s-4);
}
.mail-link{
  display:inline-flex; align-items:center; gap:14px;
  min-height:52px;
  font-size:clamp(1.1rem,2.1vw,1.5rem); font-weight:600; letter-spacing:-.02em;
  border-bottom:4px solid var(--blue);
  padding-bottom:6px;
  cursor:pointer;
  transition:color var(--t-fast) var(--ease);
}
.mail-link:hover, .mail-link.is-copied{ color:var(--blue); }

.foot-meta dl{ border-top:2px solid var(--ink); }
.foot-meta dl > div{
  display:grid; grid-template-columns:minmax(0,130px) minmax(0,1fr);
  gap:var(--s-2);
  padding:16px 0; border-bottom:var(--hair) solid var(--rule);
}
.foot-meta dt{ color:var(--ink-45); font-weight:500; }
.foot-meta dd{ font-weight:500; }
.foot-meta a{
  display:inline-flex; align-items:center; min-height:32px;
  text-decoration:none; border-bottom:2px solid var(--rule);
}
.foot-meta a:hover{ border-bottom-color:var(--blue); color:var(--blue); }

.foot-base{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s-2); flex-wrap:wrap;
  padding-top:var(--s-3);
  border-top:var(--hair) solid var(--rule);
  color:var(--ink-45);
}
.foot-base .mono{ font-weight:500; }
.foot-legal{
  color:var(--ink-45); text-decoration:none;
  border-bottom:2px solid var(--rule);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.foot-legal:hover{ color:var(--blue); border-bottom-color:var(--blue); }

/* Social-Icons: zurueckhaltend, kein Button. Die Trefferflaeche ist
   44x44, obwohl das Icon nur 20px misst. */
.foot-social{ display:flex; gap:4px; }
/* Optische Korrektur: der Strava-Chevron ist schmaler und in der Mitte
   offen, hat also weniger Masse als die beiden Nachbarn. Rechnerisch
   gleicher Abstand laesst ihn abgesetzt wirken, deshalb rueckt er
   4px naeher. Die Trefferflaechen stossen dadurch aneinander,
   ueberlappen aber nicht. */
.foot-social li:last-child{ margin-left:-4px; }
.foot-social a{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  /* Heller als die uebrigen Labels, aber 3.7:1 gegen das Papier und
     damit ueber der Grenze fuer bedeutungstragende Grafik. */
  color:#7A7B82;
  transition:color var(--t-fast) var(--ease);
}
.foot-social svg{
  width:26px; height:26px;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
/* Offizielles Markenzeichen: gefuellt statt gestrichelt. */
.foot-social svg.brand-solid{ fill:currentColor; stroke:none; }
.foot-social a:hover{ color:var(--blue); }
.to-top{
  display:inline-flex; align-items:center; gap:9px;
  min-height:44px; text-decoration:none;
  transition:color var(--t-fast) var(--ease);
}
.to-top svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.to-top:hover{ color:var(--blue); }

/* ── Letzte Zeile einer Liste ──────────────────────────────
   Die Trennlinie unter dem letzten Eintrag ist ueberfluessig:
   der Abschnittswechsel trennt dort schon. Beim letzten Eintrag
   faellt zusaetzlich das untere Polster weg, damit er direkt in
   den Sektionsabstand laeuft. */
.goal:last-child,
.race:last-child{
  border-bottom:0;
  padding-bottom:0;
}
.foot-meta dl > div:last-child{ border-bottom:0; }

/* ─── 9. MOTION ─────────────────────────────────────────── */

/* ── Laeufer ───────────────────────────────────────────────
   Strichmaennchen, das dem Zeiger hinterherlaeuft. Wird nur per
   JS erzeugt, und nur bei echter Mausbewegung (siehe main.js).

   Die Figur ist nach RECHTS gezeichnet. Laeuft der Zeiger nach
   links, spiegelt scaleX(-1). Der Drehpunkt liegt auf den Fuessen,
   damit sie beim Wenden nicht seitlich springt. */
.runner{
  position:fixed; top:0; left:0; z-index:90;
  width:34px; height:30px;
  margin:-27px 0 0 -20px;      /* Fuesse stehen auf dem Zeiger */
  transform-origin:59% 90%;
  pointer-events:none;
  color:var(--blue);
  opacity:0;
  transition:opacity 200ms var(--ease);
  will-change:transform;
  /* Heller Saum: haelt die Figur auch ueber dem blauen Ticker sichtbar. */
  filter:drop-shadow(0 0 1.5px var(--paper));
}
.runner.is-on{ opacity:.9; }
.runner svg{
  width:100%; height:100%;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
}

/* Drehpunkte in viewBox-Koordinaten: Schulter und Huefte, Knie. */
.runner g{ transform-box:view-box; }
.runner .arm-a,.runner .arm-b{ transform-origin:21px 12px; }
.runner .bein-a,.runner .bein-b{ transform-origin:17px 18px; }
.runner .schien-a,.runner .schien-b{ transform-origin:17px 22.5px; }

/* Vorzeichen, damit es anatomisch stimmt:
   Die Figur blickt nach rechts, y zeigt nach unten. Eine positive
   Drehung schwingt den Fuss nach HINTEN, eine negative nach VORNE.
   Das Knie beugt ausschliesslich nach hinten, dort also nur
   positive Werte. (Vorher waren sie negativ, dadurch klappte das
   Schienbein nach vorne um und die Bewegung war kaputt.) */
.runner.is-running .bein-a{ animation:huefteA .48s linear infinite; }
.runner.is-running .bein-b{ animation:huefteB .48s linear infinite; }
.runner.is-running .schien-a{ animation:knieA .48s linear infinite; }
.runner.is-running .schien-b{ animation:knieB .48s linear infinite; }
.runner.is-running .arm-a{ animation:armA .48s ease-in-out infinite; }
.runner.is-running .arm-b{ animation:armB .48s ease-in-out infinite; }
/* Ein Auf und Ab pro Schritt, also doppelte Frequenz der Beine. */
.runner.is-running .koerper{ animation:huepfen .12s ease-in-out infinite alternate; }

/* Vier Phasen eines Laufschritts: Aufsetzen, Standphase,
   Abstoss, Schwungphase. */
@keyframes huefteA{
  0%   { transform:rotate(-28deg); }   /* Aufsetzen, Bein vorn */
  25%  { transform:rotate(-4deg);  }   /* unter dem Koerper */
  50%  { transform:rotate(26deg);  }   /* Abstoss, Bein hinten */
  75%  { transform:rotate(-6deg);  }   /* schwingt nach vorn */
  100% { transform:rotate(-28deg); }
}
@keyframes huefteB{                    /* dasselbe, um 50% versetzt */
  0%   { transform:rotate(26deg);  }
  25%  { transform:rotate(-6deg);  }
  50%  { transform:rotate(-28deg); }
  75%  { transform:rotate(-4deg);  }
  100% { transform:rotate(26deg);  }
}
@keyframes knieA{
  0%   { transform:rotate(10deg); }    /* Aufsetzen, leicht gebeugt */
  25%  { transform:rotate(6deg);  }    /* Standphase, fast gestreckt */
  50%  { transform:rotate(34deg); }    /* Abstoss, faengt an zu falten */
  75%  { transform:rotate(84deg); }    /* Schwungphase, Ferse am Gesaess */
  100% { transform:rotate(10deg); }
}
@keyframes knieB{
  0%   { transform:rotate(34deg); }
  25%  { transform:rotate(84deg); }
  50%  { transform:rotate(10deg); }
  75%  { transform:rotate(6deg);  }
  100% { transform:rotate(34deg); }
}
/* Arme gegengleich zum Bein derselben Seite. */
@keyframes armA{ 0%,100%{transform:rotate(32deg)}  50%{transform:rotate(-32deg)} }
@keyframes armB{ 0%,100%{transform:rotate(-32deg)} 50%{transform:rotate(32deg)}  }
@keyframes huepfen{ from{transform:translateY(.7px)} to{transform:translateY(-.9px)} }

/* Tempolinien hinter der Figur. Nur beim Laufen sichtbar, versetzt
   gestartet, damit sie nacheinander durchziehen. */
.runner .tempo line{ opacity:0; stroke-width:1.8; }
.runner.is-running .tempo line{ animation:tempolinie .5s linear infinite; }
.runner.is-running .tempo line:nth-child(2){ animation-delay:.17s; }
.runner.is-running .tempo line:nth-child(3){ animation-delay:.33s; }
@keyframes tempolinie{
  0%{ transform:translateX(5px); opacity:0; }
  35%{ opacity:.6; }
  100%{ transform:translateX(-7px); opacity:0; }
}

/* ─── 10. RESPONSIVE ────────────────────────────────────── */

/* Niedrige Fenster (13-Zoll-Laptops, Tablets quer): Hero zusaetzlich
   straffen, damit die beiden Buttons ueber der Falte bleiben.
   Greift bewusst nicht auf Handys, die sind hoch statt breit. */
@media (min-width:721px) and (max-height:820px){
  .hero{ padding-top:clamp(28px,3vw,48px); }
  .hero-name{ font-size:clamp(2.4rem, 7.5vw, 5rem); }
  .hero-meta{ margin-bottom:clamp(20px,2.4vw,32px); }
  .hero-meta > div{ padding-block:var(--s-2); }
  .kicker{ padding-bottom:var(--s-2); margin-bottom:var(--s-2); }
}

@media (max-width:860px){
  .head-nav{ display:none; }
}

@media (max-width:1100px){
  .hero-grid{ grid-template-columns:minmax(0,1fr); }
  .hero-shot{ grid-column:1; grid-row:auto; max-width:320px; margin-top:var(--s-4); }
  .two-col{ grid-template-columns:minmax(0,1fr); }
  .why-cols{ grid-template-columns:minmax(0,1fr); gap:var(--s-3); }
  .offer{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .offer li:nth-child(2n){ border-right:0; }
  .media-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot-grid{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:720px){
  .site-head{ height:62px; }
  .monogram-logo{ height:19px; }
  /* Label optisch weg, aber für Screenreader da → der Icon-Button
     behält seinen zugänglichen Namen. */
  .lang-de .head-mail .de,
  .lang-en .head-mail .en{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  }
  .head-mail{ padding:10px 14px; }

  /* Auf dem Handy ist "Nach oben" ueberfluessig, ein Wisch erledigt
     das genauso schnell. Restliche Fusszeile bleibt, space-between
     verteilt Copyright und Social-Icons dann einfach zu zweit. */
  .to-top{ display:none; }

  .hero{ padding-top:var(--s-5); }
  .hero-meta{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-meta > div{ border-bottom:var(--hair) solid var(--rule); }
  .hero-meta > div:nth-child(2n){ border-right:0; }
  .hero-meta > div:nth-child(2n+1){ padding-left:0; }
  .hero-meta > div:nth-child(2n){ padding-left:var(--s-2); }
  .btn{ width:100%; justify-content:space-between; }

  .sec-head{ grid-template-columns:1fr; }
  .sec-note{ grid-column:1 / -1; text-align:left; margin-top:10px; }

  .race{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tag" "name" "nums";
    align-items:start; gap:14px;
  }
  .race-nums{ gap:var(--s-4); margin-top:6px; }
  .rank-n{ font-size:3.2rem; }

  .goal{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .goal > h3, .goal > p{ grid-column:1; }
  .goal > p{ margin-top:0; }

  .stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat{ border-bottom:var(--hair) solid var(--rule); padding-bottom:var(--s-3); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:nth-child(2n+1){ padding-left:0; }
  .stat:nth-last-child(-n+2){ border-bottom:0; padding-bottom:0; }

  .offer{ grid-template-columns:minmax(0,1fr); }
  .offer li{ border-right:0; padding-right:0;
             border-bottom:var(--hair) solid var(--rule); padding-bottom:var(--s-3); }
  .offer li:last-child{ border-bottom:0; }
  .spon-logos ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .streak-grid{ grid-template-columns:repeat(auto-fill, minmax(8px,1fr)); gap:2px; }
}