@import url("/static/fonts/fonts.css");

/* ==========================================================================
   Kognita
   Die Seite ist als Messprotokoll gebaut, nicht als Prospekt. Struktur kommt
   von Haarlinien und einer Messleiste, nicht von Karten und Schatten.
   Siehe docs/DESIGN.md.
   ========================================================================== */

:root {
  --paper:      #F1F2EE;
  --paper-2:    #E6E8E1;
  --paper-3:    #DADDD3;
  --ink:        #1A2226;
  --ink-soft:   #576267;
  --ink-faint:  #7C8783;
  --rule:       #C6CBC0;
  --rule-soft:  #DCDFD6;

  --blue:       #1D3FD8;
  --blue-deep:  #142CA0;
  --blue-wash:  #E4E8FB;
  --signal:     #B3331F;
  --signal-wash:#F7E5E1;
  --good:       #17765C;
  --good-wash:  #E0EFE9;

  --deep:       #111A1E;
  --deep-2:     #1B272C;
  --deep-rule:  #33444A;
  --deep-ink:   #E8EBE6;
  --deep-faint: #8A9C9F;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --t-xs: 13px;
  --t-sm: 15px;
  --t-base: 17px;
  --t-md: 19px;
  --t-lg: 24px;
  --t-xl: 32px;
  --t-2xl: 44px;
  --t-3xl: clamp(40px, 6.4vw, 74px);
  --t-num: clamp(56px, 12vw, 128px);

  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --w-text: 68ch;
  --w-wide: 1180px;
  --w-full: 1400px;

  --r-sm: 2px;
  --r-md: 3px;

  --gutter: 20px;
  --section: 96px;
}

@media (min-width: 768px)  { :root { --gutter: 40px; } }
@media (min-width: 900px)  { :root { --section: 128px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; } }

/* Dunkle Systemeinstellung bekommt eine gedaempfte Papierwelt, keine Invertierung. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:    #14191C;
    --paper-2:  #1D2428;
    --paper-3:  #2A3338;
    --ink:      #E6E9E3;
    --ink-soft: #A3AFAC;
    --ink-faint:#76817E;
    --rule:     #38444A;
    --rule-soft:#2A3338;
    --blue:     #8AA0FF;
    --blue-deep:#B3C1FF;
    --blue-wash:#1E2942;
    --signal:   #E8765C;
    --signal-wash:#3A211C;
    --good:     #5FBFA0;
    --good-wash:#16302A;
  }
}

/* --------------------------------------------------------------------------
   Grundlagen
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.45;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s2);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); letter-spacing: -0.026em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); font-weight: 600; }
h4 { font-size: var(--t-base); font-weight: 600; }

p  { margin: 0 0 var(--s2); max-width: var(--w-text); }
ul, ol { margin: 0 0 var(--s2); padding-left: 1.3em; max-width: var(--w-text); }
li { margin-bottom: 6px; }

a {
  color: var(--blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--blue) 40%, transparent);
}
a:hover { text-decoration-color: currentColor; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, svg { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--s5) 0; }

::selection { background: var(--blue-wash); color: var(--ink); }

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 100;
}
.skip:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.wrap { max-width: var(--w-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-full { max-width: var(--w-full); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-text { max-width: calc(var(--w-text) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section); }
.section-tight { padding-block: var(--s6); }
.section + .section { padding-top: 0; }

.rule-top { border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   Kopf
   -------------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 40;
}
.masthead-inner {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 62px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  letter-spacing: -0.02em; font-size: 19px;
  margin-right: auto;
}
.brand:hover { text-decoration: none; }
.brand svg { width: 26px; height: 26px; display: block; }
.brand .claim {
  color: var(--ink-faint); font-weight: 400; font-size: var(--t-xs);
  border-left: 1px solid var(--rule); padding-left: 10px; margin-left: 2px;
}
@media (max-width: 700px) { .brand .claim { display: none; } }

.masthead nav { display: flex; gap: var(--s3); align-items: center; }
.masthead nav a {
  color: var(--ink-soft); text-decoration: none; font-size: var(--t-sm);
  padding: 4px 0; border-bottom: 2px solid transparent;
}
.masthead nav a:hover, .masthead nav a[aria-current="page"] {
  color: var(--ink); border-bottom-color: var(--ink);
}
@media (max-width: 760px) {
  .masthead nav { display: none; }
  .masthead nav.mobile-open { display: flex; }
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer;
  color: var(--ink); font-family: var(--sans); font-size: var(--t-sm);
}
@media (max-width: 760px) { .nav-toggle { display: block; } }

.mobile-nav {
  display: none; border-top: 1px solid var(--rule); padding-block: var(--s2);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: 11px 0; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-md);
}
.mobile-nav a:last-child { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Tasten
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 48px; padding: 0 24px;
  font-family: var(--sans); font-size: var(--t-base); font-weight: 500;
  border: 1px solid var(--ink); border-radius: var(--r-sm);
  background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; text-decoration: none; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--paper-3); border-color: var(--rule); color: var(--ink-faint);
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent; color: var(--ink); border-color: var(--rule);
}
.btn-ghost:hover { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn-lg { min-height: 56px; padding: 0 32px; font-size: var(--t-md); }
.btn-block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Messleiste. Das Kernbauteil der Seite.
   -------------------------------------------------------------------------- */

.scale { display: block; width: 100%; height: auto; color: var(--ink); }
.scale .axis      { stroke: var(--rule); stroke-width: 1; }
.scale .tick-maj  { stroke: var(--rule); stroke-width: 1; }
.scale .tick-min  { stroke: var(--rule-soft); stroke-width: 1; }
.scale .label     { fill: var(--ink-soft); font-family: var(--mono); font-size: 11px; }
.scale .label-pct { fill: var(--ink-faint); font-family: var(--mono); font-size: 9.5px; }
.scale .curve     { fill: var(--paper-3); stroke: none; }
.scale .curve-line{ fill: none; stroke: var(--rule); stroke-width: 1.25; }
.scale .plumb     { stroke: var(--signal); stroke-width: 2; }
.scale .plumb-dot { fill: var(--signal); stroke: none; }
.scale .ci        { fill: var(--signal); opacity: .30; }
.scale .plumb-val { fill: var(--signal); font-family: var(--mono); font-size: 13px; font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .scale.animate .curve-line {
    stroke-dasharray: 1400; stroke-dashoffset: 1400;
    animation: draw 700ms cubic-bezier(.4,0,.2,1) forwards;
  }
  .scale.animate .curve { opacity: 0; animation: fade 500ms 350ms ease forwards; }
  .scale.animate .plumb-group {
    opacity: 0; animation: fade 500ms 700ms ease forwards;
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* --------------------------------------------------------------------------
   Startseite
   -------------------------------------------------------------------------- */

.hero { padding-block: var(--s6) var(--s5); }
.hero-grid {
  display: grid; gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: var(--s7); }
}

.hero h1 {
  font-size: var(--t-3xl); font-weight: 600; letter-spacing: -0.035em;
  margin-bottom: var(--s3); max-width: 14ch;
}
.hero-lede {
  font-size: var(--t-md); color: var(--ink-soft); max-width: 46ch;
  margin-bottom: var(--s4);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.hero-meta {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2);
  max-width: 520px;
}
.hero-meta dt { font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: 2px; }
.hero-meta dd {
  margin: 0; font-family: var(--mono); font-size: var(--t-md); font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.hero-meta dd small { font-family: var(--sans); font-size: var(--t-xs); font-weight: 400; color: var(--ink-soft); }

/* Die Probe-Aufgabe im Hero. Das eine mutige Element der Seite. */
.probe {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper);
  padding: var(--s3);
}
.probe-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s2); margin-bottom: var(--s2);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft);
}
.probe-head h2 { font-size: var(--t-base); font-weight: 600; margin: 0; }
.probe-head span { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); }
.probe-stem { margin: 0 auto var(--s3); max-width: 300px; color: var(--ink); }
.probe-stem svg { display: block; width: 100%; height: auto; }

.probe-options {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  border: 0; padding: 0; margin: 0;
}
@media (min-width: 500px) and (max-width: 939px) {
  .probe-options { grid-template-columns: repeat(6, 1fr); }
}
.opt {
  aspect-ratio: 1; min-height: 56px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  padding: 9px; cursor: pointer; position: relative;
  transition: border-color 130ms ease, background 130ms ease;
}
.opt svg { display: block; width: 100%; height: 100%; }
.opt:hover { border-color: var(--ink); }
.opt[aria-pressed="true"] { border-color: var(--blue); border-width: 2px; padding: 8px; background: var(--blue-wash); }
.opt.is-right { border-color: var(--good); border-width: 2px; padding: 8px; background: var(--good-wash); }
.opt.is-wrong { border-color: var(--signal); border-width: 2px; padding: 8px; background: var(--signal-wash); }
.opt .key {
  position: absolute; top: 3px; left: 5px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
}
.probe-feedback {
  margin-top: var(--s2); min-height: 44px; font-size: var(--t-sm);
  color: var(--ink-soft); line-height: 1.4;
}
.probe-feedback strong { color: var(--ink); font-weight: 600; }
.probe-feedback.right strong { color: var(--good); }
.probe-feedback.wrong strong { color: var(--signal); }

/* Skalen-Band unter dem Hero */
.scale-band {
  border-block: 1px solid var(--rule);
  background: var(--paper);
  padding-block: var(--s4);
}
.scale-band .caption {
  font-size: var(--t-sm); color: var(--ink-soft); margin-top: var(--s2);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Inhaltsbausteine
   -------------------------------------------------------------------------- */

.lede { font-size: var(--t-md); color: var(--ink-soft); max-width: 56ch; }

.section-head { margin-bottom: var(--s5); }
.section-head h2 { max-width: 22ch; }
.section-head p { color: var(--ink-soft); max-width: 58ch; }

/* Protokollzeilen: Fakten als Messtabelle statt als Kartenreihe. */
.protocol { border-top: 1px solid var(--rule); }
.protocol-row {
  display: grid; gap: 6px var(--s4); padding-block: var(--s3);
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .protocol-row { grid-template-columns: 190px minmax(0, 1fr); align-items: start; }
}
.protocol-row dt { font-weight: 600; font-size: var(--t-base); }
.protocol-row dd { margin: 0; color: var(--ink-soft); max-width: 62ch; }

/* Bereichsliste mit eigener Mini-Grafik */
.domains { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.domain-row {
  display: grid; gap: var(--s2) var(--s4); padding-block: var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .domain-row { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
}
.domain-icon { width: 72px; height: 72px; color: var(--ink); }
.domain-icon svg { width: 100%; height: 100%; display: block; }
.domain-row h3 { margin-bottom: 6px; }
.domain-row p { color: var(--ink-soft); margin-bottom: 0; }

/* Ablauf, echte Abfolge, deshalb nummeriert */
.steps { counter-reset: step; border-top: 1px solid var(--rule); }
.steps li {
  counter-increment: step; list-style: none;
  display: grid; gap: 4px var(--s3); padding-block: var(--s3);
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: 34px minmax(0, 1fr);
}
.steps { padding-left: 0; }
.steps li::before {
  content: counter(step);
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-faint);
  padding-top: 3px;
}
.steps li strong { display: block; font-weight: 600; }
.steps li span { color: var(--ink-soft); grid-column: 2; }

/* Hinweiskasten, sparsam einsetzen */
.note {
  border-left: 2px solid var(--rule); padding: 2px 0 2px var(--s3);
  color: var(--ink-soft); font-size: var(--t-sm); max-width: 62ch;
  margin-block: var(--s3);
}
.note strong { color: var(--ink); }
.note-signal { border-left-color: var(--signal); }
.note-blue { border-left-color: var(--blue); }

/* --------------------------------------------------------------------------
   Preise
   -------------------------------------------------------------------------- */

.tiers { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin-top: var(--s5); }
@media (min-width: 820px) { .tiers { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }

.tier {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s4); display: flex; flex-direction: column;
  background: var(--paper);
}
.tier.recommended { border-color: var(--ink); border-width: 2px; padding: calc(var(--s4) - 1px); }
.tier-flag {
  font-size: var(--t-xs); color: var(--ink-soft); margin-bottom: var(--s1);
  min-height: 18px;
}
.tier.recommended .tier-flag { color: var(--ink); font-weight: 600; }
.tier h3 { font-size: var(--t-lg); margin-bottom: 6px; }
.tier .price {
  font-family: var(--mono); font-size: 40px; font-weight: 500;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  margin-block: var(--s2) 4px;
}
.tier .price small { font-size: var(--t-sm); color: var(--ink-soft); font-weight: 400; letter-spacing: 0; }
.tier .blurb { color: var(--ink-soft); font-size: var(--t-sm); margin-bottom: var(--s3); }
.tier ul { list-style: none; padding: 0; margin: 0 0 var(--s4); }
.tier li {
  padding-left: 22px; position: relative; margin-bottom: 10px;
  font-size: var(--t-sm); color: var(--ink);
}
.tier li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 11px; height: 6px; border-left: 1.5px solid var(--good);
  border-bottom: 1.5px solid var(--good); transform: rotate(-45deg);
}
.tier .btn { margin-top: auto; }

.pay-methods {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px solid var(--rule-soft);
  font-size: var(--t-xs); color: var(--ink-faint);
}
.pay-methods svg { height: 20px; width: auto; }

/* --------------------------------------------------------------------------
   Testlauf: eigener Modus, dunkler Grund
   -------------------------------------------------------------------------- */

body.page-run {
  background: var(--deep); color: var(--deep-ink);
  min-height: 100svh; display: flex; flex-direction: column;
}

.run-bar {
  border-bottom: 1px solid var(--deep-rule);
  padding: 12px var(--gutter);
  display: flex; align-items: center; gap: var(--s3);
  position: sticky; top: 0; background: var(--deep); z-index: 10;
}
.run-count {
  font-family: var(--mono); font-size: var(--t-sm); color: var(--deep-ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.run-count b { font-weight: 500; }
.run-count span { color: var(--deep-faint); }
.run-progress { flex: 1; display: flex; gap: 2px; align-items: center; min-width: 60px; }
.run-progress i {
  display: block; flex: 1; height: 14px; background: var(--deep-rule);
  border-radius: 1px; transition: background 150ms ease;
}
.run-progress i.done { background: var(--deep-faint); }
.run-progress i.here { background: var(--deep-ink); height: 20px; }
@media (max-width: 640px) { .run-progress i { height: 10px; } .run-progress i.here { height: 16px; } }

.run-timer {
  font-family: var(--mono); font-size: var(--t-md); font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--deep-ink); white-space: nowrap;
}
.run-timer.warn { color: #E8765C; }

.run-main {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: var(--s5) var(--gutter);
  max-width: 720px; margin-inline: auto; width: 100%;
}
/* Aufgabe, Beschriftung und Antworten teilen sich EINE Breite. Vorher waren
   Stamm (340) und Antwortreihe (660) beide zentriert, aber verschieden breit,
   und die Kanten sprangen. Bei einer Aufgabe, bei der es aufs Hinsehen ankommt,
   ist das mehr als ein Schoenheitsfehler. */
.run-block { max-width: 380px; margin-inline: auto; width: 100%; }

.run-domain {
  font-size: var(--t-xs); color: var(--deep-faint); margin-bottom: var(--s2);
  text-align: center;
}
.run-stem { margin: 0 auto var(--s4); max-width: 380px; color: var(--deep-ink); width: 100%; }
.run-stem svg { display: block; width: 100%; height: auto; }
.run-stem-text {
  font-size: var(--t-md); line-height: 1.5; color: var(--deep-ink);
  max-width: 46ch; margin-inline: auto; text-align: center;
}
.run-stem-text .mono { font-family: var(--mono); font-size: var(--t-lg); letter-spacing: 0.02em; display: block; margin-top: var(--s2); }

.run-options { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
/* Figurale Antworten immer dreispaltig, in derselben Breite wie die Aufgabe.
   Sechs in einer Reihe waeren auf dem Bildschirm zwar breiter, aber jede Flaeche
   waere dann rund 100 px schmal und die Reihe haette eine andere Kante als der
   Stamm darueber. Zwei Reihen zu dritt geben groessere Ziele und eine ruhige
   Achse. */
.run-options.figural {
  grid-template-columns: repeat(3, 1fr);
  max-width: 380px; margin-inline: auto;
}
.run-options.textual { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
@media (min-width: 560px) { .run-options.textual { grid-template-columns: repeat(2, 1fr); } }

.run-opt {
  border: 1px solid var(--deep-rule); border-radius: var(--r-sm);
  background: transparent; color: var(--deep-ink);
  cursor: pointer; position: relative; min-height: 56px;
  display: flex; align-items: center; justify-content: center;
  padding: 10px; font-family: var(--sans); font-size: var(--t-base);
  transition: border-color 130ms ease, background 130ms ease;
}
.run-options.figural .run-opt { aspect-ratio: 1; }
.run-opt svg { display: block; width: 100%; height: 100%; }
.run-opt:hover { border-color: var(--deep-faint); }
.run-opt[aria-pressed="true"] {
  border-color: var(--deep-ink); border-width: 2px; padding: 9px;
  background: var(--deep-2);
}
.run-opt .key {
  position: absolute; top: 4px; left: 6px;
  font-family: var(--mono); font-size: 10px; color: var(--deep-faint);
}
.run-opt .txt { font-family: var(--mono); font-size: var(--t-md); font-variant-numeric: tabular-nums; }
.run-options.textual .run-opt { justify-content: flex-start; padding-left: 28px; text-align: left; }

.run-nav {
  display: flex; gap: var(--s2); align-items: center; justify-content: space-between;
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--deep-rule);
  max-width: 520px; margin-inline: auto;
}
.run-nav .btn {
  background: transparent; border-color: var(--deep-rule); color: var(--deep-ink);
}
.run-nav .btn:hover { background: var(--deep-2); border-color: var(--deep-faint); color: var(--deep-ink); }
.run-nav .btn-final { background: var(--deep-ink); color: var(--deep); border-color: var(--deep-ink); }
.run-nav .btn-final:hover { background: #fff; color: var(--deep); border-color: #fff; }
.run-hint { font-size: var(--t-xs); color: var(--deep-faint); text-align: center; margin-top: var(--s3); }
@media (max-width: 620px) { .run-hint.keys { display: none; } }

.run-overlay {
  position: fixed; inset: 0; background: rgba(17,26,30,.94);
  display: none; align-items: center; justify-content: center;
  padding: var(--gutter); z-index: 60;
}
.run-overlay.open { display: flex; }
.run-overlay-box {
  max-width: 460px; text-align: center; color: var(--deep-ink);
}
.run-overlay-box h2 { color: var(--deep-ink); }
.run-overlay-box p { color: var(--deep-faint); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Ergebnis
   -------------------------------------------------------------------------- */

.result-head { padding-block: var(--s6) var(--s4); }
.result-value { text-align: center; padding-block: var(--s4) var(--s2); }
.result-value .n {
  font-family: var(--mono); font-size: var(--t-num); font-weight: 500;
  letter-spacing: -0.04em; line-height: 0.95; font-variant-numeric: tabular-nums;
  display: block;
}
.result-value .ci {
  font-family: var(--mono); font-size: var(--t-sm); color: var(--ink-soft);
  margin-top: var(--s2); display: block;
}
.result-value .band { font-size: var(--t-md); color: var(--ink); margin-top: 4px; display: block; }

.locked-value {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: var(--mono); font-size: var(--t-num); font-weight: 500;
  letter-spacing: -0.04em; line-height: 0.95; color: var(--ink-faint);
}
.locked-value i { font-style: normal; }

.result-rows { border-top: 1px solid var(--rule); margin-top: var(--s5); }
.result-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4);
  padding-block: 14px; border-bottom: 1px solid var(--rule-soft); align-items: baseline;
}
.result-row dt { color: var(--ink-soft); font-size: var(--t-sm); }
.result-row dd {
  margin: 0; font-family: var(--mono); font-size: var(--t-base);
  font-variant-numeric: tabular-nums; text-align: right;
}
.result-row dd.blurred {
  color: var(--ink-faint); letter-spacing: .12em;
  user-select: none;
}

/* Teilbereichsprofil */
.profile { border-top: 1px solid var(--rule); margin-top: var(--s4); }
.profile-row {
  display: grid; gap: 4px var(--s3); padding-block: var(--s3);
  border-bottom: 1px solid var(--rule-soft);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .profile-row { grid-template-columns: 220px minmax(0,1fr) 62px; align-items: center; }
}
.profile-row .name { font-size: var(--t-sm); font-weight: 500; }
.profile-row .val {
  font-family: var(--mono); font-size: var(--t-base); text-align: right;
  font-variant-numeric: tabular-nums;
}
.profile-bar {
  position: relative; height: 26px;
  border-left: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
}
.profile-bar .mid {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--rule);
}
.profile-bar .fill {
  position: absolute; top: 9px; height: 8px; background: var(--paper-3);
  border: 1px solid var(--rule);
}
.profile-bar .mark {
  position: absolute; top: 4px; bottom: 4px; width: 2px; background: var(--signal);
}
.profile-bar.locked .fill, .profile-bar.locked .mark { opacity: .25; }

.paywall {
  border: 1px solid var(--ink); border-radius: var(--r-md);
  padding: var(--s4); margin-top: var(--s5); background: var(--paper);
}
@media (min-width: 800px) { .paywall { padding: var(--s5); } }
.paywall h2 { font-size: var(--t-xl); max-width: 20ch; }
.paywall .lede { margin-bottom: var(--s4); }

.checkout-form { display: grid; gap: var(--s3); max-width: 520px; }
.field label { display: block; font-size: var(--t-sm); font-weight: 500; margin-bottom: 5px; }
.field input {
  width: 100%; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-base);
}
.field input:focus { border-color: var(--blue); }
.field .help { font-size: var(--t-xs); color: var(--ink-faint); margin-top: 5px; }

.tier-choice { display: grid; gap: 10px; }
.tier-choice label {
  display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: baseline;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  padding: 14px; cursor: pointer; font-size: var(--t-sm);
}
.tier-choice label:has(input:checked) { border-color: var(--ink); border-width: 2px; padding: 13px; }
.tier-choice label b { font-weight: 600; font-size: var(--t-base); }
.tier-choice label .p { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.tier-choice label .d { grid-column: 2 / -1; color: var(--ink-soft); }
.tier-choice input { accent-color: var(--blue); width: 18px; height: 18px; }

.form-error {
  color: var(--signal); font-size: var(--t-sm); min-height: 20px;
}

/* Aufgaben-Nachbesprechung */
.review-item {
  border-top: 1px solid var(--rule-soft); padding-block: var(--s4);
  display: grid; gap: var(--s3); grid-template-columns: 1fr;
}
@media (min-width: 800px) { .review-item { grid-template-columns: 240px minmax(0,1fr); gap: var(--s4); } }
.review-item .stem svg { width: 100%; max-width: 240px; height: auto; display: block; }
.review-head {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: 8px;
}
.review-head .no { font-family: var(--mono); color: var(--ink); }
.verdict { font-weight: 600; font-size: var(--t-sm); }
.verdict.right { color: var(--good); }
.verdict.wrong { color: var(--signal); }
.review-opts { display: flex; gap: 8px; flex-wrap: wrap; margin-block: var(--s2); }
.review-opt {
  width: 54px; height: 54px; border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm); padding: 6px; position: relative;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--t-sm);
}
.review-opt.right { border-color: var(--good); border-width: 2px; padding: 5px; }
.review-opt.picked { border-color: var(--signal); border-width: 2px; padding: 5px; }
.review-opt.right.picked { border-color: var(--good); }
.review-opt svg { width: 100%; height: 100%; }
.review-opt.textual { width: auto; min-width: 54px; padding-inline: 12px; }

/* --------------------------------------------------------------------------
   Artikel
   -------------------------------------------------------------------------- */

.article-head { padding-block: var(--s6) var(--s4); border-bottom: 1px solid var(--rule); }
.article-meta {
  display: flex; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s3);
}
.article-meta span { display: inline-flex; gap: 5px; }
.article-meta .num { color: var(--ink-soft); }

.prose {
  font-family: var(--serif); font-size: var(--t-md); line-height: 1.62;
  max-width: 72ch;
}
.prose h2 {
  font-family: var(--sans); font-size: var(--t-xl); margin-top: var(--s6);
  padding-top: var(--s3); border-top: 1px solid var(--rule);
}
.prose h3 { font-family: var(--sans); font-size: var(--t-lg); margin-top: var(--s5); }
.prose p { margin-bottom: var(--s3); max-width: 72ch; }
.prose ul, .prose ol { margin-bottom: var(--s3); max-width: 70ch; }
.prose li { margin-bottom: 10px; }
.prose strong { font-weight: 600; }
.prose blockquote {
  margin: var(--s4) 0; padding-left: var(--s3);
  border-left: 2px solid var(--signal); color: var(--ink-soft); font-style: normal;
}
.prose table {
  width: 100%; border-collapse: collapse; font-family: var(--sans);
  font-size: var(--t-sm); margin-block: var(--s4);
}
.prose table th, .prose table td {
  text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.prose table th { font-weight: 600; border-bottom-color: var(--rule); }
.prose table td:not(:first-child), .prose table th:not(:first-child) {
  font-variant-numeric: tabular-nums;
}
.table-scroll { overflow-x: auto; margin-block: var(--s4); }
.prose code {
  font-family: var(--mono); font-size: 0.88em; background: var(--paper-2);
  padding: 1px 5px; border-radius: var(--r-sm);
}
.prose a { text-decoration-color: color-mix(in srgb, var(--blue) 45%, transparent); }

.toc {
  border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: var(--s3); margin-block: var(--s4); font-size: var(--t-sm);
  max-width: 56ch;
}
.toc h2 { font-size: var(--t-sm); font-weight: 600; margin: 0 0 10px; border: 0; padding: 0; font-family: var(--sans); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin-bottom: 6px; }
.toc li.lvl3 { padding-left: var(--s3); }
.toc a { color: var(--ink); text-decoration-color: var(--rule); }

.sources { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.sources h2 { font-size: var(--t-base); font-family: var(--sans); border: 0; padding: 0; margin-top: 0; }
.sources ol { padding-left: 1.2em; color: var(--ink-soft); }
.sources a { word-break: break-word; }

.faq-block { margin-top: var(--s6); }
.faq-item { border-bottom: 1px solid var(--rule-soft); }
.faq-item summary {
  cursor: pointer; padding-block: var(--s3); font-weight: 600;
  font-size: var(--t-base); list-style: none; display: flex;
  justify-content: space-between; gap: var(--s3); align-items: baseline;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; font-family: var(--mono); color: var(--ink-faint); flex: none;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item .answer { padding-bottom: var(--s3); color: var(--ink-soft); max-width: 68ch; }
.faq-item .answer p:last-child { margin-bottom: 0; }

.cards { display: grid; gap: var(--s3); grid-template-columns: 1fr; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card-link {
  display: block; padding-block: var(--s3); border-top: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
.card-link:hover { text-decoration: none; }
.card-link h3 { font-size: var(--t-base); margin-bottom: 6px; }
.card-link:hover h3 { color: var(--blue); }
.card-link p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0; }

.index-cluster { margin-bottom: var(--s6); }
.index-cluster h2 { font-size: var(--t-lg); padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.index-list { list-style: none; padding: 0; margin: 0; }
.index-list li { border-bottom: 1px solid var(--rule-soft); }
.index-list a {
  display: grid; gap: 2px var(--s3); padding-block: var(--s3);
  color: var(--ink); text-decoration: none; grid-template-columns: 1fr;
}
@media (min-width: 760px) { .index-list a { grid-template-columns: minmax(0,1fr) 90px; align-items: baseline; } }
.index-list a:hover { text-decoration: none; }
.index-list a:hover strong { color: var(--blue); }
.index-list strong { font-weight: 600; font-size: var(--t-base); }
.index-list span { color: var(--ink-soft); font-size: var(--t-sm); }
.index-list .mins { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint); text-align: right; }

/* --------------------------------------------------------------------------
   Fuss
   -------------------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule); margin-top: var(--s8);
  padding-block: var(--s5) var(--s4); font-size: var(--t-sm);
}
.foot-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s5); } }
.foot h2 { font-size: var(--t-xs); color: var(--ink-faint); font-weight: 500; margin-bottom: 10px; letter-spacing: 0; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 7px; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--blue); }
.foot .disclaimer {
  color: var(--ink-soft); max-width: 46ch; margin-bottom: var(--s3);
}
.foot-bottom {
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--rule-soft);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  font-size: var(--t-xs); color: var(--ink-faint); align-items: center;
}

.crumbs { font-size: var(--t-xs); color: var(--ink-faint); padding-top: var(--s3); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs span { padding-inline: 6px; }

/* Utilities, sparsam */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }
.stack > * + * { margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   Verkaufsbedingungen vor dem Kauf
   -------------------------------------------------------------------------- */
/* Das ist kein Kleingedrucktes. Nach BGE 148 III 57 sind ungewoehnliche Klauseln
   von einer pauschalen Zustimmung ausgenommen, wenn nicht gesondert auf sie
   hingewiesen wurde, und Stripe verlangt fuer die Chargeback-Abwehr, dass die
   Rueckgaberegel vor dem Kauf sichtbar war. Deshalb steht sie im Lesefluss,
   in derselben Schriftgroesse wie der Rest, und nicht kleiner. */

.terms {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s3);
  background: var(--paper-2);
}
.terms h3 { font-size: var(--t-base); margin-bottom: var(--s2); }
.terms ul { list-style: none; padding: 0; margin: 0 0 var(--s3); }
.terms li {
  position: relative; padding-left: 18px; margin-bottom: 10px;
  font-size: var(--t-sm); line-height: 1.5; max-width: none;
}
.terms li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 1px; background: var(--ink-faint);
}
.terms li strong { font-weight: 600; }

.consent {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start; padding-top: var(--s2);
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-sm); line-height: 1.45; cursor: pointer;
}
.consent input {
  width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue);
  flex: none; cursor: pointer;
}
.consent span { max-width: 58ch; }

/* Inhaltsverzeichnis zweispaltig, sobald Platz da ist. Es soll den Textanfang
   nicht unter die Falz schieben. */
@media (min-width: 760px) {
  .toc { max-width: none; }
  .toc ol { columns: 2; column-gap: var(--s4); }
  .toc li { break-inside: avoid; }
}

/* Auf einem flachen Laptopbildschirm soll die Aufgabe samt Navigation ohne
   Scrollen erreichbar sein. Wer waehrend eines Tests unter Zeitdruck scrollen
   muss, um "Weiter" zu finden, verliert Sekunden an der Bedienung statt an der
   Aufgabe. */
@media (max-height: 940px) {
  .run-main { padding-block: var(--s3); }
  .run-stem { margin-bottom: var(--s3); max-width: 320px; }
  .run-options.figural { max-width: 320px; }
  .run-nav { margin-top: var(--s3); }
  .run-hint { margin-top: var(--s2); }
}
@media (max-height: 760px) {
  .run-stem { max-width: 260px; }
  .run-options.figural { max-width: 260px; gap: 8px; }
  .run-domain { margin-bottom: var(--s1); }
}

/* Baustellenband und Platzhalter.
   Solange die Betreiberangaben fehlen, darf die Seite nicht so tun, als waere
   sie fertig. Beides ist absichtlich auffaellig: ein dezenter Hinweis wird
   ueberlesen, und genau das ist hier der Fehler, den man nicht machen darf. */
.baustelle {
  background: var(--signal-wash);
  border-bottom: 2px solid var(--signal);
  padding-block: 12px;
  font-size: var(--t-sm);
  color: var(--ink);
  line-height: 1.45;
}
.baustelle strong { color: var(--signal); }

mark.platzhalter {
  background: var(--signal-wash);
  color: var(--signal);
  border: 1px dashed var(--signal);
  border-radius: var(--r-sm);
  padding: 0 5px;
  font-family: var(--sans);
  font-size: 0.9em;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Nachbesserungen aus der Endnutzer-Kritik
   -------------------------------------------------------------------------- */

/* Tabellen scrollen einzeln, nie die Seite. Die Kantonstabellen sind breiter
   als ein Handy, und vorher lief die ganze Seite um bis zu 222 px ueber. */
.prose .table-scroll {
  overflow-x: auto;
  margin-block: var(--s4);
  border-bottom: 1px solid var(--rule-soft);
  scrollbar-width: thin;
}
.prose .table-scroll table { margin-block: 0; min-width: 34rem; }
.prose .table-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 640px) {
  .prose .table-scroll { font-size: var(--t-sm); }
  .prose .table-scroll th, .prose .table-scroll td { padding-right: 16px; }
}

/* Die Messleiste hat auf 390 px Breite eine Beschriftung von 5 Pixeln gerendert:
   das SVG skaliert samt Schrift. Auf schmalen Schirmen wird die Leiste deshalb
   groesser gezeichnet und dafuer waagrecht gescrollt. Lieber scrollen als
   unlesbar. */
@media (max-width: 720px) {
  .scale-band .wrap-full, .page-ergebnis .wrap { overflow-x: auto; }
  .scale { min-width: 560px; }
  .scale-band .caption { min-width: 0; }
}

/* Der Fokusring auf dem dunklen Testgrund hatte 2.31:1 gegen den Hintergrund.
   WCAG verlangt 3:1 fuer Bedienelemente. Auf dunklem Grund bekommt der Ring
   deshalb eine helle Farbe statt des Blaus. */
body.page-run :where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid #F2F5F0;
  outline-offset: 2px;
}

/* Figurale Aufgaben duerfen auf breiten Schirmen groesser werden. 320 px bei
   1440 px Fensterbreite verschenkt Lesbarkeit genau dort, wo Platz ist. */
@media (min-width: 1100px) and (min-height: 980px) {
  .run-stem { max-width: 460px; }
  .run-options.figural { max-width: 460px; }
}

/* --------------------------------------------------------------------------
   Sprachumschalter und Sprachband
   --------------------------------------------------------------------------
   Der Umschalter ist als Skalenelement gebaut, nicht als Zusatzknopf: drei
   Marken in der Monoschrift, durch Haarlinien getrennt, wie die Teilstriche
   der Messleiste. Die aktuelle Sprache steht in voller Tinte und ist kein
   Link, die anderen sind Links im Interaktionsblau.

   Keine Flaggen. Eine Flagge ist ein Land und keine Sprache, und die Schweiz
   hat vier Landessprachen: ein Schweizerkreuz neben "Deutsch" waere schlicht
   falsch. */

.sprachen {
  display: flex;
  align-items: center;
  gap: 0;
  flex: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.sprachen a,
.sprachen .ist {
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1;
  padding: 7px 9px;
  text-decoration: none;
  border-left: 1px solid var(--rule-soft);
  letter-spacing: 0.01em;
}
.sprachen a:first-child,
.sprachen .ist:first-child { border-left: 0; }
.sprachen .ist {
  color: var(--ink);
  background: var(--paper-2);
  font-weight: 500;
}
.sprachen a { color: var(--blue); background: var(--paper); }
.sprachen a:hover { background: var(--blue-wash); text-decoration: none; }
.sprachen abbr { text-decoration: none; border: 0; }
/* Fehlt die Uebersetzung, fuehrt der Eintrag auf die Startseite der
   Zielsprache. Das darf man sehen, bevor man klickt: gestrichelte Unterlinie
   plus Titel, kein stiller Umweg. */
.sprachen a.ohne { color: var(--ink-faint); }
.sprachen a.ohne abbr { border-bottom: 1px dashed var(--ink-faint); }

@media (max-width: 760px) {
  .masthead-inner .sprachen { display: none; }
}

.mobile-sprachen {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2);
  padding: 14px 0 4px;
  border-top: 1px solid var(--rule-soft);
}
.mobile-sprachen .label {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-faint);
  width: 100%;
}
.mobile-sprachen a, .mobile-sprachen .ist {
  display: inline-block; padding: 6px 0; border: 0; font-size: var(--t-base);
}
.mobile-sprachen .ist { color: var(--ink); font-weight: 600; }
.mobile-sprachen a.ohne { color: var(--ink-faint); }

/* Das Band auf der Startseite fragt, ob die andere Fassung passt. Es leitet
   nie weiter: eine Weiterleitung nach Accept-Language sperrt Googlebot aus,
   der aus den USA kommt, und sie nimmt dem Besucher die Wahl.
   Deshalb ist es leise gehalten, im Gegensatz zum Baustellenband, das laut
   sein muss. */
.sprachband {
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  padding-block: 9px;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.sprachband .wrap { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: baseline; }
.sprachband a { color: var(--blue); }