@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --schwarz: oklch(0.145 0.004 134);
  --flaeche: oklch(0.195 0.005 134);
  --linie: oklch(0.32 0.008 134);
  --linie-feld: oklch(0.55 0.008 134);
  --text: oklch(0.96 0.004 134);
  --text-leise: oklch(0.76 0.008 134);
  --akzent: oklch(0.877 0.2532 134.44);
  --auf-akzent: oklch(0.145 0.004 134);
  --breite: 68rem;
  --rand: clamp(1rem, 4vw, 2.5rem);
  --schrift: "Archivo", system-ui, sans-serif;
  --daten: "IBM Plex Mono", ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--schwarz); color-scheme: dark; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--schwarz);
  color: var(--text);
  font-family: var(--schrift);
  font-size: 1.0625rem;
  line-height: 1.55;
}
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.2em; }
a:hover { color: var(--akzent); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.innen { width: min(100%, var(--breite)); margin-inline: auto; padding-inline: var(--rand); }
.sprung {
  position: absolute; left: 1rem; top: -4rem; z-index: 20;
  padding: 0.5rem 0.75rem; background: var(--akzent); color: var(--auf-akzent);
}
.sprung:focus { top: 1rem; }
.sprung:hover { color: var(--auf-akzent); }

.demo {
  border-bottom: 1px solid var(--linie);
  color: var(--text-leise);
  font-family: var(--daten);
  font-size: 0.8125rem;
}
.demo .innen { padding-block: 0.45rem; }
.demo strong { color: var(--text); font-weight: 500; }

.kopf { position: sticky; top: 0; z-index: 10; background: var(--schwarz); border-bottom: 1px solid var(--linie); }
.kopf .innen { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.marke {
  display: block; padding-block: 0.15rem;
  font-weight: 800; font-stretch: 75%; font-size: 1.625rem; letter-spacing: 0.01em;
  text-decoration: none;
}
.nav ul { display: flex; gap: clamp(0.85rem, 3vw, 1.75rem); }
.nav a { display: block; min-height: 2.75rem; padding-block: 0.6rem; border-bottom: 2px solid transparent; text-decoration: none; color: var(--text-leise); font-size: 0.975rem; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--akzent); }

.held { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2.5rem, 6vw, 4rem); border-bottom: 1px solid var(--linie); }
h1 {
  font-weight: 800; font-stretch: 68%; line-height: 0.94; letter-spacing: -0.01em;
  font-size: clamp(3.25rem, 13vw, 6rem);
}
.status { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; font-family: var(--daten); }
.status-wert { font-size: 1.125rem; font-weight: 500; }
.status-wert::before {
  content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.55em;
  background: var(--akzent); vertical-align: 0.05em;
}
.unter-held { max-width: 40rem; margin-top: 1.25rem; font-size: 1.1875rem; color: var(--text-leise); }

.abschnitt { padding-block: clamp(2.5rem, 7vw, 4.5rem); border-bottom: 1px solid var(--linie); }
h2 { font-weight: 800; font-stretch: 75%; font-size: clamp(1.875rem, 5vw, 2.75rem); line-height: 1.05; }
.seitenkopf { padding-top: clamp(2.5rem, 6vw, 4rem); }
.seitenkopf h1 { font-size: clamp(2.5rem, 8vw, 3.75rem); }
.seitenkopf p { max-width: 40rem; margin-top: 1rem; color: var(--text-leise); }
h3 { font-weight: 700; font-size: 1.125rem; }
.einleitung { max-width: 40rem; margin-top: 0.75rem; color: var(--text-leise); }

.passung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; margin-top: 1.75rem; }
.passung div { padding-block: 0.9rem; border-top: 1px solid var(--linie); }
.passung dt { font-family: var(--daten); font-size: 0.8125rem; color: var(--text-leise); }
.passung dd { margin-top: 0.15rem; font-size: 1.125rem; font-weight: 600; }

.tafel { margin-top: 1.5rem; font-family: var(--daten); font-size: 0.9375rem; }
.tafel > li {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.25rem 1.25rem; align-items: baseline;
  padding-block: 0.8rem; border-top: 1px solid var(--linie);
}
.tafel > li:last-child { border-bottom: 1px solid var(--linie); }
.tafel .zeit { color: var(--text); font-weight: 500; }
.tafel .was { font-family: var(--schrift); font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }
.tafel .was small { display: block; font-family: var(--daten); font-size: 0.8125rem; font-weight: 400; color: var(--text-leise); }
.tafel .rest { color: var(--text-leise); text-align: right; }
.dabei { color: var(--akzent); font-family: var(--schrift); font-weight: 700; }

.knopf, button {
  display: inline-block; min-height: 2.75rem; padding: 0.6rem 1.1rem;
  border: 1px solid var(--linie); border-radius: 0; background: transparent; color: var(--text);
  font-family: var(--schrift); font-size: 1rem; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer;
}
.knopf:hover, button:hover { border-color: var(--text); color: var(--text); }
.knopf-haupt { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.knopf-haupt:hover { background: var(--text); border-color: var(--text); color: var(--auf-akzent); }
.knopf:active, button:not([disabled]):active { transform: translateY(1px); }
button[disabled], button[disabled]:hover { background: transparent; color: var(--text-leise); border-color: var(--linie); cursor: default; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.5rem; }
.hinweis { color: var(--text-leise); font-size: 0.9375rem; }

.wappen-feld { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 2.5rem; align-items: center; }
.wappen-feld img { width: 100%; }

.regeln { margin-top: 1.5rem; max-width: 42rem; }
.regeln li { padding-block: 0.8rem; border-top: 1px solid var(--linie); }
.regeln strong { display: block; }

.formular { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; margin-top: 1.5rem; max-width: 42rem; }
.feld { display: flex; flex-direction: column; gap: 0.3rem; }
.feld-breit { grid-column: 1 / -1; }
.formular label { font-size: 0.9375rem; font-weight: 600; }
.formular input, .formular select {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.7rem;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--linie-feld); border-radius: 0;
  font: inherit;
}
.formular input:hover, .formular select:hover { border-color: var(--text-leise); }
.vorschau { margin-top: 1.5rem; padding: 0.9rem 1rem; max-width: 42rem; border: 1px solid var(--linie); background: var(--flaeche); font-family: var(--daten); font-size: 0.9375rem; overflow-wrap: anywhere; }
.vorschau span { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; color: var(--text-leise); }

.tabelle-rahmen { margin-top: 1.5rem; overflow-x: auto; }
table { width: 100%; min-width: 30rem; border-collapse: collapse; font-family: var(--daten); font-size: 0.9375rem; }
caption { text-align: left; padding-bottom: 0.5rem; color: var(--text-leise); font-size: 0.8125rem; }
th, td { padding: 0.7rem 1rem 0.7rem 0; border-top: 1px solid var(--linie); text-align: left; }
th { font-weight: 500; color: var(--text-leise); }
td:first-child, tbody th { color: var(--text); }

.fuss { padding-block: 2rem; color: var(--text-leise); font-size: 0.9375rem; }
.fuss .innen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; }
.fuss ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.fuss a { display: inline-block; padding-block: 0.8rem; }

@media (max-width: 40rem) {
  .kopf { position: static; }
  .demo { font-size: 0.75rem; }
  .demo .innen { padding-block: 0.3rem; }
  .kopf .innen { flex-wrap: wrap; justify-content: flex-start; gap: 0 0.75rem; min-height: 0; padding-block: 0.15rem; }
  .nav ul { flex-wrap: wrap; gap: 0 0.7rem; }
  .nav a { font-size: 0.9rem; }
  .passung, .formular, .wappen-feld { grid-template-columns: minmax(0, 1fr); }
  .wappen-feld img { width: min(100%, 13rem); }
  .tafel > li { grid-template-columns: minmax(0, 1fr); }
  .tafel .rest { text-align: left; }
  table { min-width: 0; font-size: 0.8125rem; }
  th, td { padding-right: 0.35rem; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}