:root {
  --rand: #000;
  --flaeche: #fff;
  --leise: #595959;
  --fehler: #b00020;
  --warnung: #8a5a00;
  --abstand: 0.75rem;
  color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #000;
  background: var(--flaeche);
}

.kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand);
  align-items: center;
  padding: var(--abstand);
  border-bottom: 1px solid var(--rand);
}

.zugang { display: flex; gap: 0.5rem; }
.zugang input { width: 22rem; max-width: 70vw; font-family: ui-monospace, monospace; }

.meldung { min-height: 1.45em; }
.meldung.fehler { color: var(--fehler); }

main {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: calc(var(--abstand) * 2);
  padding: var(--abstand);
}

@media (max-width: 60rem) {
  main { grid-template-columns: minmax(0, 1fr); }
}

h2.zeichen { margin: 0 0 var(--abstand); font-size: 1.25rem; font-weight: 600; }

input, select, textarea, button {
  font: inherit;
  color: #000;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0.4rem 0.5rem;
}

textarea { width: 100%; resize: vertical; }
input[type="checkbox"] { padding: 0; }

button { cursor: pointer; min-width: 2.5rem; }
button.haupt { background: #000; color: #fff; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

:focus-visible { outline: 2px solid #000; outline-offset: 2px; }

.brief { display: grid; gap: var(--abstand); }

.felder { display: grid; gap: 0.5rem; }
.feld { display: grid; gap: 0.2rem; }
.feld > .beschriftung { font-weight: 600; }
.feld input:not([type="checkbox"]), .feld select { width: 100%; }
.feld.kurz { max-width: 16rem; }
.feld[aria-invalid="true"] input,
.feld[aria-invalid="true"] textarea,
.feld[aria-invalid="true"] select { border-color: var(--fehler); outline: 1px solid var(--fehler); }

.zone {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  border: 1px dashed var(--rand);
  border-radius: 4px;
  cursor: pointer;
}
.zone.ueber { background: #f2f2f2; }
.zone .zeichen { font-size: 1.4rem; }

.anlagen { margin: 0; padding-left: 1.2rem; }
.anlagen li { display: flex; gap: 0.5rem; align-items: baseline; }
.anlagen button { padding: 0 0.4rem; min-width: 0; }

.versand {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.schalter { display: inline-flex; gap: 0.25rem; align-items: center; }

.entwurf { margin-top: var(--abstand); display: grid; gap: var(--abstand); }
.befunde { margin: 0; padding-left: 1.2rem; }
.befunde .fehler { color: var(--fehler); }
.befunde .warnung { color: var(--warnung); }
.befunde .hinweis { color: var(--leise); }
.kosten { margin: 0; font-weight: 600; }
.betrag { font-variant-numeric: tabular-nums; }
.knoepfe { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vorschau { width: 100%; height: 70vh; border: 1px solid var(--rand); }

.sendungen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--abstand); }
.sendung { border: 1px solid var(--rand); border-radius: 4px; padding: 0.5rem; display: grid; gap: 0.35rem; }
.sendung .zeile { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline; }
.sendung .zustand { font-weight: 600; }
.sendung .ereignisse { margin: 0; padding-left: 1.2rem; font-size: 0.9rem; }
.sendung .nummern:empty { display: none; }

code { font-family: ui-monospace, monospace; font-size: 0.9em; }