/* Posteingang-Cockpit – die Freigabe-Seite (Runde C, C5). Eigene, kleine Datei: die Seite hat einen eigenen
 * Ursprung und lädt nichts vom Cockpit. Farben wie im Cockpit (stil.css :root), hell und dunkel. Keine
 * Inline-Stile (CSP style-src 'self'), keine Schriften von außen. */

:root {
  --hg: #F6F2EC; --flaeche: #FFFFFF; --tinte: #290C05; --tinte-2: #5C4F42; --linie: #E4DCD1;
  --petrol: #466C62; --petrol-dunkel: #34524A;
  --rot-hg: #FBE9E7; --rot-vg: #8A1C12; --rot-rand: #E3A59D;
  --gelb-hg: #FFF6D9; --gelb-vg: #6B4E00; --gelb-rand: #E8CF7F;
  --rund: 0.625rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hg: #1D1916; --flaeche: #26211D; --tinte: #F4EDE4; --tinte-2: #C9BCAD; --linie: #3F3731;
    --petrol: #7FB3A5; --petrol-dunkel: #97C4B8;
    --rot-hg: #3B1C18; --rot-vg: #F5B8AE; --rot-rand: #7A3A31;
    --gelb-hg: #362D12; --gelb-vg: #F2DC94; --gelb-rand: #6E5B20;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--hg); color: var(--tinte); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.seite { max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.kopf { margin: 0.5rem 0 1rem; }
.kopf-marke { margin: 0; font-size: 0.8125rem; color: var(--tinte-2); letter-spacing: 0.02em; }
h1 { margin: 0.125rem 0 0; font-size: 1.5rem; line-height: 1.25; }

.lage { margin: 0 0 1rem; padding: 0.625rem 0.875rem; border-radius: var(--rund); background: var(--flaeche); border: 1px solid var(--linie); }
.lage[hidden], .lage:empty { display: none; }
.lage.fehler, .gueltig.fehler { background: var(--rot-hg); color: var(--rot-vg); border-color: var(--rot-rand); font-weight: 600; }
.lage.ok { border-color: var(--petrol); }

#inhalt { display: flex; flex-direction: column; gap: 0.75rem; }
.art { margin: 0; font-weight: 600; }
.feld { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.625rem 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; }
.feld-titel { margin: 0; font-size: 0.8125rem; color: var(--tinte-2); font-weight: 600; }
.wert { margin: 0; overflow-wrap: anywhere; }
.betreff { font-weight: 600; }
.feld.bcc { background: var(--gelb-hg); color: var(--gelb-vg); border-color: var(--gelb-rand); }
.feld.bcc .feld-titel { color: var(--gelb-vg); }
.adressen, .anhaenge { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.adressen li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.adresse { overflow-wrap: anywhere; unicode-bidi: isolate; }
.marke { font-size: 0.75rem; padding: 0 0.375rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--tinte-2); }
.marke.gelb { background: var(--gelb-hg); color: var(--gelb-vg); border-color: var(--gelb-rand); }
.anhaenge li { overflow-wrap: anywhere; font-size: 0.9375rem; }
pre.text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.klein { margin: 0; font-size: 0.8125rem; color: var(--tinte-2); }
.zitat { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--rund); padding: 0.5rem 0.875rem; }
.zitat summary { cursor: pointer; min-height: 2rem; display: flex; align-items: center; color: var(--tinte-2); }
.zitat pre { color: var(--tinte-2); font-size: 0.9375rem; }

.hinweise { display: flex; flex-direction: column; gap: 0.5rem; }
.hinweis { border-radius: var(--rund); padding: 0.625rem 0.875rem; border: 1px solid; }
.hinweis p { margin: 0; }
.hinweis.rot { background: var(--rot-hg); color: var(--rot-vg); border-color: var(--rot-rand); font-weight: 600; }
.hinweis.gelb { background: var(--gelb-hg); color: var(--gelb-vg); border-color: var(--gelb-rand); }
.haken { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; min-height: 2.75rem; font-weight: 400; cursor: pointer; }
.haken input { width: 1.375rem; height: 1.375rem; accent-color: var(--rot-vg); }

.gueltig { margin: 0; font-size: 0.875rem; color: var(--tinte-2); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.25rem; }
.knopf { font: inherit; min-height: 2.75rem; padding: 0.5rem 1.125rem; border-radius: var(--rund); border: 1px solid var(--petrol);
  background: var(--petrol); color: #FFFFFF; cursor: pointer; }
.knopf:hover { background: var(--petrol-dunkel); }
.knopf:focus-visible, .code:focus-visible, .haken input:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.knopf:disabled { opacity: 0.55; cursor: not-allowed; }
.knopf.haupt { font-size: 1.125rem; font-weight: 600; min-height: 3.25rem; padding: 0.625rem 1.5rem; }
.knopf.leise { background: var(--flaeche); color: var(--tinte); border-color: var(--linie); }
.code { font: inherit; font-size: 1.5rem; letter-spacing: 0.2em; text-transform: uppercase; padding: 0.5rem 0.75rem;
  border: 1px solid var(--linie); border-radius: var(--rund); background: var(--flaeche); color: var(--tinte); max-width: 14rem; }

@media (max-width: 30rem) {
  .knoepfe .knopf { width: 100%; }
}

/* Nach den Gutachten vom 27.09.: Adresse zuerst und fett, fremder Text isoliert, Anhänge zum Ansehen, Kurzfassung über
 * dem Knopf, Prüfwert der Probe. */
bdi { unicode-bidi: isolate; }
.adresse { font-weight: 600; direction: ltr; }
.adress-name { color: var(--tinte-2); overflow-wrap: anywhere; }
.anhang-name { overflow-wrap: anywhere; }
.anhang-ansehen { color: var(--petrol); font-weight: 600; white-space: nowrap; }
.anhang-ansehen:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.feld.zitat { border-style: dashed; }
.kurz { border-radius: var(--rund); padding: 0.5rem 0.875rem; background: var(--flaeche); border: 1px solid var(--petrol); }
.kurz p { margin: 0; overflow-wrap: anywhere; }
.kurz-rot { color: var(--rot-vg); font-weight: 600; }
a.knopf { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.pruefwert { margin: 0.25rem 0; font: 700 1.75rem/1.2 ui-monospace, "SFMono-Regular", Consolas, monospace; letter-spacing: 0.08em; }