/* ==========================================================================
   Haie Strom Countdown – RheinEnergie
   Stylesheet für die statisch im CMS hinterlegte HTML-Seite.
   Look „Arena bei Nacht": dunkler Grund, weiße Logos, Anzeigetafel mit roten
   LED-Ziffern, Team-Formation auf der Bande.

   Assets: [asset-path] wird nur im HTML ersetzt, nicht hier. Nötig ist der
   Platzhalter im CSS aber auch nicht – nach dem Upload liegen alle Assets flach
   in einem Verzeichnis, also genügt der reine Dateiname:
   background-image: url("motiv-strom.jpg");
   ========================================================================== */

/* --------------------------------------------------------------- Tokens */
:root {
  --haie-red:      rgb(237 0 0);        /* Primärfarbe Kölner Haie           */
  --arena:         #111111;             /* Seitengrund                       */
  --arena-deep:    #0a0a0a;             /* Footer, Verlaufsende              */
  --ink:           #ffffff;             /* Text auf dunkel                   */
  --ink-muted:     #c9c9c9;             /* Sekundärtext (11:1 auf #111)      */
  --focus:         #ffffff;

  --led-on:        var(--haie-red);     /* leuchtendes Segment               */
  --led-off:       rgb(237 0 0 / .1);   /* unbeleuchtetes Segment            */
  --led-glow:      rgb(237 0 0 / .6);

  --radius:        6px;
  --wrap:          1180px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--arena-deep);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Hallenlicht von oben auf dunklem Grund */
  background:
    radial-gradient(90% 520px at 50% 0, rgb(237 0 0 / .26), rgb(237 0 0 / 0) 70%) no-repeat,
    linear-gradient(180deg, #161616 0, var(--arena) 420px, var(--arena-deep) 100%);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, p { margin: 0; }

a { color: var(--ink); }

/* Sichtbarer Fokus auf allen interaktiven Elementen (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Visuell ausgeblendet, für Screenreader vorhanden */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ Skip-Link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: var(--arena);
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: top .15s ease-in;
}
.skip-link:focus { top: 12px; color: var(--arena); }

/* --------------------------------------------------------------- Header */
/* Mobil gestapelt wie in der Skizze, ab 900px nebeneinander. */
.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-block: clamp(24px, 6vw, 40px) 0;
}
.site-header__logo { display: block; border-radius: 4px; }
.site-header__logo--re img   { width: clamp(150px, 44vw, 210px); }
.site-header__logo--haie img { width: clamp(80px, 23vw, 108px); }
.site-header__x {
  width: 22px;
  height: 22px;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------- Stage */
.stage {
  position: relative;
  overflow: hidden;              /* Muster hinter der Tafel ragt seitlich hinaus */
}
.stage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: clamp(22px, 5vw, 44px) clamp(28px, 5vw, 52px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-bottom: 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Rote „On-Air"-LED vor der Zeile – rein dekorativ, die Farbe trägt nichts */
.eyebrow::before {
  content: "";
  width: .6em;
  height: .6em;
  border-radius: 50%;
  background: var(--led-on);
  box-shadow: 0 0 .7em var(--led-glow);
}

.stage__headline {
  font-size: clamp(2.6rem, 1.4rem + 6vw, 5.2rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

.lead {
  max-width: 30em;
  margin-top: 14px;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* --------------------------------------------------------- Anzeigetafel */
.scoreboard {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 760px;
  margin-top: clamp(26px, 5vw, 44px);
}

/* Taktik-Muster: Kreuze links, Punkte rechts – ragt seitlich über die Tafel */
.scoreboard__pattern {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 150%;
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: .16;
  pointer-events: none;
}

.scoreboard__housing {
  position: relative;
  padding: clamp(12px, 2.4vw, 20px);
  border-radius: clamp(12px, 2vw, 18px);
  background: linear-gradient(180deg, #2a2a2a 0%, #151515 38%, #0c0c0c 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .12),
    0 0 0 1px #000,
    0 0 0 5px #1b1b1b,
    0 0 0 6px rgb(255 255 255 / .1),
    0 28px 60px -18px rgb(0 0 0 / .95);
}
/* Vier Nieten in den Ecken */
.scoreboard__housing::before {
  --rivet: radial-gradient(circle at 50% 45%, #8a8a8a 0 1px, #3a3a3a 1.6px 2.4px, transparent 3px);
  content: "";
  position: absolute;
  inset: 6px;
  pointer-events: none;
  background:
    var(--rivet) left top / 8px 8px no-repeat,
    var(--rivet) right top / 8px 8px no-repeat,
    var(--rivet) left bottom / 8px 8px no-repeat,
    var(--rivet) right bottom / 8px 8px no-repeat;
}

.scoreboard__title {
  width: fit-content;
  margin: 0 auto clamp(10px, 2vw, 16px);
  padding: 2px 12px 2px calc(12px + .24em);   /* gleicht die Sperrung am Wortende aus */
  border-radius: 3px;
  background: var(--haie-red);
  color: #fff;                                /* 4,6:1 auf Haie-Rot */
  font-size: clamp(.68rem, .6rem + .3vw, .8rem);
  font-weight: 800;
  line-height: 1.6;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* Zeile 1: Fenster und Doppelpunkte, Zeile 2: Beschriftungen */
.scoreboard__display {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  column-gap: clamp(5px, 1.6vw, 14px);
  row-gap: clamp(6px, 1.4vw, 10px);
}

.scoreboard__window {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 7%;
  padding: 11% 10%;
  border-radius: clamp(6px, 1.2vw, 10px);
  background:
    repeating-linear-gradient(180deg, rgb(255 255 255 / .03) 0 1px, transparent 1px 3px),
    radial-gradient(120% 100% at 50% 30%, #161111 0%, #050505 75%);
  box-shadow:
    inset 0 3px 10px rgb(0 0 0 / .9),
    inset 0 0 0 1px rgb(255 255 255 / .06);
}

/* LED-Ziffer: welche Segmente leuchten, hängt allein an data-digit */
.digit {
  width: 100%;
  height: auto;
  aspect-ratio: 62 / 90;
  filter: drop-shadow(0 0 clamp(2px, .7vw, 6px) var(--led-glow));
}

.seg { fill: var(--led-off); }

.digit[data-digit="0"] :is(.a, .b, .c, .d, .e, .f),
.digit[data-digit="1"] :is(.b, .c),
.digit[data-digit="2"] :is(.a, .b, .d, .e, .g),
.digit[data-digit="3"] :is(.a, .b, .c, .d, .g),
.digit[data-digit="4"] :is(.b, .c, .f, .g),
.digit[data-digit="5"] :is(.a, .c, .d, .f, .g),
.digit[data-digit="6"] :is(.a, .c, .d, .e, .f, .g),
.digit[data-digit="7"] :is(.a, .b, .c),
.digit[data-digit="8"] .seg,
.digit[data-digit="9"] :is(.a, .b, .c, .d, .f, .g),
.digit[data-digit="-"] .g {
  fill: var(--led-on);
}

.scoreboard__colon {
  display: grid;
  gap: clamp(9px, 2.6vw, 22px);
}
.scoreboard__colon::before,
.scoreboard__colon::after {
  content: "";
  width: clamp(6px, 1.7vw, 12px);
  height: clamp(6px, 1.7vw, 12px);
  border-radius: 50%;
  background: var(--led-on);
  box-shadow: 0 0 clamp(3px, 1vw, 8px) var(--led-glow);
}

.scoreboard__label {
  grid-row: 2;
  padding-left: .14em;           /* gleicht die Sperrung am Wortende aus */
  font-size: clamp(.7rem, .55rem + .6vw, .95rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.scoreboard__label--days    { grid-column: 1; }
.scoreboard__label--hours   { grid-column: 3; }
.scoreboard__label--minutes { grid-column: 5; }

.stage__date {
  margin-top: clamp(18px, 3.5vw, 28px);
  font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
  color: var(--ink-muted);
}
.stage__date time { font-weight: 700; color: var(--ink); }

@keyframes colon-blink {
  50% { opacity: .15; }
}

@keyframes led-flicker {
  0%   { opacity: .3; }
  40%  { opacity: 1; }
  60%  { opacity: .55; }
  100% { opacity: 1; }
}

/* ------------------------------------------------------- Team-Formation */
/* Kapitän vorn in der Mitte, nach außen kleiner und dunkler. Die Figuren
   überlappen; unten schneidet die Bande (Footer-Oberkante) sie an. */
.lineup {
  position: relative;
  margin-top: auto;              /* steht immer direkt auf dem Footer */
  padding-top: clamp(8px, 3vw, 24px);
  overflow: hidden;
}
/* Hallenlicht hinter der Mannschaft – trennt dunkle Trikots vom Grund */
.lineup::before {
  content: "";
  position: absolute;
  inset: 20% 0 0;
  background: radial-gradient(50% 80% at 50% 100%, rgb(237 0 0 / .32), rgb(237 0 0 / 0) 100%);
  pointer-events: none;
}

.lineup__list {
  --captain: clamp(118px, 34vw, 260px);
  --overlap: calc(var(--captain) * -.32);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lineup__player {
  position: relative;
  flex: 0 0 auto;
  width: var(--captain);
  aspect-ratio: 560 / 860;       /* Unterschenkel verschwinden hinter der Bande */
  overflow: hidden;
}
.lineup__player + .lineup__player { margin-left: var(--overlap); }
.lineup__player img { width: 100%; }

.lineup__player--captain { z-index: 3; }
.lineup__player--inner {
  z-index: 2;
  width: calc(var(--captain) * .85);
  filter: brightness(.86);
}
.lineup__player--outer {
  z-index: 1;
  width: calc(var(--captain) * .73);
  filter: brightness(.72);
}

/* --------------------------------------------------------------- Footer */
/* Die Oberkante ist die Bande: rote Linie, darauf stehen die Spieler. */
.site-footer {
  position: relative;
  z-index: 1;
  background: var(--arena-deep);
  border-top: 6px solid var(--haie-red);
  box-shadow: 0 -1px 0 rgb(255 255 255 / .14);
  padding-block: 14px;
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 clamp(18px, 6vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9rem;
}
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
  text-underline-offset: 3px;
}
.site-footer a:hover { text-decoration-thickness: 2px; }

/* ----------------------------------------------------------- Breakpoints */
@media (min-width: 900px) {
  .site-header__inner { flex-direction: row; justify-content: center; gap: 30px; }
  .site-header__x { width: 26px; height: 26px; }
  .lineup__list { --overlap: calc(var(--captain) * -.2); }
}

/* ------------------------------------------------------------ Bewegung */
/* Alles, was sich bewegt, nur ohne Wunsch nach reduzierter Bewegung. Die
   Browser-Einstellung wirkt automatisch, auch wenn sie sich während des
   Besuchs ändert – einen eigenen Pause-Schalter gibt es nicht.
   Blinken und Flackern starten erst, wenn das JS die Klassen setzt. */
@media (prefers-reduced-motion: no-preference) {
  .scoreboard.is-live .scoreboard__colon {
    animation: colon-blink 1s steps(1, end) infinite;
  }
  .digit.is-flicker {
    animation: led-flicker .2s linear;
  }

  .lineup__list.is-armed .lineup__player img {
    opacity: 0;
    transform: translateY(18%);
    transition: opacity .5s ease-out, transform .9s cubic-bezier(.2, .8, .2, 1);
  }
  .lineup__list.is-armed .lineup__player--inner img { transition-delay: .12s; }
  .lineup__list.is-armed .lineup__player--outer img { transition-delay: .24s; }
  .lineup__list.is-armed.is-visible .lineup__player img {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- Bewegung reduzieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------- Hoher Kontrastmodus */
@media (forced-colors: active) {
  .scoreboard__housing,
  .scoreboard__window,
  .scoreboard__title { border: 1px solid CanvasText; }

  /* Segmente selbst einfärben: an = Textfarbe, aus = unsichtbar */
  .digit,
  .scoreboard__colon {
    forced-color-adjust: none;
    --led-on: CanvasText;
    --led-off: transparent;
    --led-glow: transparent;
  }
  .digit { filter: none; }
  .scoreboard__colon::before,
  .scoreboard__colon::after { background: CanvasText; box-shadow: none; }
}