/* ================================================================
   SIDEKICK24 / SIDEKICK24
   Premium demo design system
   ================================================================ */

:root {
  /* Diese Werte sind nur die Rueckfallebene. Im laufenden Betrieb
     ueberschreibt theme.css sie mit den Vereinsfarben. */
  --color-black: #050505;
  --color-black-soft: #0a0b0b;
  --color-anthracite: #101112;
  --color-anthracite-light: #17191b;
  --color-panel: rgba(var(--color-anthracite-rgb), 0.84);
  --color-white: #f4f2ed;
  --color-white-soft: #b6b3ab;
  --color-muted: #7a7872;
  --color-gold: #d6a341;
  --color-gold-bright: #f2c45f;
  --color-gold-dark: #8a6324;
  --color-line: rgba(var(--color-white-rgb), 0.12);
  --color-line-gold: rgba(var(--color-gold-rgb), 0.28);
  --color-success: #86a66b;

  /* RGB-Kanaele derselben Farben. Sie machen alle halbtransparenten
     Flaechen, Linien und Schimmer an das Vereinsbranding koppelbar.
     Das CMS ueberschreibt sie zusammen mit den Hex-Werten in theme.css,
     dadurch faerbt eine Farbaenderung wirklich die gesamte Oberflaeche
     ein und nicht nur einzelne Buttons. */
  --color-black-rgb: 5, 5, 5;
  --color-black-soft-rgb: 9, 10, 11;
  --color-anthracite-rgb: 16, 17, 18;
  --color-white-rgb: 244, 242, 237;
  --color-gold-rgb: 214, 163, 65;
  --color-gold-bright-rgb: 242, 196, 95;
  --color-gold-dark-rgb: 138, 99, 36;

  /* Gestaltungsregler, vom CMS unter Ausstrahlung gesetzt */
  --grain-opacity: 0.055;

  /* Modusabhaengige Stellschrauben. Alles Farbliche regelt sich bereits
     ueber die Farbvariablen selbst - hier stehen nur die Dinge, die sich
     nicht ueber eine Farbe ausdruecken lassen: Mischmodi, Deckkraft von
     Bildschleiern, Schattenfarbe und Bildkorrektur. Der helle Modus
     ueberschreibt sie weiter unten. */
  --grain-blend: overlay;
  --shade-soft: 0.58;
  --shade-strong: 0.82;
  --shade-full: 0.94;
  --media-filter: ;                      /* leer = keine zusaetzliche Korrektur */
  --shadow-rgb: 0, 0, 0;                 /* Schatten bleiben in beiden Modi dunkel */
  --color-on-accent: var(--color-black);  /* Schrift auf Akzentflaechen */
  --color-accent-text: var(--color-gold-bright); /* Akzent als Schriftfarbe */
  --panel-elevation: 0 22px 60px rgba(var(--shadow-rgb), 0.5);
  --accent-restraint: 1;
  --motion-scale: 1;
  --shell: min(92vw, 1500px);
  --header-height: 92px;
  --section-space: clamp(6rem, 11vw, 11rem);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-deep: 0 40px 100px rgba(var(--color-black-rgb), 0.52);
}

[hidden] {
  display: none !important;
}

/* ================================================================
   SIDEKICK24 EXPERIENCE LAYER
   Vereinskompass · Club Pulse · personal plan · partner stage
   ================================================================ */

html {
  --mood-intensity: 0.7;
  --mood-primary: rgba(var(--color-gold-rgb), 0.16);
  --mood-secondary: rgba(52, 65, 74, 0.12);
}

html[data-day-mood="morning"] { --mood-primary: rgba(216, 190, 135, 0.17); --mood-secondary: rgba(89, 111, 127, 0.13); }
html[data-day-mood="day"] { --mood-primary: rgba(var(--color-gold-bright-rgb), 0.11); --mood-secondary: rgba(92, 103, 110, 0.1); }
html[data-day-mood="evening"] { --mood-primary: rgba(242, 177, 74, 0.19); --mood-secondary: rgba(76, 45, 58, 0.12); }
html[data-day-mood="night"] { --mood-primary: rgba(183, 141, 62, 0.12); --mood-secondary: rgba(23, 38, 59, 0.17); }
html[data-weekend="true"] { --mood-secondary: rgba(var(--color-gold-rgb), 0.105); }
html[data-event-mode="true"] { --mood-primary: rgba(var(--color-gold-bright-rgb), 0.22); }

/* Ebenenmodell
   0    ambient-mood
   1    main / footer (Seiteninhalt)
   1000 site-header + mobile-menu
   1200 reading-progress, plan-fab
   1250 weekly-plan-drawer
   9999 page-transition
   Wichtig: [data-site-header] und [data-site-experience] duerfen den
   z-index ihrer fixierten Kinder nicht einsperren. */
main,
[data-site-footer] {
  position: relative;
  z-index: 1;
}

[data-site-header] {
  position: relative;
  z-index: 1000;
}

[data-site-experience] {
  position: static;
  z-index: auto;
}

.ambient-mood {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 13%, var(--mood-primary), transparent 34rem),
    radial-gradient(circle at 12% 74%, var(--mood-secondary), transparent 40rem);
  opacity: calc(0.35 + var(--mood-intensity) * 0.65);
  transition: background 1.4s ease, opacity 1.4s ease;
}

.cursor-light {
  position: fixed;
  z-index: 9988;
  top: 0;
  left: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-gold-bright-rgb), 0.065), rgba(var(--color-gold-rgb), 0.018) 32%, transparent 68%);
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.has-image-depth img {
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.02);
  transition: transform 850ms var(--ease-premium), filter 700ms ease;
  will-change: transform;
}

.has-image-depth:hover img {
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.055);
}

/* Die Unterstreichung waechst von links nach rechts statt aus der Mitte.
   Die Geste ist ruhiger und liest sich editorialer. */
.desktop-nav a::after {
  right: auto;
  left: 0;
  width: 100%;
  background: var(--color-gold-bright);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(620ms * var(--motion-scale, 1)) var(--ease-premium);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.desktop-nav a[aria-current="page"]::after {
  right: auto;
  left: 0;
  transform: scaleX(1);
}

/* Club Pulse ---------------------------------------------------- */

.club-pulse {
  position: relative;
  z-index: 7;
  overflow: hidden;
  border-block: 1px solid var(--color-line-gold);
  background: linear-gradient(120deg, rgba(var(--color-anthracite-rgb), 0.98), rgba(var(--color-black-rgb), 0.98));
}

.club-pulse > .network-decoration {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mask-image: linear-gradient(90deg, transparent 0, #000 44%, #000 100%);
}

.club-pulse__glow {
  position: absolute;
  top: -22rem;
  left: 58%;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--color-gold-bright-rgb), 0.12), transparent 66%);
  pointer-events: none;
}

.club-pulse__layout {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 34rem;
  grid-template-columns: minmax(320px, 0.72fr) minmax(520px, 1.28fr);
  align-items: stretch;
}

.club-pulse__copy {
  display: flex;
  padding: clamp(4rem, 7vw, 7rem) clamp(2rem, 5vw, 5rem) clamp(4rem, 7vw, 7rem) 0;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-line);
}

.club-pulse__copy h2 {
  max-width: 7ch;
  margin-bottom: 1.5rem;
  font-size: clamp(4rem, 7vw, 8rem);
  line-height: 0.8;
}

.club-pulse__copy h2 span {
  color: var(--color-accent-text);
}

.club-pulse__copy > p:not(.eyebrow) {
  max-width: 43ch;
  color: var(--color-white-soft);
}

.club-pulse__metrics {
  display: flex;
  margin-top: 2.2rem;
  gap: 3rem;
}

.club-pulse__metrics div {
  display: grid;
  gap: 0.2rem;
}

.club-pulse__metrics strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
}

.club-pulse__metrics span {
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.club-pulse__map {
  position: relative;
  min-height: 34rem;
  overflow: hidden;
  background: radial-gradient(circle at 58% 52%, rgba(var(--color-gold-rgb), 0.07), transparent 18rem);
}

.club-pulse__map-grid {
  position: absolute;
  inset: 9% 7%;
  opacity: 0.34;
  background:
    linear-gradient(rgba(var(--color-gold-bright-rgb), 0.11) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(90deg, rgba(var(--color-gold-bright-rgb), 0.11) 1px, transparent 1px) 0 0 / 58px 58px;
  mask-image: radial-gradient(circle, #000, transparent 75%);
  transform: perspective(700px) rotateX(57deg) rotateZ(-9deg) scale(1.2);
}

.club-pulse__clock {
  position: absolute;
  top: 2.3rem;
  right: 2.3rem;
  color: rgba(var(--color-white-rgb), 0.15);
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 7rem);
  line-height: 1;
}

.club-pulse__node {
  position: absolute;
  top: var(--node-y);
  left: var(--node-x);
  display: grid;
  min-width: 9rem;
  padding-left: 1.35rem;
  color: var(--color-muted);
  transform: translate(-50%, -50%);
}

.club-pulse__node i {
  position: absolute;
  top: 0.45rem;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid rgba(var(--color-white-rgb), 0.38);
  border-radius: 50%;
  background: var(--color-black-soft);
}

.club-pulse__node b {
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

.club-pulse__node small {
  font-size: 0.55rem;
  text-transform: uppercase;
}

.club-pulse__node.is-active {
  color: var(--color-white);
}

.club-pulse__node.is-active i {
  border-color: var(--color-gold);
  background: var(--color-gold-bright);
  box-shadow: 0 0 24px rgba(var(--color-gold-bright-rgb), 0.85);
  animation: pulse-node 2.2s ease-in-out infinite;
}

.club-pulse__next {
  position: absolute;
  right: 2.3rem;
  bottom: 2.3rem;
  left: 2.3rem;
  display: grid;
  padding: 1.3rem 1.5rem;
  grid-template-columns: 0.55fr 1fr;
  align-items: center;
  border: 1px solid var(--color-line-gold);
  background: rgba(var(--color-black-rgb), 0.72);
  backdrop-filter: blur(14px);
}

.club-pulse__next > span {
  color: var(--color-accent-text);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.club-pulse__next strong,
.club-pulse__next p {
  grid-column: 2;
}

.club-pulse__next strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.club-pulse__next p {
  margin: 0.35rem 0 0;
  color: var(--color-muted);
  font-size: 0.67rem;
}

/* Vereinskompass teaser ---------------------------------------- */

.compass-teaser {
  overflow: hidden;
  border-bottom: 1px solid var(--color-line);
}

.compass-teaser__stage {
  position: relative;
  min-height: min(72vh, 760px);
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  border: 1px solid var(--color-line-gold);
  background: var(--color-black-soft);
}

.compass-teaser__image,
.compass-teaser__shade,
.compass-teaser__stage > .network-decoration {
  position: absolute;
  inset: 0;
}

.compass-teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.32) saturate(0.72) contrast(1.1) var(--media-filter, );
}

.compass-teaser__shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.98) 0%, rgba(var(--color-black-rgb), 0.82) 46%, rgba(var(--color-black-rgb), 0.22) 78%), linear-gradient(0deg, rgba(var(--color-black-rgb), 0.88), transparent 58%);
}

.compass-teaser__stage > .network-decoration {
  z-index: 2;
  left: 48%;
  opacity: 0.64;
}

.compass-teaser__copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: clamp(2.2rem, 7vw, 7rem);
}

.compass-teaser__copy h2 {
  max-width: 8ch;
  margin-bottom: 1.5rem;
  font-size: clamp(4.2rem, 8.4vw, 9.5rem);
  line-height: 0.79;
}

.compass-teaser__copy h2 span {
  color: var(--color-accent-text);
}

.compass-teaser__copy > p:not(.eyebrow) {
  max-width: 47ch;
  margin-bottom: 2.2rem;
  color: var(--color-white-soft);
}

.compass-teaser__constellation {
  position: absolute;
  z-index: 4;
  right: clamp(2rem, 7vw, 7rem);
  bottom: clamp(2rem, 7vw, 6rem);
  display: grid;
  width: min(34vw, 470px);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}

.compass-teaser__constellation span {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  place-items: center;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.42);
  border-radius: 50%;
  background: rgba(var(--color-black-rgb), 0.62);
  color: var(--color-accent-text);
  font-size: 0.62rem;
  backdrop-filter: blur(10px);
}

.compass-teaser__constellation span:nth-of-type(3),
.compass-teaser__constellation span:nth-of-type(4) {
  grid-column: 3;
}

.compass-teaser__constellation span:nth-of-type(2) {
  grid-column: 3;
}

.compass-teaser__constellation span small {
  color: var(--color-white-soft);
  font-size: 0.48rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compass-teaser__constellation i {
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
}

/* Vereinskompass full experience ------------------------------- */

.compass-page {
  background: linear-gradient(180deg, var(--color-black-soft), var(--color-anthracite) 62%, var(--color-black));
}

.club-compass {
  position: relative;
  min-height: 790px;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 5rem);
  border: 1px solid var(--color-line-gold);
  background: rgba(var(--color-black-soft-rgb), 0.92);
  isolation: isolate;
}

.club-compass__backdrop {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
}

.club-compass__backdrop::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, rgba(var(--color-black-rgb), 0.99) 10%, rgba(var(--color-black-rgb), 0.9) 56%, rgba(var(--color-black-rgb), 0.56));
}

.club-compass__backdrop img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.48) saturate(0.58) contrast(1.12) var(--media-filter, );
  opacity: 0.46;
  transition: opacity 900ms ease;
}

.club-compass.has-results .club-compass__backdrop img {
  opacity: 0.62;
}

.compass-orbit {
  position: absolute;
  z-index: 2;
  top: 52%;
  left: 77%;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.compass-orbit::before,
.compass-orbit::after {
  position: absolute;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  content: "";
  background: var(--color-gold-bright);
  box-shadow: 0 0 18px rgba(var(--color-gold-bright-rgb), 0.72);
}

.compass-orbit::before { top: 11%; left: 22%; }
.compass-orbit::after { right: 9%; bottom: 25%; }
.compass-orbit--one { width: 30rem; height: 30rem; animation: constellation-turn 34s linear infinite; }
.compass-orbit--two { width: 21rem; height: 21rem; animation: constellation-turn 24s linear reverse infinite; }

.compass-sport-node {
  position: absolute;
  z-index: 3;
  top: calc(20% + (var(--node-index) % 4) * 17%);
  right: calc(8% + (var(--node-index) % 3) * 10%);
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border: 1px solid rgba(var(--color-white-rgb), 0.16);
  border-radius: 50%;
  background: rgba(var(--color-black-soft-rgb), 0.78);
  color: rgba(var(--color-white-rgb), 0.38);
  font-size: 0.58rem;
  font-style: normal;
  transition: color 500ms ease, border-color 500ms ease, transform 700ms var(--ease-premium), box-shadow 500ms ease;
}

.compass-sport-node.is-matching {
  border-color: var(--color-gold);
  color: var(--color-accent-text);
  box-shadow: 0 0 22px rgba(var(--color-gold-bright-rgb), 0.34);
  transform: scale(1.18);
  animation: compass-node-breathe 2.6s ease-in-out infinite;
}

.club-compass__header {
  display: grid;
  max-width: 940px;
  margin-bottom: clamp(3rem, 6vw, 6rem);
  grid-template-columns: 1fr 0.7fr;
  align-items: end;
  gap: 4rem;
}

.club-compass__header h2 {
  max-width: 7ch;
  font-size: clamp(4rem, 7.2vw, 8.7rem);
  line-height: 0.79;
}

.club-compass__header h2 span,
.club-compass__results h3 {
  color: var(--color-accent-text);
}

.club-compass__header > div:last-child p {
  margin-bottom: 1rem;
  color: var(--color-white-soft);
}

.club-compass__header > div:last-child span {
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.club-compass__progress {
  position: relative;
  display: flex;
  max-width: 940px;
  margin-bottom: 2.5rem;
  align-items: center;
  gap: 1.3rem;
}

.club-compass__progress > span {
  position: relative;
  display: block;
  height: 1px;
  flex: 1;
  background: rgba(var(--color-white-rgb), 0.12);
}

.club-compass__progress > span::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress);
  content: "";
  background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-bright));
  box-shadow: 0 0 16px rgba(var(--color-gold-bright-rgb), 0.3);
  transition: width 700ms var(--ease-premium);
}

.club-compass__progress output {
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.club-compass__steps {
  position: relative;
  z-index: 5;
  max-width: 940px;
}

.club-compass__step {
  min-width: 0;
  padding: 0;
  border: 0;
}

.club-compass__step[hidden] {
  display: none;
}

.club-compass__step legend {
  display: grid;
  margin-bottom: 2rem;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

.club-compass__step legend > span {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  grid-row: 1 / 3;
  place-items: center;
  border: 1px solid var(--color-line-gold);
  color: var(--color-accent-text);
  font-size: 0.62rem;
}

.club-compass__step legend small {
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.club-compass__step legend strong {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.6vw, 3.4rem);
  font-weight: 500;
  line-height: 1;
}

.compass-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.compass-option-group {
  width: 100%;
  margin-bottom: 1.4rem;
}

.compass-option-group > span {
  display: block;
  margin-bottom: 0.7rem;
  color: var(--color-muted);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.compass-option-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.compass-option {
  position: relative;
  display: inline-flex;
  min-height: 3.5rem;
  padding: 0.85rem 1.2rem;
  align-items: center;
  gap: 0.8rem;
  border: 1px solid rgba(var(--color-white-rgb), 0.16);
  background: rgba(var(--color-black-rgb), 0.5);
  color: var(--color-white-soft);
  cursor: pointer;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  transition: border-color 400ms ease, color 400ms ease, background 400ms ease, transform 500ms var(--ease-premium);
}

.compass-option i {
  width: 0.45rem;
  height: 0.45rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background 300ms ease, box-shadow 300ms ease;
}

.compass-option:hover,
.compass-option:focus-visible {
  border-color: rgba(var(--color-gold-bright-rgb), 0.55);
  color: var(--color-white);
  transform: translateY(-2px);
}

.compass-option.is-selected {
  border-color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.11);
  color: var(--color-accent-text);
}

.compass-option.is-selected i {
  background: var(--color-gold-bright);
  box-shadow: 0 0 12px rgba(var(--color-gold-bright-rgb), 0.72);
}

.club-compass__controls {
  position: relative;
  z-index: 6;
  display: flex;
  max-width: 940px;
  margin-top: 2.4rem;
  align-items: center;
  gap: 0.8rem;
}

.club-compass__controls .text-link {
  margin-left: auto;
  background: transparent;
  cursor: pointer;
}

.club-compass__results {
  opacity: 0;
  transform: translateY(2rem);
}

.club-compass__results.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 650ms ease, transform 800ms var(--ease-premium);
}

.club-compass__result-heading {
  display: grid;
  margin-bottom: 2.2rem;
  grid-template-columns: 1fr 0.7fr;
  align-items: end;
  gap: 3rem;
}

.club-compass__result-heading .eyebrow,
.club-compass__result-heading h3 {
  grid-column: 1;
}

.club-compass__result-heading h3 {
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(3.4rem, 6vw, 7rem);
  font-weight: 500;
  line-height: 0.82;
}

.club-compass__result-heading > p:last-child {
  grid-column: 2;
  grid-row: 1 / 3;
  color: var(--color-white-soft);
}

.compass-result-list {
  display: grid;
  gap: 1rem;
}

.compass-result {
  display: grid;
  min-height: 18rem;
  overflow: hidden;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.28fr);
  border: 1px solid var(--color-line);
  background: rgba(var(--color-black-rgb), 0.78);
  animation: hero-fade-in 700ms calc(var(--result-index) * 100ms) both var(--ease-premium);
}

.compass-result:first-child {
  border-color: rgba(var(--color-gold-bright-rgb), 0.55);
  box-shadow: 0 22px 70px rgba(var(--shadow-rgb), 0.36);
}

.compass-result__media {
  position: relative;
  overflow: hidden;
}

.compass-result__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(var(--color-black-rgb), 0.52));
}

.compass-result__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.26) saturate(0.72) contrast(1.08) var(--media-filter, );
}

.compass-result__media > span {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-line-gold);
  background: rgba(var(--color-black-rgb), 0.72);
  color: var(--color-accent-text);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  backdrop-filter: blur(8px);
}

.compass-result__media > span strong {
  font-size: 1.1rem;
}

.compass-result__copy {
  padding: clamp(1.5rem, 3vw, 2.7rem);
}

.compass-result__copy > p {
  margin-bottom: 0.3rem;
  color: var(--color-accent-text);
  font-size: 0.57rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.compass-result__copy h4 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 4.3rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.compass-result__copy > span {
  display: block;
  max-width: 58ch;
  color: var(--color-white-soft);
  font-size: 0.82rem;
}

.compass-result__copy dl {
  display: grid;
  margin: 1.2rem 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.compass-result__copy dl div {
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-line);
}

.compass-result__copy dt {
  color: var(--color-muted);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.compass-result__copy dd {
  margin: 0.25rem 0 0;
  font-size: 0.66rem;
}

.compass-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Personal weekly plan ----------------------------------------- */

.plan-add {
  position: relative;
  display: inline-flex;
  min-height: 2.45rem;
  padding: 0.55rem 0.8rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--color-line-gold);
  background: rgba(var(--color-gold-rgb), 0.04);
  color: var(--color-accent-text);
  cursor: pointer;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 300ms ease, background 300ms ease, color 300ms ease;
}

.plan-add:hover,
.plan-add.is-added {
  border-color: var(--color-gold);
  background: var(--color-gold-bright);
  color: var(--color-on-accent);
}

.plan-add.has-pulse {
  animation: plan-confirm 700ms ease;
}

.training-slot {
  grid-template-columns: minmax(6rem, 0.65fr) minmax(6rem, 0.7fr) minmax(0, 1fr) auto !important;
}

.weekly-row__times p {
  grid-template-columns: minmax(5rem, auto) minmax(5rem, auto) 2rem;
}

.weekly-row__times button {
  display: grid;
  width: 1.9rem;
  height: 1.9rem;
  place-items: center;
  border: 1px solid var(--color-line-gold);
  background: transparent;
  color: var(--color-accent-text);
  cursor: pointer;
}

.weekly-row__times button.is-added {
  background: var(--color-gold-bright);
  color: var(--color-on-accent);
}

.weekly-row__link {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  border: 1px solid var(--color-line);
  transition: border-color 300ms ease, background 300ms ease;
}

.weekly-row__link:hover {
  border-color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.08);
}

.plan-fab {
  position: fixed;
  z-index: 1200;
  right: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  min-height: 3.2rem;
  padding: 0.75rem 0.8rem 0.75rem 1rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.5);
  background: rgba(var(--color-black-soft-rgb), 0.9);
  color: var(--color-white);
  cursor: pointer;
  box-shadow: 0 16px 45px rgba(var(--shadow-rgb), 0.42);
  backdrop-filter: blur(16px);
}

.plan-fab span {
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-fab b {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  place-items: center;
  background: var(--color-gold-bright);
  color: var(--color-on-accent);
  font-size: 0.65rem;
}

.weekly-plan-drawer {
  position: fixed;
  z-index: 1250;
  top: 0;
  right: 0;
  display: grid;
  width: min(100%, 520px);
  height: 100dvh;
  padding: clamp(1.5rem, 4vw, 3rem);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  border-left: 1px solid var(--color-line-gold);
  background: rgba(var(--color-black-soft-rgb), 0.98);
  box-shadow: -30px 0 90px rgba(var(--shadow-rgb), 0.55);
  opacity: 0;
  transform: translateX(105%);
  transition: transform 650ms var(--ease-premium), opacity 350ms ease;
  backdrop-filter: blur(22px);
}

.weekly-plan-drawer.is-open {
  opacity: 1;
  transform: translateX(0);
}

.weekly-plan-drawer > header {
  display: flex;
  padding-bottom: 1.5rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.weekly-plan-drawer h2 {
  margin: 0;
  color: var(--color-accent-text);
  font-size: clamp(2.7rem, 6vw, 4.3rem);
  line-height: 0.86;
}

.weekly-plan-drawer > header button,
.partner-stage__close {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  place-items: center;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  font-size: 1.35rem;
}

.weekly-plan-drawer__list {
  overflow-y: auto;
  padding-block: 0.5rem;
}

.weekly-plan-item {
  display: grid;
  padding: 1.2rem 0;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.weekly-plan-item > span {
  color: var(--color-accent-text);
  font-size: 0.56rem;
  font-weight: 900;
}

.weekly-plan-item p {
  margin-bottom: 0.2rem;
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.weekly-plan-item h3 {
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.weekly-plan-item small {
  color: var(--color-white-soft);
}

.weekly-plan-item > div > div {
  display: flex;
  margin-top: 0.7rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.weekly-plan-item a {
  color: var(--color-accent-text);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.weekly-plan-item > button {
  align-self: start;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1.2rem;
}

.weekly-plan-drawer__empty {
  align-self: center;
  max-width: 28ch;
  margin: 3rem auto;
  color: var(--color-muted);
  text-align: center;
}

.weekly-plan-drawer > footer {
  display: flex;
  padding-top: 1.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--color-line);
}

.weekly-plan-drawer > footer .text-link {
  background: transparent;
  cursor: pointer;
}

.weekly-plan-drawer button:disabled {
  cursor: not-allowed;
  opacity: 0.36;
}

body.plan-open::after {
  position: fixed;
  z-index: 1225;
  inset: 0;
  content: "";
  background: rgba(var(--color-black-rgb), 0.55);
  backdrop-filter: blur(3px);
}

/* Partner stage ------------------------------------------------- */

.sponsor-marquee__item,
.sponsor-motion-link {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.sponsor-marquee__item {
  display: flex;
  flex: 0 0 auto;
}

.sponsor-tier__marks button {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--color-line);
  isolation: isolate;
}

.sponsor-tier__marks button::before {
  position: absolute;
  z-index: -1;
  top: var(--partner-y, 50%);
  left: var(--partner-x, 50%);
  width: 170%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(var(--color-gold-bright-rgb), 0.28), rgba(var(--color-gold-rgb), 0.09) 34%, transparent 68%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.08);
  transition: transform 760ms var(--ease-premium), opacity 380ms ease;
}

.sponsor-tier__marks button:hover::before,
.sponsor-tier__marks button:focus-visible::before,
.sponsor-tier__marks button.is-activated::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sponsor-tier__marks button:hover .sponsor-wordmark,
.sponsor-tier__marks button:focus-visible .sponsor-wordmark,
.sponsor-tier__marks button.is-activated .sponsor-wordmark {
  opacity: 1;
  filter: none;
}

.partner-stage {
  width: min(92vw, 1080px);
  max-width: none;
  max-height: min(88dvh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.5);
  background: rgba(var(--color-black-soft-rgb), 0.98);
  color: var(--color-white);
  box-shadow: 0 50px 130px rgba(var(--shadow-rgb), 0.72);
}

.partner-stage::backdrop {
  background: rgba(var(--color-black-rgb), 0.78);
  backdrop-filter: blur(10px);
}

.partner-stage[open] {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  animation: hero-fade-in 650ms var(--ease-premium) both;
}

.partner-stage__energy {
  position: absolute;
  right: -14rem;
  bottom: -18rem;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 2.6rem, rgba(var(--color-gold-bright-rgb), 0.09) 2.7rem 2.75rem), radial-gradient(circle, rgba(var(--color-gold-bright-rgb), 0.13), transparent 67%);
  animation: constellation-turn 38s linear infinite;
  pointer-events: none;
}

.partner-stage__close {
  position: absolute;
  z-index: 4;
  top: 1.2rem;
  right: 1.2rem;
}

.partner-stage__rail {
  position: absolute;
  z-index: 3;
  right: 5rem;
  bottom: 1.5rem;
  left: calc(37% + 3rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-muted);
  font-size: 0.48rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.partner-stage__rail i {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--color-gold-dark), transparent);
}

.partner-stage__identity {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 620px;
  place-items: center;
  padding: 3rem;
  border-right: 1px solid var(--color-line-gold);
  background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.1), rgba(var(--color-white-rgb), 0.015));
}

.partner-stage__identity .sponsor-wordmark {
  width: 100%;
  min-width: 0;
  min-height: 12rem;
  border: 0;
  opacity: 1;
  filter: none;
}

.partner-stage__identity .sponsor-wordmark b {
  font-size: clamp(1.3rem, 3vw, 2.5rem);
  text-align: center;
}

.partner-stage__copy {
  position: relative;
  z-index: 2;
  display: flex;
  padding: clamp(3.5rem, 7vw, 7rem) clamp(2rem, 6vw, 6rem);
  flex-direction: column;
  justify-content: center;
}

.partner-stage__copy > span {
  margin-bottom: 0.6rem;
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.partner-stage__copy h2 {
  max-width: 9ch;
  margin-bottom: 1.2rem;
  font-size: clamp(3.4rem, 6.5vw, 7.2rem);
  line-height: 0.8;
}

.partner-stage__copy > p:not(.eyebrow) {
  max-width: 52ch;
  color: var(--color-white-soft);
}

.partner-stage__copy dl {
  display: grid;
  margin: 1.6rem 0 2rem;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.partner-stage__copy dl div {
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-line);
}

.partner-stage__copy dt {
  color: var(--color-muted);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.partner-stage__copy dd {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
}

.partner-stage__copy .button {
  align-self: flex-start;
}

/* Per-sport motion signatures ---------------------------------- */

.team-panel::before,
.weekly-row::before,
body[data-sport-motion] .inner-hero::after {
  position: absolute;
  z-index: 2;
  content: "";
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease, transform 900ms var(--ease-premium);
}

.team-panel:hover::before,
.weekly-row:hover::before,
body[data-sport-motion] .inner-hero::after {
  opacity: 0.8;
}

[data-sport-motion="flow"]::before,
body[data-sport-motion="flow"] .inner-hero::after {
  inset: 16% -30%;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.3);
  border-radius: 50%;
  transform: rotate(-16deg);
}

[data-sport-motion="impact"]::before,
body[data-sport-motion="impact"] .inner-hero::after {
  inset: 12% 18%;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.38);
  clip-path: polygon(50% 0, 100% 28%, 82% 100%, 18% 100%, 0 28%);
  transform: scale(0.82) rotate(8deg);
}

[data-sport-motion="pulse"]::before,
body[data-sport-motion="pulse"] .inner-hero::after {
  top: 18%;
  right: 12%;
  width: 38%;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.35);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(var(--color-gold-bright-rgb), 0.055), 0 0 0 62px rgba(var(--color-gold-bright-rgb), 0.025);
}

[data-sport-motion="rise"]::before,
body[data-sport-motion="rise"] .inner-hero::after {
  right: 8%;
  bottom: -15%;
  width: 52%;
  height: 74%;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.32);
  border-radius: 50% 50% 0 0;
  transform: rotate(-7deg);
}

[data-sport-motion="trail"]::before,
body[data-sport-motion="trail"] .inner-hero::after {
  top: 32%;
  right: -18%;
  width: 88%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-bright), transparent);
  box-shadow: 0 22px 0 rgba(var(--color-gold-bright-rgb), 0.17), 0 44px 0 rgba(var(--color-gold-bright-rgb), 0.08);
  transform: rotate(-12deg);
}

[data-sport-motion="precision"]::before,
body[data-sport-motion="precision"] .inner-hero::after {
  top: 12%;
  right: 14%;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.3);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  transform: rotate(11deg);
}

[data-sport-motion="spark"]::before,
body[data-sport-motion="spark"] .inner-hero::after {
  top: 48%;
  right: 9%;
  width: 47%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--color-gold-bright-rgb), 0.9), transparent);
  box-shadow: 38px -44px 0 rgba(var(--color-gold-bright-rgb), 0.2), -24px 36px 0 rgba(var(--color-gold-bright-rgb), 0.12);
  transform: rotate(-27deg);
}

[data-sport-motion="orbit"]::before,
body[data-sport-motion="orbit"] .inner-hero::after {
  top: 17%;
  right: 9%;
  width: 48%;
  aspect-ratio: 1.35;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.3);
  border-radius: 50%;
  transform: rotate(-19deg);
}

body[data-sport-motion] .inner-hero::after {
  z-index: 2;
}

.contact-form.is-confirmed {
  animation: form-confirm 1.35s ease;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
  scrollbar-color: var(--color-gold-dark) var(--color-black);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 75% 12%, rgba(var(--color-gold-rgb), 0.045), transparent 25rem),
    var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 9998;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.022;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

body.menu-open {
  overflow: hidden;
}

::selection {
  background: var(--color-gold);
  color: var(--color-on-accent);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-black);
}

::-webkit-scrollbar-thumb {
  border: 2px solid var(--color-black);
  background: var(--color-gold-dark);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
}

h1,
h2,
h3,
p,
ul,
ol,
blockquote {
  margin-top: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 5px;
}

.shell {
  width: var(--shell);
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: var(--section-space);
}

.section--lifted {
  position: relative;
  z-index: 8;
  margin-top: -4rem;
  padding-top: 0;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 10001;
  top: 1rem;
  left: 1rem;
  padding: 0.8rem 1rem;
  background: var(--color-gold-bright);
  color: var(--color-on-accent);
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform 0.25s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.4rem;
  color: var(--color-accent-text);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 2.5rem;
  height: 1px;
  content: "";
  background: currentColor;
}

.text-gold {
  color: var(--color-accent-text);
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  color: var(--color-white-soft);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.meta-line span {
  color: var(--color-accent-text);
}

.meta-line span::after {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 1rem;
  border-radius: 50%;
  vertical-align: middle;
  content: "";
  background: currentColor;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.text-link::after {
  position: absolute;
  right: 0;
  bottom: -0.45rem;
  left: 0;
  height: 1px;
  content: "";
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-premium);
}

.text-link {
  position: relative;
}

.text-link:hover::after,
.text-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.arrow-icon {
  display: inline-grid;
  width: 1.2rem;
  height: 1.2rem;
  place-items: center;
  transition: transform 0.4s var(--ease-premium);
}

a:hover .arrow-icon,
button:hover .arrow-icon {
  transform: translate3d(3px, -3px, 0);
}

.button {
  position: relative;
  display: inline-flex;
  min-height: 3.55rem;
  padding: 0.9rem 1.35rem;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  overflow: hidden;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.69rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.45s var(--ease-premium), border-color 0.45s var(--ease-premium), background 0.45s var(--ease-premium), transform 0.5s var(--ease-premium);
}

.button::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -35%;
  width: 20%;
  content: "";
  background: rgba(var(--color-white-rgb), 0.4);
  filter: blur(12px);
  opacity: 0;
  transform: skewX(-25deg);
}

.button:hover::before {
  animation: button-sweep 0.9s ease;
}

.button > * {
  position: relative;
  z-index: 1;
}

.button--gold {
  background: var(--color-gold-bright);
  color: var(--color-on-accent);
}

.button--gold:hover {
  background: var(--color-white);
}

.button--ghost {
  border-color: rgba(var(--color-white-rgb), 0.36);
  background: rgba(var(--color-black-rgb), 0.28);
  backdrop-filter: blur(12px);
}

.button--ghost:hover,
.button--outline:hover {
  border-color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.08);
}

.button--outline {
  border-color: var(--color-line-gold);
  background: transparent;
}

.button--compact {
  min-height: 2.85rem;
  padding-inline: 1rem;
  font-size: 0.61rem;
}

/* Header / Navigation */
.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(var(--color-black-rgb), 0.58), transparent);
  transition: height 0.55s var(--ease-premium), background 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease;
}

.site-header.is-scrolled {
  height: 72px;
  border-color: var(--color-line);
  background: rgba(var(--color-black-soft-rgb), 0.83);
  box-shadow: 0 14px 44px rgba(var(--shadow-rgb), 0.38);
  backdrop-filter: blur(22px) saturate(115%);
}

.site-header__inner {
  display: grid;
  height: 100%;
  grid-template-columns: minmax(190px, 0.85fr) auto minmax(145px, 0.65fr);
  align-items: center;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 0.7rem;
}

/* Das Logo liegt beschnitten vor (kein transparenter Rand mehr).
   Es wird daher proportional eingepasst statt vergroessert und
   beschnitten - sonst wuerde das Wappen selbst angeschnitten. */
.brand-mark {
  position: relative;
  display: grid;
  width: 2.6rem;
  height: 3rem;
  place-items: center;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-copy strong {
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 1.07rem;
  font-weight: 500;
  letter-spacing: 0.045em;
}

.brand-copy strong span {
  color: var(--color-accent-text);
}

.brand-copy small {
  margin-top: 0.28rem;
  color: var(--color-accent-text);
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.desktop-nav ul {
  display: flex;
  margin: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.8vw, 2rem);
}

.desktop-nav a {
  position: relative;
  display: block;
  padding-block: 1rem;
  color: rgba(var(--color-white-rgb), 0.72);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.3s ease;
}

.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0.45rem;
  left: 0;
  height: 1px;
  content: "";
  background: var(--color-gold-bright);
  transform: scaleX(0);
  transition: transform 0.4s var(--ease-premium);
}

.desktop-nav a:hover,
.desktop-nav a[aria-current="page"] {
  color: var(--color-white);
}

.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.header-cta {
  justify-self: end;
}

.menu-toggle {
  display: none;
}

.mobile-menu {
  position: fixed;
  z-index: 900;
  inset: 0;
  visibility: hidden;
  background: rgba(var(--color-black-rgb), 0.98);
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s 0.45s;
}

.mobile-menu__network,
.mobile-menu__network canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mobile-menu__inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 100%;
  padding-top: 9rem;
  padding-bottom: 3rem;
  flex-direction: column;
}

/* Hero */
.hero-stage {
  position: relative;
  z-index: 1;
  height: 132vh;
  min-height: 850px;
}

.hero {
  --hero-progress: 0;
  --mouse-x: 0;
  --mouse-y: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 680px;
  overflow: hidden;
  background: var(--color-black);
  border-radius: calc(var(--hero-progress) * 2.5rem);
  opacity: calc(1 - var(--hero-progress) * 0.2);
  perspective: 1200px;
  transform: scale(calc(1 - var(--hero-progress) * 0.055)) rotateX(calc(var(--hero-progress) * 2.2deg)) translate3d(0, calc(var(--hero-progress) * 2rem), 0);
  transform-origin: center top;
}

.hero::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  content: "";
  background: rgba(var(--color-black-rgb), calc(var(--hero-progress) * 0.45));
}

.motion-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.hero__background {
  z-index: 0;
  background: var(--color-black);
  transform: translate3d(calc(var(--mouse-x) * -4px), calc(var(--mouse-y) * -3px), 0) scale(1.03);
}

.hero__image {
  z-index: 1;
  left: 17%;
  transform: translate3d(calc(var(--mouse-x) * -10px), calc(var(--mouse-y) * -7px), 0) scale(calc(1.07 + var(--hero-progress) * 0.025));
}

.hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: saturate(0.75) contrast(1.06) var(--media-filter, );
}

.hero__image::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, var(--color-black) 0%, rgba(var(--color-black-rgb), 0.84) 16%, rgba(var(--color-black-rgb), 0.2) 48%, rgba(var(--color-black-rgb), 0.1) 76%, rgba(var(--color-black-rgb), 0.64) 100%),
    linear-gradient(0deg, rgba(var(--color-black-rgb), 0.85), transparent 42%, rgba(var(--color-black-rgb), 0.12));
}

.hero__light {
  z-index: 2;
  top: -20%;
  left: 26%;
  width: 68%;
  height: 75%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--color-gold-bright-rgb), 0.16), rgba(var(--color-gold-rgb), 0.035) 38%, transparent 68%);
  mix-blend-mode: screen;
  transform: translate3d(calc(var(--mouse-x) * 20px), calc(var(--mouse-y) * 13px), 0);
}

.hero__grain {
  z-index: 3;
  opacity: 0.06;
  background-image: radial-gradient(circle, rgba(255, 222, 160, 0.75) 0 0.8px, transparent 0.9px);
  background-size: 48px 48px;
  transform: translate3d(calc(var(--mouse-x) * 9px), calc(var(--mouse-y) * 7px), 0);
  mask-image: linear-gradient(to right, transparent, #000 50%, transparent);
}

.hero__network {
  z-index: 3;
  left: 56%;
  opacity: 0.72;
  transform: translate3d(calc(var(--mouse-x) * 15px), calc(var(--mouse-y) * 11px), 0);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}

.network-decoration,
.network-decoration canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.network-hex {
  position: absolute;
  width: 8rem;
  aspect-ratio: 1;
  border: 1px solid rgba(var(--color-gold-rgb), 0.16);
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
}

.network-hex--one {
  top: 18%;
  right: 12%;
}

.network-hex--two {
  right: 26%;
  bottom: 13%;
  width: 4rem;
}

.hero__hex {
  z-index: 4;
  top: 16%;
  right: 9%;
  bottom: auto;
  left: auto;
  width: clamp(10rem, 16vw, 17rem);
  aspect-ratio: 1;
  transform: translate3d(calc(var(--mouse-x) * 24px), calc(var(--mouse-y) * 17px), 0) rotate(calc(var(--mouse-x) * 2deg));
}

.hero__hex-ring,
.hero__hex::before,
.hero__hex::after {
  position: absolute;
  inset: 7%;
  border: 1px solid rgba(var(--color-gold-bright-rgb), 0.34);
  clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%);
  content: "";
}

.hero__hex::before {
  inset: 17%;
  border-color: rgba(var(--color-white-rgb), 0.18);
}

.hero__hex::after {
  inset: 28%;
  border-color: rgba(var(--color-gold-bright-rgb), 0.75);
}

.hero__hex-core {
  position: absolute;
  z-index: 2;
  inset: 38%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-gold-bright);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 0.9rem;
}

.hero__hex i {
  position: absolute;
  z-index: 4;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 0 16px rgba(var(--color-white-rgb), 0.8);
}

.hero__hex i:nth-of-type(1) { top: 7%; left: 50%; }
.hero__hex i:nth-of-type(2) { top: 27%; right: 7%; }
.hero__hex i:nth-of-type(3) { right: 7%; bottom: 27%; }
.hero__hex i:nth-of-type(4) { bottom: 7%; left: 50%; }
.hero__hex i:nth-of-type(5) { bottom: 27%; left: 7%; }
.hero__hex i:nth-of-type(6) { top: 27%; left: 7%; }

.hero__content {
  position: relative;
  z-index: 6;
  display: flex;
  height: 100%;
  padding-top: var(--header-height);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  transform: translate3d(calc(var(--mouse-x) * 5px), calc(var(--mouse-y) * 3px), 0);
}

.hero__eyebrow span {
  display: inline-grid;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--color-line-gold);
  place-items: center;
  color: var(--color-white);
  font-size: 0.56rem;
}

.hero__content h1 {
  /* Die Zeilenlaenge wird nicht mehr allein ueber ch begrenzt, weil ch
     von der tatsaechlich geladenen Schrift abhaengt. Ohne die schmale
     Display-Schrift lief die laengste Zeile sonst rechts aus dem Bild. */
  max-width: min(100%, 15ch);
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.9rem, 8.4vw, 10.7rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.82;
  text-transform: uppercase;
  overflow-wrap: normal;
  hyphens: manual;
}

.headline-line {
  display: block;
  max-width: 100%;
  overflow: clip visible;
  padding-block: 0.07em;
}

.headline-line > span {
  display: block;
  max-width: 100%;
}

.headline-line--gold {
  color: var(--color-accent-text);
}

.hero__subtitle {
  margin-bottom: 2rem;
  color: var(--color-white-soft);
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  letter-spacing: 0.01em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.hero__ui {
  z-index: 6;
  top: auto;
  bottom: 2.2rem;
  left: 50%;
  display: flex;
  width: var(--shell);
  height: auto;
  align-items: flex-end;
  justify-content: space-between;
  transform: translateX(-50%);
}

.hero__index {
  display: flex;
  width: 7.5rem;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.63rem;
}

.hero__index span {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--color-gold-bright) 36%, rgba(var(--color-white-rgb), 0.25) 36%);
}

.hero__index small,
.hero__scroll {
  color: var(--color-muted);
}

.hero__scroll {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__scroll i {
  position: relative;
  width: 1px;
  height: 3rem;
  overflow: hidden;
  background: rgba(var(--color-white-rgb), 0.2);
}

.hero__scroll i::after {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--color-gold-bright);
  transform: translateY(-100%);
}

.hero__social {
  display: flex;
  gap: 0.7rem;
}

.hero__social span {
  display: grid;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  place-items: center;
  color: var(--color-white-soft);
  font-size: 0.48rem;
  font-weight: 800;
}

.social-icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-icon__fill {
  fill: currentColor;
  stroke: none;
}

/* Section heading */
.section-heading {
  display: flex;
  margin-bottom: clamp(3rem, 6vw, 5.5rem);
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
}

.section-heading > div {
  min-width: 0;
}

.section-heading h2,
.story-copy h2,
.split-intro h2,
.form-layout h2,
.training-layout h2,
.contact-intro h2,
.contact-layout h3 {
  max-width: 14ch;
  margin-bottom: 0;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.2vw, 7rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.88;
  text-transform: uppercase;
}

/* Match center */
.match-center {
  background: linear-gradient(to bottom, transparent, var(--color-black) 9rem);
}

.next-match {
  position: relative;
  padding: clamp(1.5rem, 3.8vw, 3.5rem);
  overflow: hidden;
  border: 1px solid var(--color-line-gold);
  background:
    linear-gradient(110deg, rgba(var(--color-gold-rgb), 0.05), transparent 35%),
    rgba(var(--color-anthracite-rgb), 0.94);
  box-shadow: var(--shadow-deep);
}

.next-match::before,
.next-match::after {
  position: absolute;
  pointer-events: none;
  content: "";
}

.next-match::before {
  top: 0;
  right: 0;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold-bright));
}

.next-match::after {
  top: -45%;
  right: -10%;
  width: 36rem;
  height: 36rem;
  border: 1px solid rgba(var(--color-gold-rgb), 0.07);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(var(--color-gold-rgb), 0.018), 0 0 0 10rem rgba(var(--color-gold-rgb), 0.012);
}

.next-match__topline,
.next-match__actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.next-match__topline {
  padding-bottom: 1.7rem;
  border-bottom: 1px solid var(--color-line);
}

.next-match__topline p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.next-match__topline p span {
  margin-right: 1rem;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

.live-pulse {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-white-soft);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.live-pulse i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold-bright);
  box-shadow: 0 0 0 5px rgba(var(--color-gold-bright-rgb), 0.12);
}

.next-match__stage {
  position: relative;
  z-index: 2;
  display: grid;
  padding-block: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr) minmax(200px, 0.72fr) minmax(285px, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.6vw, 3rem);
}

.match-club {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 1rem;
}

.match-club--away {
  flex-direction: row-reverse;
  text-align: right;
}

.match-club h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 0.92;
}

.club-crest {
  position: relative;
  display: grid;
  width: clamp(4rem, 6vw, 5.8rem);
  flex: 0 0 auto;
  aspect-ratio: 0.82;
  place-items: center;
  border: 1px solid var(--color-gold);
  background: linear-gradient(145deg, var(--color-anthracite-light), var(--color-black));
  clip-path: polygon(50% 0, 92% 15%, 86% 72%, 50% 100%, 14% 72%, 8% 15%);
}

.club-crest::before {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(var(--color-white-rgb), 0.23);
  content: "";
  clip-path: inherit;
}

.club-crest__inner {
  position: relative;
  z-index: 2;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: 0.03em;
}

.club-crest__line {
  position: absolute;
  width: 45%;
  height: 1px;
  background: var(--color-gold);
}

.club-crest__line--a { transform: rotate(30deg); }
.club-crest__line--b { transform: rotate(-30deg); }

.match-versus {
  display: flex;
  width: 2rem;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.match-versus i {
  width: 1px;
  height: 2rem;
  background: var(--color-line-gold);
}

.match-meta {
  padding-left: clamp(1rem, 2vw, 2.2rem);
  border-left: 1px solid var(--color-line);
}

.match-meta p,
.match-meta span {
  display: block;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.match-meta strong {
  display: block;
  margin-block: 0.25rem;
  font-size: 1.1rem;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.countdown > div {
  display: flex;
  min-width: 0;
  padding: 0.75rem 0.3rem;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--color-line);
  background: rgba(var(--color-black-rgb), 0.22);
}

.countdown strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2vw, 2.2rem);
  font-weight: 500;
  line-height: 1;
}

.countdown span {
  margin-top: 0.25rem;
  color: var(--color-muted);
  font-size: 0.47rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.next-match__actions {
  padding-top: 1.6rem;
  border-top: 1px solid var(--color-line);
}

.match-ribbon {
  display: grid;
  padding-top: 2rem;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.match-ribbon > div {
  min-width: 0;
}

.match-ribbon .eyebrow,
.competition-list .eyebrow,
.schedule-columns .eyebrow {
  margin-bottom: 1rem;
  color: var(--color-muted);
}

.result-line {
  display: grid;
  min-height: 3.6rem;
  padding-block: 0.75rem;
  grid-template-columns: minmax(8rem, 0.8fr) minmax(11rem, 1fr) minmax(7rem, 0.7fr);
  align-items: center;
  gap: 1.1rem;
  border-bottom: 1px solid var(--color-line);
}

.result-line > span,
.result-line > small {
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.result-line > small {
  text-align: right;
}

.result-line p {
  display: grid;
  margin: 0;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
  text-align: center;
}

.result-line b {
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.result-line strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
}

/* News */
.home-news {
  background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.025), transparent 36%);
}

.editorial-news {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.8fr);
  gap: clamp(1.4rem, 3vw, 3.5rem);
}

.featured-story,
.compact-story,
.news-topstory,
.news-row,
.related-story {
  position: relative;
  display: block;
  min-width: 0;
}

.news-copy,
.story-copy {
  min-width: 0;
}

.news-media {
  position: relative;
  overflow: hidden;
  background: var(--color-anthracite);
}

.news-media::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(var(--color-black-rgb), 0.56), transparent 45%);
  transition: opacity 0.6s ease;
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.68) contrast(1.05) var(--media-filter, );
  transition: transform 1.1s var(--ease-premium), filter 0.7s ease;
}

.featured-story:hover .news-media img,
.compact-story:hover .news-media img,
.news-topstory:hover .news-media img,
.news-row:hover .news-media img,
.related-story:hover .news-media img {
  filter: saturate(0.9) contrast(1.05) var(--media-filter, );
  transform: scale(1.045);
}

.featured-story .news-media {
  aspect-ratio: 1.55;
}

.featured-story .news-copy {
  position: relative;
  width: 88%;
  margin-top: -6rem;
  padding: clamp(1.5rem, 3vw, 2.8rem);
  border-top: 1px solid var(--color-line-gold);
  background: rgba(var(--color-black-soft-rgb), 0.94);
  backdrop-filter: blur(14px);
}

.news-copy h3 {
  margin-bottom: 0.9rem;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 0.95;
  text-transform: uppercase;
}

.news-copy > p:not(.meta-line) {
  max-width: 58ch;
  margin-bottom: 1.5rem;
  color: var(--color-white-soft);
}

.story-stack {
  display: flex;
  flex-direction: column;
}

.compact-story {
  display: grid;
  padding-block: 1.25rem;
  grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.4rem;
  border-bottom: 1px solid var(--color-line);
}

.compact-story:first-child {
  padding-top: 0;
}

.compact-story .news-media {
  aspect-ratio: 1.1;
}

.compact-story .news-copy h3 {
  margin-bottom: 0.5rem;
  font-size: clamp(1.35rem, 2vw, 2.15rem);
}

.compact-story .news-copy > p:not(.meta-line),
.compact-story .text-link {
  display: none;
}

/* Stats */
.stats-section {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.stats-section > .network-decoration {
  opacity: 0.34;
  mask-image: linear-gradient(90deg, transparent, #000, transparent);
}

.stats-strip {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 13rem;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}

.stat {
  position: relative;
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-line);
  text-align: center;
}

.stat:first-child {
  border-left: 1px solid var(--color-line);
}

.stat strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  font-weight: 500;
  line-height: 0.9;
}

.stat span {
  margin-top: 0.7rem;
  color: var(--color-white-soft);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Teams slider */
.teams-showcase {
  overflow: hidden;
}

.slider-shell {
  position: relative;
}

.drag-track {
  display: flex;
  width: 100%;
  padding-inline: max(4vw, calc((100vw - 1500px) / 2));
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  cursor: grab;
  touch-action: pan-x pan-y;
}

.drag-track::-webkit-scrollbar {
  display: none;
}

.drag-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.team-panel {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  width: clamp(19rem, 27vw, 31rem);
  min-width: clamp(19rem, 27vw, 31rem);
  aspect-ratio: 0.76;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: var(--color-anthracite);
  scroll-snap-align: start;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: border-color 0.5s ease, transform 0.6s var(--ease-premium);
}

.team-panel:hover {
  border-color: var(--color-gold);
}

.team-panel__image,
.team-panel__shade {
  position: absolute;
  inset: 0;
}

.team-panel__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35) saturate(0.72) contrast(1.07) var(--media-filter, );
  transition: transform 1.1s var(--ease-premium), filter 0.7s ease;
}

.team-panel:hover .team-panel__image img {
  filter: grayscale(0) saturate(0.9) contrast(1.06) var(--media-filter, );
  transform: scale(1.05);
}

.team-panel__shade {
  background: linear-gradient(to top, rgba(var(--color-black-rgb), 0.98), rgba(var(--color-black-rgb), 0.03) 64%), linear-gradient(90deg, rgba(var(--color-black-rgb), 0.35), transparent);
}

.team-panel__number {
  position: absolute;
  top: -1rem;
  right: -0.4rem;
  color: rgba(var(--color-white-rgb), 0.07);
  font-family: var(--font-display);
  font-size: clamp(7rem, 11vw, 12rem);
  line-height: 1;
  transition: color 0.5s ease, transform 0.8s var(--ease-premium);
}

.team-panel:hover .team-panel__number {
  color: rgba(var(--color-gold-bright-rgb), 0.14);
  transform: translate3d(-0.6rem, 0.8rem, 0);
}

.team-panel__copy {
  position: absolute;
  z-index: 2;
  right: 2rem;
  bottom: 2rem;
  left: 2rem;
}

.team-panel__copy p,
.team-panel__copy span {
  margin-bottom: 0.6rem;
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.team-panel__copy h3 {
  margin-bottom: 1.3rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 4.3rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.slider-controls {
  display: grid;
  padding-top: 2rem;
  grid-template-columns: auto minmax(16rem, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.slider-controls__navigation {
  display: grid;
  grid-template-columns: 2.75rem minmax(8rem, 1fr) 2.75rem;
  align-items: center;
  gap: 0.75rem;
}

.slider-controls__button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: rgba(var(--color-white-rgb), 0.015);
  color: var(--color-white);
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.slider-controls__button:hover:not(:disabled) {
  border-color: var(--color-gold);
  color: var(--color-accent-text);
  transform: scale(1.05);
}

.slider-controls__button:disabled {
  cursor: default;
  opacity: 0.28;
}

.slider-controls__range {
  position: relative;
  display: block;
  height: 2.75rem;
}

.slider-controls__range > i {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: var(--color-line);
  transform: translateY(-50%);
}

.slider-controls__range > i b {
  position: absolute;
  inset: 0;
  background: var(--color-gold-bright);
  transform: scaleX(0.025);
  transform-origin: left;
}

.slider-controls__range input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  appearance: none;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: ew-resize;
}

.slider-controls__range input::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}

.slider-controls__range input::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.44rem;
  appearance: none;
  border: 2px solid var(--color-gold-bright);
  border-radius: 50%;
  background: var(--color-black);
  box-shadow: 0 0 0 4px rgba(var(--color-gold-bright-rgb), 0.1);
}

.slider-controls__range input::-moz-range-track {
  height: 2px;
  border: 0;
  background: transparent;
}

.slider-controls__range input::-moz-range-thumb {
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--color-gold-bright);
  border-radius: 50%;
  background: var(--color-black);
  box-shadow: 0 0 0 4px rgba(var(--color-gold-bright-rgb), 0.1);
}

.slider-controls__range input:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
}

.slider-controls output {
  min-width: 3.9rem;
  color: var(--color-white-soft);
  text-align: right;
}

/* Story / editorial split */
.story-section {
  border-top: 1px solid var(--color-line);
  background: linear-gradient(120deg, rgba(var(--color-gold-rgb), 0.035), transparent 40%);
}

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.story-layout--reverse {
  grid-template-columns: minmax(360px, 0.8fr) minmax(0, 1.08fr);
}

.story-visual {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  min-height: clamp(31rem, 50vw, 51rem);
  overflow: hidden;
  border: 1px solid var(--color-line);
  transform: perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform 0.7s var(--ease-premium);
}

.story-visual::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top right, rgba(var(--color-black-rgb), 0.7), transparent 54%);
}

/* Der Rahmen hat nur eine Mindesthoehe, keine feste Hoehe. Eine
   Prozenthoehe am Bild bleibt dadurch wirkungslos und das Bild fiel auf
   sein Seitenverhaeltnis zurueck - es fuellte den Rahmen nur zur Haelfte.
   Absolute Positionierung loest das unabhaengig von der Rahmenhoehe. */
.story-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05) var(--media-filter, );
}

.story-visual .network-decoration {
  z-index: 2;
  opacity: 0.58;
}

.story-visual__label {
  position: absolute;
  z-index: 3;
  bottom: 2rem;
  left: 2rem;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 0.95;
  text-transform: uppercase;
}

.story-copy h2 {
  margin-bottom: 2rem;
  overflow-wrap: anywhere;
}

.story-lead {
  max-width: 43ch;
  margin-bottom: 2.6rem;
  color: var(--color-white-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
}

.value-lines {
  margin-bottom: 2.5rem;
}

.value-lines li {
  display: grid;
  padding-block: 1rem;
  grid-template-columns: 2rem minmax(8rem, 0.55fr) 1fr;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 1px solid var(--color-line);
}

.value-lines li > span {
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 800;
}

.value-lines strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.value-lines p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.82rem;
}

/* Partners */
.partner-teaser {
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}

.partner-teaser__top > p {
  max-width: 45ch;
  margin: -2.5rem 0 3.5rem auto;
  color: var(--color-white-soft);
}

.sponsor-marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.sponsor-marquee__track {
  display: flex;
  width: max-content;
}

.sponsor-wordmark {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 18rem;
  min-height: 8rem;
  padding-inline: 2.5rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-line);
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.45s ease, filter 0.45s ease, background 0.45s ease;
}

.sponsor-wordmark:hover {
  background: rgba(var(--color-gold-rgb), 0.04);
  opacity: 1;
  filter: none;
}

.sponsor-wordmark b {
  font-size: 1rem;
  letter-spacing: 0.09em;
}

.sponsor-wordmark small {
  margin-top: 0.2rem;
  color: var(--color-accent-text);
  font-size: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.sponsor-wordmark--logo img {
  width: min(10rem, 82%);
  max-height: 4.5rem;
  object-fit: contain;
}

/* Campaign CTA */
.campaign-cta {
  position: relative;
  min-height: min(82vh, 860px);
  overflow: hidden;
}

.campaign-cta__image,
.campaign-cta__shade,
.campaign-cta > .network-decoration {
  position: absolute;
  inset: -5% 0;
}

.campaign-cta__image img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.76) contrast(1.08) var(--media-filter, );
}

.campaign-cta__shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.96), rgba(var(--color-black-rgb), 0.42) 52%, rgba(var(--color-black-rgb), 0.28)), linear-gradient(to top, rgba(var(--color-black-rgb), 0.72), transparent 45%);
}

.campaign-cta > .network-decoration {
  z-index: 2;
  left: 50%;
  opacity: 0.65;
}

.campaign-cta__content {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: min(82vh, 860px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

.campaign-cta h2 {
  max-width: 100%;
  margin-bottom: 1.4rem;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.8;
  text-transform: uppercase;
}

.campaign-cta h2 span {
  color: var(--color-accent-text);
}

.campaign-cta__content > p:not(.eyebrow) {
  margin-bottom: 2rem;
  color: var(--color-white-soft);
  font-size: 1.1rem;
}

.campaign-cta__content > div {
  display: flex;
  gap: 0.75rem;
}

/* Footer */
.site-footer {
  position: relative;
  padding-top: clamp(5rem, 9vw, 9rem);
  overflow: hidden;
  border-top: 1px solid var(--color-line-gold);
  background: var(--color-black-soft);
}

.footer-ghost {
  position: absolute;
  right: -1vw;
  bottom: -0.12em;
  left: -1vw;
  color: rgba(var(--color-white-rgb), 0.018);
  font-family: var(--font-display);
  font-size: clamp(6rem, 17vw, 19rem);
  letter-spacing: -0.02em;
  line-height: 0.7;
  text-align: center;
  white-space: nowrap;
}

.footer-grid {
  position: relative;
  z-index: 2;
  display: grid;
  padding-bottom: 6rem;
  grid-template-columns: minmax(260px, 1.6fr) repeat(3, 0.7fr) minmax(130px, 0.65fr);
  gap: clamp(2rem, 4vw, 5rem);
}

.brand--footer .brand-mark {
  width: 3.5rem;
  height: 4rem;
}

.brand--footer .brand-copy strong {
  font-size: 1.5rem;
}

.footer-brand > p {
  max-width: 30ch;
  margin: 1.4rem 0 0;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.footer-column > p {
  margin-bottom: 1.3rem;
  color: var(--color-accent-text);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-column li + li {
  margin-top: 0.7rem;
}

.footer-column a {
  color: var(--color-white-soft);
  font-size: 0.77rem;
  transition: color 0.25s ease;
}

.footer-column a:hover {
  color: var(--color-white);
}

.footer-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.footer-social li + li {
  margin: 0;
}

.footer-social a {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  place-items: center;
  font-size: 0.55rem;
  font-weight: 800;
}

.footer-social a:hover {
  border-color: var(--color-gold);
}

.footer-bottom {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 4.8rem;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-muted);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Inner page hero */
.inner-hero {
  position: relative;
  display: flex;
  min-height: min(88vh, 900px);
  padding-top: var(--header-height);
  overflow: hidden;
  align-items: flex-end;
}

.inner-hero__image,
.inner-hero__shade,
.inner-hero > .network-decoration {
  position: absolute;
  inset: -5% 0;
}

.inner-hero__image img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.62) contrast(1.08) var(--media-filter, );
}

.inner-hero__shade {
  z-index: 1;
  background: linear-gradient(to top, rgba(var(--color-black-rgb), 1), rgba(var(--color-black-rgb), 0.44) 58%, rgba(var(--color-black-rgb), 0.3)), linear-gradient(90deg, rgba(var(--color-black-rgb), 0.92), transparent 65%);
}

.inner-hero > .network-decoration {
  z-index: 2;
  left: 50%;
  opacity: 0.58;
}

.inner-hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(7rem, 12vw, 11rem);
}

.inner-hero h1 {
  max-width: 13ch;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(4.2rem, 9vw, 10rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.81;
  text-transform: uppercase;
}

.inner-hero h1 span {
  display: block;
}

.inner-hero__subtitle {
  max-width: 48ch;
  color: var(--color-white-soft);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.inner-hero__rail {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 2.2rem;
  left: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--color-muted);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.inner-hero__rail i {
  width: 5rem;
  height: 1px;
  background: var(--color-line-gold);
}

.fallback-notice {
  position: fixed;
  z-index: 1100;
  right: 0;
  bottom: 1rem;
  left: 0;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--color-line-gold);
  background: rgba(var(--color-black-soft-rgb), 0.94);
  color: var(--color-white-soft);
  font-size: 0.78rem;
  text-align: center;
  backdrop-filter: blur(14px);
}

/* Verein */
.history-section {
  overflow: hidden;
}

/* Die Spaltenzahl war fest auf fuenf gesetzt. Sobald der Verein im CMS
   eine sechste Station ergaenzte, brach die Zeitleiste um. Sie passt
   sich jetzt an die tatsaechliche Zahl der Eintraege an. */
.history-line {
  position: relative;
  display: grid;
  gap: 2.4rem 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.history-line::before {
  position: absolute;
  top: 3.15rem;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--color-gold-bright), var(--color-line-gold));
}

.history-stop {
  position: relative;
  padding: 0 1.8rem 0 0;
}

.history-stop > span {
  display: block;
  margin-bottom: 2rem;
  color: var(--color-muted);
  font-size: 0.55rem;
  font-weight: 800;
}

/* Der Marker nimmt die Sechseckform aus dem Vereinswappen auf. */
.history-stop > span::after {
  position: absolute;
  top: 2.72rem;
  left: 0;
  width: 11px;
  height: 12px;
  content: "";
  background: var(--color-gold-bright);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

html[data-hex-motif="false"] .history-stop > span::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  clip-path: none;
}

.history-stop strong {
  display: block;
  margin-bottom: 1rem;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.7vw, 5rem);
  font-weight: 500;
  line-height: 1;
}

.history-stop h3 {
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  text-transform: uppercase;
}

.history-stop p {
  max-width: 24ch;
  color: var(--color-muted);
  font-size: 0.82rem;
}

.values-section {
  border-top: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.values-editorial {
  border-top: 1px solid var(--color-line);
}

.value-item {
  display: grid;
  min-height: 8rem;
  grid-template-columns: 5rem minmax(250px, 0.8fr) 1fr;
  align-items: center;
  gap: 2rem;
  border-bottom: 1px solid var(--color-line);
  transition: background 0.4s ease, padding 0.5s var(--ease-premium);
}

.value-item:hover {
  padding-inline: 1.5rem;
  background: rgba(var(--color-gold-rgb), 0.035);
}

.value-item > span {
  color: var(--color-accent-text);
  font-size: 0.65rem;
  font-weight: 800;
}

.value-item h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 500;
  text-transform: uppercase;
}

.value-item p {
  max-width: 55ch;
  margin: 0;
  color: var(--color-muted);
}

.club-story-banner {
  position: relative;
  min-height: 66vh;
  overflow: hidden;
}

.club-story-banner__image {
  position: absolute;
  inset: 0;
}

.club-story-banner__image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.95), rgba(var(--color-black-rgb), 0.3)), linear-gradient(to top, rgba(var(--color-black-rgb), 0.75), transparent);
}

.club-story-banner__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72);
}

.club-story-banner__content {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 66vh;
  flex-direction: column;
  justify-content: center;
}

.club-story-banner blockquote {
  max-width: 18ch;
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 5.5vw, 6.2rem);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
}

.club-story-banner cite {
  color: var(--color-accent-text);
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Teams and team detail */
.teams-intro {
  border-top: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.split-intro {
  display: grid;
  grid-template-columns: 1.05fr 0.8fr;
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
}

.split-intro > div:last-child > p {
  margin-bottom: 2rem;
  color: var(--color-white-soft);
  font-size: 1.15rem;
}

.team-switcher {
  border-top: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.team-switcher__inner {
  display: grid;
  min-height: 5.2rem;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
}

.team-switcher__overview {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-accent-text);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-switcher__list {
  display: flex;
  min-width: 0;
  padding-block: 1rem;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.team-switcher__list a {
  flex: 0 0 auto;
  padding: 0.65rem 0.85rem;
  border: 1px solid transparent;
  color: var(--color-muted);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.team-switcher__list a:hover {
  color: var(--color-white);
}

.team-switcher__list a.is-active {
  border-color: var(--color-line-gold);
  background: rgba(var(--color-gold-rgb), 0.06);
  color: var(--color-accent-text);
}

#angebote,
#ansprechpersonen,
#termine,
#training {
  scroll-margin-top: calc(var(--header-height) + 4.5rem);
}

.anchor-nav {
  position: sticky;
  z-index: 50;
  top: 72px;
  border-block: 1px solid var(--color-line);
  background: rgba(var(--color-black-soft-rgb), 0.9);
  backdrop-filter: blur(20px);
}

.anchor-nav .shell {
  display: flex;
  min-height: 4rem;
  align-items: center;
  gap: 2rem;
}

.anchor-nav a {
  color: var(--color-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.anchor-nav a:hover {
  color: var(--color-accent-text);
}

.staff-section {
  padding-bottom: 4rem;
}

.staff-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--color-line);
}

.staff-line article {
  display: flex;
  min-height: 8rem;
  padding: 1.5rem;
  align-items: center;
  gap: 1.2rem;
  border-right: 1px solid var(--color-line);
}

.staff-line article:last-child {
  border-right: 0;
}

.staff-line article > span {
  display: grid;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--color-line-gold);
  border-radius: 50%;
  place-items: center;
  color: var(--color-accent-text);
  font-family: var(--font-display);
}

.staff-line h3 {
  margin: 0;
  font-size: 1rem;
}

.staff-line p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.squad-section {
  padding-top: 4rem;
}

.player-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.player-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  aspect-ratio: 0.73;
  overflow: hidden;
  border: 1px solid var(--color-line);
  background: #111;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: border-color 0.4s ease, transform 0.6s var(--ease-premium);
}

.player-card:hover {
  border-color: var(--color-gold);
}

.player-card__image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.player-card__image::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to top, rgba(var(--color-black-rgb), 0.98), transparent 58%);
}

.player-card__image img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1000%;
  max-width: none;
  height: auto;
  filter: saturate(0.65) contrast(1.05) var(--media-filter, );
  transition: transform 0.8s var(--ease-premium), filter 0.5s ease;
}

.player-card--pos-0 .player-card__image img { transform: translate3d(0%, -50%, 0); }
.player-card--pos-1 .player-card__image img { transform: translate3d(-10%, -50%, 0); }
.player-card--pos-2 .player-card__image img { transform: translate3d(-20%, -50%, 0); }
.player-card--pos-3 .player-card__image img { transform: translate3d(-30%, -50%, 0); }
.player-card--pos-4 .player-card__image img { transform: translate3d(-40%, -50%, 0); }
.player-card--pos-5 .player-card__image img { transform: translate3d(-50%, -50%, 0); }
.player-card--pos-6 .player-card__image img { transform: translate3d(-60%, -50%, 0); }
.player-card--pos-7 .player-card__image img { transform: translate3d(-70%, -50%, 0); }
.player-card--pos-8 .player-card__image img { transform: translate3d(-80%, -50%, 0); }
.player-card--pos-9 .player-card__image img { transform: translate3d(-90%, -50%, 0); }

.player-card--scene .player-card__image img {
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

.player-card--scene.player-card--pos-0 .player-card__image img { object-position: 10% center; }
.player-card--scene.player-card--pos-2 .player-card__image img { object-position: 28% center; }
.player-card--scene.player-card--pos-3 .player-card__image img { object-position: 38% center; }
.player-card--scene.player-card--pos-4 .player-card__image img { object-position: 46% center; }
.player-card--scene.player-card--pos-5 .player-card__image img { object-position: 56% center; }
.player-card--scene.player-card--pos-7 .player-card__image img { object-position: 74% center; }
.player-card--scene.player-card--pos-8 .player-card__image img { object-position: 84% center; }
.player-card--scene.player-card--pos-9 .player-card__image img { object-position: 94% center; }

.player-card:hover .player-card__image img {
  filter: saturate(0.88) contrast(1.05) var(--media-filter, );
}

.player-card__number {
  position: absolute;
  z-index: 2;
  top: -1rem;
  right: 0.5rem;
  color: rgba(var(--color-gold-bright-rgb), 0.1);
  font-family: var(--font-display);
  font-size: clamp(6rem, 9vw, 10rem);
  line-height: 1;
  transition: transform 0.7s var(--ease-premium), color 0.5s ease;
}

.player-card:hover .player-card__number {
  color: rgba(var(--color-gold-bright-rgb), 0.2);
  transform: translate3d(-0.5rem, 0.7rem, 0);
}

.player-card__copy {
  position: absolute;
  z-index: 3;
  right: 1.5rem;
  bottom: 1.4rem;
  left: 1.5rem;
}

.player-card__copy p {
  margin-bottom: 0.25rem;
  color: var(--color-accent-text);
  font-size: 0.54rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.player-card__copy h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 2.5rem);
  font-weight: 500;
  line-height: 0.94;
  text-transform: uppercase;
}

.player-card__copy > span {
  position: absolute;
  right: 0;
  bottom: 0;
  color: var(--color-white-soft);
  font-weight: 800;
}

.team-competition,
.standings-section {
  border-top: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.competition-layout {
  display: grid;
  grid-template-columns: 0.85fr 1fr 0.85fr;
  gap: 2rem;
}

.competition-list {
  min-width: 0;
}

.competition-list .result-line,
.schedule-columns .result-line {
  grid-template-columns: 1fr;
  gap: 0.3rem;
}

.competition-list .result-line > small,
.competition-list .result-line > span,
.schedule-columns .result-line > small,
.schedule-columns .result-line > span {
  text-align: left;
}

.league-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--color-line);
  background: rgba(var(--color-black-rgb), 0.18);
}

.league-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
}

.league-table th,
.league-table td {
  padding: 1rem 0.9rem;
  border-bottom: 1px solid var(--color-line);
  text-align: right;
  white-space: nowrap;
}

.league-table th:nth-child(2),
.league-table td:nth-child(2) {
  text-align: left;
}

.league-table thead th {
  color: var(--color-muted);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.league-table tbody th {
  font-weight: 700;
}

.league-table tbody tr:last-child > * {
  border-bottom: 0;
}

.league-table .is-club {
  background: rgba(var(--color-gold-rgb), 0.075);
  color: var(--color-accent-text);
}

.league-table strong {
  font-size: 1rem;
}

.training-section {
  background: linear-gradient(125deg, rgba(var(--color-gold-rgb), 0.04), transparent 45%);
}

.team-metrics {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--color-line-gold);
  background: linear-gradient(115deg, rgba(var(--color-gold-rgb), 0.08), rgba(var(--color-anthracite-rgb), 0.92) 42%);
}

.team-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.team-metrics__grid > div {
  display: flex;
  min-height: 11rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-line);
  text-align: center;
}

.team-metrics__grid > div:first-child {
  border-left: 1px solid var(--color-line);
}

.team-metrics strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 5.6rem);
  font-weight: 500;
  line-height: 0.9;
}

.team-metrics span {
  margin-top: 0.7rem;
  color: var(--color-white-soft);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.training-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}

.training-layout h2 {
  margin-bottom: 1.5rem;
}

.training-layout > div:first-child > p:last-child {
  color: var(--color-muted);
}

.training-list {
  border-top: 1px solid var(--color-line);
}

.training-list > div {
  display: grid;
  padding-block: 0.75rem;
  grid-template-columns: 0.8fr 1fr 1.2fr;
  gap: 0.7rem;
  border-bottom: 1px solid var(--color-line);
  font-size: 0.7rem;
}

.training-list span,
.training-list small {
  color: var(--color-muted);
}

/* Matches */
.next-match-section {
  padding-bottom: 2rem;
}

.next-match--page {
  margin-top: -9rem;
}

.schedule-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 7rem);
}

.schedule-columns > div {
  min-width: 0;
}

.standings-section .league-table-wrap {
  max-width: 1100px;
  margin-inline: auto;
}

.form-section {
  overflow: hidden;
}

.form-layout {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  gap: clamp(3rem, 8vw, 9rem);
}

.form-layout h2 {
  margin-bottom: 1.5rem;
}

.form-layout > div:first-child > p:last-child {
  max-width: 43ch;
  color: var(--color-muted);
}

.form-chart {
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 1px solid var(--color-line);
  background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.06), rgba(var(--color-white-rgb), 0.01));
}

.form-chart svg {
  display: block;
  width: 100%;
  overflow: visible;
}

.form-grid-line {
  fill: none;
  stroke: rgba(var(--color-white-rgb), 0.08);
  stroke-width: 1;
}

.form-curve {
  fill: none;
  stroke: url(#curveGradient);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.form-chart circle {
  fill: var(--color-black);
  stroke: var(--color-gold-bright);
  stroke-width: 3;
}

.form-chart text {
  fill: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 800;
}

/* News index */
.filter-bar {
  display: flex;
  margin-bottom: 4rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-button {
  min-height: 2.8rem;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.filter-button:hover,
.filter-button.is-active {
  border-color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.07);
  color: var(--color-white);
}

.news-topstory {
  display: grid;
  margin-bottom: 6rem;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: end;
  gap: clamp(2rem, 5vw, 5rem);
}

.news-topstory .news-media {
  aspect-ratio: 1.6;
}

.news-topstory .news-copy {
  padding-bottom: 2rem;
}

.news-topstory .news-copy h3 {
  font-size: clamp(3rem, 5.5vw, 6rem);
}

.news-list {
  border-top: 1px solid var(--color-line);
}

.news-list > div[hidden] {
  display: none;
}

.news-row {
  display: grid;
  min-height: 15rem;
  padding-block: 1.4rem;
  grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--color-line);
}

.news-row .news-media {
  aspect-ratio: 1.45;
}

.news-row .news-copy {
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  align-items: center;
  gap: 2rem;
}

.news-row .news-copy h3 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
}

.news-row .news-copy > p:not(.meta-line) {
  margin: 0;
  font-size: 0.87rem;
}

.news-row .text-link {
  white-space: nowrap;
}

.empty-state {
  padding: 3rem;
  border: 1px solid var(--color-line);
  color: var(--color-muted);
  text-align: center;
}

.empty-state--panel {
  min-height: 18rem;
  display: grid;
  place-items: center;
  background: var(--color-anthracite);
}

/* Article */
.reading-progress {
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: rgba(var(--color-white-rgb), 0.08);
}

.reading-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-gold-bright);
  transform: scaleX(0);
  transform-origin: left;
}

.article-hero {
  position: relative;
  display: flex;
  min-height: min(94vh, 980px);
  padding-top: var(--header-height);
  overflow: hidden;
  align-items: flex-end;
}

.article-hero__image,
.article-hero__shade,
.article-hero > .network-decoration {
  position: absolute;
  inset: 0;
}

.article-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.05) var(--media-filter, );
}

.article-hero__shade {
  z-index: 1;
  background: linear-gradient(to top, rgba(var(--color-black-rgb), 1) 5%, rgba(var(--color-black-rgb), 0.4) 70%), linear-gradient(90deg, rgba(var(--color-black-rgb), 0.78), transparent 65%);
}

.article-hero > .network-decoration {
  z-index: 2;
  left: 52%;
  opacity: 0.5;
}

.article-hero__content {
  position: relative;
  z-index: 3;
  padding-bottom: clamp(5rem, 9vw, 9rem);
}

.article-hero h1 {
  max-width: 13ch;
  margin: 1.3rem 0 1.6rem;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8.5vw, 9.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 0.83;
  text-transform: uppercase;
}

.article-hero__content > p:last-child {
  max-width: 54ch;
  margin: 0;
  color: var(--color-white-soft);
  font-size: clamp(1rem, 1.7vw, 1.35rem);
}

.article-body {
  display: grid;
  padding-block: clamp(5rem, 10vw, 10rem);
  grid-template-columns: 6rem minmax(0, 720px) 1fr;
  gap: 3rem;
}

.article-body aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.article-body aside > span {
  margin-bottom: 0.3rem;
  color: var(--color-muted);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.article-body aside a {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  place-items: center;
  color: var(--color-white-soft);
  font-size: 0.54rem;
  font-weight: 800;
}

.article-copy {
  grid-column: 2;
}

.article-copy > p {
  margin-bottom: 2rem;
  color: #c6c2ba;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.85;
}

.article-copy > p:first-child::first-letter {
  float: left;
  margin: 0.1em 0.15em 0 0;
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 4.8rem;
  line-height: 0.78;
}

.article-copy h2 {
  margin: 4rem 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 4.5rem);
  font-weight: 500;
  line-height: 0.95;
  text-transform: uppercase;
}

.article-copy blockquote {
  position: relative;
  margin: 4rem 0;
  padding: 2.2rem 2.5rem;
  border-block: 1px solid var(--color-line-gold);
  color: var(--color-white);
}

.article-copy blockquote::before {
  position: absolute;
  top: -0.25em;
  left: 1rem;
  color: var(--color-accent-text);
  content: "“";
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
}

.article-copy blockquote p {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.article-copy blockquote cite {
  color: var(--color-accent-text);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.related-news {
  border-top: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.related-news__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1rem;
}

.related-story .news-media {
  aspect-ratio: 1.35;
}

.related-story .news-copy {
  padding: 1.4rem 0;
}

.related-story .news-copy h3 {
  font-size: clamp(1.6rem, 2.5vw, 2.8rem);
}

.related-story .news-copy > p:not(.meta-line) {
  display: none;
}

/* Sponsors page */
.sponsor-tiers {
  border-top: 1px solid var(--color-line);
}

.sponsor-tier {
  display: grid;
  min-height: 12rem;
  grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
  align-items: stretch;
  border-bottom: 1px solid var(--color-line);
}

.sponsor-tier > div:first-child {
  display: flex;
  padding: 2rem 2rem 2rem 0;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--color-line);
}

.sponsor-tier > div:first-child span {
  margin-bottom: 0.6rem;
  color: var(--color-accent-text);
  font-size: 0.57rem;
  font-weight: 800;
}

.sponsor-tier h3 {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 2.8vw, 3.35rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.9;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.sponsor-tier__marks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sponsor-tier__marks a {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid var(--color-line);
  isolation: isolate;
}

.sponsor-tier__marks a::before {
  position: absolute;
  z-index: -1;
  width: 170%;
  aspect-ratio: 1;
  top: var(--partner-y, 50%);
  left: var(--partner-x, 50%);
  border-radius: 50%;
  content: "";
  background: radial-gradient(circle, rgba(var(--color-gold-bright-rgb), 0.28), rgba(var(--color-gold-rgb), 0.09) 34%, transparent 68%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.08);
  transition: transform 760ms var(--ease-premium), opacity 380ms ease;
}

.sponsor-tier__marks a > i {
  position: absolute;
  z-index: 3;
  right: 0.8rem;
  bottom: 0.7rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid var(--color-gold-bright);
  border-right: 1px solid var(--color-gold-bright);
  opacity: 0.45;
  transform: translate(-4px, 4px);
  transition: transform 320ms var(--ease-premium), opacity 320ms ease;
}

.sponsor-tier__marks a:hover::before,
.sponsor-tier__marks a:focus-visible::before,
.sponsor-tier__marks a.is-activated::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.sponsor-tier__marks a:hover > i,
.sponsor-tier__marks a:focus-visible > i,
.sponsor-tier__marks a.is-activated > i {
  opacity: 1;
  transform: translate(0, 0);
}

.sponsor-tier__marks a:hover .sponsor-wordmark,
.sponsor-tier__marks a:focus-visible .sponsor-wordmark,
.sponsor-tier__marks a.is-activated .sponsor-wordmark {
  opacity: 1;
  filter: none;
}

.sponsor-tier__marks a:last-child {
  border-right: 0;
}

.sponsor-tier__marks .sponsor-wordmark {
  min-width: 0;
  height: 100%;
  border: 0;
}

.partnership-story {
  border-top: 1px solid var(--color-line);
  background: linear-gradient(120deg, rgba(var(--color-gold-rgb), 0.035), transparent);
}

.partner-benefits {
  margin-bottom: 2.7rem;
}

.partner-benefits li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.8rem;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-white-soft);
}

.partner-benefits li::before {
  position: absolute;
  top: 1.23rem;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--color-gold-bright);
  content: "";
  transform: rotate(30deg);
}

/* Contact */
.contact-intro {
  display: grid;
  margin-bottom: 5rem;
  grid-template-columns: 0.7fr 1fr;
  align-items: end;
  gap: 3rem;
}

.contact-intro .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -1rem;
}

.contact-intro h2 {
  max-width: 10ch;
}

.contact-intro > p:last-child {
  max-width: 48ch;
  margin: 0;
  color: var(--color-white-soft);
  font-size: 1.08rem;
}

.contact-people {
  display: grid;
  margin-bottom: clamp(6rem, 12vw, 12rem);
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--color-line);
}

.contact-people article {
  position: relative;
  min-height: 18rem;
  padding: 2rem;
  border-right: 1px solid var(--color-line);
}

.contact-people article:last-child {
  border-right: 0;
}

.contact-people article > span {
  display: block;
  margin-bottom: 2.5rem;
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 800;
}

.contact-people article > p {
  margin-bottom: 0.4rem;
  color: var(--color-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.contact-people h3 {
  margin-bottom: 1.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 500;
  text-transform: uppercase;
}

.contact-people a,
.contact-people address {
  display: block;
  margin-top: 0.35rem;
  color: var(--color-white-soft);
  font-size: 0.78rem;
}

.contact-people a:hover {
  color: var(--color-accent-text);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) 1.28fr;
  gap: clamp(3rem, 8vw, 9rem);
}

.contact-layout h3 {
  margin-bottom: 3rem;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.contact-social a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-muted);
  font-size: 0.65rem;
  font-weight: 700;
}

.contact-social a span {
  display: grid;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  place-items: center;
  color: var(--color-white);
  font-size: 0.5rem;
}

.contact-form {
  display: grid;
  padding: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr 1fr;
  gap: 1.3rem;
  border: 1px solid var(--color-line-gold);
  background: var(--color-black-soft);
}

.form-trap {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

.form-submit button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

[data-form-status][data-state="success"] {
  color: #8fd6a7;
}

[data-form-status][data-state="error"] {
  color: #ff9c91;
}

.form-field {
  position: relative;
}

.form-field--full,
.form-consent,
.form-submit {
  grid-column: 1 / -1;
}

.form-field label {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--color-muted);
  font-size: 0.57rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  outline: 0;
  background: transparent;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.form-field input,
.form-field select {
  height: 3.4rem;
}

.form-field textarea {
  min-height: 8.5rem;
  padding-block: 0.8rem;
  resize: vertical;
}

.form-field select {
  cursor: pointer;
  color: var(--color-white);
}

.form-field select option,
.form-field select optgroup {
  background: var(--color-white);
  color: #111111;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-gold);
  background: rgba(var(--color-gold-rgb), 0.02);
}

.form-field > span {
  display: none;
  margin-top: 0.4rem;
  color: #d27d6a;
  font-size: 0.65rem;
}

.contact-form.was-validated .form-field input:invalid,
.contact-form.was-validated .form-field textarea:invalid {
  border-color: #d27d6a;
}

.contact-form.was-validated .form-field input:invalid + span,
.contact-form.was-validated .form-field textarea:invalid + span {
  display: block;
}

.form-consent label {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 0.7rem;
}

.form-consent input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.18rem;
  accent-color: var(--color-accent-text);
}

.form-consent a {
  color: var(--color-white-soft);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-gold-rgb), 0.55);
  text-underline-offset: 0.2em;
}

.form-submit {
  display: flex;
  margin-top: 0.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.form-submit p {
  margin: 0;
  color: var(--color-accent-text);
  font-size: 0.72rem;
}

/* Board --------------------------------------------------------- */

.board-teaser {
  border-top: 1px solid var(--color-line);
}

.board-teaser__frame {
  position: relative;
  min-height: min(76vh, 760px);
  display: flex;
  overflow: hidden;
  align-items: flex-end;
  border: 1px solid var(--color-line-gold);
  background: var(--color-black-soft);
}

.board-teaser__image,
.board-teaser__shade,
.board-teaser__frame > .network-decoration {
  position: absolute;
  inset: 0;
}

.board-teaser__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: grayscale(0.38) saturate(0.72) contrast(1.08) var(--media-filter, );
  transform: scale(1.02);
  transition: transform 1.1s var(--ease-premium), filter 700ms ease;
}

.board-teaser__shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(var(--color-black-rgb), 0.97) 0%, rgba(var(--color-black-rgb), 0.78) 43%, rgba(var(--color-black-rgb), 0.14) 78%), linear-gradient(0deg, rgba(var(--color-black-rgb), 0.86), transparent 54%);
}

.board-teaser__frame > .network-decoration {
  z-index: 2;
  left: 48%;
  opacity: 0.58;
}

.board-teaser__copy {
  position: relative;
  z-index: 3;
  max-width: 760px;
  padding: clamp(2rem, 7vw, 7rem);
}

.board-teaser__copy h2 {
  /* 8ch war zu schmal: "ERMÖGLICHT." hat elf Zeichen und wurde umbrochen. */
  max-width: min(100%, 14ch);
  margin-bottom: 1.7rem;
  font-size: clamp(4rem, 8.2vw, 9rem);
  line-height: 0.8;
}

.board-teaser__copy > p:not(.eyebrow) {
  max-width: 48ch;
  margin-bottom: 2.3rem;
  color: var(--color-white-soft);
  font-size: 1.02rem;
}

.board-teaser__index {
  position: absolute;
  z-index: 3;
  top: 2rem;
  right: 2rem;
  display: grid;
  justify-items: end;
  color: var(--color-accent-text);
}

.board-teaser__index span { font-size: 0.5rem; font-weight: 850; letter-spacing: 0.18em; }
.board-teaser__index strong { color: rgba(var(--color-white-rgb), 0.19); font-family: var(--font-display); font-size: clamp(5rem, 11vw, 11rem); font-weight: 500; line-height: 0.85; }
.board-teaser__frame:hover .board-teaser__image img { filter: grayscale(0.08) saturate(0.86) contrast(1.05) var(--media-filter, ); transform: scale(1.065); }

.board-intro {
  border-bottom: 1px solid var(--color-line);
}

.board-roster {
  padding-bottom: var(--section-space);
}

.board-member {
  display: grid;
  min-height: 590px;
  grid-template-columns: minmax(300px, 0.88fr) 1.12fr;
  border-bottom: 1px solid var(--color-line);
}

.board-member--reverse {
  grid-template-columns: 1.12fr minmax(300px, 0.88fr);
}

.board-member--reverse .board-member__portrait { order: 2; }

.board-member__portrait {
  position: relative;
  min-height: 590px;
  overflow: hidden;
  background: var(--color-anthracite);
}

.board-member__portrait::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(0deg, rgba(var(--color-black-rgb), 0.72), transparent 48%);
}

.board-member__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) saturate(0.72);
  transition: transform 900ms var(--ease-premium), filter 600ms ease;
}

.board-member__portrait > span {
  position: absolute;
  z-index: 2;
  right: 1.4rem;
  bottom: 0.5rem;
  color: rgba(var(--color-white-rgb), 0.22);
  font-family: var(--font-display);
  font-size: 7rem;
}

.board-member__copy {
  display: flex;
  padding: clamp(2rem, 6vw, 6rem);
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(130deg, rgba(var(--color-gold-rgb), 0.035), transparent 52%);
}

.board-member__copy h2 {
  max-width: 12ch;
  margin: 0.5rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.2vw, 6.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 0.86;
  text-transform: uppercase;
}

.board-member__copy > strong { color: var(--color-accent-text); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; }
.board-member__copy > p:not(.eyebrow) { max-width: 54ch; margin: 2rem 0; color: var(--color-white-soft); }
.board-member__copy > div { display: flex; flex-wrap: wrap; gap: 1rem; }
.board-member__copy > div a { color: var(--color-muted); font-size: 0.72rem; }
.board-member:hover .board-member__portrait img { filter: grayscale(0) saturate(0.9); transform: scale(1.045); }

/* Legal pages --------------------------------------------------- */

.legal-hero {
  position: relative;
  min-height: min(74vh, 760px);
  display: flex;
  padding-top: var(--header-height);
  overflow: hidden;
  align-items: flex-end;
  border-bottom: 1px solid var(--color-line);
  background: radial-gradient(circle at 82% 24%, rgba(var(--color-gold-rgb), 0.12), transparent 27rem), var(--color-black-soft);
}

.legal-hero > .network-decoration { position: absolute; inset: 0 0 0 48%; opacity: 0.58; }
.legal-hero__ghost { position: absolute; right: -0.03em; bottom: -0.18em; color: rgba(var(--color-white-rgb), 0.025); font-family: var(--font-display); font-size: clamp(8rem, 20vw, 23rem); line-height: 0.75; text-transform: uppercase; white-space: nowrap; }
.legal-hero__inner { position: relative; z-index: 2; padding-bottom: clamp(4rem, 9vw, 8rem); }
.legal-hero h1 { max-width: 11ch; margin: 0.4rem 0 2rem; font-family: var(--font-display); font-size: clamp(4.5rem, 11vw, 11rem); font-weight: 500; letter-spacing: -0.035em; line-height: 0.8; }
.legal-hero__inner > div:last-child { display: grid; max-width: 760px; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; }
.legal-hero__inner > div:last-child p { margin: 0; color: var(--color-white-soft); font-size: 1.05rem; }
.legal-hero__inner > div:last-child span { color: var(--color-accent-text); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }

.legal-document { padding-block: var(--section-space); }
.legal-document__layout { display: grid; grid-template-columns: minmax(180px, 0.3fr) 1fr; gap: clamp(3rem, 8vw, 9rem); align-items: start; }
.legal-document nav { position: sticky; top: calc(var(--header-height) + 2rem); display: grid; border-top: 1px solid var(--color-line); }
.legal-document nav a { padding: 1rem 0; border-bottom: 1px solid var(--color-line); color: var(--color-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.legal-document nav a[aria-current="page"] { color: var(--color-accent-text); }
.legal-document__content { border-top: 1px solid var(--color-line); }
.legal-document__content article { display: grid; grid-template-columns: 3rem 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(2rem, 5vw, 4.5rem) 0; border-bottom: 1px solid var(--color-line); }
.legal-document__content article > span { color: var(--color-accent-text); font-size: 0.6rem; font-weight: 850; }
.legal-document__content h2 { max-width: 18ch; margin-bottom: 1.6rem; font-size: clamp(2rem, 4.8vw, 5.4rem); }
.legal-document__content p { max-width: 78ch; color: var(--color-white-soft); }

.legal-note {
  padding-block: 2rem;
  border-top: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.legal-note p {
  max-width: 78ch;
  margin: 0;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.noscript-message {
  position: fixed;
  z-index: 10002;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-line-gold);
  background: var(--color-anthracite);
  color: var(--color-white);
  text-align: center;
}

/* Mehrspartenverein: Termine, Angebote und Wochenplan */
.event-stage {
  grid-template-columns: minmax(0, 1.45fr) minmax(210px, 0.55fr) minmax(285px, 0.75fr);
}

.event-stage__identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

.event-stage__identity > div {
  min-width: 0;
}

.event-stage__identity p,
.event-stage__identity span {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-stage__identity p {
  margin-bottom: 0.55rem;
  color: var(--color-accent-text);
}

.event-stage__identity h3 {
  max-width: 15ch;
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 5rem);
  font-weight: 500;
  line-height: 0.86;
  text-transform: uppercase;
}

.result-line--event p {
  grid-template-columns: 3.6rem minmax(0, 1fr);
  text-align: left;
}

.result-line--event p b {
  color: var(--color-accent-text);
}

.result-line--event p strong {
  overflow: hidden;
  color: var(--color-white);
  font-size: 1.05rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--color-line);
}

.program-card {
  position: relative;
  display: flex;
  min-height: 23rem;
  padding: clamp(1.5rem, 3vw, 2.8rem);
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--color-line);
  background: linear-gradient(145deg, rgba(var(--color-gold-rgb), 0.07), transparent 45%);
  transition: background 0.45s ease, border-color 0.45s ease;
}

.program-card:last-child {
  border-right: 0;
}

.program-card::before {
  position: absolute;
  top: -0.14em;
  right: -0.03em;
  color: rgba(var(--color-gold-bright-rgb), 0.085);
  content: attr(data-index);
  font-family: var(--font-display);
  font-size: 10rem;
  line-height: 1;
}

.program-card > span {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  color: rgba(var(--color-gold-bright-rgb), 0.17);
  font-family: var(--font-display);
  font-size: clamp(5rem, 9vw, 9rem);
  line-height: 0.8;
}

.program-card > p {
  margin-bottom: 0.6rem;
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.program-card h3 {
  max-width: 12ch;
  margin: 0 0 1.5rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3.7rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.program-card:hover {
  border-color: var(--color-line-gold);
  background: linear-gradient(145deg, rgba(var(--color-gold-rgb), 0.14), transparent 56%);
}

.competition-layout--events {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: stretch;
  gap: clamp(2rem, 6vw, 6rem);
}

.department-contact {
  padding: clamp(1.6rem, 4vw, 3.2rem);
  border: 1px solid var(--color-line-gold);
  background: linear-gradient(135deg, rgba(var(--color-gold-rgb), 0.09), rgba(var(--color-black-rgb), 0.16));
}

.department-contact > span {
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.department-contact h3 {
  margin-block: 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4vw, 4rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.department-contact p {
  margin-bottom: 2rem;
  color: var(--color-muted);
}

.weekly-section {
  border-block: 1px solid var(--color-line);
  background: var(--color-black-soft);
}

.weekly-list {
  border-top: 1px solid var(--color-line);
}

.weekly-row {
  display: grid;
  min-height: 8rem;
  padding-block: 1.25rem;
  grid-template-columns: 3.5rem minmax(180px, 0.8fr) minmax(240px, 1fr) minmax(150px, 0.55fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid var(--color-line);
  transition: padding 0.4s var(--ease-premium), background 0.4s ease;
}

.weekly-row:hover {
  padding-inline: 1.2rem;
  background: rgba(var(--color-gold-rgb), 0.055);
}

.weekly-row > span:first-child {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: 1.4rem;
}

.weekly-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 0.9;
  text-transform: uppercase;
}

.weekly-row p,
.weekly-row small {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.65rem;
}

.weekly-row > div:nth-child(3) {
  display: grid;
  gap: 0.45rem;
}

.weekly-row > div:nth-child(3) p {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) 1fr;
  gap: 1rem;
}

.weekly-row > div:nth-child(3) strong {
  color: var(--color-white-soft);
}

.weekly-row .arrow-icon {
  color: var(--color-accent-text);
}

.offer-finder {
  background: linear-gradient(120deg, rgba(var(--color-gold-rgb), 0.055), transparent 48%);
}

.offer-finder .split-intro > div:last-child > p {
  margin-bottom: 2rem;
}

.offer-finder .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Custom cursor */
.custom-cursor {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  display: grid;
  width: 10px;
  height: 10px;
  pointer-events: none;
  place-items: center;
  border: 1px solid var(--color-gold-bright);
  border-radius: 50%;
  background: rgba(var(--color-gold-bright-rgb), 0.22);
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: width 0.35s var(--ease-premium), height 0.35s var(--ease-premium), margin 0.35s var(--ease-premium), background 0.35s ease, opacity 0.25s ease;
}

.custom-cursor.is-visible {
  opacity: 1;
}

.custom-cursor.is-active {
  width: 62px;
  height: 62px;
  background: rgba(var(--color-black-rgb), 0.76);
  backdrop-filter: blur(8px);
}

.custom-cursor span {
  color: var(--color-white);
  font-size: 0.5rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

@media (hover: hover) and (pointer: fine) {
  [data-drag-slider] {
    cursor: grab;
  }

  [data-drag-slider].is-dragging {
    cursor: grabbing;
  }
}

/* Late cascade guards for the experience layer. */
.has-image-depth img,
.news-media.has-image-depth img,
.team-panel__image.has-image-depth img,
.story-visual.has-image-depth img,
.compass-result__media.has-image-depth img,
.compass-teaser__image.has-image-depth img {
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.02);
}

.has-image-depth:hover img,
.news-media.has-image-depth:hover img,
.team-panel__image.has-image-depth:hover img,
.story-visual.has-image-depth:hover img,
.compass-result__media.has-image-depth:hover img,
.compass-teaser__image.has-image-depth:hover img {
  transform: translate3d(var(--depth-x, 0), var(--depth-y, 0), 0) scale(1.055);
}

.weekly-row {
  position: relative;
  overflow: hidden;
}

.weekly-row > .weekly-row__times p {
  grid-template-columns: minmax(7rem, 0.8fr) minmax(5rem, 1fr) 2rem;
  align-items: center;
}

.sponsor-tier__marks button:last-child {
  border-right: 0;
}

.sponsor-tier__marks button > i {
  position: absolute;
  z-index: 3;
  right: 0.8rem;
  bottom: 0.7rem;
  width: 0.45rem;
  height: 0.45rem;
  border-top: 1px solid var(--color-gold-bright);
  border-right: 1px solid var(--color-gold-bright);
  opacity: 0.45;
  transform: translate(-4px, 4px);
  transition: transform 320ms var(--ease-premium), opacity 320ms ease;
}

.sponsor-tier__marks button:hover > i,
.sponsor-tier__marks button:focus-visible > i,
.sponsor-tier__marks button.is-activated > i {
  opacity: 1;
  transform: translate(0, 0);
}

html[data-navigation-lines="false"] .desktop-nav a::after {
  display: none;
}

html[data-micro-interactions="false"] .cursor-light,
html[data-micro-interactions="false"] .custom-cursor {
  display: none !important;
}

/* ================================================================
   TYPOGRAFIE-SCHUTZ
   Die Display-Groessen sind auf eine schmal laufende Hausschrift
   ausgelegt. Steht diese (noch) nicht zur Verfuegung, greift ein
   breiterer Systemfallback und die Versalzeilen liefen ueber die
   rechte Kante. Die folgenden Regeln begrenzen jede Ueberschrift
   verlaesslich auf ihren Container, unabhaengig von der Schrift.
   ================================================================ */

h1, h2, h3, h4,
.headline-line,
.headline-line > span,
.footer-ghost,
.section-heading h2 {
  max-width: 100%;
  /* Bewusst kein break-word: Es zerlegte lange deutsche Woerter mitten
     im Wort ("STRUKT / UR, DIE"). Ueberschriften werden stattdessen ueber
     ihre Schriftgroesse und eine ausreichende Zeilenbreite gebaendigt. */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
  text-wrap: balance;
}

.footer-ghost {
  overflow: hidden;
}

/* Der schwebende Wochenplan-Button liegt ueber der Fusszeile. Damit die
   letzte Footerzeile nicht verdeckt wird, bekommt sie zusaetzlichen
   Freiraum - auf schmalen Viewports untereinander statt nebeneinander. */
.site-footer .footer-bottom {
  padding-bottom: 5.5rem;
}

@media (max-width: 760px) {
  .site-footer .footer-bottom {
    padding-bottom: 7rem;
  }
}

/* ================================================================
   AUSSTRAHLUNG
   Filmkorn, Formsprache, Kapitelspalte und Farbdisziplin.
   Alle Regler kommen aus dem CMS-Bereich "Ausstrahlung" und werden
   ueber theme.css beziehungsweise Datenattribute am <html> gesetzt.
   ================================================================ */

/* Filmkorn ------------------------------------------------------- */
.film-grain {
  position: fixed;
  z-index: 9990;
  inset: -120px;
  pointer-events: none;
  opacity: var(--grain-opacity, 0.055);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: var(--grain-blend, overlay);
  will-change: transform;
}

html[data-motion="full"] .film-grain {
  animation: grain-drift 7s steps(6) infinite;
}

@keyframes grain-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  16% { transform: translate3d(-14px, 9px, 0); }
  33% { transform: translate3d(11px, -13px, 0); }
  50% { transform: translate3d(-9px, -8px, 0); }
  66% { transform: translate3d(13px, 11px, 0); }
  83% { transform: translate3d(-11px, 6px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .film-grain { animation: none; }
}

/* Farbdisziplin -------------------------------------------------- */
/* Bei aktivierter Zurueckhaltung verlieren rein dekorative Elemente
   ihren Goldton. Die Akzentfarbe bleibt Handlungsaufforderungen,
   aktiven Zustaenden und einzelnen Auszeichnungen vorbehalten. */
html[data-accent-restraint="true"] {
  --color-line-gold: rgba(var(--color-white-rgb), 0.14);
}

html[data-accent-restraint="true"] .eyebrow,
html[data-accent-restraint="true"] .section-heading .eyebrow,
html[data-accent-restraint="true"] .meta-line span:first-child {
  color: rgba(var(--color-white-rgb), 0.62);
}

html[data-accent-restraint="true"] .network-decoration,
html[data-accent-restraint="true"] .network-hex,
html[data-accent-restraint="true"] .hero__hex-ring {
  opacity: 0.4;
}

html[data-accent-restraint="true"] .stat-block strong,
html[data-accent-restraint="true"] .value-card > span {
  color: rgba(var(--color-white-rgb), 0.82);
}

/* Kapitelspalte -------------------------------------------------- */
.chapter-rail {
  position: fixed;
  z-index: 900;
  top: 50%;
  left: 1.55rem;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  transform: translateY(-50%);
  pointer-events: none;
}

html[data-chapter-rail="true"] .chapter-rail {
  display: flex;
}

.chapter-rail span {
  width: 1px;
  height: 1.4rem;
  background: rgba(var(--color-white-rgb), 0.1);
  transition: background 700ms var(--ease-premium), height 700ms var(--ease-premium);
}

.chapter-rail span.is-active {
  height: 2.6rem;
  background: var(--color-gold-bright);
}

@media (max-width: 1320px) {
  .chapter-rail { display: none !important; }
}

/* Sechseck-Motiv ------------------------------------------------- */
/* Portraets nehmen die Sechseckform aus dem Vereinswappen auf. Die Form
   wird auf einer Huelle gesetzt, damit Verlauf und Nummer erhalten
   bleiben. Auf schmalen Viewports bleibt das Rechteck, dort kostet der
   Beschnitt zu viel Bildflaeche. */
@media (min-width: 900px) {
  html[data-hex-motif="true"] .board-member__portrait {
    clip-path: polygon(50% 0%, 100% 22%, 100% 78%, 50% 100%, 0% 78%, 0% 22%);
  }

  html[data-hex-motif="true"] .staff-card figure,
  html[data-hex-motif="true"] .staff-card__media {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
}

html[data-hex-motif="true"] .section-mark {
  display: inline-grid;
  width: 1.85rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid var(--color-line-gold);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: rgba(var(--color-gold-rgb), 0.07);
}

/* Bildunterschriften --------------------------------------------- */
.image-caption {
  display: flex;
  margin-top: 0.85rem;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--color-muted);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.image-caption::before {
  width: 1.6rem;
  height: 1px;
  flex: none;
  background: var(--color-gold);
  content: "";
  transform: translateY(-0.22em);
}

.image-caption em {
  color: rgba(var(--color-white-rgb), 0.55);
  font-style: normal;
}

/* Ziffern gleicher Breite in allen Zaehlwerken -------------------- */
.countdown,
.countdown *,
.stat-block strong,
.club-pulse__clock,
.match-line time,
.plan-fab b,
[data-counter] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Fokus sichtbar und gestaltet ----------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-gold-bright);
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
  outline-offset: 4px;
}

/* ================================================================
   DRUCKAUSGABE
   Vereine drucken Trainingszeiten und Termine aus und haengen sie in
   die Halle. Das Blatt wird daher bewusst gesetzt statt nur entfaerbt.
   ================================================================ */
@media print {
  @page {
    margin: 18mm 16mm 20mm;
  }

  :root {
    --color-black: #ffffff;
    --color-white: #111111;
  }

  html,
  body {
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 10.5pt;
  }

  .film-grain,
  .ambient-mood,
  .page-transition,
  .chapter-rail,
  .custom-cursor,
  .cursor-light,
  .plan-fab,
  .weekly-plan-drawer,
  .partner-stage,
  .network-decoration,
  .site-header,
  .mobile-menu,
  .hero__background,
  .hero__light,
  .reading-progress,
  .noscript-message,
  .footer-ghost,
  .hero__scroll,
  video {
    display: none !important;
  }

  main {
    padding-top: 0 !important;
  }

  /* Kopfzeile des Ausdrucks mit Wappen und Vereinsname */
  main::before {
    display: flex;
    padding-bottom: 6mm;
    margin-bottom: 8mm;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1.5pt solid #111111;
    content: attr(data-print-title);
    font-family: var(--font-display);
    font-size: 17pt;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  * {
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    text-shadow: none !important;
  }

  img {
    max-width: 55mm !important;
    max-height: 40mm !important;
    filter: grayscale(1) contrast(1.05);
  }

  h1, h2, h3 {
    color: #000000 !important;
    page-break-after: avoid;
  }

  section,
  article,
  .weekly-row,
  .training-row,
  .match-line {
    page-break-inside: avoid;
  }

  a {
    text-decoration: none;
  }

  /* Zieladresse ausschreiben, damit der Ausdruck fuer sich steht */
  main a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8pt;
    word-break: break-all;
  }

  .site-footer {
    padding-top: 6mm;
    border-top: 0.5pt solid #999999;
    font-size: 8pt;
  }

  .site-footer .footer-bottom {
    padding-bottom: 0;
  }
}


/* Zitat auf der Vorstandsseite. Ein Satz in grosser Display-Schrift gibt
   dem Verein ein Gesicht statt nur eine Organisationsstruktur. */
.board-member__quote {
  position: relative;
  margin: 1.6rem 0 1.4rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--color-line-gold);
}

.board-member__quote p {
  color: rgba(var(--color-white-rgb), 0.92);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.16;
  text-transform: uppercase;
}

/* ================================================================
   MITGLIEDSCHAFT · Beiträge und Aufnahmeantrag
   ================================================================ */
.membership-rates__intro,
.volunteer-intro,
.schedule-intro {
  max-width: 62ch;
  margin-bottom: 3.4rem;
  color: var(--color-white-soft);
  font-size: 1.02rem;
  line-height: 1.66;
}

.rate-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.rate-card {
  position: relative;
  padding: 2.6rem 2rem 2.2rem;
  background: var(--color-black);
  transition: background 700ms var(--ease-premium);
}

.rate-card:hover {
  background: var(--color-anthracite);
}

.rate-card__index {
  color: var(--color-muted);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.rate-card h3 {
  margin: 1.5rem 0 1.8rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.rate-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.rate-card__price strong {
  color: var(--color-accent-text);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 500;
  line-height: 1;
}

.rate-card__price i {
  color: var(--color-accent-text);
  font-size: 1.1rem;
  font-style: normal;
}

.rate-card__price small {
  margin-left: 0.4rem;
  color: var(--color-muted);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.rate-card__note {
  margin-top: 1.2rem;
  color: var(--color-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* Fortschritt des Antrags */
.membership-progress {
  display: grid;
  padding: 0;
  margin: 0 0 3.2rem;
  gap: 1px;
  background: var(--color-line);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  list-style: none;
}

.membership-progress li {
  padding: 1.7rem 1.4rem;
  background: var(--color-black);
  opacity: 0.42;
  transition: opacity 700ms var(--ease-premium), background 700ms var(--ease-premium);
}

.membership-progress li.is-active,
.membership-progress li.is-done {
  opacity: 1;
}

.membership-progress li.is-active {
  background: var(--color-anthracite);
}

.membership-progress li span {
  display: block;
  color: var(--color-accent-text);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.membership-progress li.is-done span::after {
  margin-left: 0.5rem;
  content: "✓";
}

.membership-progress li strong {
  display: block;
  margin: 0.7rem 0 0.4rem;
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  text-transform: uppercase;
}

.membership-progress li small {
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.membership-step {
  padding: 0;
  border: 0;
  margin: 0;
}

.membership-step legend {
  padding: 0;
  margin-bottom: 2rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.membership-fieldsets .form-grid {
  display: grid;
  gap: 1.5rem 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.membership-fieldsets .field--full {
  grid-column: 1 / -1;
}

.membership-fieldsets .field {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.membership-fieldsets .field > span {
  color: var(--color-muted);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.membership-fieldsets input,
.membership-fieldsets select {
  padding: 0.95rem 1.05rem;
  border: 1px solid var(--color-line);
  background: rgba(var(--color-white-rgb), 0.03);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  transition: border-color 600ms var(--ease-premium), background 600ms var(--ease-premium);
}

.membership-fieldsets input:focus,
.membership-fieldsets select:focus {
  border-color: var(--color-gold);
  background: rgba(var(--color-white-rgb), 0.05);
  outline: none;
}

.membership-legal {
  padding: 1.5rem 1.6rem;
  border-left: 1px solid var(--color-line-gold);
  margin: 2.2rem 0 1.6rem;
  background: rgba(var(--color-white-rgb), 0.02);
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.65;
}

.consent-field {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--color-white-soft);
  font-size: 0.86rem;
  line-height: 1.55;
}

.consent-field input {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  margin-top: 0.2rem;
  accent-color: var(--color-accent-text);
}

.membership-summary {
  display: grid;
  margin: 0 0 2rem;
  gap: 1px;
  background: var(--color-line);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.membership-summary > div {
  padding: 1.15rem 1.3rem;
  background: var(--color-black);
}

.membership-summary dt {
  color: var(--color-muted);
  font-size: 0.53rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.membership-summary dd {
  margin: 0.45rem 0 0;
  font-size: 0.95rem;
}

.membership-controls {
  display: flex;
  align-items: center;
  margin-top: 2.8rem;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
}

.form-feedback {
  margin-top: 1.4rem;
  color: var(--color-muted);
  font-size: 0.86rem;
}

.form-feedback[data-state="success"] { color: var(--color-success); }
.form-feedback[data-state="error"] { color: #d98a6b; }
.form-feedback[data-state="pending"] { color: var(--color-accent-text); }

.membership-fieldsets.is-sent .membership-step,
.membership-fieldsets.is-sent .membership-controls button:not([data-membership-print]) {
  display: none;
}

/* ================================================================
   EHRENAMTSBÖRSE
   ================================================================ */
.filter-bar {
  display: flex;
  margin-bottom: 2.8rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.filter-chip {
  padding: 0.62rem 1.15rem;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: border-color 600ms var(--ease-premium), color 600ms var(--ease-premium);
}

.filter-chip:hover,
.filter-chip.is-active {
  border-color: var(--color-gold);
  color: var(--color-white);
}

.volunteer-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.volunteer-card {
  display: flex;
  padding: 2.4rem 2rem;
  flex-direction: column;
  background: var(--color-black);
  gap: 1.4rem;
}

.volunteer-card.is-urgent {
  background: linear-gradient(160deg, rgba(var(--color-gold-rgb), 0.07), transparent 62%), var(--color-black);
}

.volunteer-card__head {
  display: grid;
  align-items: start;
  gap: 0.4rem 1rem;
  grid-template-columns: auto 1fr;
}

.volunteer-card__index {
  color: var(--color-muted);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  line-height: 1.9;
}

.volunteer-card__head h3 {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
}

.volunteer-card__flag {
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--color-line-gold);
  color: var(--color-accent-text);
  font-size: 0.5rem;
  font-weight: 800;
  grid-column: 2;
  justify-self: start;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.volunteer-card__text {
  color: var(--color-white-soft);
  font-size: 0.9rem;
  line-height: 1.62;
}

.volunteer-card__meta {
  display: grid;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-line);
  margin: 0;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.volunteer-card__meta dt {
  color: var(--color-muted);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.volunteer-card__meta dd {
  margin: 0.4rem 0 0;
  font-size: 0.86rem;
}

.volunteer-card .button {
  margin-top: auto;
  align-self: flex-start;
}

.volunteer-empty,
.schedule-empty {
  padding: 3rem 0;
  color: var(--color-muted);
  text-align: center;
}

/* ================================================================
   HALLENBELEGUNG
   ================================================================ */
.schedule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.schedule-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.schedule-day {
  padding: 1.9rem 1.5rem 2.2rem;
  background: var(--color-black);
  transition: opacity 700ms var(--ease-premium);
}

.schedule-day.is-quiet {
  opacity: 0.42;
}

.schedule-day__title {
  display: flex;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 1.3rem;
  align-items: baseline;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 500;
  text-transform: uppercase;
}

.schedule-day__title span {
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.schedule-day__list {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.schedule-slot {
  display: flex;
  flex-direction: column;
  padding-left: 0.9rem;
  border-left: 1px solid var(--color-line-gold);
  gap: 0.28rem;
}

.schedule-slot time {
  color: var(--color-accent-text);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.schedule-slot strong {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  text-transform: uppercase;
}

.schedule-slot span {
  color: var(--color-muted);
  font-size: 0.76rem;
}

.schedule-slot--empty {
  border-left-color: var(--color-line);
  color: var(--color-muted);
  font-size: 0.78rem;
}

@media print {
  .schedule-grid {
    display: grid !important;
    gap: 4mm;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .schedule-toolbar,
  .filter-bar,
  .membership-controls,
  .membership-progress li:not(.is-active):not(.is-done) {
    display: none !important;
  }

  .membership-summary {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .membership-summary > div {
    border: 0.4pt solid #999999;
  }
}

/* ================================================================
   MELDUNGSBANNER
   Kurzfristige Hinweise über der Website: Trainingsausfall,
   Hallensperrung, abgesagte Veranstaltung. Liegt im Header-Container
   und schiebt daher den Inhalt nicht unkontrolliert nach unten.
   ================================================================ */
.site-alert {
  position: relative;
  z-index: 1001;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-anthracite);
}

.site-alert__inner {
  display: flex;
  padding-block: 0.95rem;
  align-items: center;
  gap: 1rem 1.3rem;
  flex-wrap: wrap;
}

.site-alert__mark {
  width: 10px;
  height: 11px;
  flex: none;
  background: var(--color-gold-bright);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.site-alert__copy {
  flex: 1 1 320px;
}

.site-alert__copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.site-alert__copy p {
  margin: 0.25rem 0 0;
  color: var(--color-white-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.site-alert__link {
  color: var(--color-accent-text);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-alert__close {
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border: 1px solid var(--color-line);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: border-color 600ms var(--ease-premium), color 600ms var(--ease-premium);
}

.site-alert__close:hover {
  border-color: var(--color-gold);
  color: var(--color-white);
}

.site-alert--warning .site-alert__mark { background: var(--color-gold-bright); }
.site-alert--warning { background: linear-gradient(90deg, rgba(var(--color-gold-rgb), 0.14), var(--color-anthracite) 55%); }

.site-alert--critical { background: linear-gradient(90deg, rgba(190, 78, 52, 0.24), var(--color-anthracite) 60%); }
.site-alert--critical .site-alert__mark { background: #d9704f; }
.site-alert--critical .site-alert__copy strong { color: #f0b39c; }

/* Der Header sitzt fix am oberen Rand. Ist eine Meldung aktiv, wandert
   er entsprechend nach unten, damit beides lesbar bleibt. */
html[data-alert-active="true"] .site-header {
  top: var(--alert-height, 0px);
}

@media print {
  .site-alert { display: none !important; }
}


/* ================================================================
   AUSWAHLLISTEN
   Die Optionen eines <select> werden vom Betriebssystem gezeichnet und
   erben die Textfarbe der Seite, aber nicht deren Hintergrund. Ohne
   ausdrueckliche Angabe stand daher weisse Schrift auf weissem Grund.
   ================================================================ */
select {
  color: var(--color-white);
  background-color: var(--color-anthracite);
}

select option,
select optgroup {
  background-color: var(--color-anthracite);
  color: var(--color-white);
}

/* Windows und Linux zeichnen die aufgeklappte Liste anhand des
   Farbschemas des Dokuments. */
:root {
  color-scheme: var(--color-scheme, dark);
}

/* ================================================================
   PARTNERBAND IM SEITENFUSS
   Gleiche Optik wie die Partnerseite: entsättigte Wortmarken hinter
   feinen Trennlinien, die bei Annäherung in die Akzentfarbe aufklaren.
   Die Kanten laufen weich aus, damit das Band nicht abgeschnitten wirkt,
   sondern aus dem Dunkel kommt und wieder darin verschwindet.
   ================================================================ */
.footer-band {
  position: relative;
  z-index: 2;
  padding-top: 2.6rem;
  border-top: 1px solid var(--color-line);
  margin-top: 3.2rem;
  margin-bottom: 2.4rem;
}

.footer-band__head {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.footer-band__viewport {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--color-line);
  background: rgba(var(--color-black-rgb), 0.55);
  /* Weiche Kanten statt harter Schnitte */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.footer-band__track {
  display: flex;
  width: max-content;
  animation: marquee var(--band-duration, 48s) linear infinite;
  will-change: transform;
}

/* Anhalten, sobald jemand mit der Maus darauf zeigt oder ein Logo per
   Tastatur erreicht - sonst lässt sich nichts gezielt anklicken.
   Ebenso, solange das Band außerhalb des Bildschirms liegt. */
.footer-band__viewport:hover .footer-band__track,
.footer-band__track:focus-within,
.footer-band.is-offscreen .footer-band__track {
  animation-play-state: paused;
}

.footer-band__item {
  display: flex;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.footer-band .sponsor-wordmark {
  min-width: 13rem;
  min-height: 5.4rem;
  padding-inline: 2rem;
  opacity: 0.4;
}

.footer-band .sponsor-wordmark b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.footer-band .sponsor-wordmark small {
  font-size: 0.42rem;
}

.footer-band .sponsor-wordmark--logo img {
  width: min(8rem, 78%);
  max-height: 3.2rem;
}

.footer-band__item:hover .sponsor-wordmark,
.footer-band__item:focus-visible .sponsor-wordmark {
  background: rgba(var(--color-gold-rgb), 0.05);
  opacity: 1;
  filter: none;
}

/* Bei zurückgenommener Bewegung wird aus dem Laufband ein ruhiges,
   waagerecht scrollbares Band - der Inhalt bleibt vollständig erreichbar. */
@media (prefers-reduced-motion: reduce) {
  .footer-band__track {
    animation: none;
  }

  .footer-band__viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

html[data-motion-level="minimal"] .footer-band__track {
  animation: none;
}

html[data-motion-level="minimal"] .footer-band__viewport {
  overflow-x: auto;
}

@media (max-width: 760px) {
  .footer-band {
    padding-top: 2rem;
    margin-top: 2.4rem;
  }

  .footer-band .sponsor-wordmark {
    min-width: 10.5rem;
    min-height: 4.6rem;
    padding-inline: 1.4rem;
  }
}

@media print {
  .footer-band { display: none !important; }
}

/* ================================================================
   HELLER MODUS
   ----------------------------------------------------------------
   Kein zweites Design, sondern derselbe Aufbau mit umgekehrter
   Helligkeit. Moeglich wird das dadurch, dass alle Flaechen auf
   --color-black-rgb und alle Schriften auf --color-white liegen: Wird
   die Flaeche hell und die Schrift dunkel, kippt die gesamte Seite
   mit. Hier stehen nur die Stellen, die sich nicht allein ueber die
   Farbe regeln lassen - Mischmodi, Deckkraft von Bildschleiern und
   Schattenrichtungen.

   Der Modus wird ueber das Attribut data-color-mode am <html> gesetzt.
   Der Publisher schreibt es beim Veroeffentlichen in jede Seite, damit
   es schon vor dem ersten Bildaufbau steht und nichts aufblitzt.
   ================================================================ */
html[data-color-mode="light"] {
  /* Auf hellem Grund wirkt Overlay-Rauschen nicht. Multiply legt das
     Korn als feine Struktur darueber, wie ein Papierraster. */
  --grain-blend: multiply;
  --grain-opacity: 0.035;

  /* Bildschleier muessen kraeftiger sein: dunkle Sportfotos brauchen
     mehr Aufhellung, damit dunkle Schrift darauf sicher lesbar wird. */
  --shade-soft: 0.72;
  --shade-strong: 0.9;
  --shade-full: 0.97;

  /* Die Fotos werden leicht aufgehellt und zurueckgenommen, damit sie
     sich in die helle Flaeche einfuegen. Die Korrektur wird an jeden
     vorhandenen Bildfilter angehaengt, nicht ersetzt - so bleiben die
     gestalterischen Abstufungen der einzelnen Bereiche erhalten. */
  --media-filter: brightness(1.1) contrast(0.94) saturate(0.9);

  /* Schatten bleiben dunkel, werden aber weicher: ein heller Schatten
     waere unsichtbar, ein harter wuerde auf Creme schmutzig wirken. */
  --shadow-rgb: 32, 34, 33;

  --color-line: rgba(var(--color-white-rgb), 0.16);
  --panel-elevation: 0 18px 44px rgba(var(--shadow-rgb), 0.1);

  color-scheme: light;
}

/* Kopfbereich: der dunkle Verlauf wuerde als schwarzer Balken ueber der
   hellen Seite stehen. Er nimmt jetzt die Flaechenfarbe auf. */
html[data-color-mode="light"] .site-header {
  background: linear-gradient(to bottom, rgba(var(--color-black-rgb), 0.92), rgba(var(--color-black-rgb), 0.55));
}

html[data-color-mode="light"] .site-header.is-scrolled {
  background: rgba(var(--color-black-rgb), 0.9);
  box-shadow: 0 10px 30px rgba(var(--color-white-rgb), 0.07);
}

/* Die Bildschleier liegen bereits auf der Flaechenfarbe und kippen
   dadurch von selbst mit. Sie brauchen im hellen Modus lediglich mehr
   Deckkraft, weil dunkle Sportfotos staerker aufgehellt werden muessen,
   damit dunkle Schrift darauf sicher lesbar bleibt. */
html[data-color-mode="light"] .hero__shade,
html[data-color-mode="light"] .inner-hero__shade,
html[data-color-mode="light"] .article-hero__shade,
html[data-color-mode="light"] .campaign-cta__shade,
html[data-color-mode="light"] .board-teaser__shade {
  opacity: 1;
  backdrop-filter: saturate(0.72);
}

/* Der Lichtkegel hinter dem Zeiger hellt auf hellem Grund nichts auf. */
html[data-color-mode="light"] .cursor-light {
  display: none;
}

html[data-color-mode="light"] .custom-cursor {
  mix-blend-mode: normal;
}

/* Die Stimmungsflaeche wuerde als dunkler Schleier wirken. */
html[data-color-mode="light"] .ambient-mood {
  opacity: 0.5;
}

/* Der Vorhang beim Seitenwechsel nimmt die Flaechenfarbe auf. */
html[data-color-mode="light"] .page-transition {
  background:
    linear-gradient(30deg, transparent 48.5%, rgba(var(--color-gold-rgb), 0.09) 49%, rgba(var(--color-gold-rgb), 0.09) 51%, transparent 51.5%) 0 0 / 88px 76px,
    var(--color-black);
}

/* Partnerband und Wortmarken: entsaettigt wirkt auf hellem Grund zu
   blass, daher etwas mehr Deckkraft im Grundzustand. */
html[data-color-mode="light"] .sponsor-wordmark {
  opacity: 0.62;
}

html[data-color-mode="light"] .footer-band .sponsor-wordmark {
  opacity: 0.55;
}

html[data-color-mode="light"] .footer-band__viewport {
  background: rgba(var(--color-black-rgb), 0.6);
}

/* Die Geisterschrift im Fuss ist auf Hell zu praesent. */
html[data-color-mode="light"] .footer-ghost {
  opacity: 0.5;
}