/* ==================================================================
uphill notes · landing.css
Gemeinsames Stylesheet fuer index, ascent, summit, forecast.
Bis 23.09.2026 inline in index.html. Die Tokens kommen aus
assets/trailbase.css, das vorher geladen wird.
================================================================== */
/* ============================================================
Uphill Notes — Visual Foundations
Source: visual-guidelines (2026-04-14) by Martin Biela
============================================================ */
/* ============================================================
v6-Bruecke. Die Tokens kommen aus assets/trailbase.css. Hier stehen
nur die alten Variablennamen, die im Landing-CSS noch 1400 Zeilen
lang benutzt werden — sie zeigen jetzt auf die neuen Werte. Dadurch
greift v6 sofort ueberall, ohne dass ein einziger Selektor umbenannt
werden muss. Neue Regeln bitte direkt mit den v6-Namen schreiben
(--bg, --card, --off, --ice, --line2, --mono, --grotesk).
============================================================ */
:root {
--deep-blue: var(--bg); /* Seitengrund #050f14 */
--deep-night: var(--card); /* Kartenflaeche #0a1c24 */
--offwhite: var(--off);
--ice-blue: var(--ice);
--ice-blue-25: var(--line2);
--ice-blue-20: var(--line2);
--ice-blue-15: var(--line);
--ice-blue-12: var(--line);
--ice-blue-10: var(--line);
--rule-light: var(--line);
--gutter-x: var(--gx);
}
/* trailbase.css nullt per *{margin:0} alle Abstaende. Die Landing hat
sich an mehreren Stellen auf die Browser-Defaults verlassen, deshalb
kommen genau die zurueck. */
p { margin: 0 0 1em; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5em; }
ul, ol { margin: 0 0 1em; padding-left: 1.5em; }
blockquote { margin: 0 0 1em; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
background: var(--bg);
/* Punktraster wie trailbase — traegt die Datenflaechen, ist keine Deko. */
background-image: radial-gradient(var(--dot) 1px, transparent 1px);
background-size: 24px 24px;
color: var(--nude);
font-family: var(--sans);
font-weight: 400;
font-size: 15px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--copper); text-decoration: none; transition: opacity 160ms cubic-bezier(.2,0,0,1); }
a:hover { opacity: .7; }
::selection { background: var(--copper); color: var(--offwhite); }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
/* The 40×2px copper article opener line */
.copper-rule {
display: block;
width: 40px; height: 2px;
background: var(--copper);
border: 0; margin: 0 0 24px 0;
}
.kicker {
font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 500;
color: var(--copper);
letter-spacing: .2em; text-transform: uppercase;
}
.nav-link {
font-family: var(--mono); font-size: 12px; font-weight: 400;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ice); transition: .18s var(--ease);
}
.btn-primary {
display: inline-block;
font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: var(--offwhite);
background: var(--copper);
border: 0; padding: 12px 20px;
cursor: pointer;
transition: opacity 160ms;
}
.btn-primary:hover { opacity: .85; }
.btn-ghost {
display: inline-block;
font-family: 'DM Sans', sans-serif;
font-size: 12px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: var(--copper);
padding: 16px 0;
}
em, .display-italic { font-style: italic; color: var(--copper); }
/* ============================================================
Header
============================================================ */
/* Nav: v6 — sticky, blur, Archivo-Wortmarke. Der DejaVu-Serif-Schriftzug
war der einzige Fremdfont im ganzen Bestand und faellt hier weg. */
header.site-header {
position: sticky; top: 0; z-index: 50;
padding: 14px var(--gutter-x);
display: flex; align-items: center; justify-content: space-between;
background: rgba(5,15,20,.9);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
gap: 24px;
}
.wordmark {
font-family: var(--grotesk);
font-size: 18px; font-weight: 900;
color: var(--off);
letter-spacing: -.01em;
text-transform: uppercase;
line-height: 1;
}
.wordmark b { color: var(--copper); font-weight: 900; }
.wordmark-tag {
font-family: var(--mono);
font-size: 10.5px; font-weight: 400;
color: var(--ice);
letter-spacing: .24em; text-transform: uppercase;
margin-top: 3px;
}
nav.primary-nav { display: flex; gap: 26px; align-items: center; }
/* Unterzeile unter den Tool-Namen (17.09.2026): gleicher Stil wie
.wordmark-tag, damit Erstbesucher sehen, was hinter den Markennamen
steckt. Reads/About bekommen eine leere Zeile, damit alle Labels auf
einer Linie stehen. */
nav.primary-nav .nav-link:not(.btn-primary) { display: inline-flex; flex-direction: column; }
.nav-sub {
font-family: var(--mono);
font-size: 9.5px; font-weight: 400;
color: var(--ice); opacity: .72;
letter-spacing: .16em; text-transform: uppercase;
margin-top: 4px; white-space: nowrap;
}
.nav-sub:empty::before { content: '\00a0'; }
.nav-link:hover .nav-sub { opacity: .9; }
.mobile-menu a .nav-sub {
display: block; font-size: 10.5px; margin-top: 6px;
color: var(--ice-blue); letter-spacing: .18em; opacity: .8;
}
.burger {
display: none;
width: 36px; height: 36px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0;
position: relative;
z-index: 1100;
}
.burger span {
display: block;
width: 24px; height: 2px;
background: var(--off);
margin: 5px auto;
transition: transform 220ms cubic-bezier(.2,0,0,1), opacity 160ms;
}
body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu {
position: fixed; inset: 0;
background: rgba(5,15,20,.97);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
z-index: 1000;
display: none;
flex-direction: column;
padding: 96px var(--gutter-x) 48px;
gap: 0;
opacity: 0;
transition: opacity 220ms cubic-bezier(.2,0,0,1);
}
body.menu-open .mobile-menu { display: flex; opacity: 1; }
.mobile-menu a {
font-family: var(--mono); font-size: 14px; font-weight: 400;
letter-spacing: .2em; text-transform: uppercase;
color: var(--offwhite);
padding: 22px 0;
border-bottom: 1px solid var(--ice-blue-15);
}
.mobile-menu .copper-rule { margin-bottom: 36px; }
.mobile-menu .mobile-cta {
margin-top: 36px;
align-self: flex-start;
padding: 16px 26px; font-size: 12px;
}
.mobile-menu .mobile-foot {
margin-top: auto;
padding-top: 32px;
display: flex; gap: 24px; flex-wrap: wrap;
}
.mobile-menu .mobile-foot a {
font-size: 11px; padding: 0; border: 0;
color: var(--ice-blue);
letter-spacing: .18em;
}
/* ============================================================
Hero
============================================================ */
/* Hero: v6 — Archivo 900 uppercase als Statement, Serif-Kursiv nur als
Ausbruch in eigener Zeile. Die Hell-Variante (tone-light) ist raus:
v6 kennt genau einen Grund, und Kupfer ist die einzige Energie. */
section.hero {
background: transparent;
padding: clamp(64px, 11vw, 118px) var(--gutter-x) clamp(64px, 12vw, 128px);
position: relative;
}
.hero-in { max-width: 1120px; }
section.hero h1 {
font-family: var(--grotesk);
font-size: clamp(46px, 10vw, 118px);
font-weight: 900;
text-transform: uppercase;
line-height: .88;
letter-spacing: -.035em;
color: var(--off);
margin: 14px 0 0;
max-width: 1120px;
}
section.hero h1 em {
font-family: var(--serif);
font-weight: 400; font-style: italic;
text-transform: none;
color: var(--copper);
letter-spacing: -.01em;
display: block;
font-size: .40em;
line-height: 1.1;
margin-top: 12px;
}
section.hero .lede {
font-family: var(--sans);
font-size: clamp(14px, 1.7vw, 17px);
font-weight: 400; line-height: 1.8;
color: var(--nude);
max-width: 580px;
margin: 24px 0 0;
}
section.hero .lede b { color: var(--off); font-weight: 500; }
section.hero .ctas {
display: flex; gap: 12px; margin-top: 30px;
align-items: center; flex-wrap: wrap;
}
/* Alle drei Hero-Buttons teilen dieselbe Geometrie, sonst steht die Reihe
schief. Der alte Sonderfall fuer .btn-primary ist damit hinfaellig. */
section.hero .ctas .btn-primary,
section.hero .ctas .btn-ghost,
section.hero .ctas .btn-play { font-size: 12.5px; padding: 15px 26px; }
@media (max-width: 560px) {
section.hero .ctas { gap: 10px; }
section.hero .ctas a { width: 100%; }
}
section.hero .hero-stats {
display: flex; gap: clamp(20px, 4.5vw, 54px);
margin-top: clamp(34px, 6vh, 68px);
flex-wrap: wrap;
border-top: 1px solid var(--line);
padding-top: 24px;
}
section.hero .stat .num {
font-family: var(--grotesk); font-weight: 900;
font-size: clamp(24px, 3.6vw, 38px);
color: var(--off); line-height: 1;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
section.hero .stat .lbl {
font-family: var(--mono); font-size: 10.5px;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ice); margin: 7px 0 0;
}
/* Buttons: v6-Paar. Primaer = Kupfer-soft mit dunkler Schrift, Ghost =
Haarlinie. Beide Mono, beide 5px Radius. */
.btn-primary {
display: inline-flex; justify-content: center; align-items: center; gap: 10px;
font-family: var(--mono); font-size: 13.5px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: #160a04; background: var(--copper-soft);
border: 0; border-radius: 5px; padding: 15px 30px;
transition: .18s var(--ease); cursor: pointer;
}
.btn-primary:hover { color: #160a04; filter: brightness(1.08); opacity: 1; }
.btn-primary:active { transform: scale(.97); }
.btn-ghost {
display: inline-flex; justify-content: center; align-items: center; gap: 10px;
font-family: var(--mono); font-size: 13.5px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ice); background: transparent;
border: 1px solid var(--line2); border-radius: 5px; padding: 15px 30px;
transition: .18s var(--ease); cursor: pointer;
}
.btn-ghost:hover { border-color: var(--copper); color: var(--off); }
/* Play-Button fuer Trailbase Fantasy. Nutzt --green aus dem
Design-System (#6ad19a). Anmerkung zur Regel "Kupfer ist die einzige
Energie": Gruen ist dort fuer Datenzeichen reserviert. Hier steht es
bewusst als eigener Kanal — Fantasy ist ein Spiel, kein Datenprodukt,
und soll sich vom Rest der Seite absetzen. Einziger Ort, an dem Gruen
als Flaeche auftritt. */
.btn-play {
display: inline-flex; justify-content: center; align-items: center; gap: 10px;
font-family: var(--mono); font-size: 13.5px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: #04140d; background: var(--green);
border: 0; border-radius: 5px; padding: 15px 30px;
transition: .18s var(--ease); cursor: pointer;
}
.btn-play:hover { color: #04140d; filter: brightness(1.08); opacity: 1; }
.btn-play:active { transform: scale(.97); }
.btn-play .dot {
width: 7px; height: 7px; border-radius: 50%;
background: #04140d; opacity: .55;
animation: playpulse 2.4s var(--ease) infinite;
}
@keyframes playpulse { 0%,100% { opacity: .25 } 50% { opacity: .8 } }
@media (prefers-reduced-motion: reduce) {
.btn-play .dot { animation: none; opacity: .55 }
}
/* Kicker: Mono mit Haarlinie statt Kupferstrich (.copper-rule entfaellt). */
.kicker {
font-family: var(--mono); font-size: 11.5px; font-weight: 400;
letter-spacing: .24em; text-transform: uppercase;
color: var(--copper);
display: flex; align-items: center; gap: 10px;
margin-bottom: 11px;
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
hr.copper-rule { display: none; }
/* Filterleisten kleben wie in trailbase unter der Nav. 56px entspricht
der Hoehe von header.site-header (14px Padding + Inhalt). */
.seg-row, .forecast-filters {
position: sticky; top: 56px; z-index: 20;
background: rgba(5,15,20,.94);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.forecast-filters {
padding: 14px 0;
border-bottom: 1px solid var(--line);
}
@media (max-width: 900px) {
.seg-row, .forecast-filters { position: static; backdrop-filter: none; background: transparent; }
}
/* ============================================================
UTMB Rankings
============================================================ */
section.rankings {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: var(--bg2);
border-top: 1px solid var(--line);
}
.rankings-head {
display: flex; justify-content: space-between;
align-items: flex-end; flex-wrap: wrap; gap: 32px;
}
.rankings-head h2 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
letter-spacing: -.02em;
font-size: clamp(26px, 4.2vw, 44px);
line-height: .92;
color: var(--off);
margin: 14px 0 0;
}
.rankings-head h2 em { font-style: italic; color: var(--copper); }
.week-label {
font-family: var(--mono); font-size: 11px; font-weight: 500;
color: var(--copper);
letter-spacing: .12em; text-transform: uppercase;
margin-top: 18px;
}
.seg-row { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.seg-label {
font-family: var(--mono); font-size: 10px; font-weight: 400;
color: var(--ice-blue);
letter-spacing: .2em; text-transform: uppercase;
margin-bottom: 8px;
}
.seg-group { display: flex; border: 1px solid var(--line2); border-radius: 5px; overflow: hidden; }
.seg-group button {
flex: 1;
font-family: var(--mono); font-size: 11px; font-weight: 400;
letter-spacing: .15em; text-transform: uppercase;
color: var(--ice);
background: transparent;
border: 0; padding: 12px 10px;
cursor: pointer;
transition: background 160ms, color 160ms;
}
.seg-group button.active { color: #160a04; background: var(--copper-soft); }
/* Date compare row — two dropdowns sit above the category/gender pickers */
.compare-dates {
margin-top: 24px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: end;
min-width: 280px;
}
.compare-dates .vs {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--copper);
padding-bottom: 14px;
}
.date-select {
width: 100%;
font-family: var(--mono); font-size: 12.5px; font-weight: 400;
letter-spacing: .1em; text-transform: uppercase;
color: var(--off);
background: var(--card);
border: 1px solid var(--line2);
border-radius: 5px;
padding: 12px 14px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 10px 7px;
padding-right: 32px;
}
.date-select:focus { outline: 1px solid var(--copper); outline-offset: 0; }
.date-select option { background: var(--deep-night); color: var(--offwhite); }
.date-select-primary {
border: 1px solid var(--copper);
box-shadow: 0 0 0 1px rgba(183,127,80,.18);
}
.date-select-primary:focus {
box-shadow: 0 0 0 2px rgba(183,127,80,.35);
}
.subhead {
margin-top: 12px;
font-family: 'DM Sans', sans-serif;
font-size: 13px; font-weight: 300;
line-height: 1.55;
color: var(--ice-blue);
max-width: 560px;
}
.footnote {
font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
margin-top: 14px;
font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 300;
color: rgba(188,209,218,.65);
line-height: 1.55;
letter-spacing: .02em;
}
.footnote .star { color: var(--copper); }
.empty-state {
margin: 40px 0;
padding: 28px var(--gutter-x);
border: 1px solid var(--ice-blue-15);
text-align: center;
font-family: 'DM Sans', sans-serif;
font-size: 13px; color: var(--ice-blue);
line-height: 1.55;
}
.empty-state strong { color: var(--offwhite); font-weight: 500; }
.insights {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--ice-blue-20);
display: grid; gap: 32px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Summit hat nur 3 Insight-Cards (kein Pool-size-Tile) — Override auf
3 Spalten, sonst bliebe die 4. Grid-Spalte leer. */
#summit-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.insight .kicker { font-size: 10px; }
.insight .big {
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: clamp(34px, 3.8vw, 46px);
line-height: 1;
color: var(--offwhite);
margin-top: 12px;
}
.insight .big.accent { color: var(--copper); }
.insight .sub {
font-family: 'DM Sans', sans-serif;
font-size: 13px; font-weight: 300; line-height: 1.5;
color: var(--nude);
margin-top: 12px;
min-height: 38px;
}
.insight .delta {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: .15em; text-transform: uppercase;
margin-top: 10px;
}
.delta.pos { color: var(--copper); }
.delta.neg { color: rgba(188,209,218,.55); }
.delta.zero { color: var(--ice-blue); }
.top10-row {
margin-top: 80px;
display: grid; gap: 56px;
grid-template-columns: 2fr 1fr;
}
/* Siehe .t3-block — Grid-Items schrumpfen ohne min-width:0 nicht unter
ihre min-content-Breite, wodurch der nowrap-Paginator (10 Buttons =
356px) auf schmalen Phones die ganze Seite horizontal aufschiebt statt
in sich zu scrollen. */
.top10-row > div { min-width: 0; }
.compare-row {
margin-top: 80px;
display: grid; gap: 56px;
grid-template-columns: 1fr 1fr;
}
.panel-label {
font-family: var(--mono); font-size: 10.5px; font-weight: 400;
color: var(--ice-blue);
letter-spacing: .2em; text-transform: uppercase;
margin-bottom: 14px;
}
.panel-label .date-tag { color: var(--copper); }
.panel-label .sep { color: var(--ice-blue); opacity: .55; }
/* Top-10 → Top-100 page navigation (1-10, ten pages of ten) */
.page-nav {
margin-top: 24px;
display: flex; gap: 6px; flex-wrap: wrap;
align-items: center;
}
.page-nav .page-label {
font-family: var(--mono); font-size: 10.5px; font-weight: 400;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ice-blue);
margin-right: 8px;
}
.page-nav button {
font-family: var(--mono); font-size: 12px; font-weight: 400;
font-variant-numeric: tabular-nums;
color: var(--ice);
background: var(--card);
border: 1px solid var(--line2);
border-radius: 5px;
width: 36px; height: 36px;
cursor: pointer;
transition: background 160ms, color 160ms, border-color 160ms;
}
.page-nav button:hover { color: var(--offwhite); border-color: var(--copper); }
.page-nav button.active {
color: #160a04;
background: var(--copper-soft);
border-color: var(--copper-soft);
}
.page-nav button:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 2px;
}
/* Gekuerzter Paginator (10.08.2026): Luecken-Zeichen und Pfeile.
Gleiche Box-Metrik wie die Zahlen-Buttons, damit die Reihe ruhig
bleibt. Das "…" ist bewusst kein Button. */
.page-nav .page-gap {
font-family: var(--mono); font-size: 12px; font-weight: 400;
color: var(--ice-blue-25);
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
user-select: none;
}
.page-nav button.page-arrow { font-size: 15px; line-height: 1; }
.page-nav button.page-arrow[disabled] { opacity: .35; cursor: default; }
.page-nav button.page-arrow[disabled]:hover {
color: var(--ice-blue);
border-color: var(--ice-blue-25);
}
.top10 {
width: 100%; border-collapse: collapse;
font-variant-numeric: tabular-nums;
table-layout: fixed;
}
/* Fixed column widths so the table doesn't shift between pages.
# | Athlete | Country | Score | Δ Score | Δ Rank
Order matters: must match the | / | order in the markup. */
.top10 col.col-rank { width: 56px; }
.top10 col.col-country { width: 90px; }
.top10 col.col-score { width: 110px; }
.top10 col.col-dscore { width: 96px; }
.top10 col.col-drank { width: 88px; }
.top10 th {
text-align: left; padding: 10px 12px 10px 0;
font-family: var(--mono); font-size: 9.5px; font-weight: 400;
letter-spacing: .18em; text-transform: uppercase;
color: var(--ice);
border-bottom: 1px solid var(--line2);
white-space: nowrap;
}
.top10 td {
padding: 13px 12px 13px 0;
font-size: 13.5px; font-weight: 400;
font-variant-numeric: tabular-nums;
color: var(--nude);
border-bottom: 1px solid var(--line);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.top10 td.right, .top10 th.right { text-align: right; padding-right: 0; }
.top10 td .rank {
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 18px; color: var(--off);
}
.top10 .name { color: var(--offwhite); }
.top10 .country { color: var(--ice-blue); letter-spacing: .08em; font-size: 12px; }
.top10 .country-mobile { display: none; } /* shown only on mobile */
.top10 .dscore-mobile { display: none; } /* shown only on mobile */
.delta-up { color: var(--copper); font-weight: 500; font-size: 13px; }
.delta-dn { color: rgba(188,209,218,.55); font-weight: 500; font-size: 13px; }
.delta-em { color: rgba(188,209,218,.55); }
.mover-group + .mover-group { margin-top: 28px; }
.mover-group .group-label {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
color: var(--copper);
letter-spacing: .2em; text-transform: uppercase;
margin-bottom: 12px;
}
.mover-group ul { list-style: none; margin: 0; padding: 0; }
.mover-group li {
padding: 12px 0;
border-bottom: 1px solid var(--ice-blue-10);
display: flex; justify-content: space-between; align-items: center;
font-size: 14px; color: var(--nude); font-weight: 300;
gap: 14px;
}
.mover-group .name { color: var(--offwhite); }
.mover-group .meta {
font-size: 11px; color: var(--ice-blue);
letter-spacing: .08em; margin-top: 2px;
}
.mover-num {
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 22px;
}
.mover-num.pos { color: var(--copper); }
.mover-num.neg { color: rgba(188,209,218,.55); }
.bar-list { display: flex; flex-direction: column; gap: 14px; }
.bar-row .bar-head {
display: flex; justify-content: space-between;
font-size: 13px; color: var(--offwhite); font-weight: 300;
margin-bottom: 6px;
}
.bar-row .bar-head .num { color: var(--ice-blue); font-variant-numeric: tabular-nums; }
.bar-row .bar-head .num .sep { color: var(--copper); }
.bar-track { height: 4px; background: var(--ice-blue-15); }
.bar-fill { height: 100%; background: rgba(244,239,235,.55); transition: width 320ms cubic-bezier(.2,0,0,1); }
.bar-fill.lead { background: var(--copper); }
.country-table { width: 100%; border-collapse: collapse; }
.country-table tr { border-bottom: 1px solid var(--ice-blue-10); }
.country-table td { padding: 11px 0; font-size: 13px; }
.country-table td.code { width: 60px; color: var(--offwhite); letter-spacing: .08em; }
.country-table td.bar-cell { padding-right: 14px; }
.country-bar-track { height: 6px; background: var(--ice-blue-12); }
.country-bar-fill { height: 100%; background: rgba(234,215,195,.7); transition: width 320ms cubic-bezier(.2,0,0,1); }
.country-bar-fill.lead { background: var(--copper); }
.country-table td.count {
width: 40px; text-align: right;
color: var(--nude);
font-variant-numeric: tabular-nums; font-weight: 300;
}
.source-line {
margin-top: 56px;
padding-top: 18px;
border-top: 1px solid var(--ice-blue-20);
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 12px;
font-size: 10px;
}
.source-line .src {
font-family: var(--mono); letter-spacing: .1em;
color: rgba(188,209,218,.55);
letter-spacing: .08em; text-transform: uppercase;
}
.source-line .open {
color: var(--copper);
letter-spacing: .18em; text-transform: uppercase;
font-weight: 500;
}
/* ============================================================
The Summit · Single-race Performance Scores 2026
Schwester-Sektion zu The Ascent. Identisches Pattern:
.rankings-head als Section-Header, .seg-group als Filter,
.insights als KPI-Strip, .top10 als Tabelle, .page-nav als
Paginator. Nur die Disclaimer- und Bridge-Cards sind neu.
============================================================ */
section.summit {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: transparent;
border-top: 1px solid var(--line);
}
/* Doppel-Filter (Gender + Countries) übereinander, exakt wie Ascent */
.summit .seg-row { gap: 18px; }
.summit .panel-label .range {
color: rgba(188,209,218,.6); font-weight: 400; text-transform: none; letter-spacing: .04em;
}
/* Tabellen-Spaltenbreiten — anders als .top10 (Δ Score / Δ Rank),
hier brauchen wir Nat / Cat / Race / Index */
.top10.summit-top { table-layout: fixed; }
.top10.summit-top col.col-srank { width: 56px; }
.top10.summit-top col.col-snat { width: 60px; }
.top10.summit-top col.col-scat { width: 72px; }
.top10.summit-top col.col-sscore { width: 90px; }
/* Athlete + Race teilen den verbleibenden Platz */
.top10.summit-top td.cat-cell {
font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
color: var(--ice-blue); font-weight: 500;
}
.top10.summit-top td.race-cell { color: var(--ice-blue); font-size: 13px; }
.top10.summit-top td.score-cell {
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 18px; color: var(--off); text-align: right;
}
.top10.summit-top tr.lead-row td.score-cell { color: var(--copper); }
/* Mobile sub-line in the athlete cell — hidden on desktop, shown ≤768px
(see media query) when the standalone NAT/Cat/Race columns are folded. */
.top10.summit-top .summit-meta { display: none; }
.summit-top10-wrap { margin-top: 80px; }
/* Disclaimer-Card — neues Atom, da Ascent so etwas nicht hat */
.disclaimer-card {
margin-top: 56px;
padding: 24px 26px;
border: 1px solid var(--line2);
border-radius: 6px;
background: var(--card);
display: grid;
grid-template-columns: 160px 1fr;
gap: 24px;
align-items: start;
}
.disclaimer-card .sd-k {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--copper);
line-height: 1.5;
}
.disclaimer-card .sd-body {
font-size: 13px; color: var(--ice-blue); line-height: 1.7;
}
.disclaimer-card .sd-body strong { color: var(--offwhite); font-weight: 500; }
/* Bridge-Card — verbindet Summit und Ascent */
.summit-bridge {
margin-top: 64px;
padding: 32px 28px;
border: 1px solid rgba(183,127,80,.25);
background: rgba(183,127,80,.04);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
flex-wrap: wrap;
}
.summit-bridge .sb-k {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--copper);
}
.summit-bridge .sb-line {
font-family: 'DM Serif Display', serif;
font-size: clamp(20px, 2.4vw, 26px);
color: var(--offwhite);
margin-top: 8px;
line-height: 1.3;
}
.summit-bridge .sb-line em { font-style: italic; color: var(--copper); }
.summit-bridge .sb-cta {
font-family: var(--mono);
font-size: 11px; font-weight: 500;
color: var(--copper);
letter-spacing: .18em; text-transform: uppercase;
border-bottom: 1px solid var(--copper);
padding-bottom: 3px;
}
.summit-bridge .sb-cta:hover { opacity: .8; }
/* ============================================================
The Forecast · xCI
Layout-Logik analog zu Rankings: zweispaltige Header-Region,
darunter Daten-Panels.
============================================================ */
section.forecast {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: transparent;
border-top: 1px solid var(--line);
}
.forecast-head { max-width: 760px; }
.forecast-head h2 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
letter-spacing: -.02em;
font-size: clamp(26px, 4.2vw, 44px);
line-height: .92;
color: var(--off);
margin: 14px 0 0;
}
.forecast-head h2 em { font-style: italic; color: var(--copper); }
.forecast-head .subhead {
margin-top: 16px;
font-family: 'DM Sans', sans-serif;
font-size: 14px; font-weight: 300; line-height: 1.55;
color: var(--ice-blue);
}
.forecast-disclaimer {
margin-top: 24px;
padding: 16px 20px;
border-left: 3px solid var(--copper);
background: rgba(183,127,80,.08);
font-family: 'DM Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--offwhite);
font-style: normal;
letter-spacing: 0;
line-height: 1.55;
}
/* Forecast-Filter — Category / Series / Country. Nutzt exakt die Bausteine
von The Ascent (.seg-label + .seg-group, .date-select), damit die Sektion
sich nicht neu erfindet. Wirkt auf beides: die zwei Top-10-Deepest-
Tabellen und das Race-Pulldown. */
.forecast-filters {
margin-top: 40px;
display: grid; gap: 24px;
grid-template-columns: 1.6fr 1.6fr 1fr;
align-items: end;
}
.forecast-filters .seg-group button { padding: 12px 6px; letter-spacing: .1em; }
.forecast-filter-bar {
margin-top: 16px;
display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
}
.forecast-filter-count {
font-family: 'DM Mono', monospace;
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--ice-blue); opacity: .75;
}
.forecast-filter-count b { color: var(--copper); font-weight: 500; }
.forecast-filter-reset {
font-family: 'DM Sans', sans-serif;
font-size: 11px; font-weight: 500;
letter-spacing: .15em; text-transform: uppercase;
color: var(--ice-blue);
background: transparent; border: 0; padding: 0;
cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.forecast-filter-reset:hover { color: var(--copper); }
.forecast-filter-reset[hidden] { display: none; }
.t3-empty {
font-family: 'DM Sans', sans-serif;
font-size: 13px; font-weight: 300;
color: var(--ice-blue); opacity: .6;
padding: 20px 0;
}
.forecast-grid {
margin-top: 56px;
display: grid; gap: 32px;
grid-template-columns: 1fr 1fr;
}
/* Single-column variant — used since the Deepest-Field highlight was
removed; only the Race-Detail card remains, takes full width. */
.forecast-grid.forecast-grid-single {
grid-template-columns: 1fr;
}
/* Race detail card */
.detail-card {
position: relative;
background: var(--card);
border: 1px solid var(--line2);
border-radius: 6px;
padding: 32px;
display: flex; flex-direction: column;
}
.detail-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);
}
.detail-card::after {
content: ""; position: absolute; bottom: -1px; right: -1px; width: 7px; height: 7px;
border-bottom: 1px solid var(--copper); border-right: 1px solid var(--copper);
}
.detail-card .detail-tag {
font-family: var(--mono); font-size: 10.5px; font-weight: 400;
letter-spacing: .25em; text-transform: uppercase;
color: var(--ice-blue);
margin-bottom: 14px;
}
.detail-card #race-select { width: 100%; margin-bottom: 24px; }
.detail-card .detail-body { flex: 1; }
.detail-card .db-name {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
letter-spacing: -.02em;
font-size: clamp(17px, 1.9vw, 22px);
line-height: 1.06;
color: var(--off);
margin-bottom: 4px;
}
.detail-card .db-meta {
font-family: var(--mono);
font-size: 12px;
color: var(--ice-blue);
letter-spacing: .08em;
margin-bottom: 24px;
}
.detail-card .db-row {
display: grid;
grid-template-columns: 100px 1fr 1fr;
align-items: baseline;
padding: 14px 0;
border-top: 1px solid var(--ice-blue-15);
font-variant-numeric: tabular-nums;
}
.detail-card .db-row .db-label {
font-family: var(--mono);
font-size: 11px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ice-blue);
}
.detail-card .db-row .db-num {
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 25px;
color: var(--off);
}
/* Stack the xCI number and the small Top-10-Mean line vertically inside
the middle grid cell. Baseline alignment of the row still works since
the cell's baseline = first child's baseline. */
.detail-card .db-row .db-num-cell {
display: flex; flex-direction: column;
align-items: flex-start; gap: 4px;
}
.detail-card .db-row .db-mean {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: var(--ice-blue);
}
.detail-card .db-row .db-mean strong {
color: var(--copper); font-weight: 500;
letter-spacing: .04em;
}
.detail-card .db-row .db-gap {
font-family: var(--mono);
font-size: 12px;
color: rgba(188,209,218,.7);
text-align: right;
}
/* Roster — Top 10 W + M used to compute xCI. Shown when rosters JSON
contains data for the selected race. */
.detail-card .db-rosters {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--ice-blue-20);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.detail-card .db-rosters .db-rk {
font-family: var(--mono);
font-size: 10px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--copper);
margin-bottom: 14px;
}
.detail-card .db-rosters .db-rk .db-rk-snap {
color: rgba(188,209,218,.6); font-weight: 400; letter-spacing: .04em; text-transform: none;
margin-left: 6px;
}
.detail-card .db-rt {
width: 100%; border-collapse: collapse;
font-variant-numeric: tabular-nums;
}
.detail-card .db-rt td {
padding: 9px 0;
font-family: var(--mono);
font-size: 13px;
color: var(--nude);
border-bottom: 1px solid var(--ice-blue-10);
}
.detail-card .db-rt td.db-r {
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 14px;
color: var(--off);
width: 28px;
}
.detail-card .db-rt td.db-n { color: var(--offwhite); }
.detail-card .db-rt td.db-c {
color: var(--ice-blue);
font-size: 11px;
letter-spacing: .08em;
width: 42px;
text-align: right;
padding-right: 10px;
}
.detail-card .db-rt td.db-i {
font-family: var(--mono); font-weight: 500;
font-variant-numeric: tabular-nums;
font-size: 13px;
color: var(--copper);
text-align: right;
width: 50px;
}
.detail-card .db-empty {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--ice-blue-20);
font-family: 'DM Sans', sans-serif;
font-size: 12px;
color: rgba(188,209,218,.55);
font-style: italic;
}
/* Top 3 — two side-by-side blocks */
.forecast-top3 {
margin-top: 64px;
display: grid; gap: 56px;
grid-template-columns: 1fr 1fr;
}
/* Grid-Items haben per Default min-width:auto und schrumpfen deshalb nicht
unter ihre min-content-Breite. Der Paginator steht auf Mobile bewusst
auf flex-wrap:nowrap + overflow-x:auto — ohne min-width:0 greift dieses
overflow nie, stattdessen wächst .t3-block auf die Breite aller Buttons
und schiebt die ganze Seite horizontal auf (bei 13 Seiten = 464px).
Gleiches Muster wie .seg-row im 1024er-Breakpoint. */
.t3-block { min-width: 0; }
.t3-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.t3-table tr {
border-bottom: 1px solid var(--ice-blue-15);
cursor: pointer;
transition: background 160ms;
}
.t3-table tr:hover { background: rgba(183,127,80,.06); }
.t3-table tr.is-upcoming td .t3-name { color: var(--copper); }
.t3-table td {
padding: 15px 0;
font-family: var(--sans);
font-size: 13.5px;
font-variant-numeric: tabular-nums;
color: var(--nude);
}
.t3-table td.t3-rank {
width: 40px;
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 20px;
color: var(--off);
}
.t3-table td .t3-name {
display: block;
color: var(--offwhite);
font-weight: 400;
}
.t3-table td .t3-meta {
display: block;
font-size: 11px;
color: var(--ice-blue);
letter-spacing: .04em;
margin-top: 4px;
}
/* NEW-Badge — kupferner Umriss, sitzt neben Race-Name in Dropdown-Option,
Top-10-Deepest-Tabelle und Detail-Card (The Forecast) sowie neben dem
Athletennamen in der Summit-Tabelle. Signalisiert Einträge, die seit
dem Vor-Snapshot bzw. diese Woche neu dazugekommen sind.
white-space:nowrap hält das Wort "New" zusammen; die Parent-Container
(.db-name / .t3-name) kriegen overflow-wrap, damit der lange Race-Name
davor bricht statt den Badge nach rechts aus dem Container zu pushen. */
.xci-new {
display: inline-block;
margin-left: 8px;
padding: 1px 7px 2px;
font-family: 'DM Sans', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: .1em;
color: var(--copper);
border: 1px solid var(--copper);
border-radius: 999px;
text-transform: uppercase;
vertical-align: middle;
line-height: 1.4;
white-space: nowrap;
}
/* Kategorie-Badge (10.08.2026) — UTMB-Klassen 20K / 50K / 100K / 100M.
Gleiche Box wie .xci-new, damit beide nebeneinander ruhig sitzen, aber
in Eisblau statt Kupfer: Kupfer bleibt dem NEW-Signal vorbehalten.
Wird nur gesetzt, wenn die Kategorie aus dem distance-Feld eindeutig
hervorgeht — geraten wird nichts (die Klasse folgt dem km-effort,
nicht der Distanz, siehe races/_lookups/startlist-sources.md §11). */
.xci-cat {
display: inline-block;
margin-left: 8px;
padding: 1px 7px 2px;
font-family: 'DM Sans', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: .1em;
font-variant-numeric: tabular-nums;
color: var(--ice-blue);
border: 1px solid var(--ice-blue-25);
border-radius: 999px;
text-transform: uppercase;
vertical-align: middle;
line-height: 1.4;
white-space: nowrap;
}
/* Serien-Badge (10.08.2026) — "by UTMB", Golden Trail World Series,
Skyrunner World Series. Dieselbe Box wie Kategorie und NEW, aber ohne
Rahmen und auf gefuelltem Grund: die Serie ist Kontext, nicht Signal,
und soll die Kategorie nicht ueberstimmen. Reihenfolge im Namen:
Kategorie, dann Serie, dann NEW. */
.xci-series {
display: inline-block;
margin-left: 6px;
padding: 1px 7px 2px;
font-family: 'DM Sans', sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: .1em;
color: var(--ice-blue);
opacity: .72;
background: var(--ice-blue-10);
border: 1px solid transparent;
border-radius: 999px;
text-transform: uppercase;
vertical-align: middle;
line-height: 1.4;
white-space: nowrap;
}
/* Lange Race-Namen mit Badge — im Zweifel VOR dem Badge wrappen,
nicht rechts aus dem Container laufen. */
.detail-card .db-name,
.t3-table td .t3-name {
overflow-wrap: anywhere;
word-break: break-word;
}
.t3-table td.t3-val {
text-align: right;
font-family: var(--grotesk); font-weight: 900;
letter-spacing: -.03em; font-variant-numeric: tabular-nums;
font-size: 25px;
color: var(--copper);
width: 80px;
}
.t3-max {
margin-top: 18px;
font-family: var(--mono); font-size: 10.5px;
letter-spacing: .12em; text-transform: uppercase;
color: rgba(188,209,218,.65);
letter-spacing: .08em;
}
.t3-max span {
color: var(--copper);
font-weight: 500;
}
.t3-range {
color: rgba(188,209,218,.6);
font-weight: 400;
letter-spacing: .04em;
text-transform: none;
margin-left: 6px;
}
.t3-pagenav { margin-top: 18px; }
section.forecast .source-line {
margin-top: 56px;
}
/* ============================================================
Featured Strip — UTMB × ITRA
============================================================ */
section.featured {
background: var(--deep-night);
padding: clamp(56px, 10vw, 80px) var(--gutter-x);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center;
border-top: 1px solid var(--ice-blue-20);
}
section.featured h2 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
font-size: clamp(26px, 4.2vw, 44px);
line-height: .92; letter-spacing: -.02em;
color: var(--off);
margin: 12px 0 0;
}
.rankings-head h2 em, .forecast-head h2 em, .articles-head h2 em,
section.featured h2 em {
font-family: var(--serif); font-weight: 400; font-style: italic;
text-transform: none; color: var(--copper); letter-spacing: -.01em;
}
section.featured p {
font-family: 'DM Sans', sans-serif;
font-size: 17px; font-weight: 300; line-height: 1.55;
color: var(--ice-blue);
margin: 20px 0 0;
max-width: 480px;
}
section.featured .read-link {
display: inline-block; margin-top: 28px;
font-size: 12px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: var(--copper);
}
/* The whole featured section is one big link to the article. Reset all
link defaults so the inner section can keep its own typography. */
a.featured-link {
display: block;
color: inherit;
text-decoration: none;
border: 0;
transition: opacity 200ms cubic-bezier(.2,0,0,1);
}
a.featured-link:hover { opacity: .92; border: 0; }
a.featured-link:hover .read-link { opacity: .7; }
a.featured-link:hover .featured-visual img { transform: scale(1.02); }
.featured-visual {
overflow: hidden;
background: var(--bg2);
border: 1px solid var(--line2);
border-radius: 6px;
}
.featured-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 320ms cubic-bezier(.2,0,0,1);
}
/* v6: die Karte war Offwhite auf Hell. In v6 gibt es genau einen Grund,
also wird sie eine .card6 mit Kupfer-Eckwinkeln. */
.featured-card {
position: relative;
background: var(--card);
border: 1px solid var(--line2);
border-radius: 6px;
padding: 28px 32px;
color: var(--nude);
}
.featured-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);
}
.featured-card::after {
content: ""; position: absolute; bottom: -1px; right: -1px;
width: 7px; height: 7px;
border-bottom: 1px solid var(--copper); border-right: 1px solid var(--copper);
}
.featured-card .ft-title {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
font-size: 19px; line-height: 1; letter-spacing: -.02em;
color: var(--off);
}
.featured-card table {
width: 100%; border-collapse: collapse;
margin-top: 14px;
font-family: var(--mono);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.featured-card thead tr { background: var(--card2); color: var(--ice); }
.featured-card th {
padding: 10px 14px;
font-size: 10px; font-weight: 500;
letter-spacing: .14em; text-align: left;
}
.featured-card th.right { text-align: right; }
.featured-card td { padding: 9px 14px; color: var(--nude); }
.featured-card tr.alt { background: rgba(188,209,218,.04); }
.featured-card td.right { text-align: right; }
.featured-card td.hi { color: var(--copper); font-weight: 500; }
.featured-card td.muted { color: var(--ice); opacity: .7; }
.featured-card .ft-foot {
margin-top: 8px;
font-size: 10px; color: var(--ice); opacity: .65;
letter-spacing: .04em;
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
}
.featured-card .ft-foot .brand { letter-spacing: .3em; }
.featured-card hr.copper-rule { margin: 0 0 14px; }
.featured-card hr.copper-thin {
border: 0; height: 1px; background: var(--copper);
margin: 12px 0 8px;
}
/* ============================================================
Article Grid
============================================================ */
section.articles {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: var(--bg2);
border-top: 1px solid var(--line);
}
.articles-head {
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
}
.articles-head h2 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
letter-spacing: -.02em;
font-size: clamp(24px, 3.6vw, 38px);
line-height: .92;
color: var(--off);
margin: 10px 0 0;
}
.articles-head .all-link {
font-size: 12px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase;
color: var(--copper);
}
.article-grid {
margin-top: 48px;
display: grid; gap: 48px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.article-card { display: block; transition: opacity 160ms; }
.article-card:hover { opacity: .88; }
.article-card .thumb {
aspect-ratio: 4/3;
background: var(--card2);
background-size: cover;
background-position: center;
}
.article-card .pubdate {
font-size: 10px; font-weight: 500;
color: var(--copper);
letter-spacing: .2em; text-transform: uppercase;
margin-top: 16px;
}
.article-card h3 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
letter-spacing: -.02em;
font-size: clamp(16px, 1.7vw, 20px);
line-height: 1.05;
color: var(--off);
margin: 8px 0 10px;
}
.article-card p {
font-family: 'DM Sans', sans-serif;
font-size: 14px; font-weight: 300; line-height: 1.55;
color: var(--nude);
margin: 0;
}
.skeleton { opacity: .3; }
.skeleton .thumb { aspect-ratio: 4/3; background: var(--card2); }
.skeleton .ln { height: 10px; background: var(--card2); margin-top: 12px; }
.skeleton .ln.title { height: 20px; width: 90%; }
.skeleton .ln.body { height: 12px; width: 100%; }
.skeleton .ln.body2 { height: 12px; width: 70%; }
.placeholder-note {
padding: 4px var(--gutter-x) 24px;
background: var(--deep-blue);
font-size: 10px;
color: rgba(188,209,218,.5);
letter-spacing: .1em; text-transform: uppercase;
}
/* ============================================================
About
============================================================ */
section.about {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: transparent;
border-top: 1px solid var(--line);
display: grid;
grid-template-columns: minmax(260px, 1fr) 1.4fr;
gap: 80px; align-items: end;
}
section.about .about-media { display: flex; flex-direction: column; }
section.about .about-media .kicker { margin-bottom: 24px; }
section.about .about-media .photo {
width: 100%;
aspect-ratio: 4 / 5;
background-color: var(--card2);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
section.about .about-media figcaption {
font-family: 'DM Sans', sans-serif;
font-size: 13px; font-weight: 300; line-height: 1.55;
color: var(--nude);
margin-top: 18px;
}
section.about .about-media figcaption .tag {
display: block;
font-size: 10px; font-weight: 500;
color: var(--copper);
letter-spacing: .2em; text-transform: uppercase;
margin-bottom: 8px;
}
section.about .quote {
font-family: 'DM Serif Display', serif;
font-size: clamp(22px, 2.6vw, 32px);
line-height: 1.3;
color: var(--offwhite);
font-style: italic;
}
section.about p {
font-size: 17px; font-weight: 300; line-height: 1.65;
color: var(--nude);
margin-top: 28px; max-width: 620px;
}
section.about a {
color: var(--copper);
border-bottom: 1px solid rgba(183,127,80,.35);
padding-bottom: 1px;
transition: opacity 160ms, border-color 160ms;
}
section.about a:hover { border-bottom-color: var(--copper); }
/* ============================================================
Subscribe
============================================================ */
section.subscribe {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: var(--bg2);
border-top: 1px solid var(--line);
display: grid; gap: 80px;
grid-template-columns: 1fr 1fr;
}
section.subscribe h2 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
font-size: clamp(26px, 3.8vw, 40px);
line-height: .92; letter-spacing: -.02em;
color: var(--off);
margin: 12px 0 0;
}
section.subscribe h2 em {
font-family: var(--serif); font-weight: 400; font-style: italic;
text-transform: none; color: var(--copper); letter-spacing: -.01em;
}
section.subscribe .right { align-self: center; }
section.subscribe .right p {
font-size: 17px; font-weight: 300; line-height: 1.55;
color: var(--ice-blue);
margin: 0;
}
section.subscribe .sub-cta {
display: inline-block; margin-top: 32px;
padding: 16px 26px; font-size: 12px;
}
section.subscribe .fineprint {
margin-top: 20px;
font-size: 12px; font-weight: 300;
color: var(--ice-blue);
letter-spacing: .04em;
}
/* ============================================================
Footer
============================================================ */
footer.site-footer {
padding: 40px var(--gutter-x);
background: var(--bg2);
border-top: 1px solid var(--line);
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 18px;
}
footer .wordmark { font-size: 16px; }
footer .foot-tag {
font-family: var(--mono); font-size: 11px; font-weight: 400;
color: var(--ice);
letter-spacing: .14em; text-transform: uppercase;
margin-top: 6px;
}
footer .foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
/* ============================================================
Responsive
============================================================ */
@media (max-width: 960px) {
.top10-row { grid-template-columns: 1fr; gap: 48px; }
.compare-row { grid-template-columns: 1fr; gap: 48px; }
section.featured { grid-template-columns: 1fr; gap: 40px; }
section.about { grid-template-columns: 1fr; gap: 40px; }
.forecast-grid { grid-template-columns: 1fr; gap: 24px; }
.forecast-filters { grid-template-columns: 1fr; gap: 20px; }
.forecast-top3 { grid-template-columns: 1fr; gap: 40px; }
section.subscribe { grid-template-columns: 1fr; gap: 32px; }
.article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.rankings-head { gap: 24px; }
.seg-row { width: 100%; min-width: 0; }
.disclaimer-card { grid-template-columns: 1fr; gap: 12px; }
.summit-bridge { flex-direction: column; align-items: flex-start; }
.detail-card .db-rosters { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
nav.primary-nav { display: none; }
.burger { display: block; }
.article-grid { grid-template-columns: 1fr; gap: 40px; }
.insights {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 20px; /* row-gap | col-gap */
padding-top: 28px;
margin-top: 48px;
}
.insight .sub { min-height: 0; }
.insight .big { font-size: clamp(32px, 9vw, 44px); }
.top10-row { margin-top: 56px; }
.compare-row { margin-top: 56px; }
.featured-card { padding: 22px 20px; }
.featured-card th { padding: 8px 10px; }
.featured-card td { padding: 8px 10px; }
section.about { gap: 32px; }
section.about .about-media .photo { max-width: 380px; }
section.about p { margin-top: 20px; }
footer.site-footer { gap: 20px; }
/* Mobile rankings table — switch to auto layout, drop colgroup widths,
hide country & Δ-Score columns, stack values inside the remaining
cells. */
.top10 { table-layout: auto; }
.top10 colgroup, .top10 col { display: none; } /* fixed widths off */
.top10 th, .top10 td {
padding: 12px 8px 12px 0;
white-space: normal;
}
.top10 th {
font-size: 9px;
line-height: 1.25;
vertical-align: bottom;
}
/* Hide country column (3rd) AND Δ Score column (5th); both move into
neighbouring cells as a stacked second line. */
.top10 th:nth-child(3),
.top10 td:nth-child(3),
.top10 th:nth-child(5),
.top10 td:nth-child(5) { display: none; }
/* Athlete cell: name on top, country in copper underneath. */
.top10 td .name {
display: block;
color: var(--offwhite);
}
.top10 td .country-mobile {
display: block;
margin-top: 4px;
color: var(--copper);
font-size: 10px;
letter-spacing: .15em;
text-transform: uppercase;
font-weight: 500;
}
/* Score cell: index value on top, Δ score in copper underneath. */
.top10 td .score-val {
display: block;
color: var(--offwhite);
font-size: 14px;
}
.top10 td .dscore-mobile {
display: block;
margin-top: 4px;
font-size: 12px;
}
.top10 td .rank { font-size: 16px; }
/* Pagination — keep all 10 buttons in a single row, scrollable if narrow */
.page-nav {
flex-wrap: nowrap;
overflow-x: auto;
gap: 4px;
margin-top: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.page-nav::-webkit-scrollbar { display: none; }
.page-nav .page-label { display: none; } /* "PAGE" label not needed on mobile */
.page-nav button {
width: 32px; height: 32px;
font-size: 11px;
flex-shrink: 0;
}
.page-nav .page-gap {
width: 24px; height: 32px;
font-size: 11px;
flex-shrink: 0;
}
/* Summit-Tabelle Mobile-Layout:
Desktop hat 6 Spalten (# · Athlete · NAT · Cat · Race · Index).
Auf Mobile werden NAT (3) + Race (5) bereits durch die generische
.top10-Regel ausgeblendet — wir blenden zusätzlich Cat (4) aus und
zeigen NAT · Cat · Race als kompakte Sub-Line unter dem Athleten-
Namen, damit nichts an Information verloren geht. */
.top10.summit-top th:nth-child(4),
.top10.summit-top td.cat-cell { display: none; }
.top10.summit-top .summit-meta {
display: block;
margin-top: 4px;
color: var(--ice-blue);
font-size: 11px;
letter-spacing: .02em;
line-height: 1.4;
font-weight: 400;
white-space: normal; /* lange Race-Namen dürfen umbrechen */
}
}
@media (max-width: 540px) {
:root { --gutter-x: 20px; }
.featured-card { padding: 20px 16px; }
.featured-card th, .featured-card td { padding: 8px 8px; font-size: 12px; }
.top10 td, .top10 th { font-size: 13px; padding: 12px 6px 12px 0; }
.top10 th { font-size: 9px; }
.top10 td .score-val { font-size: 13px; }
.top10 td .dscore-mobile { font-size: 11px; }
.top10 td .rank { font-size: 15px; }
.top10 td .name { font-size: 13px; }
.top10 td .country { font-size: 9px; }
section.featured p { font-size: 15px; }
section.subscribe .right p { font-size: 15px; }
section.about p { font-size: 15px; }
}
/* Print — keeps the page exportable to PDF */
@media print {
body { background: white; color: black; }
header.site-header, .burger, .mobile-menu, .placeholder-note { display: none; }
section { break-inside: avoid; }
}
/* ============================================================
trailbase fantasy · Teaser (13.09.2026)
Sitzt zwischen Reads und About und fuehrt auf trailbasefantasy.com.
Frueher stand die Sektion ueber dem Hero und war ganzseitig hoch;
jetzt liegen Text und Bergkette nebeneinander, das halbiert die Hoehe.
Innen weiter nur etablierte Atome: Mono-Kicker, Archivo-900-Wortmarke,
Serif-Kursiv in Kupfer, Button-Geometrie der v6-Paare.
============================================================ */
section.fteaser {
/* Logo einmalig als Data-URI, identisch mit dem auf trailbase-fantasy.html. */
--tp-logo: url("data:image/png;base64,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");
position: relative;
padding: clamp(24px, 3.2vw, 40px) var(--gutter-x) clamp(8px, 1.4vw, 16px);
overflow: hidden;
}
.fteaser-in {
max-width: 1140px; margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(18px, 4vw, 56px);
align-items: center;
}
.fteaser-text { min-width: 0; }
/* Eigener Kicker statt .kicker: der hat eine Haarlinie als ::after. */
.fteaser-kicker {
font-family: var(--mono); font-size: 11px; font-weight: 400;
letter-spacing: .28em; text-transform: uppercase;
color: var(--ice); opacity: .85;
margin: 0 0 clamp(12px, 1.8vw, 18px);
}
.fteaser-mark {
font-family: var(--grotesk); font-weight: 900;
font-size: clamp(34px, 5.4vw, 60px);
line-height: .86; letter-spacing: -.035em;
text-transform: uppercase;
color: var(--off);
margin: 0;
}
.fteaser-mark em {
display: block;
font-family: var(--serif); font-weight: 400; font-style: italic;
text-transform: none; letter-spacing: -.01em;
font-size: .58em; line-height: 1.05;
color: var(--copper);
margin-top: 2px;
}
.fteaser-sub {
font-family: var(--serif);
font-size: clamp(16px, 1.8vw, 21px);
line-height: 1.4; color: var(--off);
margin: clamp(10px, 1.4vw, 16px) 0 0;
max-width: 34ch; text-wrap: balance;
}
/* CTA: Geometrie der v6-Buttons, als Kupfer-Outline wie im Story-Asset. */
.fteaser-cta {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--mono); font-size: 12.5px; font-weight: 500;
letter-spacing: .2em; text-transform: uppercase;
color: var(--copper-soft); background: transparent;
border: 1px solid var(--copper); border-radius: 999px;
padding: 13px 34px;
margin-top: clamp(16px, 2.2vw, 26px);
transition: .18s var(--ease);
}
.fteaser-cta:hover { background: var(--copper-soft); color: #160a04; opacity: 1; }
.fteaser-cta:active { transform: scale(.97); }
.fteaser-part {
display: flex; align-items: center;
gap: 14px; flex-wrap: wrap;
margin-top: clamp(16px, 2.2vw, 24px);
}
.fteaser-part span {
font-family: var(--mono); font-size: 9.5px;
letter-spacing: .22em; text-transform: uppercase;
color: var(--ice); opacity: .75;
}
.fteaser-tp {
display: block; width: 132px; height: 30px;
background: var(--tp-logo) center / contain no-repeat;
opacity: .95; transition: .18s var(--ease);
}
.fteaser-tp:hover { opacity: 1; transform: translateY(-1px); }
/* Die Bergkette steht jetzt neben der Copy statt darunter. Sie laeuft
unten weich in den Seitengrund aus, deshalb kein Verlauf im CSS. */
.fteaser-ridge {
display: block; width: 100%; min-width: 0; height: auto;
align-self: end;
}
@media (max-width: 860px) {
.fteaser-in { grid-template-columns: 1fr; gap: 16px; text-align: center; }
.fteaser-sub { margin-left: auto; margin-right: auto; }
.fteaser-part { justify-content: center; gap: 10px; }
.fteaser-ridge { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
.fteaser-tp { width: 118px; height: 27px; }
}
/* ============================================================
Seit 24.09.2026: vier Seiten statt einer
============================================================ */
/* Aktive Seite in der Navigation */
nav.primary-nav .nav-link[aria-current="page"] { color: var(--copper-soft); }
nav.primary-nav .nav-link[aria-current="page"] .nav-sub { color: var(--copper); opacity: .9; }
.mobile-menu a[aria-current="page"] { color: var(--copper-soft); }
/* Seitentitel fuer Screenreader und Suchmaschinen. Sichtbar bleibt die
bewaehrte Sektions-Headline. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Auf den Toolseiten ist die Sektion das Erste unter der Nav: keine
Trennlinie oben, dafuer etwas weniger Luft. */
body.tool-page main > section:first-of-type {
border-top: 0;
padding-top: clamp(36px, 6vh, 72px);
}
/* Der Sektionskopf stand mitten auf der Seite und war unten buendig mit den
Filtern. Als Seitenanfang gehoert die Headline nach oben. */
body.tool-page .rankings-head { align-items: flex-start; }
/* ---- Teaser-Karten ---------------------------------------------------- */
section.tools {
padding: clamp(52px, 8vh, 96px) var(--gutter-x);
background: var(--bg2);
border-top: 1px solid var(--line);
}
section.tools.tools-more { background: transparent; }
.tools-head { margin-bottom: clamp(26px, 4vh, 40px); }
.tools-head h2 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
font-size: clamp(30px, 4.6vw, 54px); line-height: .92; letter-spacing: -.03em;
color: var(--off); margin: 0;
}
.tools-head h2 em {
font-family: var(--serif); font-weight: 400; font-style: italic;
text-transform: none; letter-spacing: -.01em; color: var(--copper);
}
.tools-grid {
display: grid; gap: 18px;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tools-more .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) {
.tools-grid, .tools-more .tools-grid { grid-template-columns: 1fr; }
}
.tool-card {
position: relative;
display: flex; flex-direction: column;
background: var(--card);
border: 1px solid var(--line2);
border-radius: 6px;
padding: 26px 24px 22px;
color: var(--nude);
transition: border-color .18s var(--ease), transform .18s var(--ease), background .18s var(--ease);
}
.tool-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);
}
.tool-card::after {
content: ""; position: absolute; bottom: -1px; right: -1px; width: 7px; height: 7px;
border-bottom: 1px solid var(--copper); border-right: 1px solid var(--copper);
}
.tool-card:hover { opacity: 1; border-color: var(--copper-30); background: var(--card2); transform: translateY(-2px); }
.tool-card:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.tool-card .tc-kicker {
font-family: var(--mono); font-size: 10.5px; letter-spacing: .24em;
text-transform: uppercase; color: var(--copper);
}
.tool-card h3 {
font-family: var(--grotesk); font-weight: 900; text-transform: uppercase;
font-size: clamp(22px, 2.2vw, 28px); line-height: .95; letter-spacing: -.02em;
color: var(--off); margin: 12px 0 0;
}
.tool-card h3 em {
font-family: var(--serif); font-weight: 400; font-style: italic;
text-transform: none; letter-spacing: -.01em; color: var(--copper);
}
.tool-card .tc-lede { font-size: 14px; line-height: 1.6; color: var(--nude); margin: 12px 0 0; }
.tool-card .tc-live {
margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--line);
min-height: 92px;
}
.tool-card .tc-live:empty { display: none; }
.tool-card .tc-row {
display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
align-items: baseline; gap: 10px;
padding: 5px 0;
}
.tool-card .tc-lbl {
font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
text-transform: uppercase; color: var(--ice); opacity: .8;
}
.tool-card .tc-name { color: var(--off); font-size: 14px; min-width: 0; }
.tool-card .tc-meta {
display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
color: var(--ice); opacity: .7; margin-top: 2px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-card .tc-val {
font-family: var(--grotesk); font-weight: 900; font-size: 22px;
color: var(--off); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.tool-card .tc-date {
font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; color: var(--ice); opacity: .6; margin-top: 8px;
}
.tool-card .tc-cta {
margin-top: auto; padding-top: 20px;
font-family: var(--mono); font-size: 11.5px; font-weight: 500;
letter-spacing: .18em; text-transform: uppercase; color: var(--copper-soft);
}
.tool-card:hover .tc-cta { color: var(--off); }
/* ============================================================
Filterleisten quer + Zeilen pro Seite (24.09.2026)
The Ascent und The Summit bekommen dieselbe Leiste wie The Forecast:
volle Breite unter dem Sektionskopf, klebt beim Scrollen unter der Nav.
============================================================ */
.filter-bar {
margin-top: 40px;
display: grid; gap: 20px;
align-items: end;
padding: 14px 0;
border-bottom: 1px solid var(--line);
position: sticky; top: 56px; z-index: 20;
background: rgba(5,15,20,.94);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
section.rankings .filter-bar { background: rgba(8,22,29,.95); } /* --bg2 der Ascent-Sektion */
.filter-bar > div { min-width: 0; }
.filter-bar .seg-group button { padding: 12px 6px; letter-spacing: .1em; }
.filter-bar .compare-dates { margin-top: 0; min-width: 0; }
.filter-bar--ascent { grid-template-columns: 2.2fr 1.6fr 1fr 1fr .8fr; }
/* Zwei Datumsfelder nebeneinander: etwas weniger Luft, damit "SEP 24, 2026" ganz reinpasst */
.filter-bar .compare-dates .date-select { letter-spacing: .06em; padding-left: 12px; padding-right: 28px; background-position: right 10px center; }
.filter-bar--summit { grid-template-columns: 1.1fr 1.7fr 1fr 1fr .8fr; }
/* The Forecast: vierte Spalte fuer "Show" */
.forecast-filters { grid-template-columns: 1.6fr 1.2fr 1fr .8fr; }
@media (max-width: 1180px) {
.filter-bar--ascent, .filter-bar--summit { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.forecast-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Die zwei Datumsfelder brauchen zwei Spalten, sonst werden sie abgeschnitten */
.filter-bar--ascent > div:first-child { grid-column: span 2; }
}
@media (max-width: 960px) {
.filter-bar--ascent, .filter-bar--summit, .forecast-filters { grid-template-columns: 1fr; }
.filter-bar--ascent > div:first-child { grid-column: auto; }
}
@media (max-width: 900px) {
.filter-bar, section.rankings .filter-bar { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* Die Leiste klebt direkt unter der Nav. Seit die Nav Unterzeilen hat
(17.09.2026) ist sie hoeher als die frueher fest eingetragenen 56px, die
Beschriftungen der Filter verschwanden beim Scrollen darunter. app.js
misst die Nav und setzt --nav-h, 56px bleibt nur der Fallback. */
.seg-row, .forecast-filters, .filter-bar { top: var(--nav-h, 56px); }
/* Die Leiste hat schon eine Linie unten, die Insights brauchen keine zweite */
.filter-bar + .insights { margin-top: 36px; padding-top: 0; border-top: 0; }
/* ============================================================
Reset-Knopf in den Filterleisten (24.09.2026)
Letzte Spalte der Leiste, gleiche Hoehe wie die Segment-Knoepfe,
immer sichtbar, grau solange es nichts zurueckzusetzen gibt.
============================================================ */
/* Nur auf breiten Bildschirmen: eine Zeile mit Reset-Spalte. Als
Media-Query, weil diese Regeln weiter unten stehen als die Umbrueche fuer
schmalere Bildschirme und sie sonst ueberschreiben wuerden. */
@media (min-width: 1181px) {
.filter-bar--ascent { grid-template-columns: 2.2fr 1.6fr 1fr 1fr .8fr auto; }
.filter-bar--summit { grid-template-columns: 1.1fr 1.7fr 1fr 1fr .8fr auto; }
.forecast-filters { grid-template-columns: 1.5fr 1.1fr 1.2fr .8fr auto; }
}
.filter-reset {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
font-family: var(--mono); font-size: 11px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
color: var(--copper-soft); background: transparent;
border: 1px solid var(--copper); border-radius: 5px;
padding: 12px 16px; line-height: normal;
cursor: pointer; transition: .18s var(--ease);
}
.filter-reset:hover:not(:disabled) { background: var(--copper-soft); color: #160a04; }
.filter-reset:disabled {
color: var(--ice); border-color: var(--line2);
opacity: .4; cursor: default;
}
@media (max-width: 1180px) {
/* immer in die letzte Spalte, rechtsbuendig; nimmt die erste freie Zelle dort */
.filter-reset-cell { grid-column: -2 / -1; justify-self: end; }
}
@media (max-width: 960px) {
.filter-reset-cell { grid-column: auto; justify-self: stretch; }
.filter-reset { width: 100%; }
}
/* Laender-Pulldown im Forecast: "ALL COUNTRIES · 260" wurde abgeschnitten */
.forecast-filters .date-select { letter-spacing: .06em; padding-left: 12px; padding-right: 28px; background-position: right 10px center; }
/* The Ascent: zwei Datumsfelder brauchen Platz. Unter 1400px lieber zwei
Zeilen als abgeschnittene Daten ("SEP 24, 202"). */
@media (min-width: 1181px) and (max-width: 1400px) {
.filter-bar--ascent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.filter-bar--ascent > div:first-child { grid-column: span 2; }
.filter-bar--ascent .filter-reset-cell { grid-column: -2 / -1; justify-self: end; }
}
/* ===========================================================
Nav mit fuenf Seiten (07.10.2026, Race Fees dazu)
Ab 1280 px wird es eng: Abstand und Laufweite kleiner, kein
Umbruch in den Links. Unter 1100 px uebernimmt das Burger-Menue
(vorher erst unter 768 px), sonst brechen die Nav-Namen um.
=========================================================== */
nav.primary-nav .nav-link, .wordmark-tag { white-space: nowrap; }
@media (max-width: 1280px) {
nav.primary-nav { gap: 18px; }
nav.primary-nav .nav-link { letter-spacing: .14em; }
nav.primary-nav .btn-primary { padding: 13px 20px; }
}
@media (max-width: 1100px) {
nav.primary-nav { display: none; }
.burger { display: block; }
}
|