/* Grund-Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; background: #234067; color: #fff; }

/* Header */
header { background: #4c4c4c; padding: 10px; }
.header-section { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Haupt-Bereich */
main { display: flex; gap: 15px; padding: 15px; }
.section.card { background: #335b7e; border-radius: 6px; padding: 15px; flex: 1; }
.sidebar { max-width: 250px; }

/* Form-Grid */
.form-grid {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

/* Labels & Felder */
.field { display: flex; flex-direction: column; }
.field.full { grid-column: span 2; }
label { font-size: 0.9em; margin-bottom: 4px; }
.input, .select, textarea {
  padding: 6px;
  border: 1px solid #1c2b3a;
  border-radius: 4px;
  background: #afc4e0;
  color: #000;
  font-size: 0.9em;
}
.input.small { width: 60px; }
.input.full, textarea.full { width: 100%; }

/* Buttons */
.btn {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.85em;
}
.btn.primary { background: #8bc34a; color: #fff; }
.btn.success { background: #4caf50; color: #fff; }
.btn.info    { background: #03a9f4; color: #fff; }
.btn.warning { background: #ff9800; color: #fff; }
.btn.danger  { background: #e91e63; color: #fff; }
.btn.small   { padding: 4px 8px; font-size: 0.8em; }
.btn.icon    { font-size: 1.2em; }

/* Positionen-Tabelle */
.items-table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
.items-table th, .items-table td {
  border: 1px solid #1c2b3a;
  padding: 6px;
  text-align: left;
}
.items-table thead th {
  background: #3f6a92;
}
.items-table tbody tr:nth-child(odd) td {
  background: #2e506c;
}
.items-table tbody tr:nth-child(even) td {
  background: #345c78;
}
/* Spaltenbreiten */
.items-table th:nth-child(1), .items-table td:nth-child(1) { width: 4ch; }
.items-table th:nth-child(2), .items-table td:nth-child(2) { width: 25%; }
.items-table th:nth-child(3), .items-table td:nth-child(3) { width: 25%; }
.items-table th:nth-child(4), .items-table td:nth-child(4) { width: 12ch; }
.items-table th:nth-child(5), .items-table td:nth-child(5) { width: 12ch; }

/* Tabellen-Inputs */
.items-table .input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #1c2b3a;
  background: #afc4e0;
  color: #000;
  font-size: 0.9em;
}
.items-table .qty      { max-width: 4ch; }
.items-table .unit-price { max-width: 12ch; }
.items-table .line-total { background: #e0e8f5; text-align: right; }

/* Summe Brutto */
#gross-total {
  width: 12ch;
  background: #e0e8f5;
  text-align: right;
}

/* Modal */
.modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); display: none;
  align-items: center; justify-content: center; z-index: 1000;
}
.modal.visible { display: flex; }
.modal-content {
  background: #335b7e; padding: 20px; border-radius: 8px;
  max-width: 450px; width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }