/* Gemeinsame Kopf- und Fussleiste aller Seiten.
   Die Farbwerte kommen aus den Tokens der jeweiligen Seite, deshalb steht hier
   nichts zu Farben ausser Verweisen auf var(--…). */

/* Die Seitenbreite gehoert hierher und nicht in jede Seite einzeln: sie war
   auf der Anmeldung 1020px und auf der Wertung 1080px breit, mit dazu noch
   verschiedenen Innenabstaenden. Das faellt im Wechsel zwischen den Seiten als
   Ruckeln auf, ohne dass man den Grund sieht.
   Lesetexte bekommen .schmal - dort ist eine kurze Zeile keine Nachlaessigkeit,
   sondern der Punkt. */
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; padding-block: 28px 70px; }
.wrap.schmal { max-width: 660px; }

/* Links im Fliesstext. Ohne das faellt der Browser auf sein eigenes Blau
   zurueck - auf der Anmeldeseite und in der Wertung war das bisher so, und
   Blau kommt in dieser Palette sonst nirgends vor. Die Unterstreichung bleibt,
   sie ist das, woran man einen Link erkennt; nur zurueckhaltender. Navigation,
   Fussleiste, Knoepfe und der Strava-Link setzen ihre Farbe selbst und
   ueberschreiben das weiter unten. */
a { color: var(--ink); text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }

.nav {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 10px 20px;
  padding-bottom: 12px; margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.nav-brand {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.nav-links { display: flex; gap: 20px; }
.nav-links a,
.nav-links span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Hell/Dunkel. Sitzt in der Leiste wie ein vierter Punkt, ist aber keiner -
   deshalb nur ein Symbol und kein Wort: die drei Seitennamen sollen die Reihe
   bleiben, die man liest. Gebaut wird der Knopf von thema.js, damit er auf
   allen sechs Seiten gleich ist und nicht sechsmal im Markup steht. */
.nav-links .thema {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -4px 0 0 -4px; padding: 0;
  border: 0; border-radius: 5px; background: none; cursor: pointer;
  color: var(--muted); align-self: center;
}
/* Sichtbar bleibt der Knopf 26 Pixel klein, angefasst wird er mit 44 - das
   ist die Groesse, die ein Daumen trifft. Ohne das ist er auf dem Telefon
   ein Zielchen, das man dreimal antippt. */
.nav-links .thema { position: relative; }
.nav-links .thema::after { content: ""; position: absolute; inset: -9px; }
.nav-links .thema:hover { color: var(--ink); background: var(--surface-2); }
.nav-links .thema:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.nav-links .thema svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* Die Seite, auf der man steht, ist kein Link, sondern eine Markierung. */
.nav-links [aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.pagefoot {
  margin-top: 46px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  font-size: 13px; color: var(--muted);
}
.pagefoot a { color: var(--muted); text-decoration: none; }
.pagefoot a:hover { color: var(--ink); text-decoration: underline; }
/* Instagram: ein Link, kein eingebetteter Feed. Ein Feed von Meta laedt beim
   Besucher Skripte und Bilder aus den USA nach - dafuer braeuchte die Seite
   einen Zustimmungsbanner, den sie bisher nicht hat. */
/* Die Fussleiste richtet ihre Teile an der Schriftlinie aus. Das Symbol darf
   deshalb nicht in der Textzeile stehen: es ist hoeher als die Schrift, hebt
   die Zeilenbox an und schiebt damit die Grundlinie des ganzen Links nach
   unten - der Link stand sichtbar hoeher als Impressum und Datenschutz.
   Absolut gesetzt zaehlt es fuer die Zeile nicht mehr mit, und uebrig bleibt
   die Schriftlinie, die mit den Nachbarn uebereinstimmt. */
.pagefoot .insta { position: relative; padding-left: 19px; white-space: nowrap; }
.pagefoot .insta svg {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.pagefoot .crew { margin-left: auto; }
.pagefoot .crew b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 460px) {
  .pagefoot .crew { margin-left: 0; flex-basis: 100%; }
}

/* ---- Uhr ----
   Auf beiden Seiten dieselbe Darstellung; welchen Termin sie zeigt, entscheidet
   uhr.js. Die Sekunden laufen sichtbar mit - eine Anzeige, die sich stundenlang
   nicht ruehrt, wirkt kaputt, auch wenn sie richtig rechnet. */
.uhr { text-align: right; min-width: 268px; }
/* Zeile ueber dem Zaehler. Gruen und mit Punkt: hier laeuft gerade etwas,
   im Unterschied zum Label darunter, das auf ein Ende zeigt. Die Ausrichtung
   erbt sie von .uhr, damit sie auf dem Telefon mit nach links wandert. */
.uhr-davor {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--go);
  margin-bottom: 3px;
}
.uhr-davor i {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--go); margin-right: 6px; vertical-align: 1px;
}
.uhr-label {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cut);
}
.uhr-digits { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.uhr-unit { text-align: center; }
.uhr-unit b {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 30px; font-weight: 600; line-height: 1; display: block; letter-spacing: -.02em;
}
.uhr-unit span {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.uhr-wann { font-size: 12px; color: var(--muted); margin-top: 5px; }
.uhr-ende {
  font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700;
  margin-top: 4px;
}

@media (max-width: 620px) {
  .uhr { text-align: left; min-width: 0; }
  .uhr-digits { justify-content: flex-start; }
}

/* ---- Disziplin eines Anstiegs ----
   Je Wochenblock einmal Rennrad, einmal MTB, einmal zu Fuss. Das muss auf der
   Kachel stehen, bevor jemand mit dem Rad an einem Laufanstieg auftaucht.
   Alle drei tragen vorerst dieselbe Farbe: Rot hiess auf dieser Seite bisher
   "hier faellt jemand raus", und das ist ein Laufanstieg nicht. Die Marke
   unterscheidet sich ueber das Wort, nicht ueber die Ampel. Sollen die drei
   spaeter auseinandergehen, ist hier die einzige Stelle dafuer. */
.sport {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  border-radius: 3px; padding: 1px 5px; margin-left: auto; flex: none;
}
.sport.road,
.sport.mtb,
.sport.lauf { color: var(--go); background: var(--go-soft); }

/* ---- Link auf das Segment bei Strava ----
   Fuehrt weg von dieser Seite, also sagt er das vorher: Strava-Orange, das
   Wort und ein Pfeil nach aussen.
   Der Icon-Selektor ist absichtlich zweistufig. Beide Seiten setzen `.seg svg`
   fuer das Hoehenprofil auf 38 bzw. 42 Pixel Hoehe; bei gleicher Spezifitaet
   gewinnt die spaetere Regel, und das waere die aus der Seite. Mit `.seg
   .seg-strava svg` ist die Reihenfolge egal. */
.seg-strava {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  color: var(--strava); text-decoration: none;
}
a.seg-strava:hover { text-decoration: underline; }
a.seg-strava:focus-visible { outline: 2px solid var(--strava); outline-offset: 3px; border-radius: 2px; }
.seg .seg-strava svg {
  display: inline-block; width: 9px; height: 9px; margin: 0; flex: none;
  stroke: currentColor; stroke-width: 2.2; fill: none;
}

/* Zwei Zeilen Platz fuer den Namen. Lange Namen brachen sonst um und machten
   einzelne Kacheln zwanzig Pixel hoeher als der Rest. */
.seg-top { min-height: 42px; }

/* ---- Anstiege nach Freischaltwoche ----
   Eine Spalte je Woche. Die drei Anstiege eines Blocks gehoeren zusammen und
   sollen auch so stehen - vorher lief das Raster zeilenweise voll und zerriss
   jeden Block ueber zwei Reihen. */
.wochen { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; }
.woche { display: flex; flex-direction: column; gap: 12px; }
.woche-kopf {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 7px; border-bottom: 1px solid var(--line-strong);
}
.woche-kopf.jetzt { color: var(--go); border-bottom-color: var(--go); }

/* ---- Noch nicht freigeschaltete Anstiege ----
   Die Kachel bleibt stehen und behaelt ihren Platz im Raster, ihr Inhalt wird
   aber unkenntlich. Eine leere Stelle sagt "hier fehlt was", eine verwischte
   sagt "hier kommt was" - und das ist der Unterschied, um den es geht. */
.gesperrt { position: relative; isolation: isolate; }
.gesperrt > *:not(.schloss) {
  filter: blur(7px) saturate(.4);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}
.gesperrt::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-radius: inherit;
}
.schloss {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; text-align: center; padding: 10px;
}
.schloss svg { width: 19px; height: 19px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; }
.schloss .wann {
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
  .gesperrt > *:not(.schloss) { transition: filter .2s ease; }
}