/* ══════════════════════════════════════════════════════════════
   Gateway CSS — Sky-Frame Excel → HERO Gateway
   Design-Tokens konsistent mit Kalkulator (index.html)
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

:root {
  /* Brand */
  --sf-blue:    #1d4ed8;
  --sf-blue-d:  #1e3a8a;
  --sf-blue-l:  #eff6ff;
  --sf-blue-b:  #bfdbfe;
  /* Status */
  --green:      #16a34a;
  --green-l:    #f0fdf4;
  --green-b:    #86efac;
  --amber:      #d97706;
  --amber-l:    #fffbeb;
  --amber-b:    #fcd34d;
  --red:        #dc2626;
  --red-l:      #fef2f2;
  --red-b:      #fca5a5;
  --orange:     #ea580c;
  --orange-l:   #fff7ed;
  --orange-b:   #fed7aa;
  /* Greys */
  --g50:  #f8fafc;
  --g100: #f1f5f9;
  --g200: #e2e8f0;
  --g300: #cbd5e1;
  --g400: #94a3b8;
  --g500: #64748b;
  --g600: #475569;
  --g700: #334155;
  --g800: #1e293b;
  --g900: #0f172a;
  /* Typography */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  /* Spacing */
  --r: 8px;
  --r-sm: 5px;
  --r-lg: 12px;
  --r-xl: 16px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);
}

body {
  font-family: var(--font);
  background: var(--g100);
  color: var(--g800);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ─── TOPBAR ─── */
.topbar {
  background: var(--g900);
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.topbar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: white;
}
.topbar-logo .logo-sf {
  width: 28px; height: 28px;
  background: var(--sf-blue);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: white; letter-spacing: -0.5px;
}
.topbar-logo .logo-text {
  font-size: 0.87rem; font-weight: 700; color: #e2e8f0;
  display: flex; align-items: center; gap: 6px;
}
.topbar-logo .logo-sep { color: var(--g500); }
.topbar-logo .logo-gateway {
  font-size: 0.78rem; font-weight: 600; color: #60a5fa;
}
.topbar-spacer { flex: 1; }
.topbar-badge {
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: #94a3b8;
}
.topbar-conn {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--g500); cursor: pointer;
  padding: 4px 8px; border-radius: 5px;
  transition: background .15s;
}
.topbar-conn:hover { background: rgba(255,255,255,.06); }
.conn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--g500); flex-shrink: 0;
}
.conn-dot.ok  { background: var(--green); box-shadow: 0 0 5px rgba(22,163,74,.5); }
.conn-dot.err { background: var(--red);   box-shadow: 0 0 5px rgba(220,38,38,.5); }

/* ─── LAYOUT ─── */
.gw-layout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}

/* ─── STEPPER ─── */
.stepper {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 32px;
  background: white;
  border-radius: var(--r-xl);
  border: 1px solid var(--g200);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 8px 12px;
  position: relative;
  cursor: default;
  transition: background .15s;
  border-right: 1px solid var(--g200);
}
.step:last-child { border-right: none; }
.step.clickable { cursor: pointer; }
.step.clickable:hover { background: var(--g50); }
.step-nr {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--g200);
  color: var(--g500);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
  margin-bottom: 6px;
  transition: all .2s;
}
.step.active .step-nr {
  background: var(--sf-blue);
  color: white;
  box-shadow: 0 0 0 3px var(--sf-blue-b);
}
.step.done .step-nr {
  background: var(--green);
  color: white;
}
.step-label {
  font-size: 0.7rem; font-weight: 600;
  color: var(--g400);
  text-align: center; line-height: 1.3;
  transition: color .15s;
}
.step.active .step-label { color: var(--sf-blue); }
.step.done .step-label   { color: var(--green); }

/* ─── CARDS / PANELS ─── */
.panel {
  background: white;
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--g200);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--g50);
}
.panel-icon {
  width: 32px; height: 32px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; flex-shrink: 0;
}
.pi-blue   { background: var(--sf-blue-l); color: var(--sf-blue); }
.pi-green  { background: var(--green-l);   color: var(--green); }
.pi-amber  { background: var(--amber-l);   color: var(--amber); }
.pi-orange { background: var(--orange-l);  color: var(--orange); }
.pi-grey   { background: var(--g100);      color: var(--g500); }
.panel-title { font-size: 0.95rem; font-weight: 700; color: var(--g900); }
.panel-sub   { font-size: 0.75rem; color: var(--g500); margin-top: 1px; }
.panel-body  { padding: 20px; }
.panel-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--g200);
  background: var(--g50);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* ─── UPLOAD ZONE ─── */
.upload-zone {
  border: 2px dashed var(--g300);
  border-radius: var(--r-xl);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  background: var(--g50);
}
.upload-zone:hover,
.upload-zone.dragover {
  border-color: var(--sf-blue);
  background: var(--sf-blue-l);
}
.upload-zone.has-file {
  border-color: var(--green);
  background: var(--green-l);
  border-style: solid;
}
.upload-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
  color: var(--g400);
  transition: color .2s;
}
.upload-zone:hover .upload-icon,
.upload-zone.dragover .upload-icon { color: var(--sf-blue); }
.upload-zone.has-file .upload-icon { color: var(--green); }
.upload-title { font-size: 1.05rem; font-weight: 700; color: var(--g700); margin-bottom: 4px; }
.upload-sub   { font-size: 0.8rem; color: var(--g500); }
.upload-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.format-badge-row {
  display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap;
}
.fbadge {
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 4px;
}
.fbadge-a { background: var(--orange-l); color: #7c2d12; border: 1px solid var(--orange-b); }
.fbadge-b { background: var(--green-l);  color: #14532d; border: 1px solid var(--green-b); }

/* ─── PARSE RESULT BADGE ─── */
.parse-result {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r-lg);
  margin-top: 16px;
  font-size: 0.82rem;
}
.parse-result.ok    { background: var(--green-l);  border: 1px solid var(--green-b); }
.parse-result.warn  { background: var(--amber-l);  border: 1px solid var(--amber-b); }
.parse-result.error { background: var(--red-l);    border: 1px solid var(--red-b); }
.pr-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.pr-title  { font-weight: 700; color: var(--g800); margin-bottom: 3px; }
.pr-detail { color: var(--g600); line-height: 1.55; }
.pr-detail strong { color: var(--g800); }
.pr-pills  { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.pr-pill {
  font-size: 0.66rem; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  background: rgba(0,0,0,.06); color: var(--g700);
}

/* ─── POSITIONEN PREVIEW TABLE ─── */
.prev-table-wrap { overflow-x: auto; }
.prev-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.79rem;
}
.prev-table th {
  padding: 7px 10px;
  text-align: left;
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--g500); background: var(--g50);
  border-bottom: 2px solid var(--g200);
  white-space: nowrap;
}
.prev-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--g100);
  vertical-align: top;
}
.prev-table tr:last-child td { border-bottom: none; }
.prev-table tr:hover td { background: var(--g50); }
.prev-table .col-nr   { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; color: var(--sf-blue); white-space: nowrap; }
.prev-table .col-name { font-weight: 600; color: var(--g800); }
.prev-table .col-desc { font-size: 0.74rem; color: var(--g500); max-width: 340px; white-space: pre-line; }
.prev-table .col-num  { text-align: right; font-family: var(--mono); font-size: 0.77rem; }
.prev-table .col-preis { text-align: right; font-family: var(--mono); font-size: 0.77rem; font-weight: 600; color: var(--g800); }

/* Editierbare Zellen */
.editable {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 3px 6px;
  outline: none;
  transition: border-color .15s, background .15s;
  min-width: 60px;
  display: inline-block;
}
.editable:hover { border-color: var(--g200); background: var(--g50); }
.editable:focus { border-color: var(--sf-blue); background: white; box-shadow: 0 0 0 2px var(--sf-blue-b); }

/* ─── OPTIONEN LISTE ─── */
.opt-list { display: grid; gap: 6px; }
.opt-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  background: white;
  transition: all .15s;
}
.opt-item:hover { border-color: var(--sf-blue-b); background: var(--sf-blue-l); }
.opt-item.inactive { opacity: .5; }
.opt-check { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; accent-color: var(--sf-blue); }
.opt-name  { font-weight: 600; color: var(--g800); font-size: 0.82rem; flex: 1; }
.opt-sub   { font-size: 0.72rem; color: var(--g500); }
.opt-menge { font-family: var(--mono); font-size: 0.77rem; color: var(--g700); min-width: 60px; text-align: right; }
.opt-preis { font-family: var(--mono); font-size: 0.77rem; font-weight: 700; color: var(--g800); min-width: 80px; text-align: right; }
.opt-per-badge {
  font-size: 0.63rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--amber-l); color: #92400e; border: 1px solid var(--amber-b);
  flex-shrink: 0;
}
.opt-total-row {
  display: flex; justify-content: flex-end; gap: 16px;
  padding: 10px 12px 0;
  font-size: 0.82rem; font-weight: 700; color: var(--g700);
  border-top: 1px solid var(--g200);
  margin-top: 4px;
}
.opt-total-label { color: var(--g500); font-weight: 600; }
.opt-total-val   { font-family: var(--mono); font-size: 0.9rem; color: var(--g800); }

/* ─── HERO PROJEKT SUCHE ─── */
.search-row {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.search-input {
  flex: 1; padding: 9px 12px;
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  font-size: 0.85rem; font-family: var(--font); color: var(--g800);
  background: white; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search-input:focus {
  border-color: var(--sf-blue);
  box-shadow: 0 0 0 2px var(--sf-blue-b);
}
.search-results {
  display: grid; gap: 6px;
  max-height: 320px; overflow-y: auto;
}
.result-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px;
  border: 2px solid var(--g200);
  border-radius: var(--r-lg);
  cursor: pointer; background: white;
  transition: all .15s;
}
.result-item:hover  { border-color: var(--sf-blue); background: var(--sf-blue-l); }
.result-item.sel    { border-color: var(--sf-blue); background: var(--sf-blue-l); }
.ri-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--g300); flex-shrink: 0; margin-top: 5px;
  transition: background .15s;
}
.result-item.sel .ri-dot { background: var(--sf-blue); box-shadow: 0 0 0 3px var(--sf-blue-b); }
.ri-name   { font-weight: 700; color: var(--g800); font-size: 0.85rem; }
.ri-sub    { font-size: 0.73rem; color: var(--g500); line-height: 1.4; margin-top: 1px; }
.ri-badge  {
  margin-left: auto; flex-shrink: 0;
  font-size: 0.63rem; font-weight: 700; padding: 2px 7px; border-radius: 4px;
  background: var(--g100); color: var(--g500);
}

/* ─── EMPFÄNGER DETAILS ─── */
.recipient-card {
  background: var(--sf-blue-l);
  border: 1px solid var(--sf-blue-b);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  margin-top: 12px;
}
.rc-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.rc-title  { font-size: 0.8rem; font-weight: 700; color: var(--sf-blue); }
.rc-badge  {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: white; color: var(--sf-blue); border: 1px solid var(--sf-blue-b);
}
.rc-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px;
  font-size: 0.78rem;
}
.rc-field label { font-weight: 600; color: var(--g600); font-size: 0.7rem; text-transform: uppercase; display: block; margin-bottom: 2px; }
.rc-field span  { color: var(--g800); }
.rc-confirm {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: white; border: 1px solid var(--sf-blue-b); border-radius: var(--r);
  cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--sf-blue);
}
.rc-confirm input[type=checkbox] { accent-color: var(--sf-blue); }
.rc-confirm.confirmed { background: var(--green-l); border-color: var(--green-b); color: var(--green); }

/* ─── ANSCHREIBEN EDITOR ─── */
.anschreiben-editor {
  width: 100%;
  min-height: 120px;
  padding: 12px 14px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  font-size: 0.82rem; font-family: var(--font);
  color: var(--g800); line-height: 1.6;
  resize: vertical; outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: var(--g50);
}
.anschreiben-editor:focus {
  border-color: var(--sf-blue);
  box-shadow: 0 0 0 2px var(--sf-blue-b);
  background: white;
}
.editor-note {
  font-size: 0.72rem; color: var(--g400);
  margin-top: 5px; display: flex; align-items: center; gap: 4px;
}

/* ─── MWST AUSWAHL ─── */
.mwst-row {
  display: flex; gap: 8px; align-items: center;
  margin-top: 12px;
}
.mwst-label { font-size: 0.8rem; font-weight: 600; color: var(--g700); }
.mwst-select {
  padding: 6px 10px;
  border: 1px solid var(--g200); border-radius: var(--r);
  font-size: 0.82rem; font-family: var(--font); color: var(--g800);
  background: white; outline: none; cursor: pointer;
}
.mwst-select:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 2px var(--sf-blue-b); }
.mwst-auto {
  font-size: 0.72rem; color: var(--g400);
  font-style: italic;
}

/* ─── VALIDIERUNG ─── */
.val-list { display: grid; gap: 5px; }
.val-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 10px; border-radius: var(--r);
  font-size: 0.78rem;
}
.val-error { background: var(--red-l);   border: 1px solid var(--red-b); }
.val-warn  { background: var(--amber-l); border: 1px solid var(--amber-b); }
.val-ok    { background: var(--green-l); border: 1px solid var(--green-b); }
.val-icon  { flex-shrink: 0; margin-top: 1px; }
.val-text  { color: var(--g700); }

/* ─── SEND CONFIRM PANEL ─── */
.confirm-summary {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 16px;
}
.cs-card {
  background: var(--g50); border: 1px solid var(--g200);
  border-radius: var(--r-lg); padding: 12px 14px;
}
.cs-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--g400); margin-bottom: 6px; }
.cs-value { font-size: 0.9rem; font-weight: 700; color: var(--g800); }
.cs-sub   { font-size: 0.73rem; color: var(--g500); margin-top: 2px; }

.entwurf-notice {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  background: var(--amber-l); border: 1px solid var(--amber-b);
  border-radius: var(--r-lg);
  font-size: 0.8rem; color: #92400e; font-weight: 600;
  margin-bottom: 16px;
}

/* ─── ERGEBNIS ─── */
.result-hero {
  text-align: center; padding: 40px 24px;
}
.result-check {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--green-l); border: 3px solid var(--green-b);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 16px;
}
.result-title  { font-size: 1.3rem; font-weight: 800; color: var(--g900); margin-bottom: 6px; }
.result-sub    { font-size: 0.85rem; color: var(--g500); margin-bottom: 24px; }
.result-docnr  {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 700;
  color: var(--sf-blue); margin-bottom: 20px;
}
.result-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─── PROTOKOLL ─── */
.prot-list { display: grid; gap: 6px; }
.prot-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  background: white; font-size: 0.78rem;
}
.prot-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.prot-status.ok  { background: var(--green); }
.prot-status.err { background: var(--red); }
.prot-name   { font-weight: 700; color: var(--g800); }
.prot-meta   { color: var(--g500); font-size: 0.72rem; line-height: 1.4; }
.prot-link   { margin-left: auto; flex-shrink: 0; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r-lg);
  font-size: 0.82rem; font-weight: 600; font-family: var(--font);
  cursor: pointer; border: none; text-decoration: none;
  transition: all .15s; white-space: nowrap;
}
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: var(--sf-blue); color: white;
  box-shadow: 0 1px 3px rgba(29,78,216,.25);
}
.btn-primary:hover { background: var(--sf-blue-d); box-shadow: 0 2px 6px rgba(29,78,216,.3); }
.btn-secondary {
  background: white; color: var(--g700);
  border: 1px solid var(--g200);
  box-shadow: var(--shadow);
}
.btn-secondary:hover { background: var(--g50); border-color: var(--g300); }
.btn-danger {
  background: var(--red); color: white;
}
.btn-danger:hover { background: #b91c1c; }
.btn-success {
  background: var(--green); color: white;
  box-shadow: 0 1px 3px rgba(22,163,74,.25);
}
.btn-success:hover { background: #15803d; }
.btn-sm { padding: 5px 10px; font-size: 0.75rem; }
.btn-lg { padding: 12px 22px; font-size: 0.9rem; font-weight: 700; }
.btn-icon { width: 34px; padding: 0; justify-content: center; }

/* ─── SPINNER ─── */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: white;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.spinner-dark {
  border-color: rgba(29,78,216,.2);
  border-top-color: var(--sf-blue);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── INFO BOX ─── */
.info-box {
  display: flex; gap: 10px; padding: 11px 14px;
  border-radius: var(--r-lg); font-size: 0.79rem;
  line-height: 1.55; margin-bottom: 12px;
}
.info-box i { flex-shrink: 0; margin-top: 2px; }
.info-box.blue   { background: var(--sf-blue-l); border: 1px solid var(--sf-blue-b); color: #1e40af; }
.info-box.green  { background: var(--green-l);   border: 1px solid var(--green-b);   color: #166534; }
.info-box.amber  { background: var(--amber-l);   border: 1px solid var(--amber-b);   color: #92400e; }
.info-box.orange { background: var(--orange-l);  border: 1px solid var(--orange-b);  color: #7c2d12; }
.info-box.grey   { background: var(--g100);      border: 1px solid var(--g200);      color: var(--g600); }

/* ─── TOAST ─── */
#toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  min-width: 280px; max-width: 380px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: all;
  font-size: 0.81rem;
  animation: toastIn .25s ease-out;
}
.toast.ok     { background: var(--green-l); border: 1px solid var(--green-b); color: #166534; }
.toast.error  { background: var(--red-l);   border: 1px solid var(--red-b);   color: #991b1b; }
.toast.warn   { background: var(--amber-l); border: 1px solid var(--amber-b); color: #92400e; }
.toast.info   { background: var(--sf-blue-l); border: 1px solid var(--sf-blue-b); color: #1e40af; }
.toast-msg    { flex: 1; font-weight: 500; }
.toast-close  { cursor: pointer; opacity: .6; flex-shrink: 0; background: none; border: none; font-size: 0.9rem; color: inherit; padding: 0; }
.toast-close:hover { opacity: 1; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* ─── SEPARATORS / UTILITY ─── */
.divider { border: none; border-top: 1px solid var(--g200); margin: 16px 0; }
.tag {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 0.67rem; font-weight: 700; white-space: nowrap;
}
.tag-blue   { background: var(--sf-blue-l); color: var(--sf-blue); }
.tag-green  { background: var(--green-l);   color: var(--green); }
.tag-amber  { background: var(--amber-l);   color: var(--amber); }
.tag-grey   { background: var(--g100);      color: var(--g500); }
.tag-orange { background: var(--orange-l);  color: var(--orange); }
.hidden     { display: none !important; }
.text-right { text-align: right; }
.text-mono  { font-family: var(--mono); }
.text-small { font-size: 0.75rem; }
.text-muted { color: var(--g500); }
.text-bold  { font-weight: 700; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.flex-row  { display: flex; align-items: center; gap: 8px; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }

/* ─── SECTION TITLE ─── */
.section-title {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--g400);
  margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
}

/* ─── LOADING OVERLAY ─── */
.loading-overlay[hidden] { display: none !important; }
.loading-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
}
.loading-overlay .spinner {
  width: 36px; height: 36px;
  border-width: 3px;
}
.loading-overlay .loading-msg {
  color: white; font-size: 0.9rem; font-weight: 600;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 640px) {
  .gw-layout { padding: 16px 12px 60px; }
  .stepper { overflow-x: auto; }
  .step-label { font-size: 0.62rem; }
  .confirm-summary { grid-template-columns: 1fr; }
  .rc-grid { grid-template-columns: 1fr; }
  .search-row { flex-direction: column; }
  .result-actions { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════════════
   GATEWAY.HTML ERGÄNZUNGEN — alle Klassen die vom HTML benötigt
   werden und im Basisdesign noch nicht vorhanden waren.
══════════════════════════════════════════════════════════════ */

/* ─── TOPBAR LOGO (neue Struktur) ─── */
.logo-sf {
  width: 28px; height: 28px;
  background: var(--sf-blue);
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 800; color: white; letter-spacing: -0.5px;
  flex-shrink: 0;
}
.logo-divider { color: var(--g600); font-size: 1rem; margin: 0 2px; }
.logo-title {
  font-size: 0.87rem; font-weight: 700; color: #e2e8f0;
}
.topbar-link {
  color: var(--g500); font-size: 0.9rem; padding: 6px 8px;
  border-radius: 6px; text-decoration: none; transition: color .15s;
  display: inline-flex; align-items: center; gap: 5px;
}
.topbar-link:hover { color: #93c5fd; }

/* Advanced-User Links in Topbar */
.topbar-adv-links { display: flex; align-items: center; gap: 4px; }
.adv-link {
  color: #a78bfa !important;
  font-size: 0.72rem; padding: 4px 8px;
  border-radius: 5px; text-decoration: none;
  border: 1px solid rgba(167,139,250,.25);
  transition: all .15s;
}
.adv-link:hover { background: rgba(167,139,250,.12); color: #c4b5fd !important; }
.adv-link-label { font-size: 0.68rem; font-weight: 700; letter-spacing: .04em; }
.topbar-divider { width: 1px; height: 20px; background: rgba(255,255,255,.12); margin: 0 4px; }

/* ─── LANG SWITCHER ─── */
.topbar-lang {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
}
.lang-btn {
  padding: 3px 9px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 5px;
  background: transparent;
  color: var(--g400);
  cursor: pointer;
  transition: all .13s;
  font-family: var(--font);
  line-height: 1.6;
}
.lang-btn:hover {
  border-color: rgba(255,255,255,.35);
  color: #e2e8f0;
  background: rgba(255,255,255,.06);
}
.lang-btn.active {
  background: var(--sf-blue);
  border-color: var(--sf-blue);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(29,78,216,.3);
}

/* conn-dot warn state */
.conn-dot.warn { background: var(--amber); box-shadow: 0 0 5px rgba(217,119,6,.5); }

/* Verbindungs-Indikator */
.conn-indicator { display: flex; align-items: center; gap: 6px; }
.conn-label { font-size: 0.72rem; color: var(--g500); }
.conn-dot.checking {
  background: var(--amber);
  animation: pulse 1.2s ease-in-out infinite;
}
.conn-dot.error { background: var(--red); box-shadow: 0 0 5px rgba(220,38,38,.5); }
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ─── STEPPER (neu: mit step-circle und step-line) ─── */
.stepper {
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 0;
}
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; }
.step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--g200); color: var(--g500);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; transition: all .2s;
}
.step.active .step-circle {
  background: var(--sf-blue); color: white;
  box-shadow: 0 0 0 4px var(--sf-blue-b);
}
.step.done .step-circle {
  background: var(--green); color: white;
}
.step-line {
  flex: 1; height: 2px;
  background: var(--g200);
  align-self: center;
  min-width: 20px;
}
.step.done + .step-line { background: var(--green); }

/* ─── MAIN WRAP ─── */
.main-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.step-panel { /* shown/hidden via JS hidden attr */ }

/* ─── PANEL VARIANTS ─── */
.panel { background: white; border: 1px solid var(--g200); border-radius: var(--r-xl); box-shadow: var(--shadow); margin-bottom: 20px; overflow: hidden; }
.panel-header {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--g200);
  background: var(--g50);
}
.panel-header h2 { font-size: 1rem; font-weight: 700; color: var(--g900); flex: 1; }
.panel-header h3 { font-size: 0.87rem; font-weight: 700; color: var(--g800); flex: 1; }
.panel-header i  { color: var(--sf-blue); font-size: 0.95rem; }
.panel-body { padding: 20px; }
.panel-body-tabs { padding: 0; }
.panel-footer {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--g200);
  background: var(--g50);
}
.footer-info { flex: 1; font-size: 0.78rem; color: var(--g500); }
.footer-spacer { flex: 1; }

/* BADGE */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: 20px;
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.badge-blue  { background: var(--sf-blue-l); color: var(--sf-blue); border: 1px solid var(--sf-blue-b); }
.badge-gray  { background: var(--g100); color: var(--g500); border: 1px solid var(--g200); }
.badge-green { background: var(--green-l); color: var(--green); border: 1px solid var(--green-b); }

/* ─── UPLOAD ZONE ─── */
.upload-zone {
  border: 2px dashed var(--g300);
  border-radius: var(--r-xl);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  background: var(--g50);
  outline: none;
}
.upload-zone:hover, .upload-zone:focus {
  border-color: var(--sf-blue);
  background: var(--sf-blue-l);
}
.upload-zone.dragover {
  border-color: var(--sf-blue);
  background: var(--sf-blue-l);
  transform: scale(1.01);
}
.upload-zone.has-file {
  border-color: var(--green);
  border-style: solid;
  background: var(--green-l);
}
.upload-icon { font-size: 2.4rem; color: var(--g300); margin-bottom: 12px; }
.upload-zone.has-file .upload-icon { color: var(--green); }
.upload-zone.dragover .upload-icon { color: var(--sf-blue); }
.upload-title { font-size: 1rem; font-weight: 700; color: var(--g700); margin-bottom: 4px; }
.upload-sub   { font-size: 0.8rem; color: var(--g500); margin-bottom: 8px; }
.upload-hint  { font-size: 0.73rem; color: var(--g400); }

/* File Info Row */
.file-info {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-top: 12px;
  border: 1px solid var(--green-b); border-radius: var(--r-lg);
  background: var(--green-l);
}
.fi-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.fi-icon { font-size: 1.4rem; color: var(--green); }
.fi-name { font-size: 0.85rem; font-weight: 700; color: var(--g800); }
.fi-meta { font-size: 0.72rem; color: var(--g500); }

/* Format Badge */
.format-badge-wrap { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.format-badge {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--r-lg);
  border: 1px solid; transition: all .2s;
}
.format-offert      { background: var(--sf-blue-l); border-color: var(--sf-blue-b); }
.format-priceexcel  { background: var(--green-l);   border-color: var(--green-b); }
.format-merged      { background: var(--amber-l);   border-color: var(--amber-b); }
.format-unknown     { background: var(--g100);      border-color: var(--g200); }
.fb-icon { font-size: 1.1rem; color: var(--sf-blue); flex-shrink: 0; }
.format-priceexcel .fb-icon { color: var(--green); }
.format-merged .fb-icon     { color: var(--amber); }
.fb-title { font-size: 0.85rem; font-weight: 700; color: var(--g800); }
.fb-sub   { font-size: 0.75rem; color: var(--g500); margin-top: 2px; }

/* Parse Stats Pills */
.parse-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  background: white; border: 1px solid var(--g200);
  font-size: 0.72rem; color: var(--g600);
}
.stat-pill i { color: var(--sf-blue); font-size: 0.7rem; }
.sp-lbl { color: var(--g400); }
.sp-val { font-weight: 700; color: var(--g700); }

/* Error Box */
.error-box {
  display: flex; gap: 10px; padding: 12px 16px;
  background: var(--red-l); border: 1px solid var(--red-b);
  border-radius: var(--r-lg); color: #991b1b; font-size: 0.8rem;
  margin-top: 12px;
}
.error-box i { flex-shrink: 0; margin-top: 2px; }

/* ─── STEP 2: META BAR ─── */
.meta-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 20px; border-bottom: 1px solid var(--g200);
  background: var(--g50);
}
.meta-item {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; padding: 3px 10px;
  background: white; border: 1px solid var(--g200);
  border-radius: 20px;
}
.meta-item i { color: var(--sf-blue); font-size: 0.7rem; }
.mi-label { color: var(--g400); }
.mi-value { font-weight: 700; color: var(--g700); }

/* ─── TABS ─── */
.tab-bar {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--g200);
  padding: 0 20px;
  background: var(--g50);
}
.tab-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 0.8rem; font-weight: 600;
  color: var(--g500); border: none; background: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: color .15s, border-color .15s;
  font-family: var(--font);
}
.tab-btn:hover { color: var(--sf-blue); }
.tab-btn.active { color: var(--sf-blue); border-bottom-color: var(--sf-blue); }
.tab-count {
  font-size: 0.67rem; font-weight: 700;
  padding: 1px 6px; border-radius: 10px;
  background: var(--g200); color: var(--g600);
}
.tab-btn.active .tab-count { background: var(--sf-blue-b); color: var(--sf-blue); }

.tab-pane { padding: 20px; }

/* ─── POSITIONEN TABLE ─── */
.table-wrap { overflow-x: auto; }
.prev-table {
  width: 100%; border-collapse: collapse; font-size: 0.8rem;
}
.prev-table th {
  padding: 8px 10px; text-align: left;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--g500);
  border-bottom: 2px solid var(--g200);
  background: var(--g50); white-space: nowrap;
}
.prev-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--g100);
  vertical-align: top;
}
.prev-table tr:last-child td { border-bottom: none; }
.prev-table tr:hover td { background: var(--sf-blue-l); }

.col-nr    { width: 70px; }
.col-name  { width: 180px; }
.col-desc  { min-width: 200px; }
.col-stk   { width: 60px; text-align: right; }
.col-price { width: 120px; text-align: right; }
.col-total { width: 120px; text-align: right; font-weight: 700; }

.pos-nr {
  font-family: var(--mono); font-size: 0.75rem; font-weight: 700;
  color: var(--sf-blue); background: var(--sf-blue-l);
  padding: 2px 6px; border-radius: 4px;
}
.editable-hint { font-size: 0.62rem; color: var(--g400); font-weight: 400; }

.price-input {
  width: 100%; padding: 4px 6px;
  border: 1px solid var(--g200); border-radius: 5px;
  font-size: 0.8rem; font-family: var(--font);
  text-align: right; color: var(--g800);
  outline: none; background: white;
  transition: border-color .15s;
}
.price-input:focus {
  border-color: var(--sf-blue);
  box-shadow: 0 0 0 2px var(--sf-blue-b);
}
.total-cell { font-weight: 700; color: var(--g800); text-align: right; }
.desc-cell  { font-size: 0.75rem; color: var(--g600); max-width: 280px; }
.desc-short { cursor: default; }
.desc-expand {
  background: none; border: none; color: var(--sf-blue);
  font-size: 0.72rem; cursor: pointer; padding: 0; text-decoration: underline;
}
.desc-empty { color: var(--g300); font-style: italic; }
.empty-cell { text-align: center; color: var(--g400); font-style: italic; padding: 24px; }

/* ZZZ Box */
.zzz-box {
  margin-top: 16px; padding: 12px 16px;
  border: 1px solid var(--orange-b); border-radius: var(--r-lg);
  background: var(--orange-l);
}
.zzz-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; color: #9a3412;
  margin-bottom: 6px;
}
.zzz-body { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.zzz-text   { font-size: 0.8rem; color: #7c2d12; flex: 1; }
.zzz-betrag { font-size: 0.95rem; font-weight: 800; color: #7c2d12; white-space: nowrap; }

/* Sum Row */
.sum-row {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px;
  padding: 10px 0 0; margin-top: 8px;
  border-top: 1px solid var(--g200);
  font-size: 0.82rem; color: var(--g600);
}
.sum-value { font-size: 1rem; font-weight: 800; color: var(--g900); }

/* ─── OPTIONEN LIST ─── */
.opt-hint {
  font-size: 0.78rem; color: #92400e;
  background: var(--amber-l); border: 1px solid var(--amber-b);
  border-radius: var(--r-lg); padding: 10px 14px;
  margin-bottom: 14px; display: flex; gap: 8px; align-items: flex-start;
}
.opt-hint i { flex-shrink: 0; margin-top: 2px; }
.opt-list { display: flex; flex-direction: column; gap: 6px; }
.opt-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--g200);
  border-radius: var(--r-lg); background: white;
  transition: border-color .15s, background .15s;
  opacity: 0.65;
}
.opt-item.active { opacity: 1; border-color: var(--sf-blue-b); background: var(--sf-blue-l); }
.opt-check-label { flex-shrink: 0; padding-top: 2px; }
.opt-check { accent-color: var(--sf-blue); width: 16px; height: 16px; cursor: pointer; }
.opt-body  { flex: 1; min-width: 0; }
.opt-header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.opt-nr {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 700;
  color: var(--sf-blue); background: var(--sf-blue-l);
  padding: 1px 6px; border-radius: 4px;
}
.opt-name { font-size: 0.82rem; font-weight: 600; color: var(--g800); }
.opt-per-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
  background: var(--amber-l); color: var(--amber); border: 1px solid var(--amber-b);
}
.opt-desc { font-size: 0.73rem; color: var(--g600); }
.opt-values {
  display: flex; gap: 12px; flex-wrap: wrap;
  padding-left: 4px; margin-top: 4px;
}
.opt-val-row {
  display: flex; align-items: center; gap: 4px;
  font-size: 0.72rem;
}
.ov-label { color: var(--g400); }
.ov-val   { font-weight: 700; color: var(--g700); }
.opt-empty { text-align: center; color: var(--g400); font-style: italic; padding: 24px; }

/* Vorbeschrieb */
.vorb-wrap { max-width: 700px; }
.vorb-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--g400); margin-bottom: 10px; }
.vorb-text {
  font-size: 0.83rem; line-height: 1.75; color: var(--g700);
  padding: 14px 16px; border: 1px solid var(--g200);
  border-radius: var(--r-lg); background: var(--g50);
  white-space: pre-wrap;
}
.vorb-empty { color: var(--g400); font-style: italic; }

/* ─── STEP 3: SEARCH ─── */
.search-wrap { margin-bottom: 16px; }
.field-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--g700); margin-bottom: 6px; }
.search-input-wrap { position: relative; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--g400); font-size: 0.85rem; }
.search-input {
  width: 100%; padding: 10px 12px 10px 36px;
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  font-size: 0.85rem; font-family: var(--font); color: var(--g800);
  outline: none; transition: border-color .15s;
  background: white;
}
.search-input:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 2px var(--sf-blue-b); }
.search-spinner { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--sf-blue); }
.search-hint { font-size: 0.72rem; color: var(--g400); margin-top: 5px; }

/* Search Results */
.search-results {
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  background: white; box-shadow: var(--shadow-md);
  max-height: 340px; overflow-y: auto;
  margin-top: 8px;
}
.sr-count { padding: 8px 14px; font-size: 0.7rem; color: var(--g400); border-bottom: 1px solid var(--g100); }
.result-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--g100);
  transition: background .1s;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--sf-blue-l); }
.result-item.sel   { background: var(--sf-blue-l); border-left: 3px solid var(--sf-blue); }
.ri-main { flex: 1; min-width: 0; }
.ri-nr   { font-size: 0.7rem; font-weight: 700; color: var(--sf-blue); font-family: var(--mono); }
.ri-title { font-size: 0.85rem; font-weight: 600; color: var(--g800); }
.ri-cust  { font-size: 0.73rem; color: var(--g500); }
.ri-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.ri-status {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
  background: var(--g100); color: var(--g500);
}
.ri-vol { font-size: 0.73rem; color: var(--g600); font-weight: 600; }
.search-error, .search-empty {
  padding: 16px 14px; font-size: 0.8rem;
  color: var(--g500); display: flex; align-items: center; gap: 8px;
}
.search-error { color: var(--red); }

/* Selected Project */
.selected-project {
  border: 1px solid var(--green-b); border-radius: var(--r-xl);
  background: var(--green-l); overflow: hidden;
}
.sp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--green-b);
}
.sp-check { color: var(--green); font-size: 1.1rem; }
.sp-title { flex: 1; font-size: 0.9rem; font-weight: 700; color: var(--g800); }
.sp-meta { padding: 12px 16px; border-bottom: 1px solid var(--green-b); background: white; }
.sp-meta-grid { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sp-mi { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; }
.sp-mi i { color: var(--sf-blue); width: 14px; text-align: center; }
.sp-mi-l { color: var(--g500); }
.sp-mi-v { font-weight: 600; color: var(--g800); }

/* Recipient Card */
.recipient-card {
  margin: 0; padding: 14px 16px;
  background: white; border-top: 1px solid var(--green-b);
}
.rc-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px; font-size: 0.82rem; font-weight: 700; color: var(--g700);
}
.rc-badge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px;
  background: var(--sf-blue-l); color: var(--sf-blue); border: 1px solid var(--sf-blue-b);
  margin-left: auto;
}
.rc-body { margin-bottom: 12px; }
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.rc-field { display: flex; align-items: flex-start; gap: 8px; font-size: 0.78rem; }
.rc-icon  { color: var(--sf-blue); width: 14px; text-align: center; flex-shrink: 0; margin-top: 2px; }
.rc-field-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--g400); }
.rc-field-value { font-weight: 500; color: var(--g700); margin-top: 1px; }
.rc-empty { color: var(--g400); font-style: italic; font-size: 0.8rem; }
.rc-hubspot-note {
  font-size: 0.7rem; color: var(--g400);
  display: flex; align-items: center; gap: 6px;
  margin-top: 10px;
}
.rc-confirm {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--sf-blue);
  border: 1px solid var(--sf-blue-b); border-radius: var(--r-lg);
  background: var(--sf-blue-l); transition: all .15s;
  margin: 12px 16px 14px;
}
.rc-confirm input[type=checkbox] { accent-color: var(--sf-blue); width: 15px; height: 15px; }
.rc-confirm:hover { background: white; }

/* Info box amber */
.info-box.info-amber {
  background: var(--amber-l); border: 1px solid var(--amber-b);
  color: #92400e; border-radius: var(--r-lg); padding: 12px 16px;
  display: flex; gap: 10px; font-size: 0.8rem;
  margin-top: 16px;
}

/* ─── STEP 4: BESTÄTIGEN ─── */
.summary-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 20px;
}
.summary-section {
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  overflow: hidden;
}
.ss-title {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--sf-blue); background: var(--sf-blue-l);
  border-bottom: 1px solid var(--sf-blue-b);
}
.sum-row2 {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; border-bottom: 1px solid var(--g100);
  font-size: 0.78rem;
}
.sum-row2:last-child { border-bottom: none; }
.sr2-label { color: var(--g500); }
.sr2-value { font-weight: 600; color: var(--g700); text-align: right; }

/* MwSt Wrap */
.mwst-wrap { margin-bottom: 16px; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-group { flex: 1; min-width: 160px; }
.mwst-select-wrap { display: flex; align-items: center; gap: 8px; }
.field-select {
  padding: 8px 10px; border: 1px solid var(--g200); border-radius: var(--r-lg);
  font-size: 0.82rem; font-family: var(--font); color: var(--g800);
  background: white; outline: none; cursor: pointer;
}
.field-select:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 2px var(--sf-blue-b); }
.field-input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--g200); border-radius: var(--r-lg);
  font-size: 0.82rem; font-family: var(--font); color: var(--g800);
  background: white; outline: none;
}
.field-input:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 2px var(--sf-blue-b); }
.mwst-auto-badge {
  font-size: 0.7rem; font-weight: 700;
  padding: 3px 8px; border-radius: 20px;
  background: var(--green-l); color: var(--green); border: 1px solid var(--green-b);
  display: flex; align-items: center; gap: 4px;
}

/* Anschreiben */
.anschreiben-wrap { margin-bottom: 16px; }
.anschreiben-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.field-hint { font-size: 0.7rem; color: var(--g400); font-weight: 400; }
.anschreiben-hint {
  font-size: 0.72rem; color: var(--g400); margin-top: 5px;
  display: flex; align-items: center; gap: 5px;
}
.anschreiben-hint code { background: var(--g100); padding: 1px 4px; border-radius: 3px; font-size: 0.7rem; }

/* AGB Toggle */
.agb-wrap { margin-bottom: 16px; }
.toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.82rem; color: var(--g700); }
.toggle-label input[type=checkbox] { display: none; }
.toggle-switch {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--g300); position: relative;
  transition: background .2s; flex-shrink: 0;
}
.toggle-switch::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: white; top: 3px; left: 3px;
  transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.toggle-label input:checked + .toggle-switch { background: var(--sf-blue); }
.toggle-label input:checked + .toggle-switch::after { transform: translateX(16px); }

/* Entwurf Notice */
.entwurf-notice {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  background: var(--amber-l); border: 1px solid var(--amber-b);
  border-radius: var(--r-lg); font-size: 0.8rem; color: #92400e;
}
.entwurf-notice code { background: rgba(0,0,0,.08); padding: 1px 5px; border-radius: 3px; font-size: 0.75rem; }
.entwurf-notice i { flex-shrink: 0; margin-top: 2px; }
.entwurf-success { background: var(--green-l); border-color: var(--green-b); color: #166534; }

/* Validierungs-Fehler */
.val-errors {
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--red-l); border: 1px solid var(--red-b);
  border-radius: var(--r-lg);
}
.val-errors-title {
  font-size: 0.82rem; font-weight: 700; color: #991b1b;
  margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.val-errors ul { padding-left: 0; list-style: none; }
.val-errors li { font-size: 0.78rem; color: #991b1b; margin-bottom: 5px;
  display: flex; align-items: flex-start; gap: 6px; }
.val-errors li i { flex-shrink: 0; margin-top: 2px; }
.val-hard { color: #991b1b !important; }
.val-warn-item { color: #92400e !important; }

/* Total Summary */
.total-summary { margin-top: 4px; }
.total-table { border: 1px solid var(--g200); border-radius: var(--r-lg); overflow: hidden; }
.tot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 14px; border-bottom: 1px solid var(--g100);
  font-size: 0.82rem; color: var(--g600);
}
.tot-row:last-child { border-bottom: none; }
.tot-separator { border-top: 2px solid var(--g200); margin: 0; }
.tot-strong { font-weight: 700; color: var(--g800); }
.tot-grand {
  font-weight: 800; font-size: 0.92rem; color: var(--sf-blue);
  background: var(--sf-blue-l); padding: 10px 14px;
}

/* ─── STEP 5: ERGEBNIS ─── */
.result-hero {
  display: flex; align-items: center; gap: 20px;
  padding: 24px; background: var(--green-l);
  border-bottom: 1px solid var(--green-b);
}
.result-check {
  width: 52px; height: 52px; border-radius: 50%;
  background: white; border: 2px solid var(--green-b);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--green); flex-shrink: 0;
}
.result-title { font-size: 1rem; font-weight: 800; color: var(--g900); }
.result-sub   { font-size: 0.8rem; color: var(--g500); margin-top: 3px; }
.result-body  { flex: 1; }

.doc-details { padding: 20px; }
.doc-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ddi { display: flex; align-items: flex-start; gap: 10px; }
.ddi-icon { color: var(--sf-blue); width: 14px; text-align: center; margin-top: 3px; font-size: 0.85rem; flex-shrink: 0; }
.ddi-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--g400); }
.ddi-value { font-weight: 600; color: var(--g700); font-size: 0.82rem; margin-top: 1px; }
.result-actions {
  display: flex; gap: 10px; padding: 0 20px 20px; flex-wrap: wrap;
}
.proto-new {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 20px 16px; font-size: 0.75rem; color: var(--g400);
}

/* ─── PROTOCOL PANEL ─── */
.panel-protocol { }
.collapsible { cursor: pointer; user-select: none; }
.collapsible:hover { background: var(--g100); }
.proto-count { margin-left: 4px; }
.ml-auto { margin-left: auto; }
.proto-chevron { transition: transform .2s; color: var(--g400); font-size: 0.8rem; }
.proto-chevron.rotated { transform: rotate(180deg); }
.protocol-body { }
.proto-list { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; }
.proto-empty { text-align: center; color: var(--g400); font-style: italic; font-size: 0.8rem; padding: 12px; }
.proto-entry {
  padding: 10px 14px; border: 1px solid var(--g200);
  border-radius: var(--r-lg); background: white;
  display: flex; flex-direction: column; gap: 3px;
}
.pe-meta { display: flex; align-items: center; gap: 10px; }
.pe-nr { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--sf-blue); }
.pe-ts { font-size: 0.72rem; color: var(--g400); }
.pe-proj { font-size: 0.8rem; font-weight: 600; color: var(--g700); }
.pe-link {
  font-size: 0.73rem; color: var(--sf-blue); text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
}
.pe-link:hover { text-decoration: underline; }
.protocol-footer { padding: 0 20px 14px; display: flex; justify-content: flex-end; }
.btn-danger.btn-ghost {
  background: none; color: var(--red);
  border: 1px solid var(--red-b);
}
.btn-danger.btn-ghost:hover { background: var(--red-l); }

/* ─── LOADING OVERLAY (erweitert) ─── */
.loading-overlay[hidden] { display: none !important; }
.loading-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,23,42,.6);
  display: flex; align-items: center; justify-content: center;
}
.loading-card {
  background: white; border-radius: var(--r-xl);
  padding: 32px 40px; text-align: center;
  box-shadow: var(--shadow-lg); min-width: 260px;
}
.loading-spinner { font-size: 2rem; color: var(--sf-blue); margin-bottom: 14px; }
.loading-title { font-size: 1rem; font-weight: 700; color: var(--g900); margin-bottom: 6px; }
.loading-sub   { font-size: 0.8rem; color: var(--g500); margin-bottom: 12px; }
.loading-progress {
  height: 4px; background: var(--g200); border-radius: 4px;
  overflow: hidden; margin-top: 10px;
}
.progress-bar {
  height: 100%; background: var(--sf-blue);
  transition: width .3s ease; border-radius: 4px;
}

/* ─── TOAST (container ID-fix) ─── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px;
  z-index: 9999; display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  min-width: 280px; max-width: 380px;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); pointer-events: all;
  font-size: 0.81rem; opacity: 0; transform: translateX(20px);
  transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: none; }
.toast.hide { opacity: 0; transform: translateX(20px); }
.toast-icon { flex-shrink: 0; margin-top: 1px; }
.toast-msg  { flex: 1; font-weight: 500; }

/* ─── KONDITIONEN BLOCK (Step 4) ─── */
.konditionen-wrap {
  margin-bottom: 16px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.konditionen-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--g50); border-bottom: 1px solid var(--g200);
  font-size: 0.82rem; font-weight: 700; color: var(--g700);
}
.konditionen-header i { color: var(--sf-blue); }
.konditionen-header .field-hint { margin-left: 2px; }
.kond-toggle-inline { margin-left: auto; font-weight: 400; }
.kond-fields { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.kond-row { display: flex; gap: 12px; flex-wrap: wrap; }
.kond-field { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.kond-field-full { flex: 2; min-width: 100%; }
.kond-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--g500);
  display: flex; align-items: center; gap: 5px;
}
.kond-label.kond-inkl i { color: var(--green); }
.kond-label.kond-exkl i { color: var(--red); }
.kond-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  font-size: 0.8rem; font-family: var(--font); color: var(--g800);
  background: white; outline: none;
}
.kond-input:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 2px var(--sf-blue-b); }
.kond-textarea {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--g200); border-radius: var(--r-lg);
  font-size: 0.8rem; font-family: var(--font); color: var(--g800);
  background: white; outline: none; resize: vertical; min-height: 64px;
}
.kond-textarea:focus { border-color: var(--sf-blue); box-shadow: 0 0 0 2px var(--sf-blue-b); }

/* Konditionen Vorschau */
.kond-preview {
  margin-top: 4px;
  border: 1px dashed var(--g200);
  border-radius: var(--r-lg); overflow: hidden;
}
.kond-preview-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--g400);
  padding: 5px 10px; background: var(--g50);
  display: flex; align-items: center; gap: 5px;
  border-bottom: 1px dashed var(--g200);
}
.kond-preview-body {
  padding: 10px 14px; font-size: 0.78rem; color: var(--g700);
  line-height: 1.6;
}
.kond-preview-body p { margin-bottom: 6px; }
.kond-preview-body p:last-child { margin-bottom: 0; }
.kond-preview-body b { color: var(--g900); }
.kond-preview-body a { color: var(--sf-blue); }
.kond-preview-off {
  padding: 10px 14px; font-size: 0.78rem; color: var(--g400);
  display: flex; align-items: center; gap: 6px;
}

/* ─── STEP 5: CUSTOM FIELDS REVIEW ─── */
.cf-group {
  margin-bottom: 20px;
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.cf-group-b2c {
  border-color: var(--sf-blue-b);
}
.cf-group-title {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--g600);
  background: var(--g50); border-bottom: 1px solid var(--g200);
}
.cf-group-b2c .cf-group-title {
  background: var(--sf-blue-l); color: var(--sf-blue);
  border-bottom-color: var(--sf-blue-b);
}
.cf-group-title i { color: var(--sf-blue); }
.cf-group-b2c .cf-group-title i { color: var(--sf-blue); }
.cf-count {
  margin-left: auto;
  font-size: 0.7rem; font-weight: 700;
  padding: 1px 7px; border-radius: 10px;
  background: var(--g200); color: var(--g600);
}
.cf-group-b2c .cf-count { background: var(--sf-blue-b); color: var(--sf-blue); }
.cf-table {
  width: 100%; border-collapse: collapse;
  font-size: 0.79rem;
}
.cf-table th {
  padding: 6px 12px; text-align: left;
  font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--g500);
  background: var(--g50); border-bottom: 1px solid var(--g100);
}
.cf-table td {
  padding: 7px 12px; border-bottom: 1px solid var(--g100);
  vertical-align: middle;
}
.cf-table tr:last-child td { border-bottom: none; }
.cf-table tr:hover td { background: var(--sf-blue-l); }
.cf-key code {
  font-family: var(--mono); font-size: 0.73rem;
  color: var(--sf-blue); background: var(--sf-blue-l);
  padding: 1px 5px; border-radius: 3px;
}
.cf-val { font-weight: 500; color: var(--g700); }
.cf-empty { color: var(--g300); font-style: italic; }
.cf-hero-input {
  width: 100%; padding: 5px 8px;
  border: 1px solid var(--g200); border-radius: var(--r);
  font-size: 0.78rem; font-family: var(--font); color: var(--g700);
  background: white; outline: none;
  transition: border-color .15s;
}
.cf-hero-input:focus {
  border-color: var(--sf-blue);
  box-shadow: 0 0 0 2px var(--sf-blue-b);
}
.cf-b2c-note { margin-top: 12px; }

/* ─── STEP 6: CUSTOM FIELDS SYNC RESULT ─── */
.cf-sync-result {
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  overflow: hidden;
  font-size: 0.79rem;
}
.cf-sync-title {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  font-size: 0.78rem; font-weight: 700;
  background: var(--g50); border-bottom: 1px solid var(--g200);
  color: var(--g700);
}
.cf-sync-title i { color: var(--sf-blue); }
.cf-sync-section { border-bottom: 1px solid var(--g100); }
.cf-sync-section:last-child { border-bottom: none; }
.cf-sync-sec-title {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--g50);
}
.cf-sync-ok   .cf-sync-sec-title { color: var(--green);  background: var(--green-l); }
.cf-sync-warn .cf-sync-sec-title { color: var(--amber);  background: var(--amber-l); }
.cf-sync-error .cf-sync-sec-title { color: var(--red);   background: var(--red-l); }
.cf-sync-hint {
  font-size: 0.72rem; color: var(--g500);
  padding: 5px 14px 8px; line-height: 1.5;
  font-style: italic;
}
.cf-sync-warn { border-left: 3px solid var(--amber); }
.cf-sync-error { border-left: 3px solid var(--red); }
.cf-sync-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 14px; border-bottom: 1px solid var(--g100);
}
.cf-sync-row:last-child { border-bottom: none; }
.cf-sync-ok .cf-sync-row:hover   { background: var(--green-l); }
.cf-sync-warn .cf-sync-row:hover  { background: var(--amber-l); }
.cf-sync-error .cf-sync-row:hover { background: var(--red-l); }
.cf-key-small {
  font-family: var(--mono); font-size: 0.71rem;
  color: var(--sf-blue); background: var(--sf-blue-l);
  padding: 1px 5px; border-radius: 3px; flex-shrink: 0;
}
.cf-arrow { color: var(--g400); flex-shrink: 0; }
.cf-hero-name { font-weight: 600; color: var(--g700); flex: 1; }
.cf-search-name { font-style: italic; color: var(--g500); flex: 1; }
.cf-val-small { font-family: var(--mono); font-size: 0.72rem; color: var(--g600); }
.cf-ok-badge {
  font-size: 0.65rem; font-weight: 700; color: var(--green);
  background: var(--green-l); border: 1px solid var(--green-b);
  padding: 1px 6px; border-radius: 10px; flex-shrink: 0;
}
.cf-notfound-badge {
  font-size: 0.65rem; font-weight: 700; color: var(--amber);
  background: var(--amber-l); border: 1px solid var(--amber-b);
  padding: 1px 6px; border-radius: 10px; flex-shrink: 0;
}
.cf-err-msg {
  font-size: 0.72rem; color: var(--red); flex: 1;
  font-style: italic;
}
.cf-sync-warn-inline {
  display: flex; gap: 8px; padding: 10px 14px;
  font-size: 0.78rem; color: #92400e;
  background: var(--amber-l); border-bottom: 1px solid var(--amber-b);
}

/* ─── RESPONSIVE ERGÄNZUNGEN ─── */
@media (max-width: 640px) {
  .main-wrap { padding: 16px 12px 60px; }
  .stepper   { padding: 0 8px; overflow-x: auto; }
  .step-label { display: none; }
  .summary-grid { grid-template-columns: 1fr; }
  .doc-details-grid { grid-template-columns: 1fr 1fr; }
  .field-row { flex-direction: column; }
  .meta-bar  { display: none; }
  .rc-grid   { grid-template-columns: 1fr; }
  .prev-table .col-desc { display: none; }
  .kond-row { flex-direction: column; }
  .kond-field-full { min-width: unset; }
}