:root {
  --bg: #f6f4ef; --card: #fff; --ink: #1f2a24; --muted: #6b736e; --line: #e2ddd3;
  --gruen: #1d6b46; --gruen-h: #e5f1ea; --rot: #b23a2e; --rot-h: #f8e6e3;
  --gelb: #a76c00; --gelb-h: #fbf0d9; --blau: #2d5a87; --blau-h: #e4edf6;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--ink); }
a { color: var(--blau); }
header { background: var(--gruen); color: #fff; padding: 10px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header .logo { font-weight: 700; font-size: 18px; margin-right: auto; color: #fff; text-decoration: none; }
header nav a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 6px; }
header nav a:hover, header nav a.akt { background: rgba(255,255,255,.18); }
.badge { background: #fff; color: var(--gruen); border-radius: 10px; padding: 0 7px; font-size: 13px; font-weight: 700; margin-left: 4px; }
main { max-width: 1150px; margin: 0 auto; padding: 18px 16px 60px; }
h1 { font-size: 24px; margin: 4px 0 16px; }
h2 { font-size: 19px; margin: 24px 0 10px; }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.grosse-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 20px; }
.grosse-buttons a { display: block; padding: 26px 20px; border-radius: 12px; text-decoration: none; color: #fff; font-size: 21px; font-weight: 700; text-align: center; }
.grosse-buttons a small { display: block; font-weight: 400; font-size: 14px; opacity: .9; margin-top: 4px; }
.btn-rot { background: var(--rot); } .btn-blau { background: var(--blau); }
.btn { display: inline-block; border: 0; border-radius: 8px; padding: 10px 18px; font-size: 16px; cursor: pointer; background: var(--gruen); color: #fff; text-decoration: none; }
.btn.sek { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn.klein { padding: 5px 10px; font-size: 14px; }
label { display: block; font-weight: 600; font-size: 14px; margin: 12px 0 4px; }
input, select, textarea { width: 100%; padding: 10px 12px; font-size: 16px; border: 1px solid #cfc9bd; border-radius: 8px; background: #fff; font-family: inherit; }
textarea { min-height: 80px; }
.reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 14px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; margin-top: 14px; }
.check input { width: auto; transform: scale(1.3); }
table { width: 100%; border-collapse: collapse; background: var(--card); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: #faf8f4; }
tr.klick { cursor: pointer; } tr.klick:hover td { background: #fbfaf6; }
.tabelle-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.s-offen, .s-eingegangen { background: var(--rot-h); color: var(--rot); }
.s-in-klaerung, .s-ausgepackt-geprueft { background: var(--gelb-h); color: var(--gelb); }
.s-vom-buero-bestaetigt { background: var(--blau-h); color: var(--blau); }
.s-erledigt { background: var(--gruen-h); color: var(--gruen); }
.a-noch-offen { background: #eee; color: #555; }
.a-neuversand, .a-gutschrift, .a-rueckerstattung { background: var(--blau-h); color: var(--blau); }
.a-abgelehnt { background: var(--rot-h); color: var(--rot); }
.muted { color: var(--muted); font-size: 14px; }
.filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 14px; }
.filter > * { width: auto; }
.filter input[type=search] { min-width: 240px; }
.flash { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; }
.flash.ok { background: var(--gruen-h); color: var(--gruen); }
.flash.fehler { background: var(--rot-h); color: var(--rot); }
.pos-zeile { display: grid; grid-template-columns: 140px 1fr 90px 220px 40px; gap: 8px; margin-bottom: 8px; }
.pos-zeile button { background: none; border: 0; font-size: 22px; color: var(--rot); cursor: pointer; }
.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.zwei-spalten { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
dl.daten { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; margin: 0; }
dl.daten dt { color: var(--muted); }
dl.daten dd { margin: 0; font-weight: 500; }
.neu-hinweis { position: fixed; bottom: 18px; right: 18px; background: var(--rot); color: #fff; padding: 12px 18px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.2); cursor: pointer; display: none; }
@media (max-width: 760px) {
  .zwei-spalten { grid-template-columns: 1fr; }
  .pos-zeile { grid-template-columns: 1fr 80px 40px; }
  .pos-zeile .p-nr { grid-column: 1 / -1; }
  .pos-zeile .p-zust { grid-column: 1 / -1; }
  dl.daten { grid-template-columns: 1fr; } dl.daten dd { margin-bottom: 6px; }
}
@media print { header, .no-print { display: none !important; } body { background: #fff; } .karte { border: 0; } }

/* --- v2: Sendungsnr., Fotos, DHL --- */
.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; letter-spacing: .02em; }
.check.warn { color: var(--rot); font-weight: 600; margin-top: 38px; }
.flash.warnung { background: var(--gelb-h); color: var(--gelb); }
.flash a { color: inherit; font-weight: 700; }
.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.foto-grid figure { margin: 0; }
.foto-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.foto-grid figcaption { font-size: 13px; margin-top: 4px; }
.foto-grid.klein { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.foto-grid.klein img { height: 80px; }
.pdf-kachel { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 8px; background: var(--rot-h); color: var(--rot); font-weight: 700; text-decoration: none; }
.link-btn { background: none; border: 0; color: var(--rot); cursor: pointer; padding: 0; font-size: 13px; text-decoration: underline; }
hr.trenner { border: 0; border-top: 1px solid var(--line); margin: 18px 0 14px; }
textarea.brief { min-height: 560px; font: 14px/1.5 ui-monospace, Consolas, monospace; }
ol.schritte { padding-left: 20px; margin: 0; } ol.schritte li { margin-bottom: 8px; }
.d-schadensmeldung-vorbereiten, .d-schadensmeldung-eingereicht { background: var(--gelb-h); color: var(--gelb); }
.d-dhl-hat-abgelehnt, .d-endgueltig-abgelehnt { background: var(--rot-h); color: var(--rot); }
.d-widerspruch-eingelegt { background: var(--blau-h); color: var(--blau); }
.d-dhl-hat-bezahlt, .d-widerspruch-erfolgreich { background: var(--gruen-h); color: var(--gruen); }

/* --- v3: Stornierungen --- */
:root { --orange: #c4621a; --orange-h: #fbeadd; }
.btn-orange { background: var(--orange); }
.btn.btn-orange-bg { background: var(--orange); }
.s-neu { background: var(--orange-h); color: var(--orange); }
.s-kunde-informiert { background: var(--blau-h); color: var(--blau); }
.auswahl-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.kachel { margin: 0; cursor: pointer; }
.kachel input { position: absolute; opacity: 0; }
.kachel span { display: block; padding: 16px 14px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font-weight: 600; font-size: 16px; text-align: center; }
.kachel input:checked + span { border-color: var(--orange); background: var(--orange-h); color: var(--orange); }
.kachel input:focus-visible + span { outline: 2px solid var(--blau); }
.paste-zone { border: 2px dashed #c9c2b4; border-radius: 12px; padding: 22px; text-align: center; background: #fbfaf7; cursor: text; }
.paste-zone.drag { border-color: var(--orange); background: var(--orange-h); }
.paste-zone.hat-bild { border-color: var(--gruen); }
.pos-zeile.pos3 { grid-template-columns: 140px 1fr 90px 40px; }
.screenshot-liste figure { margin: 0 0 14px; }
.screenshot-liste img { max-width: 100%; border: 1px solid var(--line); border-radius: 8px; display: block; }
@media (max-width: 760px) { .pos-zeile.pos3 { grid-template-columns: 1fr 80px 40px; } .pos-zeile.pos3 > :first-child { grid-column: 1 / -1; } }