/* VERA Brief – Gestaltung (Stand 16.10.2026) */
:root {
  --grund: #f6f5f1; --karte: #ffffff; --text: #1d2321; --grau: #5d6763; --linie: #dcdfda;
  --gruen: #0d6b57; --gruen-hell: #e3f1ec; --rot: #a3352b; --gelb: #fff6d8; --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --grund: #121614; --karte: #1b201e; --text: #e8ece9; --grau: #a3aca8; --linie: #2e3532;
    --gruen: #3fb594; --gruen-hell: #173229; --rot: #e07a6f; --gelb: #3a3320;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grund); color: var(--text); }
body {
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: max(14px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  max-width: 640px; margin: 0 auto;
}
h1 { font-size: 22px; margin: 6px 0 2px; }
h2 { font-size: 18px; margin: 0 0 8px; }
p { margin: 6px 0; }
.klein { font-size: 13px; color: var(--grau); }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.marke { display: flex; align-items: center; gap: 10px; }
.marke .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--gruen); color: #fff; display: grid; place-items: center; font-weight: 700; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.schritt { display: flex; gap: 12px; }
.schritt .nr { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); font-weight: 700; display: grid; place-items: center; }
.schritt.fertig .nr { background: var(--gruen); color: #fff; }
.schritt .inhalt { flex: 1; min-width: 0; }
button, .knopf {
  appearance: none; border: 0; border-radius: 12px; padding: 13px 16px; font: inherit; font-weight: 600;
  background: var(--gruen); color: #fff; cursor: pointer; width: 100%; margin-top: 8px; text-align: center; display: block; text-decoration: none;
}
button.zweit, .knopf.zweit { background: var(--gruen-hell); color: var(--gruen); }
button:disabled { opacity: .45; cursor: default; }
.reihe { display: flex; gap: 8px; }
.reihe > * { flex: 1; }
.wahl { display: flex; gap: 8px; margin: 8px 0; }
.wahl label { flex: 1; border: 1px solid var(--linie); border-radius: 12px; padding: 10px; cursor: pointer; }
.wahl input { margin-right: 6px; }
.wahl label.an { border-color: var(--gruen); background: var(--gruen-hell); }
input[type=text] { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font: inherit; }
input[type=file] { display: none; }
.hinweis { background: var(--gelb); border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 8px 0; }
.fehler { color: var(--rot); font-weight: 600; }
.ok { color: var(--gruen); font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; word-break: break-all; }
.balken { height: 6px; background: var(--linie); border-radius: 3px; overflow: hidden; margin: 8px 0; }
.balken > div { height: 100%; width: 0; background: var(--gruen); transition: width .2s; }
.liste { list-style: none; padding: 0; margin: 0; }
.liste li { padding: 12px 0; border-bottom: 1px solid var(--linie); cursor: pointer; }
.liste li:last-child { border-bottom: 0; }
.marken { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.marken span { font-size: 12px; border-radius: 20px; padding: 2px 8px; background: var(--gruen-hell); color: var(--gruen); }
.marken span.offen { background: var(--linie); color: var(--grau); }
ol.anl { padding-left: 20px; margin: 6px 0; }
ol.anl li { margin: 3px 0; }
.versteckt { display: none !important; }
table.werte { width: 100%; border-collapse: collapse; font-size: 14px; }
table.werte td { padding: 7px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
table.werte td:first-child { color: var(--grau); width: 38%; padding-right: 10px; }
.urteil { font-size: 18px; font-weight: 700; margin: 4px 0 8px; }
iframe.pdf { width: 100%; height: 70vh; border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
a { color: var(--gruen); }
footer { margin-top: 22px; font-size: 12px; color: var(--grau); text-align: center; }

/* 16.10.2026: Empfänger, Standbilder, geführte Aufnahme */
label.feld { display: block; font-size: 13px; color: var(--grau); margin: 10px 0 4px; }
textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font: inherit; resize: vertical; }
.bilder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0; }
.bilder figure { margin: 0; }
.bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); display: block; }
.bilder figcaption { font-size: 11px; color: var(--grau); line-height: 1.25; margin-top: 2px; }
.rec { position: fixed; inset: 0; z-index: 50; background: #000; color: #fff; }
.rec video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rec-kopf { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 10px; background: linear-gradient(rgba(0,0,0,.6), transparent); font-weight: 600; }
.rec-punkt { width: 12px; height: 12px; border-radius: 50%; background: #e5372b; animation: blink 1s infinite; }
#recNr { margin-left: auto; font-size: 13px; opacity: .85; }
@keyframes blink { 50% { opacity: .25; } }
.rec-fuss { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 16px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.78) 22%); }
.rec-schritte { list-style: none; padding: 0; margin: 0 0 6px; }
.rec-schritte li { padding: 6px 0 6px 30px; position: relative; opacity: .55; font-size: 15px; }
.rec-schritte li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #fff; }
.rec-schritte li.aktiv { opacity: 1; font-weight: 600; }
.rec-schritte li.erledigt { opacity: .85; }
.rec-schritte li.erledigt::before { background: #3fb594; border-color: #3fb594; }
.rec-schritte li.erledigt::after { content: "✓"; position: absolute; left: 7px; top: 5px; font-size: 14px; color: #fff; font-weight: 700; }
.rec-hinweis { min-height: 1.2em; font-size: 14px; color: #ffd76a; margin: 2px 0; }
.rec button.zweit { background: rgba(255,255,255,.16); color: #fff; }

/* 16.10.2026 (0.3.0): Sprachwahl, Anleitung, Rechtliches */
.sprachen { display: flex; gap: 4px; flex: 0 0 auto; }
.sprachen button { width: auto; margin: 0; padding: 5px 8px; font-size: 13px; font-weight: 600; border-radius: 8px; background: transparent; color: var(--grau); border: 1px solid var(--linie); }
.sprachen button.an { background: var(--gruen-hell); color: var(--gruen); border-color: var(--gruen); }
details.aufklapp { border-top: 1px solid var(--linie); padding: 8px 0; }
details.aufklapp:last-of-type { border-bottom: 1px solid var(--linie); }
details.aufklapp summary { cursor: pointer; font-weight: 600; list-style-position: inside; }
ul.recht { padding-left: 18px; margin: 6px 0; }
ul.recht li { margin: 6px 0; }
.rechtstext h3 { font-size: 15px; margin: 14px 0 4px; }
.rechtstext p, .rechtstext li { font-size: 14px; }
.rechtstext ul { padding-left: 18px; margin: 4px 0; }

/* 16.10.2026 (0.4.0): Fristenrechner, Kanzlei-Stapel, Druckdienst, Etikettenbogen, Sendungsnummer lesen */
select, input[type=date], input[type=number] {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--linie); background: var(--karte); color: var(--text); font: inherit;
  appearance: none; -webkit-appearance: none; min-height: 46px;
}
select { background-image: linear-gradient(45deg, transparent 50%, var(--grau) 50%), linear-gradient(135deg, var(--grau) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
button.zurueck { width: auto; margin: 0 0 4px; }
.reihe.drei { align-items: flex-end; }
.reihe.drei > div { min-width: 0; }
label.haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 10px 0 4px; cursor: pointer; }
label.haken input { width: 20px; height: 20px; flex: 0 0 20px; margin: 1px 0 0; accent-color: var(--gruen); }
.zeile-feld { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: 14px; }
.zeile-feld label { flex: 1; color: var(--grau); }
.zeile-feld select { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--gelb); border-radius: 20px; padding: 4px 4px 4px 12px; font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.chip button.mini { width: 28px; height: 28px; padding: 0; margin: 0; border-radius: 50%; background: rgba(0,0,0,.08); color: var(--text); font-size: 16px; line-height: 28px; }
details.frist > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
details.frist > summary::-webkit-details-marker { display: none; }
details.frist > summary::after { content: "›"; font-size: 22px; color: var(--grau); transform: rotate(90deg); transition: transform .15s; }
details.frist[open] > summary::after { transform: rotate(-90deg); }
details.frist > summary h2 { margin: 0; }
details.frist[open] > summary { margin-bottom: 6px; }
#fDatum { margin-top: 2px; }
.frist-ende { font-size: 20px; font-weight: 700; color: var(--gruen); margin: 14px 0 2px; }
.frist-zeile { margin-top: 6px; font-weight: 600; color: var(--gruen); }
.frist-klein { color: var(--gruen); font-weight: 600; }
.liste li.stapel-kopf { background: var(--gruen-hell); border-radius: 10px; padding: 10px 12px; border-bottom: 0; margin-top: 6px; }
.liste li.im-stapel { padding-left: 14px; border-left: 3px solid var(--gruen-hell); }
.etiwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--grau); margin: 10px 0 0; }
.etiwahl select { width: auto; min-height: 34px; padding: 5px 28px 5px 10px; font-size: 13px; }
.etiFeldBox { display: inline-flex; align-items: center; gap: 6px; }
ul.verlauf { padding-left: 18px; margin: 4px 0; }
.scan-rahmen { position: absolute; left: 8%; right: 8%; top: 34%; height: 22%; border: 3px solid #3fb594; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(0,0,0,.35); }
.scan-text { color: #fff; font-size: 15px; margin: 0 0 4px; }