/* ==========================================================================
   Leistungsnachweis - das Blatt.

   WARUM ES DIESE DATEI GIBT.
   Der Nachweis traegt seit jeher einen Eid, zwei Unterschriftenlinien, einen
   Dokumentfuss mit QR und Pruefsumme und einen eigenen Druckmodus. Das ist
   kein Auswertungsbildschirm - das ist ein Blatt Papier, das jemandem
   vorgelegt wird: dem Arbeitgeber beim Jahresgespraech, dem Kunden bei der
   Verlaengerung, im Streitfall einem Dritten. Auf dem Schirm sah es trotzdem
   aus wie ein Dashboard: acht Kennzahlkacheln mit Rahmen und Schatten, fuenf
   Balkenkarten ueber die volle Anwendungsbreite. Wer "Drucken" drueckte,
   bekam etwas voellig anderes zu sehen als das, was vor ihm stand. Das war
   der eigentliche Bruch.

   Darum EINE Flaeche mit Papier-Anmutung in Dokumentbreite, mit Kopf,
   Abschnitten und Fuss. Drucken ist dann keine Verwandlung mehr, sondern
   eine Bestaetigung.

   DER BEFUND DES BESITZERS - "auf der Nachweis-Seite kleben die Karten
   aneinander, da ist kein Abstand" - ist nachgemessen KEIN fehlender Abstand:
   jede Naht der alten Ansicht lag sauber auf 16px. Gefehlt hat die STUFE.
   Das Innenpolster einer Karte betraegt 16px, der Abstand zwischen zwei
   Karten ebenfalls 16px. Damit gibt es kein Signal mehr, das "hier hoert ein
   Baustein auf" von "hier geht derselbe Baustein weiter" unterscheidet -
   sieben Karten mit gleichem Innen- und Aussenmass lesen sich als eine
   einzige graue Masse. Er meldet keine fehlende Zahl, er meldet eine
   fehlende Stufe.

   DIE REGEL, die daraus folgt und die diese Datei durchgaengig anwendet:

       Der Abstand ZWISCHEN zwei Bausteinen ist immer eine Stufe GROESSER
       als der Abstand INNERHALB eines Bausteins.

   Nachpruefbar als Ungleichung:   --nw-naht  >  --nw-reihe

   Sie wird genau EINMAL gesetzt (unter .nw-blatt) und gilt fuer jede Naht des
   Blattes. Kein Element bringt hier eigene Aussenabstaende mit; wo eines aus
   styles.css welche mitbringt, werden sie unten ausdruecklich zurueckgenommen.
   Wer den Rhythmus aendern will, aendert zwei Zeilen und sonst nichts.

   WARUM NICHT GLEICH DIE GLOBALEN TOKENS. --luft-block und das Innenpolster
   von .card stehen beide auf 16px - global ist die Ungleichung heute verletzt.
   Der Patch, der das richtigstellt, steht als P1 im Entwurf und gehoert nach
   styles.css: fremdes Revier und eine eigene Welle, weil er Abstaende in JEDER
   Ansicht verschiebt. Bis dahin nimmt dieses Blatt fuer die Naht die
   naechsthoehere Stufe (--luft-abschnitt statt --luft-block). Das ist keine
   Umgehung, sondern derselbe Gedanke lokal: heute ergibt das 12 gegen 24,
   nach P1 12 gegen 32. Die Stufe ist in beiden Welten da, und diese Datei
   muss nicht angefasst werden, wenn P1 kommt.

   Alle Klassen tragen das Praefix nw- (kein anderes Stylesheet benutzt es).
   Keine Inline-Stile im Markup, keine neue Abhaengigkeit.
   ========================================================================== */

/* Dokumentbreite statt Anwendungsbreite. Die Kappe haengt an :has und greift
   erst, wenn das Blatt wirklich gezeichnet ist. Grund: In einem Zwischenstand
   - Stylesheet schon eingehaengt, Verdrahtung in app.js noch nicht - saehe die
   alte Ansicht sonst gequetscht aus statt unveraendert. Ein Stylesheet soll
   nichts kaputtmachen, was es noch gar nicht bedient. */
#view-record:has(.nw-blatt) { max-width: 900px; }

.nw-blatt {
  /* Die zwei Zahlen, die den ganzen Rhythmus tragen. Siehe Regel im Kopf. */
  --nw-reihe: var(--luft-liste);      /* zwischen Geschwistern eines Abschnitts */
  --nw-naht: var(--luft-abschnitt);   /* zwischen Abschnitten - eine Stufe groesser */

  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Mitwachsend, weil ein Blatt auf dem Telefon sonst mehr Rand als Text
     haette: 20px am Handy, 40px am Rechner. */
  padding: clamp(20px, 4vw, 40px);
}

/* ---------- Briefkopf ---------- */

.nw-kopf {
  padding-bottom: var(--nw-naht);
  border-bottom: 1px solid var(--border);
}
.nw-kopf h2 {
  margin: 0 0 4px;
  font-size: var(--fs-2xl);
  font-weight: 600;
}
.nw-zeile {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: 1.5;
}

/* Zeitwahl: EIN Bedienelement statt sechs. Die Zeitraum-Angabe des Dokuments
   IST der Schalter - wer sie liest, sieht die Aussage, wer sie drueckt,
   aendert sie.
   details/summary statt eigener Klapplogik ist hier keine Geschmacksfrage:
   Es braucht kein JavaScript und kein Inline-Script, passt also ohne Ausnahme
   in die strikte CSP, ist von der Tastatur bedienbar und wird von
   Vorlesehilfen von sich aus als aufklappbar angesagt. Der Fokusring aus
   styles.css deckt summary bereits ab. */
.nw-zeitwahl { margin-top: var(--nw-reihe); }
.nw-zeitwahl > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  border-bottom: 1px dashed var(--border-strong);
  padding-bottom: 1px;
}
.nw-zeitwahl > summary::-webkit-details-marker { display: none; }
/* Der Pfeil ist gezeichnet und kein Zeichen aus der Schrift: eine Ecke aus
   zwei Rahmenkanten erbt die Textfarbe und bleibt in jeder Schriftgroesse
   gleich schwer. */
.nw-zeitwahl > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nw-zeitwahl[open] > summary::after { transform: rotate(225deg) translateY(-1px); }
.nw-zeitwahl-feld {
  margin-top: var(--nw-reihe);
  padding: var(--nw-reihe);
  background: var(--surface-sunken);
  border-radius: 8px;
}
/* Ohne min-width:0 stehen die Datumsfelder auf schmalen Geraeten ueber die
   Blattkante hinaus - Raster- und Flexkinder sind von sich aus so breit wie
   ihr Inhalt, und ein Datumsfeld bringt eine feste Mindestbreite mit. */
.nw-zeitwahl-feld .filters,
.nw-zeitwahl-feld .field { min-width: 0; }
.nw-zeitwahl-feld input[type=date] { width: 100%; min-width: 0; }
/* .chipbtns und .filters bringen aus styles.css eigene Aussenabstaende mit
   (8px oben, 24px unten). Im Markup stand dafuer bisher dreimal
   style="margin:0" - hier steht es einmal im Stylesheet, wo es hingehoert.
   Innerhalb der Klappflaeche gilt derselbe Rhythmus wie im ganzen Blatt. */
.nw-zeitwahl-feld .chipbtns { margin: 0 0 var(--nw-reihe); }
.nw-zeitwahl-feld .filters { margin: 0; }
.nw-zeitwahl-feld .field { margin: 0; }

/* ---------- Der Rhythmus des Blattes ----------
   Das Polster oben traegt den Abstand, die Haarlinie sitzt an der Oberkante
   des FOLGENDEN Abschnitts. Deshalb hat der erste Abschnitt keine Linie - die
   liefert der Briefkopf. Haarlinien statt Rahmen ist zugleich das Rezept aus
   der Design-Referenz: Trennung durch eine Linie in Randfarbe, nicht durch
   einen zweiten Kasten. */
.nw-abschnitt { padding-top: var(--nw-naht); }
.nw-abschnitt + .nw-abschnitt { border-top: 1px solid var(--border); }

/* Die durchgaengige Regel, in zwei Zeilen. Jeder senkrechte Abstand innerhalb
   eines Abschnitts kommt von hier - kein Element setzt eigene Werte. */
.nw-abschnitt > * + * { margin-top: var(--nw-reihe); }
.nw-abschnitt > *:last-child { margin-bottom: 0; }

/* Eine Ebene tiefer noch einmal dasselbe: Der Aussenabstand der letzten
   .bar-row faellt sonst DURCH .bars hindurch - der Behaelter hat weder
   Polster noch Rahmen, also kollabiert der Abstand nach aussen - und schiebt
   den naechsten Abschnitt um 8px tiefer. Sichtbar wird das als ungleichmaessige
   Naht zwischen den Balkenabschnitten. */
.nw-abschnitt .bars > *:last-child { margin-bottom: 0; }

.nw-abschnitt > h3 {
  margin: 0 0 var(--nw-reihe);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- Die Lage in einem Satz ----------
   Statt acht Kacheln ein Satz: Die Frage "wie war der Zeitraum" beantwortet
   ein Mensch in einem Satz und nicht in acht Zahlen mit Rahmen. Die Zahlen
   gehen nicht verloren, sie werden leiser (siehe .nw-zahlen).
   52ch, weil ein Satz ueber die ganze Blattbreite nicht mehr gelesen, sondern
   ueberflogen wird. */
.nw-satz {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.5;
  max-width: 52ch;
  font-weight: 400;
}

/* Kennzahlen als ruhige Liste mit Haarlinie - keine Kaesten mit Schatten.
   Zwei Spalten, sobald Platz ist; die Beschriftung links, die Zahl rechts,
   beide auf derselben Grundlinie. Tabellenziffern, damit die Zahlen
   untereinander stehen. */
.nw-zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--nw-reihe) var(--nw-naht);
  margin: 0;
}
.nw-zahlen > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.nw-zahlen dt {
  color: var(--text-secondary);
  font-size: var(--fs-md);
}
.nw-zahlen dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ---------- Das Siegel ----------
   Es bekommt sein Gewicht aus drei Quellen, die nichts kosten: aus dem ORT
   (ganz unten, wo auf einem Dokument die Unterschrift steht), aus der
   TYPOGRAFIE (das einzige Element der Ansicht in Festbreitenschrift, gross
   und gesperrt - es sieht nach Kennung aus, weil es eine ist) und aus der
   STILLE ringsum (ein Satz darueber, was die Kette leistet, ein Satz darunter,
   was geprueft wurde, sonst nichts).
   Bewusst KEINE Farbe, kein Abzeichen, kein gruener Haken: Ein Siegel, das
   schreit, wirkt wie Werbung fuer sich selbst - und ein Beweisprodukt, das um
   Vertrauen wirbt, verliert es. Farbe kommt erst ins Spiel, wenn die Kette
   bricht. */
.nw-code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-xl);
  /* Die Sperrung ist kleiner als frueher (.14em), weil der Wert jetzt in
     Vierergruppen dasteht: Die Gruppen trennen die Zeichen bereits, und zwei
     Trennungen uebereinander machen aus 64 Zeichen eine Landebahn. */
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--text-primary);
  /* Umbruch an den Gruppengrenzen. Bewusst NICHT break-all: Das bricht auch
     dann mitten in eine Vierergruppe, wenn daneben eine Leerstelle frei
     waere - und die zerrissene Gruppe ist genau die Stelle, an der beim
     Abtippen ein Zeichen verloren geht. anywhere greift erst, wenn eine
     Gruppe allein nicht mehr passt. Dieselbe Begruendung wie in druck.css
     fuer das Papier; hier steht sie fuer den Bildschirm.
     Abschneiden ist keine Alternative: Ein Beweiswert, der abgeschnitten
     wird, ist kein Beweis mehr. */
  word-break: normal;
  overflow-wrap: anywhere;
  /* Ligaturen aus: Cascadia Code und Fira Code ziehen "ff" zu einem Zeichen
     zusammen. In einer Hexadezimalsumme kommt "ff" haeufig vor, und wer
     Zeichen fuer Zeichen vergleicht, zaehlt dann falsch. */
  font-variant-ligatures: none;
  font-feature-settings: "calt" 0, "liga" 0;
  font-variant-numeric: slashed-zero;
  /* Ein Klick markiert den ganzen Wert - er wird abgetippt oder kopiert, nie
     halb gebraucht. */
  user-select: all;
  cursor: pointer;
}
/* Die Stille um das Siegel: mehr Luft als der Rhythmus vorsieht, an genau
   dieser einen Stelle und mit Absicht. */
.nw-siegel .nw-code { margin-block: var(--nw-naht); }

/* Erst hier wird der Nachweis laut - und dann konkret statt pauschal.
   Bisher stand im Bruchfall "FEHLERHAFT - bitte in den Einstellungen
   pruefen". Der Server weiss in genau diesem Moment, WELCHE Rapporte
   betroffen sind. Ein Beweisdokument, das im Ernstfall auf eine andere
   Ansicht verweist statt den Befund zu nennen, ist in dem Moment nutzlos,
   fuer den es gebaut wurde. */
.nw-bruch {
  color: var(--critical-ink);
  font-weight: 600;
}
.nw-bruch p { margin: 0 0 var(--luft-eng); }
.nw-bruch p:last-child { margin-bottom: 0; }
.nw-bruch ul {
  margin: var(--luft-eng) 0 0;
  padding-left: 1.2em;
  font-weight: 400;
}
.nw-bruch li { font-variant-numeric: tabular-nums; }

/* .rec-oath und .rec-sign kommen aus styles.css und bringen eigene
   Aussenabstaende mit (16px und 32px). Im Blatt traegt der Rhythmus die
   Abstaende und nicht das einzelne Element - sonst haette ausgerechnet der
   Siegelabschnitt zwei Rhythmen nebeneinander. Zurueckgenommen, damit die
   Regel oben auch hier gilt. */
.nw-abschnitt .rec-oath,
.nw-abschnitt .rec-sign { margin-top: 0; }

/* Die einzige gewollte Ausnahme vom Rhythmus. Ueber den Unterschriftenlinien
   steht die groesste Luecke des Blattes: Das ist die Stille, aus der das
   Siegel sein Gewicht bezieht. Ort und Ruhe statt Farbe.
   Doppelte Naht und keine neue Zahl - es ist genau der Abstand, mit dem sich
   auch der Briefkopf vom Rumpf loest (24 unten am Kopf plus 24 oben am ersten
   Abschnitt). Das Blatt kennt damit drei Abstaende und nicht fuenf:
   12 innerhalb, 24 zwischen Abschnitten, 48 an den zwei Zaesuren. */
.nw-abschnitt > .rec-sign { margin-top: calc(var(--nw-naht) * 2); }

/* Der Dokumentfuss (QR, Adresse, Pruefsumme) traegt seine eigene Gestalt aus
   dokfuss.css. Hier bekommt er nur den Abstand des Blattes - und eine
   Haarlinie, weil er kein Teil des Siegelsatzes ist, sondern die Fussnote
   des ganzen Blattes. */
.nw-abschnitt > .dokfuss,
.nw-abschnitt > .nw-pruefweg {
  margin-top: var(--nw-naht);
  padding-top: var(--nw-naht);
  border-top: 1px solid var(--border);
}

/* ---------- Der Pruefweg ohne QR ----------
   Die Ersatzform des Dokumentfusses: Sie greift nur, wenn der Rueckruf
   dokumentFuss fehlt. Dann faellt der QR-Code weg, die Adresse aber nicht -
   sie ist die Angabe, mit der ein Dritter nachrechnet.

   ALS TEXT UND NICHT ALS KNOPF, und das ist keine Geschmacksfrage:
   druck.css blendet button, .btn und [role="button"] pauschal mit
   display:none !important aus. Eine Angabe, die nur in einem Knopf steht,
   fehlt auf dem Papier - vier Werte sind im Projekt schon so verschwunden. */
.nw-pruefweg { font-size: var(--fs-sm); color: var(--text-secondary); }
.nw-pruefweg p { margin: 0; }
.nw-pruefweg-titel { font-weight: 600; color: var(--text-primary); }
.nw-pruefweg-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: normal;
  overflow-wrap: anywhere;
}
.nw-pruefweg-hinweis { color: var(--text-muted); }

/* ---------- Zwischenstaende ----------
   Wird berechnet, oder es ist nichts da. Beides ist eine Aussage und keine
   leere Flaeche. */
.nw-hinweis {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

@media print {
  /* Auf dem Papier IST das Blatt das Papier - kein Rahmen, kein Schatten,
     keine Kappe, kein Polster. Der Bildschirm hat es nur vorweggenommen.
     Genau darin besteht die Bestaetigung: Was gedruckt kommt, stand vorher
     schon so da. */
  .nw-blatt {
    border: 0;
    box-shadow: none;
    padding: 0;
    background: none;
  }
  #view-record:has(.nw-blatt) { max-width: none; }
  /* Ein Bedienelement auf Papier ist ein Widerspruch. Die Zeitraum-Zeile im
     Briefkopf bleibt als Aussage stehen - Bildschirm und Papier sagen
     dasselbe, nur einmal bedienbar und einmal nicht. */
  .nw-zeitwahl { display: none; }
  .nw-abschnitt { break-inside: avoid; }

  /* ---------- Was druck.css hier nicht mehr erreicht ----------
     druck.css ist fremde Spur und wird nicht angefasst. Sie gestaltet das
     Papier ueber die ALTEN Klassen: .rec-head bekommt den Akzentbalken
     (druck.css:156), .rec-seal den schwarzen Rahmen (:233) und
     ".rec-seal .dl code" das Umbruchraster der Pruefsumme (:372).

     Dieses Blatt heisst .nw-kopf, .nw-siegel und .nw-code - keine dieser
     Regeln greift noch. Ohne Ersatz waere der Ausdruck stiller kaputt als
     vorher: kein Rahmen um den Beweisteil, und eine Pruefsumme in
     Sperrschrift ueber zwei zerrissene Zeilen. Die Gegenmassnahme gehoert
     nach der Hausregel genau hierher, ins eigene Stylesheet des Moduls.

     Die Werte sind aus druck.css uebernommen und nicht neu erfunden: Zwei
     Rahmen unterschiedlicher Staerke auf einem Blatt liest niemand als
     dasselbe Bauteil. */

  /* Der eine Akzent des Hauses: ein duenner Balken ueber dem Dokumentkopf.
     Der Rueckfallwert gilt, wenn druck.css einmal nicht geladen ist -
     schwarz druckt jeder Treiber ohne Rasterung. */
  .nw-kopf {
    border-top: 2pt solid var(--druck-akzent, #000);
    padding-top: 4mm;
  }

  /* Der Beweisteil bekommt seinen Rahmen zurueck. Er zeigt, wo das Siegel
     anfaengt und aufhoert - auch auf einer Fotokopie einer Fotokopie. */
  .nw-siegel {
    border: 1pt solid #000;
    border-radius: 0;
    padding: 4mm;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Das Umbruchraster der Pruefsumme, aus druck.css:372-419 uebernommen.
     22ch ergibt ausnahmslos vier Zeilen zu vier Vierergruppen - und damit
     ist das Raster zugleich die Anzeige des Mangels: Eine vollstaendige
     Summe steht in VIER Zeilen. Steht sie in einer oder zwei, ist sie nicht
     vollstaendig, und das sieht man ihr an, statt es erst an der Pruefstelle
     zu erfahren. Sperrung und Fettung muessen dafuer fallen: Sie verschieben
     die Rechnung, auf der die 22ch stehen. */
  .nw-code {
    display: block;
    width: 22ch;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 8pt;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: normal;
    word-spacing: normal;
    color: #000;
    /* Kleinschreibung erzwungen: Die Pruefstelle rechnet ohnehin klein, und
       zwei Schreibweisen derselben Zahl auf einer Seite liest niemand als
       eine Zahl. */
    text-transform: lowercase;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
    font-variant-ligatures: none;
    font-feature-settings: "calt" 0, "liga" 0;
    font-variant-numeric: slashed-zero;
    /* Eine Summe, die ein Seitenwechsel teilt, ist beim Vergleichen wertlos:
       Zeile drei stuende auf einem anderen Blatt als Zeile zwei. */
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Der Pruefweg in der Ersatzform. Er steht als Text da und faellt darum
     nicht unter die Knopf-Regel von druck.css - hier bekommt er nur die
     Papiergroesse des Dokumentfusses. */
  .nw-pruefweg { font-size: 7.5pt; line-height: 1.45; color: #000; }
  .nw-pruefweg-titel { font-weight: 700; }
  .nw-pruefweg-url { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
  .nw-pruefweg-hinweis { color: #333; }
}