/* Dritter Versuch. Die Regeln dahinter stehen in DESIGN.md (Farben, Abschnitte, Kopf, Schrift, Formen).
   Motiv: das Kampfrichter-Licht, ein Kreis. Bühnen (Hero, Studien) dunkel und bildschirmfüllend,
   Pausen dazwischen hell und so hoch wie ihr Inhalt; Nachbarabschnitte nie mit demselben Grund. */

:root {
  --bg: #e4e5e2;            /* Kreide */
  --surface: #eef0ef;
  --ink: #161718;           /* Plattform */
  --muted-ink: #3d4247;
  --muted: var(--muted-ink);   /* in dunklen Abschnitten: --on-dark-muted */
  --light: #f4f5f5;         /* Kampfrichter-Licht, gültig */
  --red: #c4291f;           /* Licht ungültig, 25-kg-Scheibe */
  --calc: #a6b3bc;          /* Hantelstange, Stahl: allein für Rechner */
  --field-sage: #b7c8be;
  --on-dark: #e4e5e2;
  --on-dark-muted: #b9bcb8;

  /* Chart-Serien (geprüfte Kategorien-Palette, siehe dataviz) */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100;

  --font: "Bricolage Grotesque", "Helvetica Neue", Arial, system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-title: clamp(1.6rem, 1.15rem + 1.3vw, 2.5rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3.4rem, 0.8rem + 7.2vw, 8.5rem);

  --margin: clamp(1rem, 2.4vw, 2.25rem);
  --max: 84rem;
  --max-read: 63rem;
  --gutter: clamp(1rem, 2vw, 2rem);
  --pad-section: clamp(4.5rem, 8vw, 7.5rem);
  --gap-head: clamp(2rem, 4vw, 3.5rem);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--step-body); line-height: 1.5;
  font-kerning: normal; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ul { margin: 0; }
ul[class] { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; background: var(--surface); }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 5rem; }
/* Abschnitte lassen mit ihrem Innenabstand selbst Platz für die Kopfzeile: Anker landen genau am Anfang. */
section[id] { scroll-margin-top: 0; }
b, strong, th { font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--ink); color: var(--light); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

h1, h2, h3 { font-weight: 600; text-wrap: balance; letter-spacing: -0.03em; line-height: 0.98; }
.display { font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.04em; }
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.small { font-size: var(--step-small); line-height: 1.45; }
p { max-width: 62ch; text-wrap: pretty; }
.nums { font-variant-numeric: tabular-nums; }
.wrap {
  /* Hintergründe laufen über die volle Breite, der Inhalt bleibt in --max zentriert. */
  padding-left: max(var(--margin), env(safe-area-inset-left, 0px), calc((100% - var(--max)) / 2));
  padding-right: max(var(--margin), env(safe-area-inset-right, 0px), calc((100% - var(--max)) / 2));
}

/* ---------- Bedienelemente: rund wie das Licht ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.6rem; border-radius: 999px;
  background: var(--ink); color: var(--light); text-decoration: none; white-space: nowrap;
  font-weight: 500;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.96); }
.button--light { background: var(--light); color: var(--ink); }
.button--quiet { background: color-mix(in srgb, var(--ink) 12%, transparent); color: var(--ink); }
.button--quiet-dark { background: color-mix(in srgb, var(--light) 14%, transparent); color: var(--light); }
.button--small { min-height: 2.6rem; padding: 0 1.1rem; }
.button--calc { background: var(--calc); color: var(--ink); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
  .button:hover { background: var(--muted); }
  .button--light:hover { background: #ffffff; }
  .button--quiet:hover { background: color-mix(in srgb, var(--ink) 20%, transparent); }
  .button--calc:hover { background: #bcc7cf; }
  .button--quiet-dark:hover { background: color-mix(in srgb, var(--light) 24%, transparent); }
}

/* ---------- Abschnitte: Grund und Kopf (DESIGN.md) ----------
   Jeder Abschnitt ist ein Band über die volle Breite. Kopf: Titel, darunter der Untertitel. */
.ground-ink { background: var(--ink); color: var(--on-dark); --muted: var(--on-dark-muted); }
.ground-sage { background: var(--field-sage); }
/* Papier: der Lesetext einer Studie liegt wie ein Blatt auf der Seite. Flächen darin (Abstract,
   Notizen, Abbildungen) nehmen dafür Kreide, damit sie sich weiter abheben. */
.ground-paper { background: var(--surface); }
.ground-paper > * { --surface: var(--bg); }
.ground-ink .is-panel, .ground-ink .index__frame, .ground-ink .item__inline { color: var(--ink); --muted: var(--muted-ink); }
.shead { display: grid; gap: 1rem; justify-items: start; }
.shead p { font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; max-width: 46ch; }

/* ---------- Kopfzeile: auf allen Seiten gleich ----------
   Oben auf der Seite liegt sie frei über dem Inhalt (weiß im Differenzmodus, lesbar über Schwarz
   und über dem Licht). Sobald man scrollt, wird sie zur schwarzen Leiste, verschwindet beim
   Weiterlesen nach unten und kommt beim Hochscrollen zurück. Die drei Kampfrichter-Lichter im
   Namen zeigen den Lesefortschritt: jedes Licht steht für ein Drittel der Seite. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  color: var(--light); background: var(--ink);
  transition: transform 320ms var(--ease-out), background-color 240ms ease, padding 240ms ease;
}
.bar__inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.5rem;
  padding-block: calc(0.7rem + env(safe-area-inset-top, 0px)) 0.7rem;
}
.bar.is-top { background: transparent; color: #ffffff; mix-blend-mode: difference; }
.bar.is-top .bar__inner { padding-block: calc(1.25rem + env(safe-area-inset-top, 0px)) 1rem; }
.bar.is-hidden { transform: translateY(-100%); }
.wordmark { display: inline-flex; align-items: center; gap: 0.7rem; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.wordmark__by { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; opacity: 0.7; margin-left: -0.2rem; align-self: flex-end; padding-bottom: 0.2em; }
@media (max-width: 64em) { .wordmark__by { display: none; } }
.bar__lights { display: inline-flex; gap: 0.22rem; }
.bar__lights i {
  width: 0.62rem; aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden;
  background: color-mix(in srgb, currentColor 28%, transparent);
}
.bar__lights i::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  transform: translateY(calc((1 - var(--p, 0)) * 100%)); transition: transform 200ms linear;
}
.bar__where {
  justify-self: center; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--step-small); color: var(--on-dark-muted); opacity: 0; transition: opacity 240ms ease;
}
.bar__where b { color: var(--light); font-weight: 600; margin-right: 0.4rem; }
.bar:not(.is-top) .bar__where:not(:empty) { opacity: 1; }
.bar nav { display: flex; gap: clamp(0.9rem, 2vw, 1.75rem); font-size: var(--step-body); justify-self: end; }
.bar nav a { text-decoration: none; white-space: nowrap; }
.bar:not(.is-top) nav a:hover { color: var(--on-dark-muted); }
/* Untermenü der Studien: bei Hover oder Tastaturfokus auf "Studies". Weißes Licht = veröffentlicht. */
.bar__menu { position: relative; }
.bar__menu > a::after { content: " ▾"; font-size: 0.75em; }
.bar__sub {
  position: absolute; top: calc(100% + 0.75rem); right: -1rem; width: 22rem;
  background: var(--ink); color: var(--light); padding: 1rem;
  display: none; gap: 0.5rem;
  box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.45); /* taste-skill-ignore: schwebendes Menü */
}
@keyframes sub-in { from { opacity: 0; transform: translateY(-6px); } }
/* unsichtbare Brücke, damit der Zeiger auf dem Weg ins Menü nicht herausfällt */
.bar__sub::before { content: ""; position: absolute; inset: -0.9rem 0 auto 0; height: 0.9rem; }
.bar__menu:hover .bar__sub, .bar__menu:focus-within .bar__sub { display: grid; animation: sub-in 220ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .bar__sub { animation: none !important; } }
.bar__sub-title { font-size: var(--step-small); color: var(--on-dark-muted); padding: 0 0.5rem; }
.bar__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.bar__sub li > a, .bar__sub li.is-soon {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center;
  padding: 0.55rem 0.5rem; text-decoration: none; color: inherit; white-space: normal;
}
.bar__sub li > a:hover, .bar__sub li > a:focus-visible { background: color-mix(in srgb, var(--light) 10%, transparent); }
.bar__sub li > a[aria-current="page"] b::after { content: " · you are here"; font-weight: 400; color: var(--on-dark-muted); }
.bar__sub b { display: block; font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.bar__sub small { display: block; font-size: var(--step-small); color: var(--on-dark-muted); }
.bar__sub li.is-soon { color: var(--on-dark-muted); }
/* Direktlink auf den Rechner einer Studie, eingerückt unter ihrem Titel */
.bar__sub .sub__tool { display: block; margin: -0.35rem 0 0.35rem 2.2rem; padding: 0.15rem 0.5rem; font-size: var(--step-small); color: var(--light); }
.bar__sub .sub__tool:hover, .bar__sub .sub__tool:focus-visible { text-decoration: underline; }
.bar__sub li.is-soon b { color: var(--on-dark-muted); font-weight: 500; }
.sub__light { width: 1.1rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--light) 22%, transparent); }
.sub__light.is-out { background: var(--light); }
.bar__sub-all { font-size: var(--step-small); padding: 0.5rem 0.5rem 0; color: var(--light); }
.bar__sub-all::after { content: " →"; }
/* Oben auf der Seite liegt die Leiste im Differenzmodus; solange das Menü offen ist, wird sie massiv. */
.bar.is-top:has(.bar__menu:hover, .bar__menu:focus-within) { background: var(--ink); color: var(--light); mix-blend-mode: normal; }
@media (hover: none), (max-width: 40em) { .bar__menu .bar__sub { display: none; } .bar__menu > a::after { content: none; } }
@media (max-width: 56em) { .bar__where { display: none; } .bar__inner { grid-template-columns: auto minmax(0, 1fr); } }
@media (max-width: 40em) {
  .bar nav a:not(.bar__keep) { display: none; }
  .wordmark { font-size: var(--step-body); gap: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) { .bar, .bar__lights i::after { transition: none; } }

/* ---------- Hero: bildschirmfüllend, ein riesiges Licht mit wechselnden Fakten ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100svh; display: grid; align-items: center;
  background: var(--ink); color: var(--on-dark);
}
.hero__inner {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--gutter); align-items: center;
  padding-block: clamp(6.5rem, 12svh, 9rem) clamp(2rem, 6svh, 4rem);
}
.hero__text { display: grid; gap: clamp(1.5rem, 3svh, 2.25rem); position: relative; z-index: 1; }
.hero .display { font-size: clamp(3.4rem, 0.8rem + 7.2vw, 8.5rem); }
.hero__lead { max-width: 36ch; color: var(--on-dark); }
.hero__action { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero__stage { display: grid; justify-items: center; gap: 1.5rem; }
.hero__light {
  width: min(100%, 64svh, 42rem); aspect-ratio: 1; border-radius: 50%;
  background: var(--light); color: var(--ink); display: grid; place-items: center;
}
.hero__facts { list-style: none; margin: 0; padding: 0; display: grid; width: 74%; }
.hero__fact {
  grid-area: 1 / 1; text-align: center; visibility: hidden; opacity: 0; transform: translateY(18px);
  transition: opacity 450ms ease, transform 700ms var(--ease-out), visibility 0s linear 450ms;
}
.hero__fact.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.hero__fact a { display: grid; gap: 0.9rem; justify-items: center; color: inherit; text-decoration: none; }
.hero__fact-num { font-size: clamp(4rem, 1.5rem + 7vw, 9.5rem); font-weight: 600; letter-spacing: -0.06em; line-height: 0.85; }
.hero__fact-cap { font-size: var(--step-lead); line-height: 1.25; font-weight: 500; letter-spacing: -0.01em; max-width: 19ch; }
.hero__fact a:hover .hero__fact-cap { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.06em; }
/* Drei Kampfrichter unter dem Licht: geben nacheinander Weiß, dann kommt der nächste Fakt */
.hero__judges { display: flex; gap: 0.9rem; }
.hero__judges i { width: 1.4rem; aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; background: color-mix(in srgb, var(--light) 18%, transparent); }
.hero__judges i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--light); transform: scale(0); }
.hero__judges.is-run i::after { animation: judge 420ms var(--ease-out) both; animation-delay: calc(1100ms + var(--n) * 700ms); }
.hero__judges i:nth-child(1) { --n: 0; } .hero__judges i:nth-child(2) { --n: 1; } .hero__judges i:nth-child(3) { --n: 2; }
.hero__judges.is-paused i::after { animation-play-state: paused; }
@keyframes judge { to { transform: none; } }
/* Von Hand blättern: runde Knöpfe neben den Kampfrichtern, erscheinen beim Zeigen auf das Licht */
.hero__controls { display: flex; align-items: center; gap: 1.25rem; }
.hero__step {
  width: 2.5rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--light) 14%, transparent); color: var(--light);
  opacity: 0; transition: opacity var(--t-ui) ease, background-color var(--t-hover) ease;
}
.hero__stage:hover .hero__step, .hero__stage:focus-within .hero__step { opacity: 1; }
.hero__step:hover { background: color-mix(in srgb, var(--light) 26%, transparent); }
@media (hover: none) { .hero__step { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__fact { transition: none; } }
@media (max-width: 56em) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: 6.5rem 2rem; gap: 2.5rem; }
  .hero__light { width: min(86vw, 26rem); }
  .hero__fact-cap { font-size: var(--step-body); }
}

/* ---------- Rechner: überall gleich, Stahlblau nur für Rechner ----------
   Links die Eingaben auf Stahl, rechts das Ergebnis auf Schwarz, unten die Leiste zum Teilen. */
.calc { padding-block: var(--pad-section); display: grid; gap: var(--gap-head); }
.calc__back { justify-self: start; }
.calcbox {
  --pad: clamp(1.25rem, 2.5vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--calc); color: var(--ink); padding: 0.625rem; font-family: var(--font);
}
.calcbox__in { padding: calc(var(--pad) - 0.625rem); display: flex; flex-direction: column; gap: 1.25rem; container-type: inline-size; }
/* Wie gerechnet wird: steht unten in der Eingabespalte, unter einer feinen Linie */
.calcbox__how { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); font-size: var(--step-small); line-height: 1.45; max-width: 48ch; }
.calcbox__how b { display: block; margin-bottom: 0.2rem; }
.calcbox__tag { display: flex; align-items: center; gap: 0.55rem; font-size: var(--step-small); font-weight: 600; }
.calcbox__dot { width: 0.8rem; aspect-ratio: 1; border-radius: 50%; background: var(--ink); }
.calcbox__out { background: var(--ink); color: var(--on-dark); padding: var(--pad); display: grid; gap: 1.5rem; align-content: start; min-width: 0; container-type: inline-size; }
.calcbox__noscript { grid-column: 1 / -1; padding: 1rem; }
/* Eingaben untereinander; was zusammengehört, steht in einer Reihe (Rechner der Startseite:
   Körpergewicht und Altersklasse, dann die drei Lifts) */
.calcbox form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem 0.75rem; align-items: end; }
.calcbox .calc__form { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.calc__form > * { grid-column: span 2; }
.calc__form > .fieldset--wide, .calc__form > .fieldset--total { grid-column: 1 / -1; }
.calc__form > .fieldset:has(#in-bw), .calc__form > .fieldset:has(#in-age) { grid-column: span 3; }
.fieldset--wide { grid-column: 1 / -1; }
.calcbox__share { padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--light) 16%, transparent); }

/* Kategorie, Übung: Auswahl als Feld */
.seg { display: flex; gap: 0.25rem; padding: 0.25rem; background: var(--surface); border-radius: 999px; }
.seg .tab { flex: 1; min-height: 2.75rem; padding: 0 1rem; border-radius: 999px; color: var(--muted); font-size: max(1rem, var(--step-body)); transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.seg .tab[aria-pressed="true"] { background: var(--ink); color: var(--light); font-weight: 600; }
.tabs { display: flex; gap: 1.5rem; }
.tab { font-size: var(--step-body); color: var(--muted); padding-block: 0.25rem; transition: color var(--t-hover) ease; }
.tab[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.tab:hover { color: var(--ink); }

.fieldset { display: grid; gap: 0.35rem; min-width: 0; }
.fieldset label, .fieldset .label { font-size: var(--step-small); color: var(--ink); font-weight: 500; }
.field {
  width: 100%; min-height: 3.25rem; padding: 0.6rem 1rem;
  background: var(--surface); color: var(--ink); border: 0; border-radius: 999px;
  font-size: max(1rem, var(--step-body));
  transition: background-color var(--t-hover) ease;
}
.field:hover { background: #ffffff; }
select.field { appearance: none; padding-right: 2.5rem; background-image: none; }
.fieldset:has(select) { position: relative; }
.fieldset:has(select)::after {
  content: ""; position: absolute; right: 1.1rem; bottom: 1.35rem; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; background: var(--ink); pointer-events: none;
}
.unit { position: relative; }
.unit .field { padding-right: 2.8rem; }
.unit span { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.total { display: flex; align-items: center; min-height: 3.25rem; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; }
.check { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step-small); font-weight: 500; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--ink); margin: 0; }
.range { width: 100%; accent-color: var(--ink); margin: 0.25rem 0 0; }
.range__scale { display: flex; justify-content: space-between; color: var(--muted); margin: 0; }
.range__hint { color: var(--muted); margin: 0.1rem 0 0.35rem; max-width: 46ch; }
.calcbox output { font-weight: 600; }

/* Ergebnis: ein Licht, so weit gefüllt wie der Wert, daneben der Satz */
/* Oben die eigenen Werte als Lichter (das große Licht, daneben die Teilwerte), darunter in normaler
   Schrift ein, zwei Sätze, wie sie zu lesen sind. In allen Rechnern gleich. */
.result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem 1.75rem; align-items: center; }
/* Die Teilwerte stehen nebeneinander und teilen sich gleichmäßig den Platz neben dem großen Licht */
.result .lights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; justify-items: center; }
.rlight {
  width: clamp(8rem, 12vw, 10.5rem); aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; isolation: isolate;
  background: color-mix(in srgb, var(--light) 16%, transparent);
  display: grid; place-content: center; text-align: center; gap: 0.15rem; color: #ffffff;
}
.rlight::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--light);
  transform: translateY(calc((1 - var(--p, 0)) * 100%)); transition: transform 600ms var(--ease-out);
}
/* Die Schrift kehrt sich über der Füllung um: hell auf Schwarz, dunkel auf Weiß */
.rlight b, .rlight span { mix-blend-mode: difference; }
.rlight b { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.1rem); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.rlight span { font-size: var(--step-small); padding-inline: 0.75rem; }
.rsentence { grid-column: 1 / -1; font-size: var(--step-body); line-height: 1.45; max-width: 52ch; margin: 0; color: var(--on-dark-muted); }

.lights { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.light { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; }
.light__dot {
  grid-row: span 2; width: 2.75rem; aspect-ratio: 1; border-radius: 50%;
  background: color-mix(in srgb, var(--light) 16%, transparent); position: relative; overflow: hidden;
}
.light__dot::after {
  content: ""; position: absolute; inset: 0; background: var(--light);
  transform: translateY(calc((1 - var(--p, 0)) * 100%));
  transition: transform 600ms var(--ease-out);
}
.light__name { font-size: var(--step-small); color: var(--on-dark-muted); }
.light__val { font-weight: 600; }

/* Fun Fact: im Ergebnis, unter einer feinen Linie */
.fact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem; align-items: start; padding-top: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--light) 16%, transparent); }
.fact__light {
  width: 5.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--light); color: var(--ink);
  display: grid; place-content: center; text-align: center; gap: 0.15rem;
}
.fact__light:has(.fact__badge:empty) { background: color-mix(in srgb, var(--light) 16%, transparent); }
.fact__badge { font-size: 1.65rem; font-weight: 600; letter-spacing: -0.04em; line-height: 0.9; }
.fact__badge-cap { font-size: 0.72rem; line-height: 1.2; max-width: 8ch; }
.fact__body { display: grid; gap: 0.6rem; }
.fact__title { font-size: var(--step-small); font-weight: 500; color: var(--on-dark-muted); letter-spacing: 0; line-height: 1.3; }
/* Platz für den Fakt ist von Anfang an da (drei Zeilen, Knopfzeile), damit nichts springt, wenn er geladen ist */
.fact__text { font-size: var(--step-body); line-height: 1.45; font-weight: 500; text-wrap: pretty; max-width: 52ch; min-height: calc(3 * 1.45em); }
.fact__text b { font-weight: 600; color: var(--light); }
.fact__text .link { color: inherit; }
.fact__bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; min-height: 2.6rem; }
.fact__bar .button { background: var(--light); color: var(--ink); }
.fact__count { color: var(--on-dark-muted); }
.fact.is-flash .fact__light { animation: fact-on 520ms var(--ease-out); }
@keyframes fact-on { from { transform: scale(0.86); opacity: 0.35; } to { transform: none; opacity: 1; } }

/* Diagramm eines Rechners: helle Karte im Ergebnis */
.tool__fig { background: var(--surface); color: var(--ink); padding: 1rem 1.25rem; display: grid; gap: 0.6rem; margin: 0; min-width: 0; }

@media (max-width: 56em) {
  .calcbox { grid-template-columns: minmax(0, 1fr); }
  .calcbox form:not(.calc__form) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calcbox__in { padding: calc(var(--pad) - 0.625rem) calc(var(--pad) - 0.625rem) var(--pad); }
}
/* Schmale Eingabespalte (Studien): Umschalter kleiner gesetzt, damit drei Wahlmöglichkeiten passen */
@container (max-width: 20rem) {
  .seg .tab { font-size: var(--step-small); padding: 0 0.5rem; }
}
/* Schmal (Handy): je zwei Felder in einer Reihe, Kreuzheben neben dem Total, damit Zahlen lesbar bleiben */
@container (max-width: 26rem) {
  .calc__form > *, .calc__form > .fieldset--total { grid-column: span 3; }
  .calc__form > .fieldset--wide { grid-column: 1 / -1; }
}
/* Schmales Ergebnisfeld (Studienspalte, Handy): Licht über dem Satz */
/* Schmal (Handy, Studienspalte): die Teilwerte in einer Reihe unter dem großen Licht, Licht über der Zahl */
@container (max-width: 30rem) {
  .result { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1.25rem; }
  .result .lights { width: 100%; }
  .result .light { grid-template-columns: auto; justify-items: center; text-align: center; row-gap: 0.15rem; }
  .result .light__dot { grid-row: auto; margin-bottom: 0.35rem; }
}

/* ---------- Teilen: Netzwerke direkt, für Diagramme klein und zurückhaltend ---------- */
.sharebar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-family: var(--font); }
.sharebar__label { font-size: var(--step-small); font-weight: 600; margin-right: 0.35rem; }
.sharebar__btn {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; color: inherit;
  background: color-mix(in srgb, currentColor 13%, transparent);
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.sharebar__btn svg { width: 18px; height: 18px; }
.sharebar__btn:active { transform: scale(0.92); }
.sharebar__btn:disabled { opacity: 0.5; cursor: progress; }
@media (hover: hover) { .sharebar__btn:hover { background: color-mix(in srgb, currentColor 24%, transparent); } }
.sharebar__status { font-size: var(--step-small); margin-left: 0.4rem; }
.sharebar--small { gap: 0.1rem; color: var(--muted); }
.sharebar--small .sharebar__label { font-size: 0.75rem; font-weight: 500; margin-right: 0.25rem; }
.sharebar--small .sharebar__btn { width: 2rem; height: 2rem; background: none; opacity: 0.7; }
.sharebar--small .sharebar__btn svg { width: 15px; height: 15px; }
.sharebar--small .sharebar__status { font-size: 0.75rem; color: var(--ink); }
@media (hover: hover) { .sharebar--small .sharebar__btn:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); } }
.sharebar--small .sharebar__btn:focus-visible { opacity: 1; }

/* Links zu Rechnern tragen ihre Farbe: ein stahlblauer Punkt */
.calc-link, .bar__sub .sub__tool { text-decoration: none; }
.calc-link::before, .bar__sub .sub__tool::before {
  content: ""; display: inline-block; width: 0.72em; height: 0.72em; border-radius: 50%;
  background: var(--calc); margin-right: 0.45em; vertical-align: -0.04em;
}
.calc-link:hover { text-decoration: underline; text-underline-offset: 0.18em; }

/* ---------- Befunde: Index mit Vorschau ---------- */
/* Die Studien sind die zweite Bühne: dunkel, die Lichter der Studien weiß. Ohne Bühne (Handy) eine Liste. */
.findings__intro { grid-column: 1 / -1; }
.stage__skip { grid-column: 1 / -1; justify-self: start; }
.index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.stage__pin { padding-block: var(--pad-section); row-gap: var(--gap-head); }
.index__list { grid-column: 1 / 7; display: grid; gap: clamp(4rem, 7vw, 6rem); }
.cat { display: grid; gap: 2.5rem; }
.cat__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.cat__title { display: grid; gap: 0.35rem; }
.cat__name { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.cat__name a { text-decoration: none; }
.cat__name a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.cat__q { max-width: 44ch; }
.cat__count { color: var(--muted); }
.cat__light { width: 2.5rem; aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, currentColor 18%, transparent); margin-top: 0.1rem; }
.cat__light.is-out { background: var(--light); }
.cat__button { margin-top: 0.2rem; }
.cat__actions { display: grid; gap: 0.5rem; justify-items: end; }
.cat__tool { font-size: var(--step-small); font-weight: 500; white-space: nowrap; }
.cat__tool::after { content: " →"; }
.cat .cat__items { padding-left: calc(2.5rem + 1rem); }
.item__study { font-weight: 600; white-space: nowrap; }
.item__study::after { content: " →"; }
@media (max-width: 40em) {
  .cat__head { grid-template-columns: auto minmax(0, 1fr); }
  .cat__button { justify-self: start; }
  .cat__actions { grid-column: 2; justify-items: start; }
  .cat .cat__items { padding-left: 0; }
}
.cat__items { display: grid; gap: 2.25rem; }
.item { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; transition: opacity var(--t-ui) ease; scroll-margin-top: 6rem; }
/* Die Kennzahl des Befunds, mit Beschriftung: die Zahl steht nie unerklärt da. */
.item__key { display: grid; gap: 0.3rem; align-content: start; }
.item__key b { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.item__key span { font-size: var(--step-small); line-height: 1.35; color: var(--muted); }
.item__body { display: grid; gap: 0.4rem; min-width: 0; }
.item__top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.item__name { font-size: var(--step-body); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; text-align: left; }
.item__desc { color: var(--muted); max-width: 44ch; }
.item__inline { display: none; margin-top: 1rem; background: var(--surface); padding: 1rem; position: relative; }
.item.is-active .item__name { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
.index__frame {
  grid-column: 8 / 13; position: sticky; top: 5rem;
  background: var(--surface); padding: clamp(1.25rem, 2vw, 2rem);
  display: grid; gap: 1rem; min-width: 0;
}
.frame__title { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.frame__src { color: var(--muted); }
.frame__chart { min-height: 18rem; }
.index__frame.is-swapping .frame__chart, .index__frame.is-swapping .frame__title { opacity: 0; }
.frame__chart, .frame__title { transition: opacity var(--t-ui) ease; }
@media (hover: hover) and (pointer: fine) {
  .index__list:has(.item:hover) .item:not(:hover) { opacity: 0.55; }
}
/* Bühne (nur breite Bildschirme mit Maus, gesetzt von app.js): Der Abschnitt bleibt einen
   Bildschirm hoch stehen, Scrollen blättert Studie für Studie weiter. Links die Studie mit ihren
   Befunden, rechts mittig das Diagramm, unten der Fortschritt. Ohne die Klasse bleibt es die Liste. */
.stage__nav { display: none; }
.stage.is-pinned { --step: 85svh; height: calc(100svh + (var(--n) - 1) * var(--step)); }
.stage.is-pinned .stage__pin {
  position: sticky; top: 0; height: 100svh; padding-block: 5rem 1.5rem;
  grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; row-gap: 1.25rem;
}
.stage.is-pinned .findings__intro { grid-row: 1; gap: 0.5rem; }
.stage.is-pinned .stage__skip { grid-row: 3; grid-column: 10 / -1; justify-self: end; align-self: end; }
.stage.is-pinned .index__list { grid-row: 2; display: grid; align-self: center; }
.stage.is-pinned .cat {
  grid-area: 1 / 1; align-self: center; align-content: start; gap: 1.75rem; opacity: 0; visibility: hidden; transform: translateY(2rem);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out), visibility 0s linear 520ms;
}
.stage.is-pinned .cat.is-past { transform: translateY(-2rem); }
.stage.is-pinned .cat.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.stage.is-pinned .cat__items { gap: 1.5rem; }
.stage.is-pinned .index__frame { position: static; grid-row: 2; align-self: center; }
.stage.is-pinned .stage__nav {
  grid-column: 1 / 10; grid-row: 3; display: grid; align-items: end; gap: 0.75rem var(--gutter);
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.stage__seg { display: grid; gap: 0.55rem; text-align: left; font-size: var(--step-small); color: var(--muted); }
.stage__seg[aria-current="step"] { color: var(--on-dark); font-weight: 600; }
.stage__bar { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--light) 18%, transparent); overflow: hidden; }
.stage__bar i { display: block; height: 100%; background: var(--light); transform-origin: left; transform: scaleX(var(--f, 0)); }
.stage__seg:hover { color: var(--on-dark); }
.stage__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage.is-tight .stage__pin { padding-block: 4.25rem 1rem; row-gap: 0.85rem; }
.stage.is-tight .cat { gap: 1.1rem; }
.stage.is-tight .cat__items { gap: 0.9rem; }
.stage.is-tight .item__desc { font-size: var(--step-small); line-height: 1.45; }
.stage.is-tight .item__key b { font-size: 1.6rem; }
.stage.is-tight .frame__chart { min-height: 0; }
.stage.is-tight .index__frame { padding: 1.1rem 1.4rem; gap: 0.7rem; }
.stage.is-tighter .findings__intro p { display: none; }
@media (prefers-reduced-motion: reduce) { .stage.is-pinned .cat { transition: none; transform: none; } }
@media (max-width: 56em), (hover: none) {
  .index__list { grid-column: 1 / -1; }
  .index__frame { display: none; }
  .item.is-open .item__inline { display: block; }
  .item__name::after { content: " +"; font-weight: 500; }
  .item.is-open .item__name::after { content: " −"; }
}

/* ---------- Charts (Interface-Fragment) ---------- */
[data-ui] .legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: var(--step-small); color: var(--muted); margin-bottom: 0.5rem; }
[data-ui] .legend i { display: inline-block; width: 0.9rem; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 0.4rem; }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font); font-size: 12px; fill: var(--muted); }
.chart .dl { font-weight: 600; fill: var(--ink); }
.tip {
  position: absolute; pointer-events: none; z-index: 3;
  background: var(--ink); color: var(--light); border-radius: 0.5rem;
  padding: 0.5rem 0.7rem; font-size: 0.8125rem; min-width: 9rem;
}
.tip b { display: block; margin-bottom: 0.2rem; }
.tip .r { display: flex; justify-content: space-between; gap: 1rem; font-variant-numeric: tabular-nums; }
.tip .r i { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.4rem; }

/* ---------- Band: vier Lichter mit Bildern ---------- */
/* Sport, Archiv, Datensatz: was die Seite auswertet, in drei ruhigen Schritten auf Salbei.
   Je Schritt ein Licht: zwei Bilder, dann ein Licht mit der Zahl. Darunter Titel und ein Absatz. */
.story { padding-block: var(--pad-section); display: grid; gap: var(--gap-head); }
.story__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--gutter); }
.story__step { display: grid; gap: 0.75rem; align-content: start; }
.story__step > p { max-width: 40ch; }
.story__light { display: block; width: min(100%, 13rem); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin: 0 0 1.25rem; }
.story__light.is-archive { filter: grayscale(1) contrast(1.05); object-position: 50% 35%; }
/* Ein Licht mit Zahl: weiß, die Zahl wächst mit dem Kreis */
.story__num { background: var(--light); container-type: inline-size; display: grid; place-content: center; justify-items: center; text-align: center; gap: 0.2rem; max-width: none; }
.story__num b { font-size: 22cqi; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.story__num span { font-size: max(0.75rem, 8cqi); line-height: 1.2; color: var(--muted); }
.story__kicker { font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.story__name { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1.15; }
.story__link { font-weight: 600; white-space: nowrap; }
.story__link::after { content: " →"; }
@media (max-width: 56em) {
  .story__steps { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .story__light { width: 10rem; }
}

/* ---------- Über: helles Band, links das Archivbild als Licht, rechts der Text ---------- */
.about { padding-block: var(--pad-section); display: grid; gap: var(--gap-head); }
.about__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem var(--gutter); align-items: center; }
.about__photo { grid-column: 1 / 6; width: 100%; max-width: 24rem; aspect-ratio: 1; }
.about__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 50%; }
.about__text { grid-column: 7 / 13; display: grid; gap: 1.25rem; }
.about__text p { max-width: 44ch; }
@media (max-width: 56em) {
  .about__photo { grid-column: 1 / -1; max-width: 22rem; }
  .about__text { grid-column: 1 / -1; }
}

/* ---------- Footer: kompakter Abschluss mit drei Lichtern ---------- */
.foot { background: var(--ink); color: var(--on-dark); --muted: var(--on-dark-muted); padding-block: var(--pad-section) 1.75rem; }
.foot .wrap { display: grid; gap: 2.5rem; }
/* Drei Zeilen: Name und Regel links, Lichter rechts; die Links in drei Spalten; der Schluss. */
.foot__top, .foot__last { --rule: color-mix(in srgb, var(--light) 16%, transparent); }
.foot__mark { display: block; width: clamp(9rem, 16vw, 14rem); height: auto; fill: var(--light); }
.foot__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem var(--gutter); padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
.foot__brand { display: grid; gap: 1rem; }
.foot__rule { font-size: var(--step-lead); line-height: 1.3; letter-spacing: -0.01em; max-width: 34ch; }
.foot__name { font-size: var(--step-head); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; max-width: none; }
.foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2rem var(--gutter); }
.foot__cols > div { grid-column: span 3; display: grid; gap: 0.75rem; align-content: start; }
.foot__cols > .foot__credits { grid-column: span 6; }
.foot__h { font-size: var(--step-body); letter-spacing: -0.01em; line-height: 1.3; }
.foot__list { display: grid; gap: 0.35rem; font-size: var(--step-body); }
.foot__list.small { font-size: var(--step-small); color: var(--muted); }
.foot__last { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
@media (max-width: 56em) {
  .foot__cols > div, .foot__cols > .foot__credits { grid-column: span 6; }
  .foot__cols > .foot__credits { grid-column: 1 / -1; }
  .foot__mark { width: 6.5rem; }
}



/* ---------- Bewegung (Inhalt bleibt ohne Skript sichtbar) ---------- */
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines [data-line] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
  .js .lines [data-line] { transform: translateY(105%); animation: line 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .hero__light { animation: light-on 1400ms var(--ease-out) both; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes line { to { transform: none; } }
/* Nur opacity und scale: die Lage (transform) bleibt bei jeder Breite unberührt. */
@keyframes light-on {
  from { opacity: 0.15; scale: 0.92; }
  to { opacity: 1; scale: 1; }
}
@keyframes drift { to { transform: scale(1.06) rotate(-2deg); } }