/* ============================================================
   LoL-Tracker -- Theme "Zoom"
   lab.nidahub.de

   Bildwelt: Hunter Zolomon alias Zoom, The Flash (CW). Blau ist das
   einzige Licht in einer sehr dunklen Stadt. Geschwindigkeit entsteht
   durch Schraeglage und waagerechte Spuren, nicht durch Pfeile.
   Laut ist die Seite an genau einer Stelle: dem Namen im Kopf.
   ============================================================ */

/* ---------- Schriften (selbst gehostet, kein externer Aufruf) ---------- */
@font-face {
  font-family: "Saira Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/saira-700.woff2") format("woff2");
}
@font-face {
  font-family: "Saira Condensed"; font-style: normal; font-weight: 900;
  font-display: swap; src: url("fonts/saira-900.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/barlow-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2");
}

:root {
  --leere:  #04060b;   /* Grund, blauschwarz statt neutralschwarz */
  --nacht:  #0a1019;   /* Flaechen, die sich abheben duerfen      */
  --kante:  #16243a;   /* Linien                                  */
  --blitz:  #35c9ff;   /* Zooms Blau -- die einzige Akzentfarbe    */
  --kern:   #e8faff;   /* der weisse Kern eines Blitzes           */
  --asche:  #7f91a8;   /* Nebentext                               */

  --anzeige: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --lauf:    "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --spur: 0 0 18px rgba(53, 201, 255, .45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--leere);
  color: #ccd8e6;
  font: 400 17px/1.65 var(--lauf);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Sehr dezente waagerechte Spuren ueber dem Grund -- Bewegungsunschaerfe
   einer Stadt, an der jemand zu schnell vorbeilaeuft.
   --scroll (0 bis 1) setzt app.js: je weiter unten, desto elektrischer
   wird der Grund. Die Seite kippt mit, statt nur durchzulaufen. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(130% 85% at 50% calc(-12% + var(--scroll, 0) * 55%),
      rgba(22, 68, 128, .62), transparent 62%),
    repeating-linear-gradient(0deg,
      rgba(53, 201, 255, .028) 0px,
      rgba(53, 201, 255, .028) 1px,
      transparent 1px,
      transparent 4px);
  opacity: calc(.72 + var(--scroll, 0) * .28);
  transition: opacity .2s linear;
}

/* Wie weit man gekommen ist -- als Blitzspur, nicht als Balken. */
.fortschritt {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: calc(var(--scroll, 0) * 100%);
  background: linear-gradient(90deg, rgba(53, 201, 255, 0), var(--blitz) 70%, var(--kern));
  box-shadow: 0 0 10px rgba(53, 201, 255, .9), 0 0 24px rgba(53, 201, 255, .5);
  z-index: 6;
  pointer-events: none;
}
.fortschritt::after {
  content: "";
  position: absolute; right: -2px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--kern);
  box-shadow: 0 0 10px var(--blitz), 0 0 22px var(--blitz);
}

.wrap { width: min(72rem, 100% - 3rem); margin-inline: auto; }

a { color: var(--blitz); text-decoration: none; }
a:hover { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--blitz);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Kopf -- hier und nur hier ist die Seite laut
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(3rem, 10vh, 6rem) 0 0;
}

/* ---------- Viktor steht rechts im Kopf ----------
   Nicht als Kasten, sondern als Erscheinung: rechts voll da, nach links
   weich ins Nichts auslaufend, damit der Schriftzug freie Bahn hat. */
.viktor-hero {
  position: absolute;
  top: 0;
  right: calc(50% - 50vw);
  width: min(58vw, 46rem);
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: image-set(url("lol/viktor-hero.webp") type("image/webp"),
                              url("lol/viktor-hero.jpg")  type("image/jpeg"));
  background-size: cover;
  background-position: 22% center;
  -webkit-mask-image: linear-gradient(100deg, transparent 4%, #000 46%, #000 100%);
          mask-image: linear-gradient(100deg, transparent 4%, #000 46%, #000 100%);
  opacity: .82;
}

/* Der untere Rand darf nicht hart abreissen. */
.viktor-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, var(--leere) 98%);
}

.hero-marke { position: relative; }

.name {
  position: relative;      /* Bezug fuer den Lichtstreifen unten */
  font-family: var(--anzeige);
  font-weight: 900;
  /* Die Groesse haengt an der Zeichenzahl: --laenge setzt app.js.
     Ohne das laeuft ein langer Name wie RICHBOYMERCY aus dem Bild.
     150vw/Zeichen ist der Wert, bei dem Saira Condensed 900 gerade passt. */
  font-size: clamp(2.6rem, calc(150vw / var(--laenge, 6)), 15rem);
  line-height: .78;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--kern);
  transform: skewX(-7deg);
  transform-origin: left bottom;
  text-shadow:
    0 0 6px rgba(232, 250, 255, .5),
    0 0 26px rgba(53, 201, 255, .65),
    0 0 70px rgba(53, 201, 255, .35);
}

/* Der eine orchestrierte Moment: beim Laden faehrt ein Lichtstreifen
   durch den Namen und zuendet ihn. Danach bleibt die Seite ruhig. */
.name::after {
  content: "";
  position: absolute; inset: -6% -4%;
  background: linear-gradient(105deg,
    transparent 42%,
    rgba(232, 250, 255, .95) 49%,
    rgba(53, 201, 255, .8) 52%,
    transparent 59%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: zuendung 1.25s cubic-bezier(.2, .7, .3, 1) .15s both;
}

@keyframes zuendung {
  0%   { transform: translateX(-115%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}

.tag {
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  letter-spacing: .1em;
  color: var(--blitz);
  margin: .5rem 0 0;
  transform: skewX(-7deg);
  transform-origin: left top;
  text-shadow: var(--spur);
}

/* ---------- Rang ----------
   Das Abzeichen behaelt seine eigenen Farben. Es traegt eine Information,
   die man am Farbton erkennt -- Einfaerben wuerde sie zerstoeren. */
.rang {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 1.75rem 0 0;
}

.rang img {
  width: clamp(72px, 9vw, 104px);
  height: auto;
  filter: drop-shadow(0 0 16px rgba(53, 201, 255, .45));
}

.rang-text { line-height: 1.15; }

.rang-stufe {
  font-family: var(--anzeige);
  font-weight: 900;
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  color: #f0f6ff;
  transform: skewX(-7deg);
  transform-origin: left center;
  display: block;
  text-shadow: 0 0 22px rgba(53, 201, 255, .5);
}

.rang-lp {
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  color: var(--blitz);
  letter-spacing: .06em;
  transform: skewX(-7deg);
  transform-origin: left center;
  display: block;
}

.hero-fakten {
  margin: 2rem 0 .5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--kante);
  max-width: 44rem;
}
.hero-fakten li {
  padding: .85rem 1.4rem .85rem 0;
  margin-right: 1.4rem;
  border-right: 1px solid var(--kante);
  font-size: .95rem;
  color: var(--asche);
}
.hero-fakten li:last-child { border-right: 0; margin-right: 0; }
.hero-fakten b {
  display: block;
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: .02em;
  color: #dce8f5;
}

/* ============================================================
   Abschnitte
   ============================================================ */
.abschnitt { padding: clamp(1.75rem, 4vh, 2.75rem) 0; }
.abschnitt:first-child { padding-top: clamp(1.25rem, 3vh, 2rem); }

.abschnitt-kopf {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.abschnitt h2 {
  font-family: var(--anzeige);
  font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  letter-spacing: .01em;
  margin: 0;
  color: #e6f1fb;
  transform: skewX(-7deg);
  transform-origin: left center;
}

/* Die Linie neben der Ueberschrift ist eine Blitzspur, kein Zierstrich:
   sie zeigt in die Laufrichtung der Seite. */
.abschnitt-kopf .spur {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(53, 201, 255, .85), rgba(53, 201, 255, .05));
  box-shadow: var(--spur);
}

.abschnitt-notiz {
  margin: -.9rem 0 1.6rem;
  color: var(--asche);
  font-size: .97rem;
  max-width: 46rem;
}

/* ============================================================
   Linkzeilen -- keine Kacheln. Zoom rennt durch Zeilen, nicht durch Kaesten.
   ============================================================ */
.leisten { border-top: 1px solid var(--kante); }

.leiste {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.05rem 1rem 1.05rem .25rem;
  border-bottom: 1px solid var(--kante);
  color: inherit;
  overflow: hidden;
  transition: background-color .18s ease, padding-left .18s ease;
}

/* Beim Zeigen faehrt ein Lichtstreifen durch die Zeile -- die Bewegung
   antwortet auf den Menschen, sie laeuft nicht von selbst. */
.leiste::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent, rgba(53, 201, 255, .16) 45%, rgba(232, 250, 255, .3) 50%,
    rgba(53, 201, 255, .16) 55%, transparent);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.leiste:hover,
.leiste:focus-visible {
  background-color: rgba(18, 56, 107, .28);
  padding-left: 1rem;
}
.leiste:hover::before,
.leiste:focus-visible::before {
  animation: durchlauf .55s ease-out;
}

@keyframes durchlauf {
  0%   { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

.leiste .marke {
  font-family: var(--anzeige);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--blitz);
  text-align: right;
  letter-spacing: .04em;
  transform: skewX(-7deg);
  opacity: .85;
}

.leiste .titel {
  font-weight: 600;
  font-size: 1.08rem;
  color: #e3edf8;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.leiste .was {
  color: var(--asche);
  font-size: .92rem;
  line-height: 1.45;
}

.leiste .status {
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--blitz);
  box-shadow: 0 0 8px rgba(53, 201, 255, .9);
  flex: 0 0 auto;
}
.leiste .status.offen {
  background: transparent;
  border: 1px solid #4a5c74;
  box-shadow: none;
}

.leiste .ziel {
  font-size: .85rem;
  color: #55637a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ============================================================
   Zooms Auftritte -- vier Zwischenstuecke, die den Scroll gliedern.
   Jede Gestalt ist gezeichnet, nicht fotografiert: gleiche Strichsprache
   wie der Laeufer, damit die Seite eine Handschrift behaelt.
   ============================================================ */
.auftritt {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(20rem, 46vh, 30rem);
  margin: clamp(1rem, 4vh, 3rem) 0;
  overflow: hidden;
}

.auftritt svg {
  width: clamp(150px, 26vw, 310px);
  height: auto;
  overflow: visible;
}

/* Die Gestalt selbst bleibt dunkel; sichtbar wird sie durch das Blau daran. */
.auftritt .gestalt {
  fill: none;
  stroke: #070d17;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 3px rgba(53, 201, 255, .95))
    drop-shadow(0 0 16px rgba(53, 201, 255, .6))
    drop-shadow(0 0 44px rgba(53, 201, 255, .3));
}
.auftritt .kopf { fill: #070d17; stroke: none; }
.auftritt .funke {
  fill: none;
  stroke: var(--blitz);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(53, 201, 255, .9));
}

/* Vor dem Einschlag ist da nichts. */
.auftritt .buehne { opacity: 0; }

/* Er erscheint nicht sanft -- er flackert herein wie eine ueberlastete Leitung. */
.auftritt.da .buehne { animation: einschlag 1.05s linear forwards; }

@keyframes einschlag {
  0%   { opacity: 0; transform: translateX(3%); }
  8%   { opacity: 1; transform: translateX(0); }
  12%  { opacity: .06; }
  19%  { opacity: 1; }
  24%  { opacity: .22; }
  32%  { opacity: 1; }
  39%  { opacity: .6; }
  100% { opacity: 1; transform: translateX(0); }
}

/* Der Lichtblitz, der ihn bringt. */
.auftritt .schlag {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(42% 58% at 50% 46%,
    rgba(200, 238, 255, .5), rgba(53, 201, 255, .16) 42%, transparent 72%);
  opacity: 0;
}
.auftritt.da .schlag { animation: aufleuchten .8s ease-out forwards; }

@keyframes aufleuchten {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  16%  { opacity: .1; }
  26%  { opacity: .7; }
  100% { opacity: 0; }
}

.auftritt .satz {
  position: absolute;
  bottom: clamp(.5rem, 3vh, 2rem);
  left: 0; right: 0;
  text-align: center;
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  letter-spacing: .04em;
  color: #9fb8d2;
  transform: skewX(-7deg);
  opacity: 0;
}
.auftritt.da .satz { animation: satz-auf .7s ease-out .5s forwards; }

@keyframes satz-auf {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   Der Main-Champion
   ============================================================ */
.champion {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem 1.75rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--kante);
  background:
    linear-gradient(100deg, rgba(18, 56, 107, .32), rgba(10, 16, 25, .5) 62%);
}

.champion-bild {
  width: clamp(88px, 11vw, 130px);
  height: auto;
  border: 1px solid rgba(53, 201, 255, .45);
  box-shadow: 0 0 26px rgba(53, 201, 255, .3);
  display: block;
}

.champion-name {
  font-family: var(--anzeige);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 3.2rem);
  line-height: .95;
  color: #f0f6ff;
  transform: skewX(-7deg);
  transform-origin: left center;
  margin: 0;
}
.champion-titel {
  color: var(--blitz);
  font-size: 1rem;
  margin: .3rem 0 0;
}

/* Das Zitat ist der lauteste Satz der Seite -- deshalb steht es allein. */
.champion-spruch {
  grid-column: 1 / -1;
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  color: #cfe6f8;
  letter-spacing: .02em;
  margin: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--kante);
  transform: skewX(-7deg);
  transform-origin: left center;
}

.champion-zahlen {
  display: flex;
  gap: 1.75rem;
  margin-top: .9rem;
  flex-wrap: wrap;
}
.champion-zahlen div { line-height: 1.2; }
.champion-zahlen b {
  display: block;
  font-family: var(--anzeige);
  font-weight: 900;
  font-size: 1.6rem;
  color: #e6f1fb;
}
.champion-zahlen span { color: var(--asche); font-size: .88rem; }

.faehigkeiten {
  grid-column: 1 / -1;
  display: flex;
  gap: .85rem;
  flex-wrap: wrap;
  padding-top: 1.1rem;
  border-top: 1px solid var(--kante);
}

.faehigkeit { text-align: center; width: 4.4rem; }
.faehigkeit img {
  width: 48px; height: 48px;
  border: 1px solid rgba(53, 201, 255, .3);
  display: block;
  margin: 0 auto .35rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faehigkeit:hover img {
  border-color: var(--blitz);
  box-shadow: 0 0 14px rgba(53, 201, 255, .6);
}
.faehigkeit .taste {
  font-family: var(--anzeige);
  font-weight: 700;
  color: var(--blitz);
  font-size: .82rem;
  display: block;
}
.faehigkeit .wie { color: var(--asche); font-size: .7rem; line-height: 1.25; display: block; }

/* ============================================================
   Die beiden anderen Accounts -- bewusst ruhig gehalten
   ============================================================ */
.andere {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--kante);
  border: 1px solid var(--kante);
}

.andere-karte {
  background: var(--nacht);
  padding: 1.4rem 1.5rem;
  color: inherit;
  transition: background-color .18s ease;
}
.andere-karte:hover { background: rgba(18, 56, 107, .35); }

.andere-karte .wer {
  font-family: var(--anzeige);
  font-weight: 900;
  font-size: 1.85rem;
  color: #e6f1fb;
  transform: skewX(-7deg);
  transform-origin: left center;
  display: block;
  line-height: 1.1;
}
.andere-karte .wer span { color: var(--blitz); font-weight: 700; }
.andere-karte .wo { color: var(--asche); font-size: .9rem; margin-top: .35rem; }

/* ============================================================
   Zoom -- laeuft mit dem Scrollen durch das Bild
   ============================================================ */
.laeufer {
  position: fixed;
  left: 0;
  bottom: clamp(6vh, 12vh, 18vh);
  z-index: 3;
  width: clamp(88px, 11vw, 168px);
  pointer-events: none;
  color: #060b14;
  transform: translate3d(-8vw, 0, 0);
  will-change: transform;
  opacity: .92;
}

.kopieren {
  display: block;
  font: inherit;
  color: var(--asche);
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.kopieren b { transition: color .15s ease; }
.kopieren:hover b, .kopieren.fertig b { color: var(--blitz); }

.laeufer svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Die Gestalt bleibt dunkel; sichtbar wird sie durch das Blau an ihrer Kante. */
.laeufer .koerper {
  stroke: #070d17;
  filter:
    drop-shadow(0 0 3px rgba(53, 201, 255, .95))
    drop-shadow(0 0 14px rgba(53, 201, 255, .6))
    drop-shadow(0 0 34px rgba(53, 201, 255, .3));
}
.laeufer .kopf { fill: #070d17; }

.laeufer .schweif {
  stroke: var(--blitz);
  opacity: .75;
  filter: drop-shadow(0 0 8px rgba(53, 201, 255, .85));
}

/* Beine wechseln die Pose -- nur waehrend wirklich gescrollt wird. */
.laeufer .bein-a, .laeufer .bein-b { animation: schritt .34s steps(1, end) infinite; }
.laeufer .bein-b { animation-delay: .17s; }
.laeufer.ruht .bein-a, .laeufer.ruht .bein-b { animation-play-state: paused; }

@keyframes schritt {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ============================================================
   Blitze -- selten, kurz, nie im Weg
   ============================================================ */
.blitze {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
/* height:auto, damit das Seitenverhaeltnis der viewBox erhalten bleibt --
   sonst wird der Blitz in seinen Rahmen gequetscht und wirkt wie ein Strich. */
.blitze svg { position: absolute; overflow: visible; height: auto; }
/* Gefuellte Flaeche, nicht Umriss -- ein Blitz ist Licht, keine Zeichnung.
   Der Kern ist fast weiss, das Blau kommt aus dem Schein darum herum. */
.blitze path {
  fill: var(--kern);
  stroke: rgba(53, 201, 255, .9);
  stroke-width: 1.5;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(232, 250, 255, .95))
    drop-shadow(0 0 14px var(--blitz))
    drop-shadow(0 0 40px rgba(53, 201, 255, .85));
  opacity: 0;
}

/* Rechts vom Schriftzug ist Platz -- dort wird ein Blitz auch gesehen. */
.blitz-1 { top: 4%;    left: 54%; width: 84px; }
.blitz-2 { top: 46%;   right: 7%; width: 64px; }
.blitz-3 { bottom: 12%; left: 31%; width: 52px; }

.blitz-1 path { animation: zucken 11s ease-out 3s infinite; }
.blitz-2 path { animation: zucken 14s ease-out 7.5s infinite; }
.blitz-3 path { animation: zucken 17s ease-out 12s infinite; }

@keyframes zucken {
  0%, 100%      { opacity: 0; }
  1%            { opacity: .95; }
  2.2%          { opacity: 0; }
  3.4%          { opacity: .8; }
  4.6%, 99%     { opacity: 0; }
}

/* ============================================================
   Fussbereich
   ============================================================ */
.fuss {
  border-top: 1px solid var(--kante);
  margin-top: 2rem;
  padding: 1.75rem 0 3.5rem;
  color: #5d6d83;
  font-size: .88rem;
}
.fuss code {
  font-family: var(--lauf);
  font-weight: 600;
  color: #8ba2bc;
}

.zurueck {
  display: inline-block;
  margin: 2rem 0 0;
  font-family: var(--anzeige);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
  color: var(--blitz);
  transform: skewX(-7deg);
}

.fehler {
  border: 1px solid #5a2630;
  background: #1a0e12;
  padding: 1.2rem 1.4rem;
  color: #f0b8bc;
}

/* ============================================================
   Kleine Schirme
   ============================================================ */
@media (max-width: 700px) {
  body { font-size: 16px; }
  .wrap { width: min(72rem, 100% - 2rem); }
  .leiste { grid-template-columns: 3rem 1fr; gap: .9rem; }
  .leiste .ziel { display: none; }
  .hero-fakten li { padding-right: 1rem; margin-right: 1rem; }
  .laeufer { width: 74px; bottom: 8vh; }

  /* Auf schmalen Schirmen legt sich Viktor hinter den Text statt daneben. */
  .viktor-hero {
    width: 100%;
    opacity: .3;
    background-position: 32% center;
    -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
            mask-image: linear-gradient(180deg, #000 30%, transparent 92%);
  }
  .champion { grid-template-columns: 1fr; padding: 1.25rem; }
  .faehigkeit { width: 3.8rem; }
  .faehigkeit img { width: 42px; height: 42px; }
}

/* ============================================================
   Wer keine Bewegung will, bekommt keine.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .name::after,
  .blitze path,
  .laeufer .bein-a, .laeufer .bein-b { animation: none; }
  .name::after { opacity: 0; }
  .laeufer { display: none; }
  .leiste:hover::before, .leiste:focus-visible::before { animation: none; }
  .leiste { transition: none; }
  body::before { transition: none; }

  /* Die Auftritte bleiben -- aber sie stehen einfach da, statt zu flackern. */
  .auftritt .buehne,
  .auftritt .satz { opacity: 1; animation: none; }
  .auftritt .schlag { display: none; }
  .auftritt.da .buehne,
  .auftritt.da .satz { animation: none; }
}