:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-soft: #f7f9fa;
  --bg-soft-2: #ebf0f2;
  --fg: #333c40;
  --fg-soft: #526066;
  --muted: #66787f;
  --border: #dae2e5;
  --accent: #eb6142;
  --accent-hover: #cb3715;
  --accent-tint: rgba(235, 97, 66, .10);
  --error: #cf2e2e;
  --ok: #2c8a3a;
  --radius: 8px;
  --font-stack: Muli, "Helvetica Neue", Arial, sans-serif;
  font: 15px/1.5 var(--font-stack);
  color: var(--fg);
  background: var(--bg-soft);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; padding: 2rem 1rem; }
main {
  width: min(62rem, 100%);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand img { display: block; width: min(18rem, 72vw); height: auto; }
.brand-row { margin-bottom: 2rem; }
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 1.5rem; color: var(--fg); font-size: clamp(1.65rem, 3vw, 2.1rem); line-height: 1.2; }
form, label { display: grid; gap: .45rem; }
form { gap: 1rem; }
main > form:not(.tariff-form) { max-width: 28rem; }

input, select, button {
  min-height: 2.75rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  background: var(--bg);
  font: inherit;
}
input:hover, select:hover { border-color: var(--muted); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
button {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
  font-weight: 600;
  cursor: pointer;
}
button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
button.secondary { border-color: var(--border); color: var(--fg-soft); background: transparent; }
button.secondary:hover { border-color: var(--muted); color: var(--fg); background: var(--bg-soft); }

.tariff-form { gap: 1.25rem; }
.dropzone {
  position: relative;
  min-height: 14rem;
  place-content: center;
  justify-items: center;
  gap: .45rem;
  padding: 2rem;
  overflow: hidden;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  background: var(--bg-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.is-dragging, .dropzone:has(input:focus-visible) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}
.drop-mark {
  display: grid;
  width: 3.5rem;
  height: 3.5rem;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.dropzone strong { font-size: 1.15rem; }
.drop-copy { color: var(--muted); }
.example-link { justify-self: start; color: var(--accent-hover); font-weight: 600; text-underline-offset: .2em; }
.form-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: end; }

[hidden] { display: none !important; }
.live-process { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.live-process h2 { margin-bottom: 1rem; }
.upload-progress { display: grid; gap: .5rem; }
.upload-progress > div { display: flex; justify-content: space-between; gap: 1rem; }
.upload-progress output { color: var(--muted); font-variant-numeric: tabular-nums; }
progress {
  width: 100%; height: .75rem; overflow: hidden;
  border: 0; border-radius: 999px; background: var(--bg-soft-2);
}
progress::-webkit-progress-bar { background: var(--bg-soft-2); }
progress::-webkit-progress-value { background: var(--accent); transition: width .15s; }
progress::-moz-progress-bar { background: var(--accent); }
.process-table-wrap { margin-top: 1.25rem; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem .6rem; border-bottom: 1px solid var(--border); text-align: left; }
th { color: var(--muted); font-size: .82rem; font-weight: 700; text-transform: uppercase; }
td:nth-child(n+2) { white-space: nowrap; }
tr[data-status="running"] td:nth-child(2) { color: var(--accent-hover); font-weight: 700; }
tr[data-status="completed"] td:nth-child(2) { color: var(--ok); }
tr[data-status="failed"] td:nth-child(2) { color: var(--error); font-weight: 700; }

.result { margin-top: 2rem; padding: 1rem; border-left: .3rem solid var(--muted); background: var(--bg-soft); }
.result.success { border-color: var(--ok); }
.result.error { border-color: var(--error); }
pre { margin-bottom: 0; overflow: auto; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.error { color: var(--error); }

.report-shell { margin-top: 2rem; }
.report-actions { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
.button {
  display: inline-flex; min-height: 2.75rem; align-items: center; padding: .65rem 1rem;
  border-radius: var(--radius); color: #fff; background: var(--accent);
  font-weight: 700; text-decoration: none;
}
.button:hover { background: var(--accent-hover); }
.button.secondary { border: 1px solid var(--border); color: var(--fg); background: #fff; }
.button.secondary:hover { border-color: var(--muted); background: var(--bg-soft); }
.report-actions { align-items: center; gap: .75rem; }
.report-save-status { margin-right: auto; color: var(--ok); }
.customer-report {
  width: min(210mm, 100%); min-height: 297mm; margin: 0 auto; padding: 17mm 18mm 14mm;
  color: #111; background: #fff; box-shadow: 0 3px 20px rgba(0, 0, 0, .12);
  font: 10.5pt/1.3 Tahoma, Arial, sans-serif;
}
.report-header > img { display: block; width: 47mm; height: auto; margin: 0 auto 16mm; }
.report-header h1 { margin: 0 0 9mm; color: #111; font-size: 22pt; }
.report-header dl {
  display: grid; grid-template-columns: 31mm 1fr; gap: 2mm 3mm;
  margin: 0 0 6mm; padding: 0 2mm 5mm; border-bottom: 1px solid #222;
}
.report-header dt { font-weight: 700; }
.report-header dd { margin: 0; }
.report-disclaimer { margin: 0 0 9mm; }
.report-product h2 { margin: 0; color: #111; font-size: 19pt; text-transform: uppercase; }
.report-subtitle { margin: 1.5mm 0 7mm; padding-bottom: 3mm; border-bottom: 1px solid #222; font-size: 12pt; }
.report-product h3, .report-legal h3, .report-reasoning > h2,
.report-conclusion h2 {
  margin: 5mm 0 3mm; padding: 1.3mm 2mm; border-top: 1px solid #222;
  border-bottom: 1px solid #222; color: #111; font-size: 11pt; text-align: center;
}
.report-product ul { margin: 0 0 7mm; padding-left: 6mm; }
.report-product li { margin-bottom: 1.5mm; }
.report-decision {
  margin: 7mm 0; padding: 3mm; border: 1px solid #222; break-inside: avoid;
}
.report-decision strong { display: block; }
.report-decision span { color: var(--accent); font-size: 13pt; }
.report-decision p { margin: 2mm 0 0; }
.report-legal { break-inside: avoid-page; }
.report-legal p { margin: 0 0 2mm; white-space: normal; }
.report-legal small { display: block; margin-bottom: 5mm; color: #666; }
.report-conclusion { break-inside: avoid; }
.customer-report footer {
  margin-top: 12mm; padding-top: 3mm; border-top: 1px solid #aaa;
  color: #666; font-size: 7.5pt; text-align: center;
}
.report-editor .report-input {
  width: 100%; min-height: 0; margin: 0; padding: 1px 3px; border: 1px solid transparent;
  border-radius: 2px; color: inherit; background: transparent; font: inherit;
}
.report-editor .report-input:hover { border-color: #bbb; background: #fffdf6; }
.report-editor .report-input:focus { border-color: var(--accent); background: #fff; }
.report-editor textarea.report-input { display: block; overflow: hidden; resize: vertical; }
.report-editor .report-product-title {
  font-size: 19pt; font-weight: 700; line-height: 1.15; text-transform: uppercase;
}
.report-editor .report-tariff-number {
  display: inline-block; width: 34mm; color: var(--accent); font-size: 13pt; font-weight: 700;
}
.report-editor .report-inline-area { display: inline-block; width: calc(100% - 25mm); vertical-align: top; }
.report-description { margin-bottom: 7mm; }
.report-conclusion-text { margin-bottom: 2mm; }
.report-history { margin-top: 2rem; padding: 1.5rem; border: 1px solid var(--border); background: #fff; }
.report-history h2 { margin-bottom: .75rem; }
.report-history td { max-width: 24rem; white-space: normal; vertical-align: top; overflow-wrap: anywhere; }

.hauptnavigation { display: flex; gap: 1.25rem; margin-right: auto; margin-left: 2rem; }
.hauptnavigation a { color: var(--fg-soft); font-weight: 600; text-decoration: none; }
.hauptnavigation a:hover { color: var(--accent-hover); text-decoration: underline; }
.einleitung { max-width: 46rem; color: var(--muted); }
.zurueck { margin-bottom: 1rem; }
.zurueck a, .auftrag-liste a { color: var(--accent-hover); font-weight: 600; }
.leer { color: var(--muted); }
.auftrag-liste { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.status {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px;
  background: var(--bg-soft-2); color: var(--fg-soft); font-size: .82rem; font-weight: 700;
}
.status-abgeschlossen { background: #e3f3e6; color: #1f6b2b; }
.status-rueckfrage { background: var(--accent-tint); color: var(--accent-hover); }
.status-fehlgeschlagen { background: #fbe4e4; color: var(--error); }
.frage-marker { color: var(--accent-hover); }
.status-zeile { margin-bottom: 1.5rem; }
.auftrag-kopf {
  display: grid; grid-template-columns: 10rem 1fr; gap: .5rem 1rem;
  margin: 0 0 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border);
}
.auftrag-kopf dt { color: var(--muted); font-weight: 600; }
.auftrag-kopf dd { margin: 0; }
.rueckfrage, .admin-block {
  margin-bottom: 2rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-soft);
}
.rueckfrage { border-left: .3rem solid var(--accent); }
.rueckfrage h2, .admin-block h2 { margin-bottom: .75rem; }
.rueckfrage blockquote { margin: 0 0 1rem; font-size: 1.05rem; }
.rueckfrage blockquote.antwort { color: var(--fg-soft); font-size: 1rem; }
.admin-block form { margin-bottom: 1.25rem; }
.admin-block form:last-child { margin-bottom: 0; }
.zeile { display: flex; align-items: end; gap: .75rem; }
.zeile label { flex: 1; }
.hinweis { padding: .75rem 1rem; border-left: .3rem solid var(--ok); background: var(--bg-soft); }
.benutzer-form { margin-bottom: 2rem; }
td form { display: inline-block; margin-right: .4rem; }
td form button { min-height: 2.1rem; padding: .3rem .7rem; font-size: .85rem; }

@page { size: A4; margin: 14mm 16mm 16mm; }
.pdf-report { padding: 0; background: #fff; }
.pdf-main { width: auto; margin: 0; padding: 0; border: 0; box-shadow: none; }
.pdf-report .report-shell { margin: 0; }
.pdf-report .customer-report {
  width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none;
}

@media (max-width: 42rem) {
  body { padding: 0; }
  main { min-height: 100vh; border: 0; border-radius: 0; }
  .page-header { align-items: start; }
  .brand img { width: min(14rem, 60vw); }
  .form-controls { grid-template-columns: 1fr; }
  .dropzone { min-height: 12rem; }
  .customer-report { min-height: 0; padding: 8mm 6mm; }
  .report-header > img { margin-bottom: 9mm; }
  .report-header dl { grid-template-columns: 24mm 1fr; }
}