* { box-sizing: border-box; }
html { scroll-padding-top: var(--space-5); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: var(--text-body)/1.55 var(--font-ui); overflow-wrap: anywhere; }
::selection { background: var(--selected); color: var(--accent-hover); }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1, h2, h3, p, dl { margin: 0 0 var(--space-4); }
h1 { font-size: var(--text-title); line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: var(--text-section); line-height: 1.4; font-weight: 650; }
h3 { font-size: 1rem; }
p { max-width: 76ch; }
ul, ol { padding-inline-start: var(--space-5); }
small, .small, .help, .cell-note { font-size: var(--text-small); }
.muted, .help, .cell-note { color: var(--muted); }
.help { margin-top: var(--space-2); }
.cell-note { display: block; margin-top: var(--space-1); }
.attention, .field-error { color: var(--danger); }
.nowrap { white-space: nowrap; }
code { font-size: .85em; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; line-height: 1.7; max-width: 78ch; }
.skip { position: fixed; left: var(--space-4); top: -6rem; z-index: 20; padding: var(--space-3) var(--space-4); background: var(--surface); border: 2px solid var(--focus); }
.skip:focus { top: var(--space-4); }
.shell { display: grid; grid-template-columns: var(--rail-width) minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: var(--space-6) var(--space-3) var(--space-4); border-right: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
.brand { color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 750; letter-spacing: -.025em; display: block; padding: 0 var(--space-3) var(--space-6); }
.brand span { display: block; font-size: var(--text-small); font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: var(--space-1); }
.nav-group { margin-bottom: var(--space-5); }
.nav-group-title { color: var(--muted); font-size: .75rem; padding: var(--space-2) var(--space-3); font-weight: 600; margin: 0; }
.nav-link { color: var(--muted); display: flex; align-items: center; gap: var(--space-3); padding: .625rem var(--space-3); border-radius: var(--radius-control); text-decoration: none; min-height: var(--control-height); font-weight: 500; }
.nav-link:hover { background: var(--subtle); color: var(--ink); }
.nav-link[aria-current] { background: var(--selected); color: var(--accent-hover); font-weight: 650; }
.nav-icon { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.logout { margin-top: auto; padding-top: var(--space-4); }
.workspace { min-width: 0; }
.topbar { min-height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--line); background: var(--surface); }
.topbar p { margin: 0; }
.environment { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-small); color: var(--muted); }
.environment strong { background: var(--warning-bg); color: var(--warning); padding: var(--space-1) var(--space-2); border-radius: var(--radius-control); font-weight: 600; }
.mobile-nav { display: none; }
main { padding: var(--space-6); max-width: 100rem; margin-inline: auto; min-width: 0; }
.heading, .page-header, .section-heading, .toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }
.heading h1, .page-header h1 { margin-bottom: var(--space-2); }
.heading p, .page-header p, .toolbar p, .section-heading h2 { margin: 0; }
.page-header { align-items: flex-start; }
.page-header { display: block; }
.page-header > p { margin-top: var(--space-2); }
.page-footer { padding: var(--space-5) var(--space-6); color: var(--muted); font-size: var(--text-small); }
section, .panel { margin-bottom: var(--space-5); }
.panel, .section, .message-tools section, .message-content, .offer-group, .mailbox-row { background: var(--surface); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.panel .panel, .section .section { border: 0; padding: 0; }
.panel > :last-child, .section > :last-child { margin-bottom: 0; }
label, legend { font-weight: 550; font-size: .875rem; }
label { display: block; }
legend { padding-inline: var(--space-2); }
input, select, textarea, button, .button { font: inherit; border-radius: var(--radius-control); }
input, select, textarea { max-width: 100%; min-width: 0; width: 100%; border: 1px solid var(--control-border); padding: .625rem .75rem; background: var(--surface); color: var(--ink); caret-color: var(--accent); font-weight: 400; }
input, select { min-height: var(--control-height); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox], input[type=radio] { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--accent); flex-shrink: 0; margin: 0; }
input[type=file] { font-size: var(--text-small); }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger); }
textarea { display: block; min-height: 6rem; resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-4); min-width: 0; margin: 0 0 var(--space-4); }
button, .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); max-width: 100%; border: 1px solid transparent; padding: .625rem 1rem; background: var(--accent); color: var(--surface); text-align: center; text-decoration: none; font-size: .875rem; font-weight: 600; cursor: pointer; line-height: 1.4; transition: background-color var(--motion-fast), border-color var(--motion-fast); }
button:hover, .button:hover { background: var(--accent-hover); color: var(--surface); }
button.secondary, .button.secondary { background: var(--surface); color: var(--accent); border-color: var(--control-border); }
button.secondary:hover, .button.secondary:hover { background: var(--selected); border-color: var(--accent); }
button.quiet, .button.quiet { background: transparent; color: var(--muted); padding-inline: var(--space-3); }
button.quiet:hover { background: var(--subtle); }
button.danger, .button.danger { color: var(--danger); background: var(--surface); border-color: var(--danger); }
button.danger:hover { background: var(--danger-bg); }
button:disabled, input:disabled, select:disabled, textarea:disabled { opacity: 1; background: var(--subtle); color: var(--disabled-ink); border-color: var(--line); cursor: not-allowed; }
[aria-busy=true] { cursor: progress; }
.actions, .form-action, .filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.actions form { margin: 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-3); }
.stack label { margin-bottom: -.375rem; }
.fields, .planning-form, .inbox-filters, .filterbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); align-items: end; }
.fields.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.fields { margin-bottom: var(--space-4); }
.field label, .fields label > input, .fields label > select, form > label > input, form > label > textarea { margin-top: var(--space-2); }
.field > label { margin-top: 0; margin-bottom: var(--space-2); }
.field .help, .field-error { display: block; margin-top: var(--space-2); font-size: var(--text-small); }
.inline { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin-block: var(--space-4); }
.inline input { width: 12rem; }
.inline select { width: auto; }
.inline label { align-self: center; }
.checkbox, .checkbox-label, .checks label { display: flex; align-items: flex-start; gap: var(--space-3); }
.checkbox input, .checkbox-label input { margin-top: .2rem; }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.notice { padding: var(--space-3) var(--space-4); background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); border-radius: var(--radius-control); margin-bottom: var(--space-5); max-width: none; }
.notice.error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.notice.success { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.notice a { color: inherit; }
.status, .badge { display: inline-block; padding: .2rem .5rem; border-radius: var(--radius-control); color: var(--neutral-status-ink); background: var(--subtle); font-size: .75rem; font-weight: 600; line-height: 1.6; }
.accepted, .verified, .status.approved, .badge.active { color: var(--success); background: var(--success-bg); }
.uncertain, .paused, .warning { color: var(--warning); background: var(--warning-bg); }
.failed, .rejected, .revoked { color: var(--danger); background: var(--danger-bg); }
.tabs { display: flex; gap: var(--space-4); flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); }
.tabs a { padding: var(--space-3) var(--space-1); color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; }
.tabs a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.table-wrap { overflow-x: auto; max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); scrollbar-color: var(--scroll-thumb) var(--subtle); }
table { border-collapse: collapse; width: 100%; text-align: left; font-size: .875rem; font-variant-numeric: tabular-nums; }
th, td { padding: .875rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; min-width: 8rem; overflow-wrap: normal; }
th { background: var(--table-heading-bg); color: var(--muted); font-weight: 600; font-size: var(--text-small); }
th[scope=row] { background: transparent; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--row-hover-bg); }
caption { text-align: left; font-weight: 600; padding: var(--space-4); }
.metrics, .counters, .campaign-counts, .offer-facts { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-5); margin-block: var(--space-5); }
.metrics > div, .counters > div, .campaign-counts > div, .offer-facts > div { padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
dt { color: var(--muted); font-size: var(--text-small); }
dd { margin: var(--space-1) 0 0; }
.metrics dd, .counters dd, .campaign-counts dd, .offer-facts dd { font-size: 1.375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
dd > span { color: var(--muted); font-size: .9375rem; font-weight: 400; }
.facts { display: grid; grid-template-columns: minmax(7rem,1fr) minmax(0,3fr); gap: var(--space-3); }
.facts dd { margin: 0; }
details { margin-block: var(--space-4); }
summary { cursor: pointer; font-weight: 600; padding-block: var(--space-3); min-height: var(--control-height); }
details[open] > summary { margin-bottom: var(--space-3); }
.empty, .empty-state { padding: var(--space-7) var(--space-5); text-align: center; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-panel); }
.empty p, .empty-state p { margin-inline: auto; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); }
.pagination p { margin: 0; color: var(--muted); font-size: var(--text-small); }
.steps { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-5); padding: 0; list-style: none; counter-reset: step; }
.steps li { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-small); }
.steps li::before { content: counter(step); counter-increment: step; border: 1px solid var(--line); border-radius: 50%; width: 1.5rem; height: 1.5rem; text-align: center; }
.steps [aria-current] { color: var(--accent); font-weight: 600; }
.login-main { max-width: 28rem; margin: 8vh auto; padding: var(--space-5); }
.login-brand { font-size: 1.25rem; font-weight: 750; margin-bottom: var(--space-6); }
.login-panel { background: var(--surface); padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-panel); }
.login-panel h1 { font-size: 1.5rem; }
.login-panel form { display: grid; gap: var(--space-4); }
.login-panel label input { display: block; margin-top: var(--space-2); }
.login-panel .help { margin-top: var(--space-5); }
@media (max-width: 1100px) {
  :root { --rail-width: 12.5rem; }
  .metrics, .campaign-counts { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .fields.three { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .shell { display: block; }
  .sidebar { display: none; }
  .topbar { min-height: 3.5rem; padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
  .topbar > p { font-weight: 650; }
  .environment { width: 100%; font-size: .75rem; }
  .mobile-nav { display: block; margin: 0; background: var(--surface); border-bottom: 1px solid var(--line); padding-inline: var(--space-4); }
  .mobile-nav summary { margin: 0; font-size: .875rem; }
  .mobile-nav nav { padding-bottom: var(--space-3); }
  .mobile-nav .nav-group { margin-bottom: var(--space-2); }
  main { padding: var(--space-5) var(--space-4); }
  h1 { font-size: 1.5rem; }
  .heading, .page-header { align-items: flex-start; }
  .heading > .button { width: 100%; }
  .panel, .section, .message-content, .message-tools section, .mailbox-row { padding: var(--space-4); }
  .fields, .fields.three, .planning-form, .filterbar, .inbox-filters { grid-template-columns: minmax(0,1fr); }
  .metrics, .counters, .campaign-counts, .offer-facts { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); }
  .inline { align-items: stretch; flex-direction: column; }
  .inline label { align-self: auto; }
  .inline input, .inline select { width: 100%; }
  .inline button { align-self: flex-start; }
  .page-footer { padding: var(--space-4); }
  .facts { grid-template-columns: minmax(0,1fr); gap: var(--space-1); }
  .facts dd { margin-bottom: var(--space-3); }
  .table-wrap table { min-width: 38rem; }
  .table-wrap::after { content: "Tabelle bei Bedarf seitlich scrollen"; display: block; color: var(--muted); font-size: .75rem; padding: var(--space-2) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition-duration: 0s !important; }
}

.peer-link { display: block; margin-top: var(--space-3); }
.peer-link span { display: block; font-size: var(--text-small); }