:root {
  --p-bg: #ffffff; --p-surface: #f4f1ea; --p-ink: #1c242f; --p-muted: #636972;
  --p-accent: #d10016; --p-accent-ink: #ffffff; --p-action: #d10016; --p-action-ink: #ffffff;
  --p-inv-bg: #1c242f; --p-inv-surface: #29313c; --p-inv-ink: #ffffff; --p-inv-muted: #a0a4aa;
  --p-inv-accent: #f20019; --p-inv-accent-ink: #ffffff; --p-inv-action: #f20019; --p-inv-action-ink: #ffffff;
  --font-display: "Instrument Sans", system-ui, sans-serif;
  --font-text: "Instrument Sans", system-ui, sans-serif;
  --display-weight: 400; --display-tracking: -0.02em;
}
/* simple sub-pages (Impressum, Datenschutz, Turnier, Verwaltung) */
.sub { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; }
.sub__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--line, #e3e3e3); }
.sub__top a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 500; }
.sub h1 { font: var(--display-weight) clamp(32px, 4vw, 48px)/1.1 var(--font-display); letter-spacing: var(--display-tracking); margin: 0 0 24px; }
.sub h2 { font-size: 24px; margin: 40px 0 8px; font-weight: 500; }
.sub p, .sub dd, .sub dt { font-size: 16px; line-height: 1.6; }
.todo { background: #fff4c2; padding: 0 4px; }

/* ---------- fluid page changes (View Transitions; Chrome, Edge, Safari 18+; others just switch) ---------- */
@view-transition { navigation: auto; }
/* the crest on the home page and the small logo in every header are one element that flies between pages */
.crest img, .topbar img, .sub__top img { view-transition-name: crest; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: ease-out; }
::view-transition-group(crest) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- glass header that stays while you scroll ---------- */
.topbar, .sub__top { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }

/* ---------- reading progress in club red (scroll-driven; browsers without it show nothing) ---------- */
@supports (animation-timeline: scroll()) {
  .topbar::after, .sub__top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: var(--p-action); transform-origin: left; transform: scaleX(0);
    animation: read-progress linear both; animation-timeline: scroll(root); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}