:root {
  --bg:#f4f9fa;
  --card:#fff;
  --text:#153246;
  --muted:#78909a;
  --line:#dce8ed;
  --green:#15803d;
  --green-soft:#f0fdf4;
  --amber:#a16207;
  --amber-soft:#fffbeb;
  --red:#b91c1c;
  --red-soft:#fef2f2;
  --blue:#066f99;
  --shadow:0 5px 18px rgba(21,50,70,.05);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: .55;
  cursor: wait;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px max(24px, calc((100vw - 1250px) / 2));
  background: #fff;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-size: 22px;
  font-weight: 800;
}
.subtitle {
  font-size: 12px;
  margin-top: 4px;
  opacity: .9;
}
.top-actions,
.row,
.toolbar,
.filters,
.dialog-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn {
  border: 0;
  border-radius: 9px;
  padding: 10px 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
}
.btnPrimary {
  background: #087f9e;
  color: #fff;
}
.btnLight {
  background: #eef2f6;
  color: var(--text);
}
.btnWhite {
  background: white;
  color: #075f83;
}
.btnDanger {
  background: var(--red-soft);
  color: var(--red);
}
.page {
  max-width: 1250px;
  margin: auto;
  padding: 28px;
}
.notice {
  padding: 12px 15px;
  border: 1px solid #c7e6ee;
  border-radius: 10px;
  background: #edf8fa;
  color: #075f83;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.notice a {
  color: inherit;
  font-weight: 700;
}
.section-title {
  margin: 0;
  font-size: 22px;
}
.muted {
  color: var(--muted);
}
.toolbar {
  justify-content: space-between;
  margin: 18px 0;
}
.tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.tab {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 9px;
  padding: 11px 14px;
  font-weight: 700;
  color: var(--muted);
}
.tab.active {
  background: #e5f5f8;
  color: #075f83;
  border-color: #80c6d6;
}
.count {
  display: inline-block;
  margin-left: 7px;
  border-radius: 20px;
  background: #edf0f4;
  padding: 2px 7px;
  font-size: 12px;
  color: var(--text);
}
input,
select,
textarea {
  border: 1px solid #cbd5e1;
  border-radius: 9px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
  max-width: 100%;
  min-height: 40px;
}
textarea {
  min-height: 90px;
  resize: vertical;
}
label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
label.check input {
  min-height: unset;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.search {
  width: 340px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 12px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
  align-self: start;
}
.card-head {
  padding: 15px 16px 12px;
}
.card-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: .04em;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 7px;
}
.card h2 {
  font-size: 18px;
  margin: 0 0 8px;
  line-height: 1.3;
}
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge {
  font-size: 11px;
  font-weight: 800;
  border-radius: 20px;
  padding: 5px 9px;
  background: #edf0f4;
  display: inline-block;
}
.badge.green {
  color: var(--green);
  background: var(--green-soft);
}
.badge.amber {
  color: var(--amber);
  background: var(--amber-soft);
}
.badge.red {
  color: var(--red);
  background: var(--red-soft);
}
.badge.blue {
  color: #075f83;
  background: #edf8fa;
}
.meta {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.6;
}
.next {
  margin-top: 12px;
  background: #f7f9fb;
  padding: 10px;
  border-radius: 8px;
  line-height: 1.5;
}
.next strong {
  display: block;
}
.expand {
  border: 0;
  background: #eef2f6;
  border-radius: 8px;
  height: 34px;
  width: 34px;
  font-size: 20px;
  flex-shrink: 0;
}
.card-details {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}
.card-actions {
  padding: 0 16px 14px;
  display: grid;
  gap: 7px;
}
.card-actions .btn {
  width: 100%;
}
.empty {
  padding: 40px;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  text-align: center;
  grid-column: 1/-1;
}
.footer {
  font-size: 12px;
  color: var(--muted);
  margin-top: 22px;
  text-align: center;
}
.link {
  color: #075f83;
  font-weight: 700;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 14px;
  width: min(860px, calc(100% - 28px));
  max-height: 90vh;
  padding: 0;
  box-shadow: 0 15px 60px #17203340;
}
dialog::backdrop {
  background: #0f172a88;
}
.dialog-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.dialog-head h2 {
  margin: 0;
  font-size: 21px;
}
.dialog-body {
  padding: 20px 22px;
}
.dialog-actions {
  justify-content: flex-end;
  padding: 15px 22px;
  background: #f8fafc;
  border-top: 1px solid var(--line);
}
.close {
  background: #eef2f6;
  border: 0;
  border-radius: 8px;
  font-size: 22px;
  height: 34px;
  width: 34px;
  flex-shrink: 0;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid input,
.form-grid textarea,
.form-grid select {
  width: 100%;
}
.wide {
  grid-column: 1/-1;
}
.field {
  margin-bottom: 16px;
}
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 18px;
}
th {
  text-align: left;
  color: var(--muted);
  font-size: 12px;
}
td,
th {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
td input[type=number] {
  width: 88px;
}
td select {
  min-width: 240px;
}
.summary {
  padding: 15px;
  background: #edf8fa;
  border: 1px solid #c7e6ee;
  border-radius: 10px;
  margin-top: 16px;
}
.summary strong {
  font-size: 22px;
  display: block;
  margin-bottom: 6px;
}
.warning {
  background: var(--amber-soft);
  color: #854d0e;
  padding: 12px;
  border-radius: 9px;
  margin: 14px 0;
  line-height: 1.5;
}
.error {
  background: var(--red-soft);
  color: var(--red);
  padding: 12px;
  border-radius: 9px;
  margin: 12px 0;
  line-height: 1.5;
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.detail-box {
  background: #f7f9fb;
  border-radius: 9px;
  padding: 14px;
  line-height: 1.6;
}
.detail-box dt {
  color: var(--muted);
  font-size: 12px;
}
.detail-box dd {
  margin: 0 0 8px;
  font-weight: 700;
}
.history {
  margin: 0;
  padding: 0;
  list-style: none;
}
.history li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.history small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}
.document {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.document span {
  overflow-wrap: anywhere;
}
.upload {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.upload input {
  flex: 1;
  min-width: 160px;
}
.loading {
  padding: 40px;
  text-align: center;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #172033;
  color: white;
  border-radius: 9px;
  padding: 12px 18px;
  box-shadow: var(--shadow);
  max-width: 90vw;
  display: none;
}
.login {
  max-width: 480px;
  margin: 50px auto;
}
.login .card-head {
  padding: 24px;
}
.login input {
  width: 100%;
}
.spacer {
  margin-top: 20px;
}
.tiny {
  font-size: 12px;
}
.hidden {
  display: none !important;
}
@media (max-width: 800px) {
  .topbar {
    padding: 12px;
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .brand {
    font-size: 20px;
  }
  .page {
    padding: 12px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .toolbar {
    align-items: stretch;
  }
  .filters {
    width: 100%;
  }
  .search {
    width: 100%;
  }
  .form-grid,
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .dialog-head,
  .dialog-body {
    padding: 16px;
  }
  .dialog-actions {
    padding: 12px 16px;
  }
  td select {
    min-width: 215px;
  }
  .top-actions {
    width: 100%;
  }
  .tab {
    padding: 9px 10px;
  }
  .notice {
    font-size: 13px;
  }
  dialog {
    max-height: 92vh;
  }
  .card h2 {
    font-size: 17px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .card {
    transition: box-shadow .15s;
  }
  .card:hover {
    box-shadow: 0 3px 10px #17203312;
  }
}

/* Blauteich Druck-App: Markenlayout, Farben, Karten und Dialoge. */
.brand-lockup { display:flex; align-items:center; gap:18px; }
.brand-logo { width:152px; height:52px; object-fit:contain; }
.brand { border-left:1px solid var(--line); padding-left:18px; font-size:15px; font-weight:750; }
.hero { position:relative; overflow:hidden; color:#fff; background:linear-gradient(120deg,#066f99 0%,#0899bc 65%,#18aebd 100%); }
.hero::after { content:""; position:absolute; width:480px; height:480px; border:1px solid #ffffff13; border-radius:50%; right:-140px; top:-315px; pointer-events:none; }
.hero-inner { max-width:1250px; margin:auto; padding:40px 28px 44px; display:flex; gap:24px; align-items:center; justify-content:space-between; }
.hero h1 { margin:7px 0 10px; font-size:clamp(28px,3vw,40px); line-height:1.2; letter-spacing:-.025em; }
.hero p { margin:0; color:#d7eff5; font-size:16px; }
.hero .hero-eyebrow { font-size:11px; letter-spacing:.13em; font-weight:750; }
.hero .btnWhite { flex-shrink:0; min-height:46px; padding:0 20px; box-shadow:0 8px 22px #00283c26; }
.btn { border-radius:10px; }
.cards { gap:18px; }
.card-head { padding:18px; }
.card-actions { padding:0 18px 18px; }
.notice { background:#fff; }
.topbar .btn { font-size:13px; min-height:36px; }
#dialog { color:var(--text); }
.summary strong { overflow-wrap:anywhere; }
@media(max-width:800px) {
 .brand-logo { width:126px; height:44px; }
 .brand { font-size:14px; padding-left:12px; }
 .brand-lockup { gap:12px; }
 .hero-inner { padding:28px 18px; align-items:start; flex-direction:column; gap:20px; }
 .hero h1 { font-size:30px; }
 .hero p { font-size:14px; }
 .topbar { position:static; }
 .top-actions .btn { padding:8px 10px; }
}

.communication-panel, .intake-panel { margin:20px 0; padding:16px; border:1px solid var(--line); border-radius:12px; background:#f4f9fa; }
.communication-panel h3 { margin:0 0 12px; }
.communication-panel .badge { margin-top:7px; }

.partial-fields{display:grid;gap:10px;margin-top:12px;padding:12px;border:1px solid #b5dbe6;border-radius:10px;background:#f1f9fc;min-width:0}.partial-fields[hidden]{display:none}.partial-fields label{display:grid;gap:5px;font-size:12px;color:#33596a}.partial-fields input,.partial-fields textarea{width:100%;min-width:0;box-sizing:border-box}.partial-fields textarea{resize:vertical;border:1px solid #c8d6e3;border-radius:8px;padding:9px;font:inherit;color:#18394a;background:white}
#approval-note, #supplier-review-note { width:100%; box-sizing:border-box; resize:vertical; }

.procurement-table select{width:100%;min-width:230px}.procurement-quantity{display:block;margin-top:10px;font-size:13px}.procurement-quantity[hidden]{display:none}.procurement-quantity input{display:block;width:120px;margin-top:6px}#procurement-note{width:100%}
@media(max-width:600px){.procurement-table{min-width:570px}}

.hero-actions { display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; }
@media(max-width:700px) { .hero-actions { justify-content:flex-start; } }

/* Notes should use the available dialog width. */
.field textarea { width: 100%; box-sizing: border-box; }
.payment-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.payment-dialog .dialog-head, .payment-dialog .dialog-actions { flex-shrink: 0; }
.payment-dialog .dialog-body { overflow-y: auto; min-height: 0; }
.payment-dialog .field input, .payment-dialog .field select { width: 100%; box-sizing: border-box; }
.payment-dialog .field small { display: block; margin-top: 6px; }
@media(max-width:600px) {
 .payment-dialog .table-wrap table, .payment-dialog .table-wrap tbody { display: block; width: 100%; }
 .payment-dialog .table-wrap thead { display: none; }
 .payment-dialog .table-wrap tr { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
 .payment-dialog .table-wrap td { padding: 0; border: 0; overflow-wrap: anywhere; }
 .payment-dialog .table-wrap td:last-child { grid-column: 1 / -1; }
 .payment-dialog .table-wrap td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; font-weight: 600; margin-bottom: 4px; }
}