/* Prüfbericht der REY-Prüfstrecke.
   ----------------------------------------------------------------------
   Die generische Werkzeugkarte zeigt Feld für Feld. Ein Prüflauf hat aber
   sieben Stufen, drei getrennte Geldtöpfe und je Befund eine Quelle und eine
   Handlungsanweisung — als Feld-Wert-Liste wäre das eine Wand aus Zahlen.

   Zwei Dinge tragen die Gestaltung, beide aus dem UX-Audit des Altsystems:
   Grün steht nie auf etwas, das nicht wirklich geprüft wurde — eine Stufe
   ohne prüfbare Erwartung ist grau, nicht grün. Und was NICHT geprüft wurde,
   bekommt denselben Platz wie das Geprüfte, damit eine ausgefallene Prüfung
   nicht wie ein bestandener Test aussieht.

   Farben kommen aus dem Hub-Satz in frontend/index.html. Eigene Töne gibt es
   nur, wo der Satz keinen hat (Bernstein für „zu klären", Schiefer für
   „nicht prüfbar"). */

:root{
  --rey-klaeren:#8A5A00;      /* zu klären — dunkler als --gold, damit lesbar */
  --rey-klaeren-f:#FBF2DF;
  --rey-klaeren-rand:#E0C489;
  --rey-grau:#5B6470;         /* nicht prüfbar */
  --rey-grau-f:#F0F2F4;
  --rey-grau-rand:#CBD1D8;
}

/* ---------- Urteilszeile ---------- */
.rey-urteil{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1px solid var(--rand);border-radius:8px;
  padding:9px 12px;margin-bottom:10px;background:#fff;
}
.rey-urteil .rey-wort{font-weight:800;font-size:15px;letter-spacing:.01em}
.rey-urteil .rey-satz{font-size:12.5px;color:var(--mittelgrau);flex:1 1 220px}
.rey-urteil.u-ohne_befund   {border-color:var(--gruenrand);background:var(--gruenf)}
.rey-urteil.u-ohne_befund   .rey-wort{color:var(--gruen)}
.rey-urteil.u-mit_hinweisen {border-color:var(--gruenrand);background:var(--gruenf)}
.rey-urteil.u-mit_hinweisen .rey-wort{color:var(--gruen)}
.rey-urteil.u-zu_klaeren    {border-color:var(--rey-klaeren-rand);background:var(--rey-klaeren-f)}
.rey-urteil.u-zu_klaeren    .rey-wort{color:var(--rey-klaeren)}
.rey-urteil.u-fehlerhaft    {border-color:#E2A79E;background:var(--rotf)}
.rey-urteil.u-fehlerhaft    .rey-wort{color:var(--rot)}
.rey-urteil.u-nicht_pruefbar{border-color:var(--rey-grau-rand);background:var(--rey-grau-f)}
.rey-urteil.u-nicht_pruefbar .rey-wort{color:var(--rey-grau)}

/* ---------- Stufenband ---------- */
.rey-stufen{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.rey-stufe{
  flex:1 1 108px;min-width:104px;background:#fff;
  border:1px solid var(--rand);border-top:3px solid var(--rey-grau-rand);
  border-radius:6px;padding:7px 9px 8px;
}
.rey-stufe .rey-st-nr{
  font-family:var(--mono);font-size:10px;color:var(--mittelgrau);
  letter-spacing:.06em;display:block;
}
.rey-stufe .rey-st-name{
  font-size:12px;font-weight:700;line-height:1.25;display:block;margin-top:3px;
}
.rey-stufe .rey-st-zahl{
  font-size:11px;color:var(--mittelgrau);display:block;margin-top:4px;
}
.rey-stufe.s-ok            {border-top-color:var(--gruen)}
.rey-stufe.s-hinweis       {border-top-color:var(--gruen)}
.rey-stufe.s-warnung       {border-top-color:var(--rey-klaeren)}
.rey-stufe.s-fehler        {border-top-color:var(--rot)}
.rey-stufe.s-nicht_pruefbar{border-top-color:var(--rey-grau-rand);background:var(--rey-grau-f)}
.rey-stufe.s-nicht_pruefbar .rey-st-name{color:var(--rey-grau)}

/* ---------- Geldtöpfe ---------- */
/* Drei Zahlen, die nie zu einer Summe verschmelzen dürfen: was belastbar zu
   viel berechnet wurde, was nur ein technisches Delta ist, und was zugunsten
   des Kunden zu wenig berechnet wurde. Das Letzte ist niemals Einsparung. */
.rey-geld{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:7px;margin-bottom:11px;
}
.rey-topf{
  background:#fff;border:1px solid var(--rand);border-radius:8px;padding:8px 11px 10px;
}
.rey-topf .rey-tw{
  font-family:var(--mono);font-size:18px;font-weight:800;display:block;line-height:1.2;
}
.rey-topf .rey-tl{
  font-size:11.5px;color:var(--mittelgrau);display:block;margin-top:3px;line-height:1.3;
}
.rey-topf.t-belastbar        {border-color:var(--gruenrand)}
.rey-topf.t-belastbar .rey-tw{color:var(--gruen)}
.rey-topf.t-technisch .rey-tw{color:var(--mittelgrau)}
.rey-topf.t-kunde            {border-color:var(--rey-klaeren-rand)}
.rey-topf.t-kunde .rey-tw    {color:var(--rey-klaeren)}
.rey-topf.t-offen .rey-tw    {color:var(--rey-grau)}

/* ---------- Befunde ---------- */
.rey-block{margin-bottom:11px}
.rey-block-titel{
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mittelgrau);margin:0 0 5px 2px;
}
.rey-befund{
  background:#fff;border:1px solid var(--rand);border-left:3px solid var(--rey-grau-rand);
  border-radius:7px;padding:9px 11px;margin-bottom:6px;
}
.rey-befund.b-fehler {border-left-color:var(--rot)}
.rey-befund.b-warnung{border-left-color:var(--rey-klaeren)}
.rey-befund.b-hinweis{border-left-color:var(--gruen)}
.rey-bf-kopf{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:3px}
.rey-bf-titel{font-weight:700;font-size:13px;flex:1 1 200px}
.rey-bf-kennung{
  font-family:var(--mono);font-size:10px;color:var(--mittelgrau);
  letter-spacing:.02em;white-space:nowrap;
}
.rey-bf-status{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:1px 6px;border-radius:3px;border:1px solid currentColor;white-space:nowrap;
}
.rey-bf-status.z-bestaetigt     {color:var(--rot)}
.rey-bf-status.z-plausibel      {color:var(--rey-klaeren)}
.rey-bf-status.z-manuell_pruefen{color:var(--rey-klaeren)}
.rey-bf-status.z-widerspruch    {color:var(--rot)}
.rey-bf-status.z-nicht_pruefbar {color:var(--rey-grau)}
.rey-bf-text{font-size:12.5px;line-height:1.5;margin-bottom:5px}
.rey-bf-bezug{font-family:var(--mono);font-size:11px;color:var(--mittelgrau)}

/* Soll/Ist nebeneinander — beide gesetzt oder beide leer. Eine Differenz ohne
   beide Werte gibt es nicht; deshalb steht die Zeile gar nicht erst da. */
.rey-bf-werte{
  display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;
  background:var(--creme);border-radius:5px;padding:5px 9px;margin-bottom:5px;
}
.rey-bf-werte span b{font-family:inherit;font-weight:800}
.rey-bf-werte .rey-d-ueber {color:var(--rot)}
.rey-bf-werte .rey-d-unter {color:var(--rey-klaeren)}

.rey-bf-tun{
  font-size:12.5px;line-height:1.45;background:var(--goldf);
  border:1px solid var(--goldrand);border-radius:5px;padding:6px 9px;margin-bottom:5px;
}
.rey-bf-tun b{font-weight:700;color:var(--goldd)}

.rey-bf-quellen{display:flex;flex-wrap:wrap;gap:5px}
.rey-quelle{
  font-size:11px;border:1px solid var(--rand);border-radius:4px;
  padding:2px 7px;background:var(--creme);color:var(--mittelgrau);
}
.rey-quelle b{font-family:var(--mono);font-weight:700;color:var(--blau)}

/* ---------- Nicht geprüft ---------- */
/* Bewusst nicht eingeklappt: eine ausgefallene Prüfung, die man aufklappen
   muss, sieht aus wie keine ausgefallene Prüfung. */
.rey-luecke{
  background:var(--rey-grau-f);border:1px solid var(--rey-grau-rand);
  border-radius:7px;padding:9px 11px;
}
.rey-luecke-zeile{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;
  line-height:1.45;padding:4px 0;border-bottom:1px solid var(--rey-grau-rand)}
.rey-luecke-zeile:last-child{border-bottom:0}
.rey-luecke-was{font-weight:700;min-width:120px;flex:0 0 auto}
.rey-luecke-warum{flex:1 1 auto;color:var(--rey-grau)}

/* ---------- Quellenlage ---------- */
.rey-quellenlage{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:11px}
.rey-ql{
  font-size:11.5px;border:1px solid var(--rand);border-radius:4px;padding:3px 8px;background:#fff;
}
.rey-ql b{font-family:var(--mono);font-weight:700;margin-right:5px}
.rey-ql.q-vorhanden      {border-color:var(--gruenrand);background:var(--gruenf);color:var(--gruen)}
.rey-ql.q-fehlt          {border-color:#E2A79E;background:var(--rotf);color:var(--rot)}
.rey-ql.q-nicht_anwendbar{border-color:var(--rey-grau-rand);background:var(--rey-grau-f);color:var(--rey-grau)}
.rey-ql.q-parserfehler   {border-color:var(--rey-klaeren-rand);background:var(--rey-klaeren-f);color:var(--rey-klaeren)}

@media (max-width:640px){
  .rey-stufe{flex:1 1 100%}
  .rey-bf-werte{flex-direction:column;gap:2px}
  .rey-luecke-zeile{flex-direction:column;gap:2px}
  .rey-luecke-was{min-width:0}
}

/* Grundlage des Urteils: woher der Produkttyp stammt, wie viele Regeln liefen.
   Klein gesetzt — es ist Beleg, nicht Aussage. */
.rey-grundlage{
  font-size:11.5px;color:var(--mittelgrau);
  margin:-6px 2px 11px;line-height:1.4;
}
/* Pflichtquelle: der Stern trägt die Bedeutung, das Gewicht verstärkt sie. */
.rey-ql.pflicht b{font-weight:800}

/* ====================================================================
   Arbeitsbereich: Belege einstellen (links) und Prüfbericht (rechts)
   ====================================================================
   Die Reihenfolge ist der Inhalt. Links drei nummerierte Schritte, weil ein
   Prüfvorgang aus einem Satz Belege besteht und nicht aus einer Datei.
   Rechts steht die Nachforderung ÜBER dem Urteil: was noch zu besorgen ist,
   muss gelesen werden, bevor das Ergebnis nach Abschluss aussieht. */

.rey-schritt{
  border:1px solid var(--rand);border-radius:8px;
  padding:12px 14px;margin-bottom:12px;background:#fff;
}
.rey-schritt-kopf{
  display:flex;align-items:center;gap:8px;
  margin:0 0 10px;font-size:14px;font-weight:600;
}
.rey-nr{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background:var(--blau);color:#fff;font-size:12px;font-weight:700;
  flex:0 0 auto;
}
.rey-hinweis{
  margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--mittelgrau);
}
.rey-leer{
  margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--mittelgrau);
}

/* ---------- Belegliste ---------- */
.rey-belege{ list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px; }
.rey-beleg{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;
  border:1px solid var(--rand);border-radius:6px;padding:6px 8px;background:var(--creme);
}
/* Ein Beleg ohne Belegart ist nicht prüfbar — das muss man sehen, bevor man
   auf „Prüfen" drückt, nicht danach. */
.rey-beleg-offen{ border-color:var(--goldrand);background:var(--goldf); }
.rey-beleg-name{
  font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rey-beleg-art{ font-size:12px;padding:3px 6px;max-width:230px; }
.rey-beleg-weg{
  border:0;background:none;cursor:pointer;color:var(--mittelgrau);
  font-size:14px;line-height:1;padding:2px 4px;
}
.rey-beleg-weg:hover{ color:var(--rot); }

.rey-feld{ display:block;margin:10px 0 0;font-size:12.5px; }
.rey-feld > span{ display:block;margin-bottom:3px;font-weight:600; }
.rey-feld > span em{ font-weight:400;font-style:normal;color:var(--mittelgrau); }
.rey-feld input, .rey-feld select{ width:100%;padding:5px 7px;font-size:13px; }

/* Was noch fehlt — als Liste, nicht als abgeblendeter Knopf ohne Begründung. */
.rey-offen{
  list-style:none;margin:0 0 10px;padding:8px 10px;
  border:1px solid var(--goldrand);border-radius:6px;background:var(--goldf);
  font-size:12.5px;line-height:1.6;color:var(--goldd);
}
.rey-offen li::before{ content:"· ";font-weight:700; }

/* ---------- Ergebnisseite ---------- */
.rey-abschnitt{ margin-bottom:12px; }
.rey-abschnitt > h4{
  margin:0 0 8px;font-size:13px;font-weight:600;
}
.rey-laeuft, .rey-leerlauf{
  border:1px dashed var(--rand);border-radius:8px;padding:14px;
  font-size:12.5px;line-height:1.55;color:var(--mittelgrau);background:#fff;
}
.rey-fortschritt{ margin:0; }
.rey-fehler{
  border:1px solid var(--rotf);border-left:3px solid var(--rot);border-radius:6px;
  padding:10px 12px;background:#fff;
}
.rey-fehler h4{ color:var(--rot); }
.rey-fehler p{ margin:0;font-size:12.5px;line-height:1.6; }

/* ---------- Nachforderung ---------- */
.rey-nf{ border-radius:6px;padding:9px 12px;margin-bottom:8px; }
.rey-nf h5{ margin:0 0 5px;font-size:12.5px;font-weight:600; }
.rey-nf ul{ margin:0;padding-left:18px;font-size:12.5px;line-height:1.6; }
.rey-nf-block{
  border:1px solid var(--rotf);border-left:3px solid var(--rot);background:#fff;
}
.rey-nf-block h5{ color:var(--rot); }
.rey-nf-bitte{
  border:1px solid var(--rey-klaeren-rand);border-left:3px solid var(--rey-klaeren);
  background:var(--rey-klaeren-f);
}
.rey-nf-bitte h5{ color:var(--rey-klaeren); }

/* ---------- Belegannahme ---------- */
.rey-tab{
  width:100%;border-collapse:collapse;font-size:12px;background:#fff;
  border:1px solid var(--rand);border-radius:6px;
}
.rey-tab th{
  text-align:left;font-weight:600;padding:6px 8px;
  border-bottom:1px solid var(--rand);color:var(--mittelgrau);
  font-size:11px;letter-spacing:.02em;text-transform:uppercase;
}
.rey-tab td{ padding:6px 8px;border-bottom:1px solid var(--rand);vertical-align:top; }
.rey-tab tr:last-child td{ border-bottom:0; }
.rey-ba-datei{ font-weight:600;max-width:200px;overflow-wrap:anywhere; }
.rey-ba-scan{ font-variant-numeric:tabular-nums;white-space:nowrap; }
/* Ein nicht gelesener Beleg wird nicht ausgegraut, sondern rot markiert.
   Ausgegraut hieße „unwichtig"; hier fehlt der Prüfung etwas. */
.rey-zeile-weg td{ background:#fff; }
.rey-zeile-weg .rey-ba-datei{ color:var(--rot); }
.rey-ba-fehler{
  display:block;margin-top:3px;font-size:11.5px;line-height:1.5;color:var(--rot);
}
.rey-unles{
  display:inline-block;font-size:11px;padding:1px 5px;border-radius:3px;
  background:var(--goldf);border:1px solid var(--goldrand);color:var(--goldd);
}
.rey-h{ font-size:11px;padding:1px 6px;border-radius:3px;white-space:nowrap; }
.rey-h-druck{ background:var(--gruenf);border:1px solid var(--gruenrand);color:var(--gruen); }
.rey-h-scan{ background:var(--rey-grau-f);border:1px solid var(--rey-grau-rand);color:var(--rey-grau); }
.rey-h-weg{ background:var(--rotf);border:1px solid var(--rot);color:var(--rot); }