:root {
  --nav: #123b4a;
  --accent: #176b87;
  --bg: #f3f6f8;
  --line: #d9e2e6;
  --ink: #20303a;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.45 system-ui, sans-serif; }
header { background: var(--nav); color: #fff; min-height: 58px; padding: 0 max(18px, calc((100% - 1400px)/2)); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
header a { color: #fff; text-decoration: none; }
.brand { font-weight: 700; font-size: 1.1rem; }
nav { display: flex; gap: 26px; }
nav a { padding: 20px 4px; }
nav a:hover { background: #1b5264; }
main { max-width: 1400px; margin: 30px auto; padding: 0 24px; }
h1 { margin: 0 0 20px; font-size: 1.8rem; }
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.page-title .action { background: var(--accent); color: #fff; font-size: .95rem; }
.card, .table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 18px; margin: 14px 0; }
.add, .filters { display: grid; gap: 10px; align-items: end; }
.add { grid-template-columns: 2fr 90px 2fr 1.3fr 1.3fr auto; }
.filters { grid-template-columns: 2fr repeat(6, 1fr); }
input, select, button { font: inherit; border: 1px solid #b9c9d0; border-radius: 6px; padding: 9px 10px; background: #fff; }
button { background: var(--accent); color: #fff; cursor: pointer; }
.table-wrap { padding: 0; overflow: hidden; }
table { width: 100%; border-collapse: collapse; table-layout: auto; }
th, td { padding: 11px 9px; border-bottom: 1px solid #e1e7e9; vertical-align: middle; overflow-wrap: anywhere; }
th { background: #eaf1f3; font-size: .82rem; text-align: left; }
tr:hover td { background: #f8fbfb; }
th:first-child, td:first-child { width: 65px; text-align: center; }
th:nth-child(n+6), td:nth-child(n+6) { width: 78px; text-align: center; white-space: normal; word-break: normal; overflow-wrap: normal; }
th:nth-child(1), td:nth-child(1) { width: 62px; }
th:nth-child(2), td:nth-child(2) { min-width: 120px; }
th:nth-child(3), td:nth-child(3) { min-width: 170px; }
th:nth-child(4), td:nth-child(4), th:nth-child(5), td:nth-child(5) { min-width: 105px; }
th:nth-child(9), td:nth-child(9) { width: 170px; min-width: 170px; }
td input[type=checkbox] { width: 19px; height: 19px; cursor: pointer; }
.item-actions { white-space: nowrap; }
.delete-form { display:inline; margin:0; }
.category-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.item-actions .action { white-space:nowrap; }
.action { display: inline-block; padding: 5px 8px; border-radius: 5px; text-decoration: none; font-size: .85rem; background: #edf2f4; color: var(--ink); }
.action.delete { color: #a33; }
.mobile-actions { display:none; gap:10px; margin:0 0 14px; }
.edit-page { max-width: 760px; margin: 0 auto; }
.edit-form { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-weight: 600; color: #405761; }
.form-field textarea { resize: vertical; min-height: 78px; }
.term-field { grid-column: 1; }
.quantity-field { grid-column: 2; }
.note-field, .form-actions { grid-column: 1 / -1; }
.category-field, .subcategory-field { min-width: 0; }
.form-actions { display: flex; gap: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.secondary-button { display: inline-flex; align-items: center; padding: 9px 13px; border-radius: 6px; background: #edf2f4; color: var(--ink); text-decoration: none; }
@media (max-width:700px) {
  .page-title > .action { display:none; }
  .mobile-actions { display:flex; }
  .mobile-actions .action { flex:1 1 0; min-height:44px; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; }
  .mobile-actions .action:first-child { order:2; }
  .mobile-actions .action:last-child { order:1; }
  .inline-add { display:none; }
  .page-title{align-items:stretch;flex-direction:column}.page-title .action{text-align:center}
  header{display:block;padding:14px 18px}nav{margin-top:8px;gap:18px}nav a{padding:5px 0}
  main{padding:0 12px;margin:20px auto}.add,.filters{grid-template-columns:1fr}
  .table-wrap{background:transparent;border:0;padding:0}table,thead,tbody,tr,td{display:block}thead{display:none}
  tr{background:#fff;border:1px solid var(--line);border-radius:8px;margin:12px 0;padding:14px;display:grid;grid-template-columns:1fr auto;gap:0 12px}
  td{width:auto!important;text-align:left!important;border:0;padding:0;min-width:0}td:before{content:none}
  td:nth-child(1){grid-column:2;grid-row:1;font-weight:700;font-size:1rem}td:nth-child(1):after{content:'x'}td:nth-child(2){grid-column:1;grid-row:1;font-weight:700;font-size:1.05rem}
  td:nth-child(3){grid-column:1/-1;grid-row:3;padding:10px 0 12px;border-bottom:1px solid #e4eaec;color:#687a82}td:nth-child(3):before{content:'Bemerkung';display:block;font-size:.75rem;font-weight:600;color:#566a73}
  td:nth-child(4){grid-column:1/-1;grid-row:2;color:#687a82;font-size:.82rem;padding-top:3px}td:nth-child(4):after{content:' → '}
  td:nth-child(5){grid-column:1/-1;grid-row:2;color:#687a82;font-size:.82rem;padding:3px 0 0 38px}
  td:nth-child(6),td:nth-child(7),td:nth-child(8){grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;min-height:40px;border-bottom:1px solid #eef2f3}
  td:nth-child(6){grid-row:5}td:nth-child(7){grid-row:6}td:nth-child(8){grid-row:7}
  td:nth-child(6):before{content:'Besorgt'}td:nth-child(7):before{content:'Eingepackt'}td:nth-child(8):before{content:'Für später'}
  td:nth-child(6):before,td:nth-child(7):before,td:nth-child(8):before{display:block;font-weight:500;color:var(--ink)}
  td input[type=checkbox]{width:22px;height:22px;margin:8px;cursor:pointer}
  td:nth-child(9){grid-column:1/-1;grid-row:8;display:flex;flex-wrap:wrap;gap:8px;padding-top:14px}
  td:nth-child(9) a{display:inline-block;min-height:38px;padding:9px 12px;border-radius:6px;background:#edf2f4;color:var(--ink);text-decoration:none}td:nth-child(9) a:last-child{color:#a33}
}
@media (max-width:360px) {
  .mobile-actions { flex-direction:column; }
}
@media (max-width:700px) {
  td:nth-child(9) .delete-form { display:inline; margin:0; }
  td:nth-child(9) .delete-form .action { border:0; min-height:38px; }
}