* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: sans-serif; background: #f0f0f0; color: #222; font-size: 16px; }

.screen { display: flex; flex-direction: column; min-height: 100vh; }
.hidden { display: none !important; }

.topbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: #fff;
  border-bottom: 1px solid #e0e0e0; position: sticky; top: 0;
}
.topbar h1 { font-size: 18px; font-weight: 500; flex: 1; }
.topbar h2 { font-size: 16px; font-weight: 500; flex: 1; }

.btn-icon {
  background: none; border: none; font-size: 22px; cursor: pointer;
  padding: 4px 8px 4px 0; color: #222; line-height: 1;
}
.btn-icon-plus { padding: 4px 0; color: #1D9E75; font-weight: 500; }

.badge {
  font-size: 11px; padding: 3px 10px; border-radius: 99px;
  background: #d4edda; color: #1a6b35; white-space: nowrap;
}
.btn-admin-badge {
  font-size: 11px; padding: 4px 10px; border-radius: 99px;
  background: #fff3cd; color: #856404; border: 1px solid #ffc107; cursor: pointer;
}

main { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

#recipe-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
#recipe-list li {
  background: #fff; border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; border: 1px solid #e0e0e0;
}
#recipe-list li:active { background: #f5f5f5; }
.recipe-card-info p { margin: 0; }
.recipe-card-title { font-size: 15px; font-weight: 500; }
.recipe-card-sub { font-size: 12px; color: #888; margin-top: 3px !important; }
.recipe-card-arrow { font-size: 18px; color: #aaa; }

.info-section { font-size: 13px; color: #666; display: flex; flex-direction: column; gap: 4px; }

h3 { font-size: 13px; font-weight: 500; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

.meat-row {
  display: flex; align-items: center; background: #fff;
  border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; gap: 10px; margin-bottom: 6px;
}
.meat-row-name { flex: 1; font-size: 15px; }
.meat-row-parts { font-size: 13px; color: #aaa; min-width: 50px; text-align: right; }
.meat-row input[type=number] {
  width: 80px; text-align: right; font-size: 17px; padding: 6px 8px;
  border: 1px solid #ccc; border-radius: 6px; background: #fafafa;
}
.meat-row input[type=number]:focus { outline: none; border-color: #1D9E75; background: #fff; }

.btn-primary {
  width: 100%; padding: 14px; background: #1D9E75; color: #fff; border: none;
  border-radius: 8px; font-size: 16px; font-weight: 500; cursor: pointer; margin-top: 4px;
}
.btn-primary:disabled { background: #aaa; cursor: default; }
.btn-primary:active:not(:disabled) { background: #178a64; }

.btn-secondary {
  width: 100%; padding: 12px; background: none; color: #555;
  border: 1px solid #ccc; border-radius: 8px; font-size: 14px; cursor: pointer; margin-top: 4px;
}
.btn-secondary:active { background: #f0f0f0; }

.btn-danger {
  width: 100%; padding: 12px; background: none; color: #c00;
  border: 1px solid #fcc; border-radius: 8px; font-size: 14px; cursor: pointer; margin-top: 4px;
}
.btn-danger:active { background: #fff0f0; }

.btn-group { display: flex; gap: 8px; }
.btn-group button { flex: 1; margin: 0; }

.result-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px; margin-bottom: 6px;
}
.result-row-name { font-size: 15px; }
.result-row-amount { font-size: 17px; font-weight: 500; }

.total-row {
  display: flex; justify-content: space-between; align-items: center;
  background: #eaf7f2; border: 1px solid #b2dece; border-radius: 8px; padding: 12px 14px; margin-bottom: 6px;
}
.total-row-label { font-size: 13px; color: #555; }
.total-row-amount { font-size: 20px; font-weight: 500; color: #1D9E75; }

.extras-section {
  background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px;
  font-size: 14px; color: #555; display: flex; flex-direction: column; gap: 6px; margin-top: 6px;
}

.row-limitierend { border-color: #E8A020; }
.row-rest { border-color: #2D9E5A; }
.result-row[data-check] { cursor: pointer; }
.row-checked { opacity: 0.4; border-color: #ddd; }
.row-checked .result-row-name, .row-checked .result-row-amount { text-decoration: line-through; }

/* Mengenanpassung */
.qty-input {
  width: 80px; text-align: right; font-size: 17px; padding: 6px 8px;
  border: 1px solid #1D9E75; border-radius: 6px; background: #f0faf6;
}
.qty-input:focus { outline: none; background: #fff; }

/* Editor */
.editor-field { margin-bottom: 12px; }
.editor-field label {
  display: block; font-size: 12px; color: #888; margin-bottom: 4px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.editor-field input {
  width: 100%; padding: 10px 12px; font-size: 15px;
  border: 1px solid #e0e0e0; border-radius: 8px; background: #fff;
}
.editor-field input:focus { outline: none; border-color: #1D9E75; }

.editor-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.editor-row input[type=text] {
  flex: 1; padding: 8px 10px; font-size: 14px;
  border: 1px solid #e0e0e0; border-radius: 6px;
}
.editor-row input[type=number] {
  width: 70px; padding: 8px; font-size: 14px; text-align: right;
  border: 1px solid #e0e0e0; border-radius: 6px;
}
.editor-row input:focus { outline: none; border-color: #1D9E75; }

.btn-add { width: 100%; margin-bottom: 4px; font-size: 14px; padding: 8px; }
.btn-remove {
  background: none; border: none; color: #aaa; font-size: 18px;
  cursor: pointer; padding: 4px 6px; line-height: 1; flex-shrink: 0;
}
.btn-remove:active { color: #c00; }

.error-msg { color: #c00; font-size: 14px; text-align: center; margin-bottom: 8px; }