/* ==========================================================================
   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);
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--text-primary);
  /* Umbruch erlaubt: Der Siegelwert ist auf dem Telefon breiter als das Blatt,
     und ein Beweiswert, der abgeschnitten wird, ist kein Beweis mehr. */
  word-break: break-all;
  /* 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 {
  margin-top: var(--nw-naht);
  padding-top: var(--nw-naht);
  border-top: 1px solid var(--border);
}

/* ---------- 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; }
  .nw-siegel { break-inside: avoid; }
  .nw-code { color: #000; }
}