/* trailbase+ · Design System v6
   Tokens und Regeln 1:1 aus projects/Trailbase Fantasy 26/_system/design-system.
   Grenzen (nicht verwaessern):
     - genau eine Akzentfamilie: Kupfer. copper ruhig, copper-soft laut.
     - ember NUR fuer den Live-Puls. Kein Blau, kein Violett, kein Orange.
     - Grotesk nie im Fliesstext, nur Statements, Zahlen, Rangnummern.
     - Serif kursiv ist der Ausbruch, nicht die Regel.
     - Raster traegt Daten, ist keine Deko.
     - prefers-reduced-motion schaltet alle Bewegung ab.
*/

:root{
  --bg:#050f14; --bg2:#08161d; --card:#0a1c24; --card2:#0d222c;
  --copper:#b77f50; --copper-soft:#cd9a6e; --hot:#cd9a6e; --ember:#e0663f;
  --off:#f4efeb; --nude:#ead7c3; --ice:#bcd1da; --green:#6ad19a; --red:#e06a5a;
  --line:rgba(188,209,218,.09); --line2:rgba(188,209,218,.16); --dot:rgba(188,209,218,.14);
  --ice-15:rgba(188,209,218,.15); --ice-10:rgba(188,209,218,.10); --ice-08:rgba(188,209,218,.08);
  --copper-15:rgba(183,127,80,.15); --copper-30:rgba(183,127,80,.30);
  --mono:'DM Mono',ui-monospace,monospace;
  --serif:'DM Serif Display',Georgia,serif;
  --sans:'DM Sans',system-ui,sans-serif;
  --grotesk:'Archivo','DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.4,.4,1);
  --gx:clamp(18px,4.5vw,64px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  background-image:radial-gradient(var(--dot) 1px,transparent 1px);
  background-size:24px 24px;
  color:var(--nude); font-family:var(--sans); font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--copper-soft);text-decoration:none;transition:.18s var(--ease)}
a:hover{color:var(--off)}
button{font-family:var(--mono);cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}
::selection{background:var(--copper-soft);color:#160a04}
:focus-visible{outline:2px solid var(--copper-soft);outline-offset:2px}

/* ── Typografie ───────────────────────────────────────────────── */
.disp{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  letter-spacing:-.02em;color:var(--off);line-height:.88}
.disp em{font-family:var(--serif);font-weight:400;font-style:italic;
  text-transform:none;color:var(--copper);letter-spacing:-.01em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--copper);margin-bottom:11px}
.lbl-ice{color:var(--ice)}
.note{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ice);opacity:.72;line-height:1.9}
.rk{font-family:var(--grotesk);font-weight:900;color:var(--off);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.r-xl{font-size:30px}.r-l{font-size:25px}.r-m{font-size:18px}.r-s{font-size:12.5px}

/* ── Karte mit Kupfer-Eckmarkern ──────────────────────────────── */
.card6{position:relative;background:var(--card);border:1px solid var(--line2);
  border-radius:6px;padding:18px}
.card6::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
  border-top:1px solid var(--copper);border-left:1px solid var(--copper)}
.card6::after{content:"";position:absolute;bottom:-1px;right:-1px;width:7px;height:7px;
  border-bottom:1px solid var(--copper);border-right:1px solid var(--copper)}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn6{display:inline-flex;justify-content:center;align-items:center;gap:10px;
  font-family:var(--mono);font-size:13.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#160a04;background:var(--copper-soft);
  border-radius:5px;padding:15px 30px;transition:.18s var(--ease)}
.btn6:hover{color:#160a04;filter:brightness(1.08)}
.btn6:active{transform:scale(.97)}
.btn6--ghost{background:transparent;border:1px solid var(--line2);color:var(--ice)}
.btn6--ghost:hover{border-color:var(--copper);color:var(--off);filter:none}

/* ── Navigation ───────────────────────────────────────────────── */
nav.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;padding:14px var(--gx);
  background:rgba(5,15,20,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
nav.top .brand{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  font-size:18px;color:var(--off);letter-spacing:-.01em;line-height:1}
nav.top .brand b{color:var(--copper);font-weight:900}
nav.top .brand small{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.24em;color:var(--ice);font-weight:400;margin-top:3px;text-transform:uppercase}
nav.top ul{display:flex;gap:24px;list-style:none}
nav.top ul a{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice)}
nav.top ul a:hover{color:var(--copper-soft)}
@media(max-width:620px){nav.top ul li:nth-child(n+3){display:none}nav.top ul{gap:14px}}
#progress{position:fixed;top:0;left:0;height:2px;background:var(--copper-soft);width:0;z-index:60}

/* ── Sektionen ────────────────────────────────────────────────── */
section{padding:clamp(52px,8vh,96px) var(--gx);position:relative}
.sec-head{margin-bottom:34px;max-width:840px}
.sec-head h2{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  font-size:clamp(26px,4.2vw,44px);color:var(--off);line-height:.92;letter-spacing:-.02em;margin-top:12px}
.sec-head h2 em{font-family:var(--serif);font-weight:400;font-style:italic;
  text-transform:none;color:var(--copper);letter-spacing:-.01em}
.sec-head p.sub{color:var(--nude);font-size:15.5px;margin-top:14px;max-width:640px;line-height:1.75}
.sec{margin-bottom:34px}
.sec .lbl{display:flex;align-items:center;gap:10px}
.sec .lbl::after{content:'';flex:1;height:1px;background:var(--line)}
.back{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);display:inline-block;margin-bottom:22px}
.back:hover{color:var(--copper-soft)}
.muted{color:var(--ice);font-size:14px;font-family:var(--mono);opacity:.75}

/* ── Motion ───────────────────────────────────────────────────── */
html.js .reveal{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none}

/* ── Footer ───────────────────────────────────────────────────── */
footer{padding:40px var(--gx);border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;background:var(--bg2)}
footer .fbrand{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  font-size:16px;color:var(--off)}
footer .fbrand b{color:var(--copper)}
footer p,footer a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice)}

/* ══════════════ ATHLETEN-SEITE ══════════════ */
.ap-hero{padding:clamp(26px,5vh,48px) var(--gx) 0;background:var(--bg2);border-bottom:1px solid var(--line)}
.ap-hero-in{max-width:1180px;margin:0 auto}
.ap-top{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3.5vw,44px);align-items:start}
.ap-portrait{width:clamp(112px,15vw,178px);height:auto;border:1px solid var(--line2);border-radius:6px}
.ap-id h1{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,5.6vw,62px);color:var(--off);line-height:.9;letter-spacing:-.025em;margin-top:9px}
.ap-id .tagline{font-family:var(--serif);font-style:italic;color:var(--copper);
  font-size:clamp(15px,2vw,21px);margin-top:9px;line-height:1.3}
.ap-id .nat{font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice)}
.ap-id .nat b{color:var(--copper-soft);font-weight:400}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips a,.chips span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--off);border:1px solid var(--copper-30);
  border-radius:4px;padding:7px 12px}
.chips a:hover{border-color:var(--copper-soft);background:var(--copper-15)}
.chips .none{border-color:var(--line2);color:var(--ice)}
.links{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.links a{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line2);border-radius:4px;color:var(--ice);padding:7px 11px}
.links a:hover{border-color:var(--copper);color:var(--off)}
.hero-idx{text-align:right;flex:none}
.hero-idx .n{font-family:var(--grotesk);font-weight:900;font-size:clamp(36px,5.5vw,60px);
  color:var(--off);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.hero-idx .l{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);margin-top:6px;line-height:1.8}
.hero-idx .l span{color:var(--ice)}
.ap-stats{display:flex;gap:clamp(18px,3.5vw,46px);flex-wrap:wrap;margin-top:clamp(22px,3.5vh,38px);
  border-top:1px solid var(--line);padding:20px 0}
.cs .v{font-family:var(--grotesk);font-weight:900;font-size:clamp(20px,2.8vw,30px);
  color:var(--off);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cs .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ice);margin-top:6px}
/* Anteil neben der Zahl, wie in der Statuszeile bei Freetrail. Bewusst klein
   und kupfern: die absolute Zahl bleibt die Hauptaussage. */
.cs .pc{font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.04em;
  color:var(--copper-soft);margin-left:7px;vertical-align:.28em}
.cs[title]{cursor:help}
@media(max-width:820px){.ap-top{grid-template-columns:1fr;gap:16px}
  .ap-portrait{width:100px}
  .hero-idx{text-align:left;display:flex;align-items:baseline;gap:12px}.hero-idx .l{margin-top:0}}

.ap-body{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(22px,3.5vw,54px);
  padding:clamp(28px,4.5vh,52px) var(--gx);max-width:1180px;margin:0 auto}
@media(max-width:900px){.ap-body{grid-template-columns:1fr}}
.read{font-size:16px;line-height:1.85;color:var(--nude)}
.fant{border:1px solid var(--copper-30);background:var(--copper-15);border-radius:6px;
  padding:16px 18px;margin-top:18px;position:relative}
.fant::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
  border-top:1px solid var(--copper-soft);border-left:1px solid var(--copper-soft)}
.fant .fk{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--copper-soft);margin-bottom:6px}
.fant p{font-size:14.5px;color:var(--off);line-height:1.6}
.hl{list-style:none;display:grid;gap:8px}
.hl li{font-size:14px;color:var(--nude);padding-left:17px;position:relative;line-height:1.6}
.hl li::before{content:'';position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--copper)}
.media{display:grid}
.mi{display:block;padding:13px 0;border-bottom:1px solid var(--ice-08);transition:padding-left .22s var(--ease)}
.mi:hover{padding-left:7px}
.mi .mt{display:flex;gap:9px;align-items:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.18em;text-transform:uppercase}
.mi .o{color:var(--copper)}.mi .y{color:var(--ice)}
.mi .ty{color:var(--ice);border:1px solid var(--line2);border-radius:3px;padding:1px 6px}
.mi .mh{color:var(--off);font-size:16px;margin-top:5px;line-height:1.5}
.film{display:block;border:1px solid var(--copper);border-radius:6px;padding:18px 20px;
  position:relative;transition:.24s var(--ease)}
.film:hover{background:var(--copper-15)}
.film .fk{font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--copper-soft)}
.film .ft{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;font-size:20px;
  color:var(--off);margin-top:6px;line-height:1.1;letter-spacing:-.01em}
.film .fp{font-family:var(--mono);font-size:13.5px;letter-spacing:.14em;color:var(--ice);margin-top:7px;text-transform:uppercase}

/* Karriere-Tabelle */
.pending{border:1px solid var(--line2);border-left:2px solid var(--copper);border-radius:4px;
  padding:11px 14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ice);line-height:1.8;margin-bottom:14px;text-transform:uppercase}
.cat-tabs{display:flex;flex-wrap:wrap;margin-bottom:14px;border:1px solid var(--line2);
  border-radius:5px;width:fit-content;overflow:hidden}
.cat-tab{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);padding:9px 13px;transition:.18s var(--ease)}
.cat-tab span{opacity:.5;margin-left:3px}
.cat-tab.active{background:var(--copper-soft);color:#160a04}
.career{width:100%;border-collapse:collapse;font-size:15px}
.career th{text-align:left;font-family:var(--mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice);padding:0 9px 9px 0;border-bottom:1px solid var(--line2);font-weight:400}
.career th.ra{text-align:right}
.career tr.yr td{padding:20px 0 7px;border:none;white-space:nowrap}
.career tr.yr span{font-family:var(--grotesk);font-weight:900;font-size:19px;color:var(--copper);
  letter-spacing:-.02em;vertical-align:baseline}
.career tr.yr i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice);opacity:.6;margin-left:11px}
.career td{padding:9px 9px 9px 0;border-bottom:1px solid var(--ice-08);vertical-align:top}
.career td.d{white-space:nowrap;color:var(--ice);font-family:var(--mono);font-size:14px;width:74px}
.career td.r{color:var(--off);line-height:1.45}
.career td.r small{display:block;color:var(--ice);font-family:var(--mono);font-size:13px;letter-spacing:.06em;margin-top:2px}
.career .cat{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  color:var(--copper);border:1px solid var(--copper-30);border-radius:3px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.career td.t{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--nude);white-space:nowrap;width:82px;font-size:14.5px}
.career td.s{text-align:right;width:70px}
.career .sc{font-family:var(--grotesk);font-weight:900;font-size:18px;color:var(--off);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.career .st{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);opacity:.65}
.career .st.dnf{color:var(--red);opacity:.85}
.career .sb{height:2px;background:var(--ice-08);margin-top:4px;position:relative}
.career .sb i{position:absolute;right:0;top:0;bottom:0;background:var(--copper)}
.srcnote{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ice);opacity:.7;line-height:1.9;margin-top:16px;border-top:1px solid var(--line);padding-top:12px}

.ap-nav{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1px;background:var(--line);
  border-top:1px solid var(--line);margin-top:18px}
.ap-nav .pn{background:var(--bg2);padding:22px var(--gx);display:block;transition:.22s var(--ease)}
.ap-nav .pn:hover{background:var(--card)}
.ap-nav .pn span{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper)}
.ap-nav .pn b{display:block;font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  font-size:16px;color:var(--off);margin-top:5px;letter-spacing:-.01em}
.ap-nav .ctr{text-align:center}.ap-nav .ra{text-align:right}
@media(max-width:700px){.ap-nav{grid-template-columns:1fr}.ap-nav .ctr,.ap-nav .ra{text-align:left}}

/* ══════════════ RENN-SEITE ══════════════ */
.rp-hero{padding:clamp(32px,6vh,72px) var(--gx);max-width:1180px;margin:0 auto}
.rp-hero h1{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,7.5vw,86px);color:var(--off);line-height:.9;letter-spacing:-.03em;margin-top:12px}
.rp-hero h1 em{font-family:var(--serif);font-weight:400;font-style:italic;
  text-transform:none;color:var(--copper);letter-spacing:-.01em}
.rp-hero .lede{color:var(--nude);font-size:clamp(14px,1.8vw,17px);max-width:600px;margin:16px 0 26px;line-height:1.75}
.rp-body{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,3.5vw,50px);
  padding:0 var(--gx) clamp(44px,7vh,84px);max-width:1180px;margin:0 auto}
@media(max-width:900px){.rp-body{grid-template-columns:1fr}}
.facts{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line2);border-radius:6px;overflow:hidden}
.fact{padding:18px 20px;border-bottom:1px solid var(--line)}
.fact:nth-child(odd){border-right:1px solid var(--line)}
.fact:nth-last-child(-n+2){border-bottom:none}
.fact .v{font-family:var(--grotesk);font-weight:900;font-size:22px;color:var(--off);letter-spacing:-.02em}
.fact .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);margin-top:5px}
.crs{display:grid;gap:10px;margin:12px 0 30px}
.cr{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:15px 18px;border:1px solid var(--line2);border-radius:6px}
.cr .who{color:var(--off);font-size:15px}
.cr .who small{display:block;color:var(--ice);font-family:var(--mono);font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.cr .t{font-family:var(--grotesk);font-weight:900;font-size:24px;color:var(--copper);
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.p25 .row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--ice-08);font-size:14.5px}
.p25 .row b{font-weight:400;color:var(--off)}
.p25 .row i{font-style:normal;color:var(--ice);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
.p25 .row .p{font-family:var(--grotesk);font-weight:900;color:var(--off);width:32px;display:inline-block;font-size:13px}
.p25 .row .t{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--copper)}
.xci{border:1px solid var(--line2);border-radius:6px;background:var(--card);
  padding:20px 18px;margin-bottom:30px;position:relative}
.xci::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
  border-top:1px solid var(--copper);border-left:1px solid var(--copper)}
.xci::after{content:"";position:absolute;bottom:-1px;right:-1px;width:7px;height:7px;
  border-bottom:1px solid var(--copper);border-right:1px solid var(--copper)}
.xci .xv{display:flex;gap:38px;margin-top:6px}
.xci .v{font-family:var(--grotesk);font-weight:900;font-size:46px;line-height:1;color:var(--off);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.xci .g{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ice);margin-top:7px}
.xci .cav{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ice);
  line-height:1.9;margin-top:16px;border-top:1px solid var(--line);padding-top:12px;opacity:.8;text-transform:uppercase}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:620px){.minis{grid-template-columns:1fr}}
.mini{width:100%;border-collapse:collapse;font-size:13.5px}
.mini caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--copper);padding-bottom:10px}
.mini td{padding:8px 8px 8px 0;border-bottom:1px solid var(--ice-08)}
.mini tr{cursor:pointer}
.mini tr:hover td{background:var(--ice-08)}
.mini td.rk{width:34px;font-size:15px}
.mini td.nm a{color:var(--off)}
.mini td.nm small{color:var(--ice);margin-left:5px}
.mini td.ix{text-align:right;font-family:var(--mono);font-size:14px;color:var(--off);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important;scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none}
}
@media print{
  body::after,#progress,nav.top,.ap-nav,footer{display:none}
  body{background:#fff;color:#111;background-image:none}
  .ap-id h1,.read,.career td.r{color:#111}
}


/* ══════════ Kategorie-Raenge (Karte, Liste, Athleten-Hero) ══════════ */
.cats{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.card .cats{min-height:38px;align-content:flex-start}
.card{display:flex;flex-direction:column}
.card .body{display:flex;flex-direction:column;flex:1}
.card .foot{margin-top:auto}
.card h3{min-height:34px}
.cc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ice);
  border:1px solid var(--line2);border-radius:3px;padding:3px 6px;display:inline-flex;gap:5px;align-items:baseline}
.cc b{font-family:var(--grotesk);font-weight:900;color:var(--off);font-size:12px;letter-spacing:-.02em}
.cc.on{border-color:var(--copper);background:var(--copper-15)}
.cc.on b{color:var(--copper-soft)}
.card .idx{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 9px}
.card .idx .rk{font-size:16px}
.card .idx small{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:var(--copper);text-transform:uppercase}
.card.thin .tag.muted-tag{font-family:var(--mono);font-style:normal;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ice);opacity:.6}
.rankrow{display:flex;flex-wrap:wrap;gap:0;margin-top:16px;border:1px solid var(--line2);
  border-radius:5px;overflow:hidden;width:fit-content}
.rkc{padding:9px 15px;border-right:1px solid var(--line2);text-align:center}
.rkc:last-child{border-right:none}
.rkc-c{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--copper)}
.rkc-r{font-size:19px;margin-top:2px}
.rkc-s{font-size:11.5px;color:var(--ice);margin-top:1px}

/* ══════════ Listen-Ansicht ══════════ */
.list{display:none;width:100%;border-collapse:collapse;font-size:14px}
.list thead th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ice);font-weight:400;padding:0 10px 10px 0;
  border-bottom:1px solid var(--line2);position:sticky;top:112px;background:var(--bg);z-index:5}
.list td{padding:11px 10px 11px 0;border-bottom:1px solid var(--ice-08);vertical-align:middle}
.list tbody tr{cursor:pointer;transition:.15s var(--ease)}
.list tbody tr:hover td{background:var(--ice-08)}
.list .c-rk{width:62px}
.list .c-rk .rk{font-size:16px}
.list .c-nm a{color:var(--off);font-size:14.5px}
.list .c-nm small{display:block;font-family:var(--serif);font-style:italic;color:var(--copper);
  font-size:13px;margin-top:2px;opacity:.85}
.list .c-nat{width:62px;color:var(--ice);font-size:12.5px}
.list .c-cat{width:230px}
.list .c-cat .cats{margin-top:0}
.list .c-ix{width:104px;text-align:right;color:var(--off);padding-right:14px}
.list .c-ra{width:72px;text-align:right;color:var(--ice);padding-right:16px}
.list .c-sp{width:148px;padding-left:4px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--copper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list thead th.c-ix,.list thead th.c-ra{text-align:right}
@media(max-width:900px){.list .c-cat,.list .c-sp{display:none}}
@media(max-width:600px){.list .c-ra{display:none}}

/* ══════════ Pagination ══════════ */
.pager{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:32px;
  padding-top:20px;border-top:1px solid var(--line)}
.pg{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);border:1px solid var(--line2);border-radius:4px;padding:9px 13px;transition:.16s var(--ease)}
.pg:hover:not(:disabled){border-color:var(--copper);color:var(--off)}
.pg:disabled{opacity:.3;cursor:default}
.pg.num{min-width:38px;text-align:center}
.pg.on{background:var(--copper-soft);color:#160a04;border-color:var(--copper-soft)}
.pg-gap{color:var(--ice);opacity:.4;padding:0 2px}
.pg-info{margin-left:auto;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);opacity:.65}
@media(max-width:640px){.pg-info{margin-left:0;width:100%;text-align:right;margin-top:8px}}

/* ══════════ Insights- und Method-Seite ══════════ */
.page-head{padding:clamp(80px,10vh,120px) var(--gx) clamp(28px,4vh,44px);max-width:1180px;margin:0 auto}
.page-head h1{font-size:clamp(32px,5.5vw,64px);margin-top:10px}
.page-head .lede{color:var(--nude);font-size:clamp(14px,1.7vw,16.5px);max-width:620px;
  margin-top:18px;line-height:1.8}
.page-head .ap-stats{margin-top:clamp(26px,4vh,40px)}
.ins-wrap,.method-wrap{padding:0 var(--gx) clamp(50px,8vh,90px);max-width:1180px;margin:0 auto}
.ins-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.ins-card{position:relative;border:1px solid var(--line2);border-radius:6px;background:var(--card);
  padding:22px;grid-column:span 6}
.ins-card::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
  border-top:1px solid var(--copper);border-left:1px solid var(--copper)}
.ins-card.w4{grid-column:span 4}.ins-card.w8{grid-column:span 8}.ins-card.w12{grid-column:span 12}
@media(max-width:900px){.ins-card,.ins-card.w4,.ins-card.w8{grid-column:span 12}}
.ins-card h3{font-family:var(--grotesk);font-weight:900;text-transform:uppercase;font-size:18px;
  color:var(--off);margin-bottom:16px;letter-spacing:-.015em;line-height:1.05}
.ins-card .lbl{margin-bottom:6px}
.spread{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.spread-card{border:1px solid var(--line2);border-radius:5px;padding:16px;text-align:center}
.sc-cat{font-size:17px;color:var(--copper)}
.sc-n{font-family:var(--grotesk);font-weight:900;font-size:30px;color:var(--off);
  letter-spacing:-.03em;margin-top:6px;line-height:1}
.sc-g{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-top:6px}
.bar-rows{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:132px 1fr 38px;gap:12px;align-items:center;font-size:13.5px}
.bar-row .n{color:var(--off);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{height:5px;background:var(--ice-08);position:relative;border-radius:2px}
.bar-row .track i{position:absolute;left:0;top:0;bottom:0;background:var(--copper);border-radius:2px}
.bar-row .track i.ice{background:rgba(188,209,218,.42)}
.bar-row .v{text-align:right;font-family:var(--mono);color:var(--ice);font-size:12.5px;font-variant-numeric:tabular-nums}
a.bar-row{cursor:pointer}
a.bar-row:hover .n{color:var(--copper-soft)}
.bar-rows.multi .track{height:auto;background:none;display:flex;flex-wrap:wrap;gap:4px}
.mc{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ice);
  border:1px solid var(--line2);border-radius:3px;padding:2px 6px}
.about-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px)}
@media(max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-copy p{margin-bottom:16px;font-size:15.5px;line-height:1.85}
.about-copy p b{color:var(--off);font-weight:500}
.pipeline{position:relative;border:1px solid var(--line2);border-radius:6px;background:var(--card);padding:22px}
.pipeline::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
  border-top:1px solid var(--copper);border-left:1px solid var(--copper)}
.pipeline .step{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid var(--ice-08);align-items:baseline}
.pipeline .step:last-child{border-bottom:none}
.pipeline .no{font-family:var(--grotesk);font-weight:900;color:var(--copper);font-size:17px;flex:none;width:26px}
.pipeline .step div b{display:block;color:var(--off);font-weight:500;font-size:14px}
.pipeline .step div span{font-family:var(--mono);font-size:12.5px;color:var(--ice);line-height:1.75}
.src-list{list-style:none;margin-top:18px;display:grid;gap:7px}
.src-list li{font-family:var(--mono);font-size:11.5px;color:var(--ice);padding-left:15px;
  position:relative;line-height:1.8}
.src-list li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:1px;background:var(--copper)}

/* ══════════ beta-Kennzeichnung ══════════
   Die Wortmarke ist Archivo 900 uppercase. "beta" bricht bewusst aus:
   kursive DM Serif Display in Kupfer, kleiner gesetzt, ohne Versalien.
   Gleiche Logik wie der Serif-Ausbruch in den Ueberschriften. */
.beta{font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--copper-soft)}
nav.top .brand .beta{font-size:.72em;margin-left:1px}
footer .fbrand .beta{font-size:.74em;margin-left:1px}
#loader .w .beta{font-size:.5em;margin-left:2px;vertical-align:.28em;
  display:inline-block;transform:translateY(110%);animation:rise .6s .06s var(--ease) forwards}
.hero h1 .beta{font-size:.34em;margin-left:.04em;vertical-align:.5em;letter-spacing:0}

/* ══════════ Laendercode ══════════
   Drei Buchstaben in Mono statt Flaggen-Emoji. Emojis rendern je nach System
   unterschiedlich oder gar nicht, sind fuer Screenreader stumm und passen
   nicht in eine Datentabelle. */
.cd{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--copper);
  font-weight:500}
.ap-id .nat .cd{color:var(--copper);opacity:.9;margin-left:2px}

/* ══════════ General Index auf der Karte ══════════
   Eigene Zeile unter dem Kartenfuss, weil der Index die Standardsortierung
   traegt und dann auch sichtbar sein muss. */
.card .gi{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
.card .gi .gk{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ice);opacity:.8}
.card .gi .gv{font-family:var(--grotesk);font-weight:900;font-size:19px;
  color:var(--copper-soft);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.card .gi.none .gv{color:var(--ice);opacity:.45}
.idx.idx--gi .rk{color:var(--copper-soft)}

/* ══════════ Videoliste ══════════
   Ab vier Videos wird aus den Karten eine Liste. Vier grosse Karten sprengen
   die Spalte, und bei 47 findet man darin nichts mehr. Typografisch statt mit
   Vorschaubildern, damit die Seite bei ihrem Prinzip bleibt: Daten sprechen,
   Bildrechte bleiben sauber. */
.film .fd{float:right;color:var(--ice);opacity:.7;font-weight:400}
.sec .lbl .cnt{font-family:var(--grotesk);font-weight:900;color:var(--copper-soft);
  margin-left:7px;letter-spacing:0}
.vlist{display:grid}
.vrow{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:baseline;
  padding:12px 2px;border-bottom:1px solid var(--ice-08);transition:.16s var(--ease)}
.vrow:hover{background:var(--ice-08);padding-left:8px;padding-right:8px}
.vrow .vt{color:var(--off);font-size:15.5px;line-height:1.4}
.vrow:hover .vt{color:var(--copper-soft)}
.vrow .vm{grid-column:1;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--copper);opacity:.85}
.vrow .vd{grid-column:2;grid-row:1;font-family:var(--mono);font-size:13.5px;
  color:var(--ice);font-variant-numeric:tabular-nums;white-space:nowrap}
.vmore{margin-top:6px}
.vmore summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ice);padding:12px 2px;
  border-bottom:1px solid var(--ice-08);transition:.16s var(--ease)}
.vmore summary::-webkit-details-marker{display:none}
.vmore summary::after{content:' +';color:var(--copper)}
.vmore[open] summary::after{content:' −'}
.vmore summary:hover{color:var(--copper-soft)}

/* ══════════ Rennhistorie als eigene Flaeche ══════════
   Die rechte Spalte ist Daten, die linke ist Text. Ohne Trennung laufen sie
   auf breiten Bildschirmen ineinander (Martins Hinweis 09.08.2026). Statt
   einer Linie eine ruhige Flaeche in der Kartenfarbe des Systems, mit dem
   bekannten Kupfer-Eckmarker. Kein neues Gestaltungsmittel, nur das
   vorhandene an einer weiteren Stelle. */
.ap-body .col-b{position:relative;background:var(--card2);border:1px solid var(--copper-30);
  border-radius:6px;padding:22px clamp(16px,1.8vw,26px) 8px;align-self:start;
  box-shadow:0 0 0 1px rgba(5,15,20,.9), 0 18px 44px rgba(0,0,0,.45)}
.ap-body .col-b::before{content:"";position:absolute;top:-1px;left:-1px;width:7px;height:7px;
  border-top:1px solid var(--copper);border-left:1px solid var(--copper)}
.ap-body .col-b::after{content:"";position:absolute;bottom:-1px;right:-1px;width:7px;height:7px;
  border-bottom:1px solid var(--copper);border-right:1px solid var(--copper)}
.ap-body .col-b .sec{margin-bottom:0}
/* Die Flaeche kostet Innenabstand, deshalb bekommt die rechte Spalte im
   Raster etwas mehr Breite zurueck. Sonst bricht jeder zweite Renn-Name um. */
/* Zeilentrenner eine Spur heller, sonst verschwinden sie auf der Flaeche. */
.ap-body .col-b .career td{border-bottom-color:rgba(188,209,218,.11)}
.ap-body .col-b .cat-tabs{background:var(--bg);border-radius:5px}
@media(max-width:900px){.ap-body .col-b{padding:18px 16px 6px}}

/* ══════════ Filterzeile der Rennhistorie ══════════
   Kategorien bleiben Knoepfe, es sind hoechstens vier. Die Saisons kommen als
   Auswahlfeld: bei zwanzig Jahren waere eine Knopfreihe hoeher als die Tabelle
   darunter (09.08.2026). */
.filterrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.filterrow .cat-tabs{margin-bottom:0;flex:1 1 auto}
.yearsel{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ice);background:var(--bg);border:1px solid var(--line2);border-radius:5px;
  padding:10px 12px;appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:.16s var(--ease)}
.yearsel:hover{border-color:var(--copper-30);color:var(--off)}
.yearsel:focus{outline:none;border-color:var(--copper);color:var(--off)}
.yearsel optgroup{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper-soft);background:var(--bg)}
.yearsel option{color:var(--off);background:var(--bg);letter-spacing:.08em}

/* Kachelreihe unter den Filtern: zeigt die getroffene Auswahl, nicht die
   Karriere. Kleiner als die Zeile im Hero, damit klar bleibt, welche der
   beiden die Bilanz ist. */
.pstats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--copper-15);
  border:1px solid var(--copper-15);border-radius:5px;overflow:hidden;margin-bottom:16px}
.ps{background:var(--card);padding:11px 12px 10px;text-align:center}
.ps .v{font-family:var(--grotesk);font-weight:900;font-size:19px;color:var(--off);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ps .v .pc{font-family:var(--mono);font-size:9.5px;font-weight:400;letter-spacing:.04em;
  color:var(--copper-soft);margin-left:5px;vertical-align:.3em}
.ps .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ice);margin-top:6px}
/* Quotenbalken unter Siegen und Podien. Die Zahl steht daneben, der Balken
   macht den Anteil vergleichbar, ohne dass man zwei Prozentwerte lesen muss. */
.ps .mtr{display:block;height:2px;margin-top:9px;background:var(--copper-15);
  border-radius:2px;overflow:hidden}
.ps .mtr b{display:block;height:100%;background:var(--copper);border-radius:2px;
  transition:width .3s var(--ease)}
@media(max-width:520px){.pstats{grid-template-columns:repeat(2,1fr)}}

/* Hinweis unter der Hero-Zeile. Erscheint nur, wenn gefiltert ist, damit eine
   Zahl dort oben nie ohne Bezug dasteht. */
.selnote{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--copper-soft);padding:0 0 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.selnote[hidden]{display:none}
.selnote button{font:inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);background:none;
  border:1px solid var(--line2);border-radius:4px;padding:5px 10px;cursor:pointer;
  transition:.16s var(--ease)}
.selnote button:hover{border-color:var(--copper);color:var(--off)}

/* Platzierung an der Renn-Zeile. Der Titel nennt Feld und Gesamtwertung. */
td.r small .pl[title]{cursor:help;border-bottom:1px dotted var(--copper-15)}

/* Bestenliste auf der Renn-Seite. Zeilen aus dem laufenden Jahr in Kupfer:
   an einem Renntag ist die Frage, was davon gerade eben gelaufen wurde. */
.fast{border:1px solid var(--line2);border-radius:6px;overflow:hidden;background:var(--card)}
.frow{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;
  padding:11px 14px;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:none}
.frow .fr{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ice);opacity:.7}
.frow .fn{font-family:var(--grotesk);font-weight:900;font-size:14.5px;color:var(--off);
  letter-spacing:-.01em;text-transform:uppercase}
.frow .fn i{font-family:var(--mono);font-weight:400;font-size:10.5px;font-style:normal;
  letter-spacing:.16em;color:var(--ice);opacity:.75;margin-left:9px}
.frow .ft{font-family:var(--grotesk);font-weight:900;font-size:15px;color:var(--off);
  font-variant-numeric:tabular-nums}
.frow.fresh{background:var(--copper-15)}
.frow.fresh .fn,.frow.fresh .ft,.frow.fresh .fr{color:var(--copper-soft)}
@media(max-width:520px){.frow .fn i{display:block;margin:3px 0 0}}