/* Forschungsumgebung - Oberflaeche
   Bildwelt: Laborbuch und Messprotokoll, nicht Handelsterminal.
   Keine Gewinngruen-Signale, keine Kursticker, keine Verlaufsverlaeufe.
   Farbe wird nur fuer Urteile eingesetzt: bestanden, verfehlt, gesperrt. */

:root {
  --papier:        #dce2de;
  --papier-tief:   #cbd3ce;
  --karte:         #f3f6f2;
  --tinte:         #18211e;
  --tinte-leise:   #5a6763;
  --raster:        #b9c4be;
  --siegel:        #29355e;
  --sperre:        #7e2b33;
  --frei:          #37613f;
  --messing:       #9a7b22;

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --spur: 0.16em;
  --kante: 2px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px,
      rgba(24, 33, 30, .035) 23px 24px),
    var(--papier);
  color: var(--tinte);
  font: 400 15px/1.55 var(--text);
}

/* ---------------------------------------------------------- Gerüst */

.buch { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }

.register {
  background: var(--tinte);
  color: var(--papier);
  padding: 26px 0 40px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.marke { padding: 0 22px 24px; border-bottom: 1px solid rgba(220, 226, 222, .18); }
.marke b {
  display: block; font: 600 13px/1.2 var(--mono);
  letter-spacing: var(--spur); text-transform: uppercase;
}
.marke span {
  display: block; margin-top: 7px; font-size: 11.5px;
  color: rgba(220, 226, 222, .6); letter-spacing: .02em;
}

.register ol { list-style: none; margin: 20px 0 0; padding: 0; counter-reset: phase; }
.register a {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
  padding: 9px 22px; color: rgba(220, 226, 222, .74);
  text-decoration: none; font-size: 14px;
  border-left: var(--kante) solid transparent;
}
.register a::before {
  counter-increment: phase; content: counter(phase, decimal-leading-zero);
  font: 500 11px var(--mono); color: rgba(220, 226, 222, .38);
  letter-spacing: .06em;
}
.register a:hover { color: #fff; background: rgba(255, 255, 255, .045); }
.register a.hier {
  color: #fff; border-left-color: var(--messing);
  background: rgba(255, 255, 255, .06);
}
.register a:focus-visible { outline: 2px solid var(--messing); outline-offset: -2px; }

.registerfuss {
  margin: 26px 22px 0; padding-top: 18px;
  border-top: 1px solid rgba(220, 226, 222, .18);
  font: 400 11.5px/1.6 var(--mono); color: rgba(220, 226, 222, .55);
}
.registerfuss .siegelchen { color: var(--messing); }

.blatt { padding: 34px 40px 80px; max-width: 1080px; }

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

h1 {
  margin: 0 0 4px; font: 500 21px/1.25 var(--mono);
  letter-spacing: .05em; text-transform: uppercase;
}
.unterzeile { margin: 0 0 30px; color: var(--tinte-leise); font-size: 14.5px; max-width: 66ch; }
h2 {
  margin: 34px 0 14px; font: 500 12px var(--mono);
  letter-spacing: var(--spur); text-transform: uppercase; color: var(--tinte-leise);
  padding-bottom: 7px; border-bottom: 1px solid var(--raster);
}
h3 { margin: 22px 0 9px; font: 600 14.5px var(--text); }
p { margin: 0 0 12px; }
a { color: var(--siegel); }

/* ------------------------------------------------------------ Karten */

.karte {
  background: var(--karte); border: 1px solid var(--raster);
  padding: 20px 22px; margin-bottom: 18px;
}
.karte > :first-child { margin-top: 0; }
.karte > :last-child { margin-bottom: 0; }

.reihe { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ------------------------------------------------- Kennzahlenblock */

.messwerte { display: grid; gap: 1px; background: var(--raster); border: 1px solid var(--raster); }
.messwerte { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); }
.messwert { background: var(--karte); padding: 13px 15px; }
.messwert dt {
  font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise); margin-bottom: 5px;
}
.messwert dd {
  margin: 0; font: 400 20px var(--mono); font-variant-numeric: tabular-nums;
}
.messwert dd small { font-size: 12px; color: var(--tinte-leise); }

/* ----------------------------------------------------- Prüfstreifen */
/* Signaturelement: das Gate als gestempeltes Prüfprotokoll */

.pruefstreifen { border: 1px solid var(--tinte); background: var(--karte); }
.pruefkopf {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 13px 18px; background: var(--tinte); color: var(--papier);
  font: 500 11.5px var(--mono); letter-spacing: var(--spur); text-transform: uppercase;
}
.pruefzeile {
  display: grid; grid-template-columns: 1fr 120px 120px 118px; gap: 14px;
  align-items: center; padding: 11px 18px; border-top: 1px solid var(--raster);
  font-size: 14px;
}
.pruefzeile .zahl { font: 400 14px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.pruefzeile .beschriftung { font: 500 10px var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-leise); }

.stempel {
  justify-self: end; font: 600 10.5px var(--mono); letter-spacing: .12em;
  text-transform: uppercase; padding: 4px 9px; border: 1.5px solid currentColor;
  transform: rotate(-1.2deg);
}
.stempel.ja { color: var(--frei); }
.stempel.nein { color: var(--sperre); }

.gesamturteil {
  padding: 18px; border-top: var(--kante) solid var(--tinte);
  font: 500 15px var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.gesamturteil.ja { color: var(--frei); }
.gesamturteil.nein { color: var(--sperre); }

/* ------------------------------------------------------ Siegel/Sperre */

.siegel {
  border: var(--kante) solid var(--siegel); background:
    repeating-linear-gradient(135deg, transparent 0 9px,
      rgba(41, 53, 94, .06) 9px 18px), var(--karte);
  padding: 22px; position: relative;
}
.siegel h3 { margin-top: 0; color: var(--siegel); }
.siegelband {
  position: absolute; top: -1px; right: 20px; padding: 5px 11px;
  background: var(--siegel); color: #fff;
  font: 600 10px var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.siegel.offen { border-color: var(--sperre); }
.siegel.offen h3 { color: var(--sperre); }
.siegel.offen .siegelband { background: var(--sperre); }

/* ------------------------------------------------------- Formulare */

label { display: block; margin-bottom: 14px; }
label > span {
  display: block; margin-bottom: 5px;
  font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise);
}
label small { display: block; margin-top: 4px; font-size: 12px; color: var(--tinte-leise);
  letter-spacing: 0; text-transform: none; font-family: var(--text); }

input[type="text"], input[type="number"], input[type="password"], select, textarea {
  width: 100%; padding: 8px 10px; background: #fff;
  border: 1px solid var(--raster); border-radius: 0;
  font: 400 14px var(--mono); color: var(--tinte);
}
textarea { font-family: var(--text); min-height: 74px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--siegel); outline-offset: -1px; border-color: var(--siegel);
}

.ankreuz { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 14px; }
.ankreuz input { margin-top: 3px; }
.ankreuz span { font: 400 14px var(--text); letter-spacing: 0; text-transform: none;
  color: var(--tinte); margin: 0; }

button, .knopf {
  display: inline-block; padding: 10px 20px; border: none; border-radius: 0;
  background: var(--tinte); color: var(--papier); cursor: pointer;
  font: 500 11.5px var(--mono); letter-spacing: var(--spur); text-transform: uppercase;
  text-decoration: none;
}
button:hover, .knopf:hover { background: var(--siegel); }
button:focus-visible, .knopf:focus-visible { outline: 2px solid var(--messing); outline-offset: 2px; }
button.leise, .knopf.leise {
  background: transparent; color: var(--tinte); border: 1px solid var(--raster);
}
button.leise:hover, .knopf.leise:hover { background: var(--papier-tief); color: var(--tinte); }
button.warnung { background: var(--sperre); }

.feldgruppe { display: grid; gap: 0 18px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* --------------------------------------------------------- Tabellen */

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--raster); }
th {
  font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise); border-bottom: 1px solid var(--tinte);
}
td.zahl, th.zahl { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; }
tbody tr:hover { background: rgba(41, 53, 94, .04); }
.rollen { overflow-x: auto; }

/* ---------------------------------------------------------- Meldung */

.meldung { padding: 12px 16px; margin-bottom: 16px; border-left: var(--kante) solid; font-size: 14px; }
.meldung.gut { border-color: var(--frei); background: rgba(55, 97, 63, .09); }
.meldung.fehler { border-color: var(--sperre); background: rgba(126, 43, 51, .09); }
.hinweis {
  border-left: var(--kante) solid var(--messing); background: rgba(154, 123, 34, .09);
  padding: 12px 16px; margin: 14px 0; font-size: 14px;
}
.hinweis b { display: block; margin-bottom: 3px; font: 500 10.5px var(--mono);
  letter-spacing: .1em; text-transform: uppercase; }

/* -------------------------------------------------------- Diagramme */

.diagramm { width: 100%; height: auto; display: block; }
.millimeter { stroke: var(--raster); stroke-width: .5; opacity: .5; }
.raster { stroke: var(--raster); stroke-width: 1; }
.bezug { stroke: var(--tinte-leise); stroke-width: 1; stroke-dasharray: 4 3; }
.kurve { fill: none; stroke: var(--tinte); stroke-width: 1.6;
  stroke-linejoin: round; stroke-linecap: round; }
.hoechststand { fill: none; stroke: var(--tinte-leise); stroke-width: 1;
  stroke-dasharray: 2 3; }
.unterwasser { fill: rgba(126, 43, 51, .17); stroke: none; }
.balken.plus { fill: var(--frei); opacity: .78; }
.balken.minus { fill: var(--sperre); opacity: .78; }
.achse { font: 400 10px var(--mono); fill: var(--tinte-leise); }
.leer { color: var(--tinte-leise); font-style: italic; }

/* ------------------------------------------------------------ Kleines */

.leise { color: var(--tinte-leise); font-size: 13px; }
.mono { font-family: var(--mono); }
.protokoll {
  max-height: 320px; overflow-y: auto; background: var(--tinte); color: #d6ded9;
  padding: 14px 16px; font: 400 12.2px/1.65 var(--mono);
}
.protokoll .zeit { color: rgba(214, 222, 217, .45); }
.protokoll .typ { color: var(--messing); }
.kette { font: 400 11px var(--mono); color: var(--tinte-leise); word-break: break-all; }

.eintrag { border-left: var(--kante) solid var(--raster); padding: 3px 0 3px 16px; margin-bottom: 18px; }
.eintrag.ergebnis { border-left-color: var(--tinte); }
.eintrag.hypothese { border-left-color: var(--messing); }
.eintrag.holdout_freigabe { border-left-color: var(--sperre); }
.eintrag.kriterien_festgelegt { border-left-color: var(--siegel); }
.eintragkopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--tinte-leise); margin-bottom: 5px; }
.eintragkopf .nr { color: var(--tinte); }

@media (max-width: 780px) {
  .buch { grid-template-columns: 1fr; }
  .register { position: static; height: auto; padding-bottom: 20px; }
  .register ol { display: flex; flex-wrap: wrap; }
  .register a { border-left: none; border-bottom: var(--kante) solid transparent; }
  .register a.hier { border-left: none; border-bottom-color: var(--messing); }
  .blatt { padding: 24px 18px 60px; }
  .pruefzeile { grid-template-columns: 1fr 1fr; row-gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}