/* Designtokens von allsmart.gmbh. Einzige Abweichung: --muted ist von #888
   auf #6e6e6e abgedunkelt, weil #888 bei 11–12 px den Kontrast nicht hält. */
:root {
  --bg: #ffffff;
  --fg: #1a1a1a;
  --muted: #6e6e6e;
  --secondary: #555555;
  --border: #e5e5e5;
  --border-strong: #1a1a1a;
  --card: #ffffff;
  --subtle: #f8f8f8;
  --hairline: #f1f1f1;
  --accent: #0049ff;
  --ok-bg: #e7f2ea;      --ok-fg: #1a6b3d;
  --wait-bg: #eef0f5;    --wait-fg: #37445c;
  --warn-bg: #fbf0dd;    --warn-fg: #87510a;
  --bad-bg: #f7e9e7;     --bad-fg: #8d2b20;
  --off-bg: #f1f1f1;     --off-fg: #5a5a5a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d0d0d;
    --fg: #f5f5f5;
    --muted: #9a9a9a;
    --secondary: #b0b0b0;
    --border: #2a2a2a;
    --border-strong: #f5f5f5;
    --card: #161616;
    --subtle: #262626;
    --hairline: #222222;
    --accent: #5b86ff;
    --ok-bg: #16301f;    --ok-fg: #6fc794;
    --wait-bg: #1d2330;  --wait-fg: #9db0d4;
    --warn-bg: #33270f;  --warn-fg: #e0ad5e;
    --bad-bg: #331b18;   --bad-fg: #e08c80;
    --off-bg: #242424;   --off-fg: #a0a0a0;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--fg); text-decoration: none; }
a:hover { opacity: .7; }
:focus-visible { outline: 2px solid var(--border-strong); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.spacer { flex-grow: 1; }
.meta { font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dim { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px;
  padding: 10px clamp(16px, 4vw, 48px); min-height: 64px;
  border-bottom: 1px solid var(--border);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-size: 16px; letter-spacing: -.3px; }
.brand svg { width: 26px; height: 26px; color: var(--fg); flex-shrink: 0; }
.brand strong { font-weight: 700; }
.divider-v { width: 1px; height: 20px; background: var(--border); flex-shrink: 0; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--secondary); }
.back svg { width: 15px; height: 15px; }

/* ── Seitenrahmen ──────────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 48px) 64px; }
.wrap--narrow { max-width: 680px; padding-top: 48px; }
.stack { display: flex; flex-direction: column; gap: 26px; }
.stack--tight { gap: 14px; }
.cols { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.cols > .col-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.cols > .col-side { flex: 0 1 400px; min-width: 300px; }

h1 { font-size: 22px; font-weight: 600; letter-spacing: -.4px; line-height: 1.35; text-wrap: balance; }
h2 { font-size: 14px; font-weight: 600; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* ── Karten ────────────────────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 26px 28px;
}
.card--flush { padding: 0; overflow: hidden; }
.center-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 30px; }
.center-brand svg { width: 46px; height: 46px; color: var(--fg); }
.center-brand span { font-size: 19px; letter-spacing: -.4px; }

/* ── Aktionskarten ─────────────────────────────────────────────────────── */
.actions { display: flex; gap: 18px; flex-wrap: wrap; }
.action {
  flex: 1 1 300px; display: flex; align-items: center; gap: 17px;
  padding: 22px 24px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--card); transition: border-color .15s ease, transform .15s ease;
}
.action:hover { border-color: var(--border-strong); transform: translateY(-2px); opacity: 1; }
.action--strong { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.action--strong .action__sub { color: var(--bg); opacity: .72; }
.action svg { width: 22px; height: 22px; flex-shrink: 0; }
.action__title { font-size: 15px; font-weight: 600; }
.action__sub { font-size: 13px; color: var(--secondary); }

/* ── Tabelle ───────────────────────────────────────────────────────────── */
.table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.tscroll { overflow-x: auto; }
.row {
  display: flex; align-items: center; gap: 16px;
  padding: 0 18px; min-height: 62px; background: var(--card);
  border-top: 1px solid var(--border); color: var(--fg);
}
.row:first-child { border-top: none; }
.row--head {
  min-height: 40px; background: var(--subtle); border-top: none;
  font-size: 11px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.row--empty { justify-content: center; color: var(--muted); font-size: 14px; min-height: 90px; }
.c-title { flex: 1 1 auto; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.c-title strong { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-title .meta { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-to { flex: 0 0 170px; font-size: 13px; color: var(--secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-num { flex: 0 0 86px; text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.c-status { flex: 0 0 132px; display: flex; justify-content: flex-end; }
.dir { flex: 0 0 12px; display: flex; align-items: center; }
.dir svg { width: 12px; height: 12px; }

/* ── Status ────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  background: var(--off-bg); color: var(--off-fg);
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.pill--ok { background: var(--ok-bg); color: var(--ok-fg); }
.pill--wait { background: var(--wait-bg); color: var(--wait-fg); }
.pill--warn { background: var(--warn-bg); color: var(--warn-fg); }
.pill--bad { background: var(--bad-bg); color: var(--bad-fg); }

/* ── Formular ──────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label, .label { font-size: 13px; font-weight: 500; color: var(--fg); }
.hint { font-size: 12px; line-height: 1.5; color: var(--muted); }
.input, .textarea, select {
  width: 100%; padding: 11px 13px; font-family: var(--sans); font-size: 14px;
  line-height: 1.5; color: var(--fg); background: var(--subtle);
  border: 1px solid transparent; border-radius: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.input--mono { font-family: var(--mono); font-size: 13px; }
.textarea { resize: vertical; min-height: 88px; }
.input:focus, .textarea:focus, select:focus { background: var(--card); border-color: var(--border-strong); outline: none; }
.input::placeholder, .textarea::placeholder { color: var(--muted); }
.row-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.row-fields > .field { flex: 1 1 140px; }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--fg); cursor: pointer; }
.check label { font-size: 13px; line-height: 1.5; color: var(--secondary); cursor: pointer; }
.divider { height: 1px; background: var(--border); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; min-height: 44px; font-family: var(--sans); font-size: 14px;
  font-weight: 500; color: var(--fg); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: opacity .15s ease, border-color .15s ease;
}
.btn:hover { opacity: .8; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--fg); color: var(--bg); border-color: var(--fg); font-size: 15px; }
.btn--danger { color: var(--bad-fg); }
.btn--block { width: 100%; }
.btn--small { padding: 7px 13px; min-height: 34px; font-size: 12px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.choice { display: flex; gap: 8px; flex-wrap: wrap; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label {
  flex: 1 1 70px; text-align: center; padding: 10px 6px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--card);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  color: var(--secondary); cursor: pointer;
}
.choice input:checked + label { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.choice input:focus-visible + label { outline: 2px solid var(--border-strong); outline-offset: 2px; }

/* ── Dateien ───────────────────────────────────────────────────────────── */
.dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; min-height: 130px; padding: 20px; text-align: center;
  border: 1.5px dashed var(--border); border-radius: 12px; background: var(--subtle);
}
.dropzone.is-over { border-color: var(--accent); background: var(--card); }
.dropzone svg { width: 23px; height: 23px; color: var(--muted); }
.dropzone__main { font-size: 14px; color: var(--fg); }
.dropzone__sub { font-size: 12px; color: var(--muted); }
.linkish {
  padding: 0; border: none; background: none; font: inherit; font-size: 12px;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}

.filelist { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.filelist:empty { display: none; }
.fileitem {
  display: flex; align-items: center; gap: 13px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--card);
}
.fileitem:first-child { border-top: none; }
.ext {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; background: var(--subtle);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--secondary);
}
.fileitem__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fileitem__line { display: flex; align-items: baseline; gap: 12px; }
.fileitem__name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileitem__size { flex-shrink: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iconbtn {
  flex-shrink: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 6px; cursor: pointer;
}
.iconbtn svg { width: 15px; height: 15px; color: var(--muted); }
.check-icon { flex-shrink: 0; width: 17px; height: 17px; color: var(--ok-fg); }

.progress { height: 4px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.progress__bar { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width .2s linear; }
.progress--total { height: 5px; }

/* Rückmeldung nach einer Aktion, ganz oben im Inhalt. Sie braucht unter sich
   spürbar Luft: direkt darunter sitzt die rechtsbündige Aktionsleiste, und
   mit knappem Abstand wirkt die Meldung wie deren Überschrift. */
.flash { margin-bottom: 34px; }

/* Aktionen des Vorgangs: eigene Zeile unter der Kopfzeile. In der Kopfzeile
   standen sie gedrängt neben Titel und Status, und das Zahlenfeld zum
   Verlängern wirkte dort wie eine zusammenhanglose 7. */
.actionbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  justify-content: flex-end; margin-bottom: 24px;
}
.actionbar form { display: flex; align-items: center; gap: 8px; }
.actionbar label { font-size: 13px; color: var(--secondary); white-space: nowrap; }
.actionbar .input { width: 62px; padding: 8px 10px; text-align: center; }

/* Empfängerzeile: Kopf, Angaben und Aktionen untereinander. Vorher standen
   Marke und beide Knöpfe in derselben umbrechenden Zeile wie die Adresse und
   drückten sich gegenseitig zusammen. */
.recipient {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; background: var(--card); border-top: 1px solid var(--border);
}
.recipient:first-child { border-top: none; }
.recipient__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.recipient__mail { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
/* Link, Öffnungsstand und ein etwaiger Mailfehler gehören zusammen und
   stehen deshalb enger beieinander als die drei Blöcke untereinander. */
.recipient__meta { display: flex; flex-direction: column; gap: 5px; }
.recipient__meta > span { line-height: 1.5; }
.recipient__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ── Detailansicht ─────────────────────────────────────────────────────── */
.kpis { display: flex; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex-wrap: wrap; }
.kpi { flex: 1 1 140px; padding: 15px 18px; display: flex; flex-direction: column; gap: 4px; border-left: 1px solid var(--border); }
.kpi:first-child { border-left: none; }
.kpi__value { font-family: var(--mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: 12px; color: var(--muted); }

.log { display: flex; flex-direction: column; max-height: 520px; overflow-y: auto; }
.logitem { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.logitem__when { flex: 0 0 84px; font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; line-height: 1.5; }
.logitem__what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.logitem__what span { font-size: 12.5px; line-height: 1.45; }
.logitem__who { font-family: var(--mono); font-size: 10.5px; color: var(--muted); word-break: break-word; }

/* ── Hinweise, Fußzeile ────────────────────────────────────────────────── */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--subtle); border-radius: 8px; }
.notice svg { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; color: var(--secondary); }
.notice__body { display: flex; flex-direction: column; gap: 3px; }
.notice__body strong { font-weight: 600; }
.notice--error { background: var(--bad-bg); }
.notice--error svg { color: var(--bad-fg); }
.notice--error .notice__body { color: var(--bad-fg); }
.notice--ok { background: var(--ok-bg); }
.notice--ok svg, .notice--ok .notice__body { color: var(--ok-fg); }
.notice p { font-size: 13px; line-height: 1.55; }

.quote { padding-left: 16px; border-left: 2px solid var(--border); font-size: 14.5px; line-height: 1.65; color: var(--secondary); white-space: pre-line; }

.copyrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.copyrow code {
  flex: 1 1 260px; min-width: 0; padding: 11px 13px; background: var(--subtle); border-radius: 8px;
  font-family: var(--mono); font-size: 12.5px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

footer.page {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
footer.page a { color: var(--muted); }
/* Die drei Rechtslinks standen fast aneinander. 28px trennen sie erkennbar,
   ohne dass die Zeile bei schmalem Fenster auseinanderfällt — dort bricht
   sie um und behält 10px Zeilenabstand. */
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }

@media (max-width: 720px) {
  .c-to, .c-status { display: none; }
  .row { padding: 12px 14px; }
}