/*
 * Lexware Brand (brand-basics/brand.md, Stand 2026-07-10):
 * - Urbanist (Fallback Arial), Fließtext Medium mit 3 % Laufweite, Überschriften Bold/ExtraBold
 * - Grund Softes Weiß (Neutral 1), Text Fast-Schwarz (Neutral 12), Nebentext Neutral 8
 * - Buttons ausschließlich CTA-Grün, nie Rot. Fehler in Funktionsfarben, nie Marken-Rot
 * - Klare Kanten, flach, keine Schatten auf statischen Flächen, viel Weißraum
 */

/* Self-hosted aus brand-basics/assets/fonts/woff2 — kein Google-Fonts-Abruf (keine Nutzer-IP an Dritte).
   Fehlen die Dateien, greift Arial. */
@font-face { font-family: "Urbanist"; font-weight: 500; font-display: swap; src: url("fonts/urbanist-500.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 700; font-display: swap; src: url("fonts/urbanist-700.woff2") format("woff2"); }
@font-face { font-family: "Urbanist"; font-weight: 800; font-display: swap; src: url("fonts/urbanist-800.woff2") format("woff2"); }

:root {
  --neutral-0: #ffffff;
  --neutral-1: #fcfafa;   /* Grund */
  --neutral-3: #eae6e6;   /* ruhige Flächen, Trennlinien */
  --neutral-4: #d3caca;   /* Feldrahmen */
  --neutral-6: #a79595;   /* Platzhalter */
  --neutral-8: #7a6666;   /* Nebentext */
  --neutral-12: #131010;  /* Text */
  --cta: #1aa38a;         /* Mint 600, einzige Button-Farbe */
  --cta-hover: #178e79;   /* Mint 650 */
  --cta-text: #147a68;    /* Mint 700, Links auf hellem Grund (WCAG AA) */
  --success-50: #e8f3ee;
  --success-700: #115036;
  --error-50: #fbebec;
  --error-500: #d93845;
  --error-700: #822229;
  --radius: 0;            /* klare Kanten */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  font-family: "Urbanist", Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  background: var(--neutral-1);
  color: var(--neutral-12);
  margin: 0;
  padding: 40px 16px 80px;
  line-height: 1.5;
}
.wrap { max-width: 980px; margin: 0 auto; }

h1 { font-size: 32px; font-weight: 800; letter-spacing: 0; line-height: 1.2; margin: 0 0 32px; }
.card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-3);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 24px;
}
.card h2 { font-size: 20px; font-weight: 700; letter-spacing: 0; margin: 0 0 4px; }
.card .subtitle { font-size: 14px; color: var(--neutral-8); margin: 0 0 24px; max-width: 64ch; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.grid2.spaced { margin-top: 24px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.req { color: var(--neutral-8); font-weight: 500; }
.fieldhint { font-size: 13px; color: var(--neutral-8); margin-top: 6px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=date], textarea, select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--neutral-4);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: var(--neutral-0);
  color: var(--neutral-12);
}
::placeholder { color: var(--neutral-6); opacity: 1; }
input:disabled { background: var(--neutral-1); color: var(--neutral-8); }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--cta);
  outline-offset: -1px;
  border-color: var(--cta);
}
input.err, textarea.err { border-color: var(--error-500); outline-color: var(--error-500); }
textarea { resize: vertical; min-height: 96px; }

input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--cta); }
.checkbox-row { display: flex; align-items: center; gap: 10px; margin: 4px 0 18px; font-size: 14px; }
.consent-row { display: flex; align-items: flex-start; gap: 12px; margin: 8px 0 24px; font-size: 14px; }
.consent-row input { margin-top: 2px; flex: 0 0 auto; }
.consent-row.err label { color: var(--error-700); }
.consent-row a { color: var(--cta-text); }

.lines-scroll { overflow-x: auto; }
table.lines { width: 100%; border-collapse: collapse; }
table.lines th {
  text-align: left; font-size: 13px; color: var(--neutral-8); font-weight: 700;
  padding: 8px 6px; border-bottom: 1px solid var(--neutral-3);
}
table.lines td { padding: 8px 6px; vertical-align: top; }
table.lines td input, table.lines td select { padding: 9px 10px; font-size: 14px; }
.col-name { width: 34%; }
.col-qty { width: 10%; }
.col-unit { width: 10%; }
.col-price { width: 16%; }
.col-vat { width: 10%; }
.col-total { width: 16%; text-align: right; padding-right: 4px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.col-del { width: 4%; text-align: center; }
.del-btn { border: none; background: none; color: var(--neutral-8); cursor: pointer; font-size: 16px; line-height: 1; padding: 10px 4px; }
.del-btn:hover { color: var(--neutral-12); }

.actions-row { display: flex; gap: 20px; margin: 16px 0 4px; font-size: 15px; }
.actions-row a { color: var(--cta-text); font-weight: 700; text-decoration: none; cursor: pointer; }
.actions-row a:hover { text-decoration: underline; }

.summary { display: flex; justify-content: flex-end; }
.summary table { border-collapse: collapse; min-width: 320px; }
.summary td { padding: 6px 4px; font-size: 15px; }
.summary td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.summary tr.total td { font-weight: 800; font-size: 18px; border-top: 1px solid var(--neutral-3); padding-top: 12px; }

.footer-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
.btn {
  display: inline-block; border: none; border-radius: var(--radius); padding: 14px 28px;
  font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn-primary { background: var(--cta); color: var(--neutral-0); }
.btn-primary:hover { background: var(--cta-hover); }
.btn:focus-visible { outline: 2px solid var(--neutral-12); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

#status { font-size: 15px; margin-top: 16px; }
#status:empty { display: none; }
#status.error { background: var(--error-50); color: var(--error-700); padding: 14px 16px; white-space: pre-line; }
#status.ok { background: var(--success-50); color: var(--success-700); padding: 14px 16px; }

@media (max-width: 700px) {
  body { padding: 16px 12px 40px; }
  h1 { font-size: 26px; margin-bottom: 24px; }
  .card { padding: 20px 16px; }
  .grid2 { grid-template-columns: 1fr; }
  table.lines { min-width: 620px; }
  .summary table { min-width: 0; width: 100%; }
  .footer-actions .btn { width: 100%; }
}