/* ============================================================
   OKTANT — Präzisionsmesstechnik
   Konzept: das Messgerät. Durchgehende Signalspur, Skalenstriche,
   Mono-Zahlen, Bernstein-Phosphor als einzige Akzentfarbe.
   ============================================================ */

:root {
  --grund:      #0b0d0f;
  --grund-2:    #12161a;
  --grund-3:    #191e23;
  --text:       #e2e4e3;
  --text-weich: #98a0a5;
  --text-zart:  #7e878e;
  --linie:      rgba(226, 228, 227, .13);
  --linie-zart: rgba(226, 228, 227, .07);

  --phosphor:   #ffb000;
  --phosphor-tief: #b87c00;
  --papier:     #eceae4;
  --papier-tinte: #14181b;

  --schrift: 'IBM Plex Sans', system-ui, sans-serif;
  --schrift-eng: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif;
  --schrift-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --rand: clamp(1.15rem, 4.5vw, 3.5rem);
  --breite: 1220px;

  --ease: cubic-bezier(.2, .6, .3, 1);
  --schnell: 170ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: clamp(.97rem, .94rem + .17vw, 1.04rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { font-style: normal; }
::selection { background: var(--phosphor); color: var(--grund); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--phosphor); outline-offset: 3px;
}
.sprung { position: absolute; left: -9999px; }
.sprung:focus {
  left: 1rem; top: 1rem; z-index: 100; background: var(--phosphor); color: var(--grund);
  padding: .7rem 1.2rem; font-family: var(--schrift-mono); font-size: .8rem;
}

/* ---------- Typografie ---------- */

.h2 {
  font-family: var(--schrift-eng); font-weight: 700;
  font-size: clamp(1.65rem, 1.1rem + 2.4vw, 2.7rem);
  line-height: 1.04; letter-spacing: -.015em; margin: .5rem 0 0;
  text-wrap: balance;
}
.h2--dunkel { color: var(--papier-tinte); }
.kapitel {
  font-family: var(--schrift-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--phosphor); margin: 0;
}
.kapitel--dunkel { color: var(--phosphor-tief); }
.einleitung { max-width: 62ch; margin: 1rem 0 0; color: var(--text-weich); }
.einleitung--dunkel { color: #4b545a; }

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

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--grund) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--linie-zart);
  transition: border-color var(--schnell) var(--ease);
}
.kopf.ist-gescrollt { border-bottom-color: var(--linie); }
.kopf__innen {
  max-width: var(--breite); margin-inline: auto; padding: .7rem var(--rand);
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
}
.marke { text-decoration: none; color: inherit; display: grid; gap: .05rem; }
.marke__wort {
  font-family: var(--schrift-eng); font-weight: 700; font-size: 1.3rem;
  letter-spacing: .1em; line-height: 1;
}
.marke__zusatz {
  font-family: var(--schrift-mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-zart);
}
.nav { display: flex; gap: clamp(.9rem, 2vw, 1.9rem); justify-content: center; }
.nav a {
  font-family: var(--schrift-mono); font-size: .76rem; letter-spacing: .06em;
  text-decoration: none; color: var(--text-weich); padding: .3rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--schnell) var(--ease), border-color var(--schnell) var(--ease);
}
.nav a:hover { color: var(--phosphor); border-bottom-color: var(--phosphor); }
@media (max-width: 900px) { .nav { display: none; } .kopf__innen { grid-template-columns: minmax(0, 1fr) auto auto; } }

/* ---------- Klappnavigation unter 900 px, ohne Skript ---------- */

.nav-klapp { display: none; }
@media (max-width: 900px) { .nav-klapp { display: block; position: relative; justify-self: end; } }
.nav-klapp > summary {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .4rem .85rem;
  border: 1px solid var(--linie); cursor: pointer; list-style: none;
  font-family: var(--schrift-mono); font-size: .74rem; letter-spacing: .08em;
  color: var(--text); white-space: nowrap;
  transition: color var(--schnell) var(--ease), border-color var(--schnell) var(--ease);
}
.nav-klapp > summary::-webkit-details-marker { display: none; }
.nav-klapp > summary::after {
  content: "+"; font-size: 1rem; line-height: 1; color: var(--phosphor);
}
.nav-klapp[open] > summary::after { content: "−"; }
.nav-klapp > summary:hover { color: var(--phosphor); border-color: var(--phosphor); }
.nav-klapp > summary:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 3px; }
.nav-klapp__liste {
  position: absolute; top: calc(100% + .55rem); right: 0; z-index: 60;
  display: grid; min-width: 12.5rem;
  background: var(--grund-2); border: 1px solid var(--linie);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .55);
}
.nav-klapp__liste a {
  display: flex; align-items: center; min-height: 44px; padding: .5rem 1rem;
  font-family: var(--schrift-mono); font-size: .78rem; letter-spacing: .06em;
  text-decoration: none; color: var(--text-weich);
  border-bottom: 1px solid var(--linie-zart);
  transition: color var(--schnell) var(--ease), background var(--schnell) var(--ease);
}
.nav-klapp__liste a:last-child { border-bottom: none; }
.nav-klapp__liste a:hover { color: var(--phosphor); background: var(--grund-3); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 46px;
  padding: .7rem 1.25rem; white-space: nowrap;
  background: var(--phosphor); color: #17130a;
  font-family: var(--schrift-mono); font-size: .78rem; font-weight: 500;
  letter-spacing: .04em; text-decoration: none; border: 1px solid var(--phosphor); cursor: pointer;
  transition: background var(--schnell) var(--ease), transform var(--schnell) var(--ease);
}
.knopf:hover { background: #ffc23c; border-color: #ffc23c; }
.knopf:active { transform: translateY(1px); }
.knopf--klein { min-height: 40px; padding: .5rem .95rem; font-size: .72rem; }
.knopf--leer { background: transparent; color: var(--text); border-color: var(--linie); }
.knopf--leer:hover { background: transparent; border-color: var(--phosphor); color: var(--phosphor); }
@media (max-width: 460px) { .nur-breit { display: none; } .kopf__innen { grid-template-columns: minmax(0, 1fr) auto; } }

/* ---------- Hero ---------- */

.hero {
  position: relative; isolation: isolate;
  min-height: min(84svh, 800px);
  display: grid; align-content: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--linie);
}
.skop {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  opacity: .9;
}
/* Lesbarkeitsschleier über der Textspalte, damit die Kurve die Schrift nicht kreuzt */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, var(--grund) 12%, color-mix(in oklab, var(--grund) 55%, transparent) 42%, transparent 68%),
    linear-gradient(180deg, var(--grund) 0%, transparent 22%);
}
.hero__innen {
  position: relative; z-index: 2;
  max-width: var(--breite); margin-inline: auto; width: 100%;
  padding-inline: var(--rand);
}
.augenbraue {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1.1rem;
  font-family: var(--schrift-mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-weich);
}
.led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--phosphor); flex: none;
  box-shadow: 0 0 10px var(--phosphor);
  animation: pulsen 3.4s var(--ease) infinite;
}
@keyframes pulsen { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero__h1 {
  font-family: var(--schrift-eng); font-weight: 700;
  font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4rem);
  line-height: 1; letter-spacing: -.022em; margin: 0;
}
.hero__lead { margin: 1.3rem 0 0; max-width: 48ch; color: var(--text-weich); }
.hero__aktion { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.9rem; }

.kennwerte {
  margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  display: grid; gap: 1rem 2rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
}
@media (min-width: 720px) { .kennwerte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kennwerte dt {
  font-family: var(--schrift-mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-zart);
}
.kennwerte dd {
  margin: .2rem 0 0; font-family: var(--schrift-mono); font-size: 1.05rem;
  color: var(--phosphor);
}
.skop__marke {
  position: absolute; left: var(--rand); bottom: 1rem; z-index: 2; margin: 0;
  font-family: var(--schrift-mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--text-zart);
}

/* ---------- Signalspur als Trenner ---------- */

.spur { line-height: 0; background: var(--grund-2); border-block: 1px solid var(--linie-zart); }
.spur svg { width: 100%; height: clamp(28px, 3vw, 40px); }
.spur path { fill: none; stroke: var(--phosphor); stroke-width: 1.6; opacity: .5; vector-effect: non-scaling-stroke; }

/* ---------- Abschnitte mit Skalenrand ---------- */

.abschnitt {
  position: relative;
  max-width: var(--breite); margin-inline: auto;
  padding: clamp(3rem, 7vw, 5.5rem) var(--rand);
}
.abschnitt::before {
  content: ""; position: absolute; left: 0; top: clamp(3rem, 7vw, 5.5rem); bottom: clamp(3rem, 7vw, 5.5rem);
  width: 9px;
  background-image: repeating-linear-gradient(180deg, var(--linie) 0 1px, transparent 1px 14px);
}
@media (max-width: 720px) { .abschnitt::before { display: none; } }
.abschnitt__kopf { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* ---------- Systeme ---------- */

.systeme { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 700px) { .systeme { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.system {
  background: var(--grund); padding: clamp(1.25rem, 2.5vw, 1.9rem);
  transition: background var(--schnell) var(--ease);
}
.system:hover { background: var(--grund-2); }
.system__code {
  font-family: var(--schrift-mono); font-size: .74rem; letter-spacing: .14em;
  color: var(--phosphor); margin: 0 0 .6rem;
}
.system h3 { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.45rem; margin: 0 0 .6rem; letter-spacing: -.01em; }
.system > p { margin: 0 0 1.2rem; color: var(--text-weich); font-size: .95rem; max-width: 46ch; }
.system dl { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linie-zart); }
.system dl > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--linie-zart); align-items: baseline;
}
.system dt { font-size: .84rem; color: var(--text-zart); }
.system dd { margin: 0; font-family: var(--schrift-mono); font-size: .84rem; white-space: nowrap; }

/* ---------- Datenblatt ---------- */

.abschnitt--blatt { max-width: none; padding-inline: 0; }
.abschnitt--blatt::before { display: none; }
.blatt {
  position: relative;
  max-width: var(--breite); margin-inline: clamp(.6rem, 3vw, auto);
  margin-left: auto; margin-right: auto;
  width: min(100% - 2 * var(--rand), var(--breite));
  background: var(--papier); color: var(--papier-tinte);
  padding: clamp(1.5rem, 4vw, 3rem);
}
.blatt__ecke { position: absolute; width: 14px; height: 14px; border: 1px solid #a8a49a; }
.blatt__ecke--lo { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.blatt__ecke--ro { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.blatt__ecke--lu { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.blatt__ecke--ru { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.blatt__kopf {
  display: grid; gap: 1rem; align-items: start;
  border-bottom: 2px solid var(--papier-tinte); padding-bottom: 1.4rem; margin-bottom: 1.8rem;
}
@media (min-width: 760px) { .blatt__kopf { grid-template-columns: minmax(0, 1fr) auto; } }
.blatt__nr {
  margin: 0; font-family: var(--schrift-mono); font-size: .72rem; letter-spacing: .08em;
  color: #5d6469; text-align: left;
}
@media (min-width: 760px) { .blatt__nr { text-align: right; } }

.blatt__werk { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .blatt__werk { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

.messung { margin: 0; }
.messung canvas {
  width: 100%; aspect-ratio: 16 / 9; background: #fbfaf7;
  border: 1px solid #c9c5ba;
}
.messung figcaption {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: .8rem;
  font-family: var(--schrift-mono); font-size: .7rem; color: #5d6469;
}
.messung figcaption span { display: inline-flex; align-items: center; gap: .45rem; }
.punkt { width: 14px; height: 3px; display: inline-block; }
.punkt--roh { background: #b9b4a8; }
.punkt--abtast { background: var(--phosphor-tief); }
.punkt--gefiltert { background: #14181b; }

.regler { display: grid; gap: 1.15rem; align-content: start; }
.regler__feld { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .8rem; align-items: baseline; }
.regler__feld label { font-size: .86rem; font-weight: 500; }
.regler__feld output {
  font-family: var(--schrift-mono); font-size: .86rem; color: var(--papier-tinte);
  background: #ded9cd; padding: .1rem .45rem; white-space: nowrap;
}
.regler__feld input[type="range"] {
  grid-column: 1 / -1; width: 100%; height: 30px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;
}
.regler__feld input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: #a8a49a;
}
.regler__feld input[type="range"]::-moz-range-track { height: 2px; background: #a8a49a; }
.regler__feld input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 22px; margin-top: -10px; border-radius: 1px;
  background: var(--papier-tinte); border: none;
}
.regler__feld input[type="range"]::-moz-range-thumb {
  width: 14px; height: 22px; border-radius: 1px; background: var(--papier-tinte); border: none;
}

.ergebnis { margin: .5rem 0 0; padding-top: 1rem; border-top: 1px solid #c9c5ba; display: grid; gap: 0; }
.ergebnis > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid #ddd9cf; align-items: baseline;
}
.ergebnis dt { font-size: .84rem; color: #5d6469; }
.ergebnis dd { margin: 0; font-family: var(--schrift-mono); font-size: .95rem; white-space: nowrap; }
.regler__warnung {
  margin: 0; min-height: 2.6em; font-size: .82rem; line-height: 1.4;
  color: #8a3a12; border-left: 3px solid transparent; padding-left: .7rem;
}
.regler__warnung.ist-aktiv { border-left-color: #c2551f; }

/* ---------- Branchen ---------- */

.branchen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.branchen li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .3rem 1.2rem;
  padding: 1.4rem 0; border-bottom: 1px solid var(--linie);
  transition: background var(--schnell) var(--ease);
}
@media (min-width: 820px) {
  .branchen li { grid-template-columns: 3rem minmax(0, 1fr) 11rem; align-items: baseline; gap: 1.6rem; }
}
.branchen li:hover { background: var(--grund-2); }
.branchen__nr {
  font-family: var(--schrift-mono); font-size: .95rem; color: var(--phosphor);
  border: 1px solid var(--linie); width: 2rem; height: 2rem;
  display: grid; place-items: center;
}
.branchen h3 { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.3rem; margin: 0 0 .35rem; }
.branchen p { margin: 0; color: var(--text-weich); font-size: .95rem; max-width: 62ch; }
.branchen__norm {
  grid-column: 2; font-family: var(--schrift-mono); font-size: .72rem;
  letter-spacing: .08em; color: var(--text-zart);
}
@media (min-width: 820px) { .branchen__norm { grid-column: 3; text-align: right; } }

/* ---------- Phasen ---------- */

.phasen {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  border-top: 1px solid var(--linie);
}
@media (min-width: 800px) { .phasen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.phasen li {
  position: relative; padding: 1.5rem 1.25rem 1.7rem 0;
  border-bottom: 1px solid var(--linie);
}
@media (min-width: 800px) {
  .phasen li { border-bottom: none; border-right: 1px solid var(--linie); padding-right: 1.5rem; }
  .phasen li:last-child { border-right: none; }
}
.phasen__nr { font-family: var(--schrift-mono); font-size: .74rem; letter-spacing: .1em; color: var(--phosphor); }
.phasen h3 { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.2rem; margin: .5rem 0 .5rem; }
.phasen p { margin: 0; font-size: .92rem; color: var(--text-weich); }
.phasen__dauer {
  display: inline-block; margin-top: .9rem;
  font-family: var(--schrift-mono); font-size: .68rem; letter-spacing: .08em; color: var(--text-zart);
}

/* ---------- Kontakt ---------- */

.abschnitt--kontakt { border-top: 1px solid var(--linie); }
.kontakt { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .kontakt { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; } }
.kontakt__text { color: var(--text-weich); max-width: 52ch; }

.direkt { margin-top: 1.8rem; border-top: 1px solid var(--linie); }
.direkt__block {
  display: grid; gap: .12rem; padding: 1rem 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit; margin: 0;
  transition: padding-left var(--schnell) var(--ease);
}
a.direkt__block:hover { padding-left: .5rem; }
a.direkt__block:hover strong { color: var(--phosphor); }
.direkt__block > span:first-child {
  font-family: var(--schrift-mono); font-size: .64rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-zart);
}
.direkt__block strong { font-family: var(--schrift-mono); font-size: 1rem; font-weight: 500; overflow-wrap: anywhere; transition: color var(--schnell) var(--ease); }
.direkt__zusatz { font-size: .84rem; color: var(--text-zart); }

.notiz { background: var(--grund-2); border: 1px solid var(--linie); padding: clamp(1.25rem, 3vw, 1.8rem); }
.notiz h3 { font-family: var(--schrift-eng); font-weight: 600; font-size: 1.15rem; margin: 0 0 1rem; }
.notiz ol { margin: 0 0 1.2rem; padding: 0; list-style: none; counter-reset: n; }
.notiz li {
  counter-increment: n; position: relative; padding: .5rem 0 .5rem 2.2rem;
  border-bottom: 1px solid var(--linie-zart); font-size: .92rem;
}
.notiz li::before {
  content: counter(n, decimal-leading-zero);
  position: absolute; left: 0; top: .5rem;
  font-family: var(--schrift-mono); font-size: .75rem; color: var(--phosphor);
}
.notiz > p { margin: 0; font-size: .86rem; color: var(--text-zart); }

/* ---------- Fuß ---------- */

.fuss { border-top: 1px solid var(--linie); background: var(--grund-2); }
.fuss__innen {
  max-width: var(--breite); margin-inline: auto; padding: clamp(2rem, 4vw, 3rem) var(--rand);
  display: grid; gap: 1.4rem;
}
@media (min-width: 820px) { .fuss__innen { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .fuss__demo { grid-column: 1 / -1; } }
.marke__wort--fuss { font-size: 1.5rem; margin: 0 0 .4rem; display: block; }
.fuss__adresse { margin: 0; font-family: var(--schrift-mono); font-size: .82rem; color: var(--text-weich); line-height: 1.7; }
.fuss__nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.fuss__nav a {
  font-family: var(--schrift-mono); font-size: .74rem; color: var(--text-weich);
  text-decoration: none; border-bottom: 1px solid var(--linie); padding-bottom: 2px;
}
.fuss__nav a:hover { color: var(--phosphor); border-bottom-color: var(--phosphor); }
.fuss__demo { margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--linie); font-size: .8rem; color: var(--text-zart); max-width: 88ch; }
.fuss__demo strong { color: var(--text-weich); }

/* ---------- Rechtliches im Fuß ---------- */

.recht { display: grid; margin-top: .4rem; border-top: 1px solid var(--linie); }
@media (min-width: 820px) { .recht { grid-column: 1 / -1; } }
.recht__block { border-bottom: 1px solid var(--linie); }
.recht__block > summary {
  display: flex; align-items: center; gap: .9rem;
  min-height: 44px; padding: .7rem 0; cursor: pointer; list-style: none;
  font-family: var(--schrift-eng); font-weight: 600; font-size: 1.05rem; color: var(--text);
  transition: color var(--schnell) var(--ease);
}
.recht__block > summary::-webkit-details-marker { display: none; }
.recht__block > summary:hover { color: var(--phosphor); }
/* angesprungener Abschnitt bleibt erkennbar, auch solange er zugeklappt ist */
.recht__block:target > summary { color: var(--phosphor); }
.recht__block > summary:focus-visible { outline: 2px solid var(--phosphor); outline-offset: 2px; }
.recht__block > summary::after {
  content: "+"; font-family: var(--schrift-mono); font-size: 1rem; font-weight: 400;
  color: var(--phosphor); width: 1rem; text-align: center; flex: none;
}
.recht__block[open] > summary::after { content: "−"; }
.recht__norm {
  margin-left: auto; font-family: var(--schrift-mono); font-weight: 400;
  font-size: .66rem; letter-spacing: .12em; color: var(--text-zart); white-space: nowrap;
}
.recht__inhalt { padding-bottom: 1.4rem; max-width: 96ch; }
.recht__hinweis {
  margin: 0 0 1rem; padding-left: .8rem; border-left: 2px solid var(--phosphor-tief);
  font-size: .8rem; color: var(--text-zart);
}
.recht__liste { margin: 0; display: grid; }
.recht__liste > div {
  display: grid; gap: .2rem; padding: .6rem 0; border-top: 1px solid var(--linie-zart);
}
@media (min-width: 640px) {
  .recht__liste > div { grid-template-columns: 15rem minmax(0, 1fr); gap: 1.4rem; align-items: baseline; }
}
.recht__liste dt {
  font-family: var(--schrift-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-zart);
}
.recht__liste dd { margin: 0; font-size: .86rem; color: var(--text-weich); overflow-wrap: break-word; }

/* ---------- Schriftfeld · Tracht: Kalibrier-Typenschild ---------- */

.schriftfeld {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--breite));
  margin: 0 auto clamp(2rem, 5vw, 3.25rem);
  padding: clamp(.85rem, 2.2vw, 1.2rem) clamp(1rem, 2.6vw, 1.5rem);
  background: linear-gradient(177deg, var(--grund-3), var(--grund-2));
  border: 1px solid var(--linie);
  font-family: var(--schrift-mono);
  display: grid;
}
/* Innenrahmen plus vier Nieten, wie ein aufgenietetes Geräteschild */
.schriftfeld::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid var(--linie-zart);
  background:
    radial-gradient(circle at 8px 8px, var(--text-zart) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 8px) 8px, var(--text-zart) 0 2px, transparent 2.5px),
    radial-gradient(circle at 8px calc(100% - 8px), var(--text-zart) 0 2px, transparent 2.5px),
    radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), var(--text-zart) 0 2px, transparent 2.5px);
}
.schriftfeld__feld { position: relative; display: grid; gap: .3rem; align-content: start; padding: .55rem .25rem; }
.schriftfeld__feld + .schriftfeld__feld { border-top: 1px solid var(--linie-zart); }
@media (min-width: 780px) {
  .schriftfeld { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.15fr) minmax(0, .75fr) minmax(0, 1fr); }
  .schriftfeld__feld { padding: .3rem 1.1rem; }
  .schriftfeld__feld:first-child { padding-left: .25rem; }
  .schriftfeld__feld + .schriftfeld__feld { border-top: none; border-left: 1px solid var(--linie-zart); }
}
.schriftfeld__marke {
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--text-zart);
}
.schriftfeld__wert { font-size: .78rem; line-height: 1.5; color: var(--text-weich); }
.schriftfeld__wert a {
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--linie);
  transition: color var(--schnell) var(--ease), border-color var(--schnell) var(--ease);
}
.schriftfeld__wert a:hover { color: var(--phosphor); border-bottom-color: var(--phosphor); }
.schriftfeld__blaetter { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.schriftfeld__blaetter a {
  display: grid; place-items: center; min-width: 2.2rem; min-height: 2rem;
  border: 1px solid var(--linie); font-size: .74rem; letter-spacing: .06em;
  color: var(--text-weich); text-decoration: none;
}
.schriftfeld__blaetter a:hover { color: var(--phosphor); border-color: var(--phosphor); }
.schriftfeld__blaetter a[aria-current="page"] {
  color: var(--phosphor); border-color: var(--phosphor);
  background: color-mix(in oklab, var(--phosphor) 12%, transparent);
}

@media print {
  .schriftfeld {
    break-inside: avoid; background: none; border-color: #888; color: #000;
  }
  .schriftfeld::before { border-color: #ccc; background: none; }
  .schriftfeld__marke, .schriftfeld__wert, .schriftfeld__wert a, .schriftfeld__blaetter a { color: #000; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .led { animation: none; }
}