:root {
  --bg: #f5f3ef;
  --white: #ffffff;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --text-light: #9a9a9a;
  --border: #e8e4dc;
  --green: #3d7a5a;
  --green-hover: #2d6048;
  --radius-card: 14px;
  --radius-sm: 14px;
  --radius-pill: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,0.07);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.13);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ── iOS: kein Reinzoomen bei Eingabefeldern, kein Glas-Look bei Dropdowns ── */
input:not(.filter-edit-input):not(.filter-edit-group-name):not(.search-input), textarea, select {
  font-size: 16px !important;
  -webkit-appearance: none;
  appearance: none;
}
.search-input {
  font-size: 0.9rem;
  -webkit-appearance: none;
  appearance: none;
}
.filter-edit-input, .filter-edit-group-name {
  -webkit-appearance: none;
  appearance: none;
}
select {
  background-color: #fff;
}
/* Checkboxen vom appearance-Reset ausnehmen */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: auto !important;
  appearance: auto !important;
  font-size: inherit !important;
  border-radius: inherit;
}

/* ── TOP NAVBAR ── */
.app-navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9900099;
  height: 56px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
}
.app-navbar-inner {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
}
.app-navbar-left { display: flex; align-items: center; gap: 14px; }
.app-navbar-logo { display: flex; align-items: center; gap: 8px; }
.app-navbar-logo-text {
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em;
}
.app-sidebar-toggle {
  width: 36px; height: 36px; border-radius: 8px; border: none;
  background: transparent; cursor: pointer; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.app-sidebar-toggle:hover { background: var(--bg); color: var(--text); }
.app-navbar-right { display: flex; align-items: center; gap: 8px; }
/* Navbar user avatar */
.app-navbar-user-wrap { position: relative; }
.app-navbar-user {
  width: 36px; height: 36px; border-radius: 50%;
  border: none; background: var(--green);
  cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700;
  transition: background 0.15s;
}
.app-navbar-user:hover { background: var(--green-hover); }
.app-user-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); min-width: 190px; z-index: 2000; padding: 4px 0;
}
.app-user-menu.open { display: block; }
.app-user-menu-username {
  padding: 10px 14px 8px; font-size: 0.78rem; color: var(--text-muted);
  border-bottom: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.app-user-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text);
  text-align: left; transition: background 0.12s;
}
.app-user-menu-item:hover { background: var(--bg); }
.app-user-menu-item.danger { color: #d93025; }
.app-user-menu-item.danger:hover { background: #fef2f2; }

/* Sidebar user block */
.app-sidebar-user-wrap { position: relative; }
.app-sidebar-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px; width: 100%;
  border: none; background: var(--bg); cursor: pointer;
  text-align: left; transition: background 0.15s; margin-bottom: 0;
}
.app-sidebar-user:hover { background: #e8e4dc; }
.app-sidebar-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.app-sidebar-user-name {
  font-size: 0.86rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-sidebar-user-role {
  font-size: 0.7rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.app-sidebar-user-menu {
  display: none; position: absolute; bottom: calc(100% + 4px); left: 0; right: 0;
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1); z-index: 100; padding: 4px 0; overflow: hidden;
}
.app-sidebar-user-menu.open { display: block; }
.app-sidebar-user-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 14px; border: none; background: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text);
  text-align: left; transition: background 0.12s;
}
.app-sidebar-user-menu-item:hover { background: var(--bg); }
.app-sidebar-user-menu-item.danger { color: #d93025; }
.app-sidebar-user-menu-item.danger:hover { background: #fef2f2; }

/* ── APP SIDEBAR ── */
.app-sidebar {
  position: fixed; top: 56px; left: 0; bottom: 0; z-index: 9900098;
  width: 245px;
  background: var(--white);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.app-sidebar.open { transform: translateX(0); }
.app-sidebar-inner {
  display: flex; flex-direction: column; height: 100%; padding: 12px 8px;
}
.app-sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.app-sidebar-footer { padding-top: 12px; border-top: 1px solid var(--border); }
.app-sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border: none;
  background: transparent; cursor: pointer; width: 100%; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 500;
  color: var(--text-muted); transition: all 0.15s;
  position: relative; text-decoration: none;
}
.app-sidebar-item:hover { background: var(--bg); color: var(--text); }
.app-sidebar-item.active { background: #edf5f0; color: var(--green); font-weight: 600; }
.app-sidebar-item.active svg { stroke: var(--green); }
.app-sidebar-item.soon { opacity: 0.6; cursor: default; }
.app-sidebar-item.soon:hover { background: transparent; color: var(--text-muted); }
.app-sidebar-badge {
  margin-left: auto; font-size: 0.68rem; font-weight: 600;
  background: #f0f0f0; color: var(--text-muted);
  padding: 2px 7px; border-radius: 20px;
}
.app-sidebar-overlay {
  display: none; position: fixed; inset: 0; z-index: 9900097;
  background: rgba(0,0,0,0.25);
  top: 56px;
}
.app-sidebar-overlay.visible { display: block; }

.page { max-width: 2000px; margin: 0 auto; padding: 104px 45px 80px; }

/* ─── PAGE HEADER ─── */
.page-header {
  margin-bottom: 32px;
}
.page-header h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.page-header .subtitle { font-size: 0.95rem; color: var(--text-muted); margin-top: 6px; }
.subtitle-dot { font-size: 1.2rem; line-height: 1; vertical-align: middle; margin: 0 5px; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: all 0.18s; border: none;
}
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-hover); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(61,122,90,0.3); }
.btn-sm { padding: 7px 14px; font-size: 0.82rem; }
.btn-danger { background: #fff; color: #d93025; border: 1.5px solid #f0c0bb; }
.btn-danger:hover { background: #fdf0ef; }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: var(--green-hover); }
.btn-ghost { background: #fff; color: var(--text-muted); border: 1.5px solid var(--border); }
.btn-ghost:hover { background: var(--bg); }

/* ─── TOOLBAR ─── */
.toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 30px; /* scrollt normal mit */ }

.search-wrap { position: relative; flex: 1; }
.search-wrap svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-light); pointer-events: none;
}
.search-input {
  width: 100%; padding: 11px 14px 11px 42px;
  border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
  background: var(--white); color: var(--text);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.search-input::placeholder { color: var(--text-light); }
.search-input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,122,90,0.1); }

/* ─── CUSTOM CATEGORY DROPDOWN ─── */
.cat-dropdown-wrap { position: relative; flex-shrink: 0; }
.cat-dropdown-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-pill);
  background: var(--white); font-family: 'Inter', sans-serif; font-size: 0.9rem;
  color: var(--text); cursor: pointer; transition: border-color 0.18s; white-space: nowrap;
  min-width: 180px; justify-content: space-between;
}
.cat-dropdown-trigger:hover { border-color: #bbb; }
.cat-dropdown-trigger.open { border-color: var(--green); box-shadow: 0 0 0 3px rgba(61,122,90,0.1); }
.cat-dropdown-trigger svg { flex-shrink: 0; color: var(--text-light); transition: transform 0.2s; }
.cat-dropdown-trigger.open svg { transform: rotate(180deg); }

.cat-dropdown-panel {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--white); border: 1.5px solid var(--border); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 50;
  min-width: 260px; overflow: hidden;
  animation: dropDown 0.18s cubic-bezier(.22,1,.36,1);
}
.cat-dropdown-panel.open { display: block; }
@keyframes dropDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.cat-panel-header {
  padding: 12px 14px 8px; font-size: 0.72rem; font-weight: 700;
  color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em;
  border-bottom: 1px solid var(--border);
}

.cat-option-list { max-height: 260px; overflow-y: auto; padding: 6px 0; }
.cat-option {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; cursor: pointer; transition: background 0.12s;
}
.cat-option:hover { background: var(--bg); }
.cat-option.selected { background: #edf5f0; }
.cat-option-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cat-option-label { flex: 1; font-size: 0.9rem; color: var(--text); }
.cat-option-check { display: none; }

.cat-option-actions { display: flex; gap: 4px; opacity: 0; transition: opacity 0.15s; }
.cat-option:hover .cat-option-actions { opacity: 1; }
.cat-opt-btn {
  width: 24px; height: 24px; border-radius: 6px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.78rem; transition: all 0.12s;
}
.cat-opt-btn.edit { background: #f0f0f0; color: #555; }
.cat-opt-btn.edit:hover { background: #e0e0e0; }
.cat-opt-btn.del { background: #ffeeed; color: #d93025; }
.cat-opt-btn.del:hover { background: #ffd9d7; }

/* inline rename */
.cat-option input.rename-input {
  flex: 1; border: 1px solid var(--green); border-radius: 6px;
  padding: 2px 7px; font-family: 'Inter', sans-serif; font-size: 0.9rem;
  color: var(--text); background: #fff; outline: none;
}

.cat-panel-footer {
  border-top: 1px solid var(--border); padding: 10px 14px;
  display: flex; gap: 8px;
}
.cat-panel-footer input {
  flex: 1; padding: 7px 11px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text); background: var(--bg);
}
.cat-panel-footer input:focus { outline: none; border-color: var(--green); background: #fff; }
.cat-add-btn {
  padding: 7px 14px; background: var(--green); color: #fff; border: none;
  border-radius: var(--radius-sm); font-family: 'Inter', sans-serif;
  font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap;
}
.cat-add-btn:hover { background: var(--green-hover); }

/* ─── GRID ─── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 24px; align-items: start; width: 100%; }
.grid > .card { max-width: 100%; }

/* ─── CARD ─── */
.card {
  background: var(--white); border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  transition: box-shadow 0.22s, transform 0.22s;
  animation: fadeUp 0.3s cubic-bezier(.22,1,.36,1) both;
  position: relative;
  max-width: 636px;
}
.card:not(.editing) { overflow: hidden; }
.card.editing { overflow: visible; transform: none !important; will-change: unset !important; animation: none !important; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.card:not(.editing):hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.card.editing { box-shadow: 0 0 0 2.5px var(--green), var(--shadow-hover); }
.card.deleting { animation: shrinkOut 0.28s forwards; }
@keyframes shrinkOut { to { opacity: 0; transform: scale(0.9); } }

/* action buttons top-right, shown on hover */
.card-actions {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; gap: 6px;
}
.card-action-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.15s;
}
.card-action-btn:hover { background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,0.2); }
.card-action-btn.fav { color: var(--green); }
.card-action-btn.fav.active { color: var(--green); }
.card-action-btn.fav:hover { color: var(--green); }

/* IMAGE */
.card-img-wrap { position: relative; width: 100%; aspect-ratio: 310 / 210; overflow: hidden; background: #ede8e0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-img-wrap img.with-crop { display: block; }
.card:not(.editing):hover .card-img-wrap img { transform: scale(1.05); }
.card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: #bbb; }

.cat-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  padding: 5px 10px; border-radius: 14px;
  font-size: 0.75rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.cat-badge-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}

/* BODY */
.card-body { padding: 16px 18px 18px; }
.card-title { font-family: Mato-Medium, Mato, -apple-system, system-ui, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, Helvetica, Arial; font-size: 1.1rem; font-style: normal; font-weight: 700; line-height: 1.35; text-align: left; text-decoration: none; word-break: break-word; margin-bottom: 0;
}
.card-cat-row {
  display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden;
  margin-top: 10px; margin-bottom: 10px; align-items: center;
  position: relative; z-index: 5;
  height: 24px; flex-shrink: 0;
}
.card-cat-badge {
  display: inline-block;
  padding: 3px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 500;
  background: #f0f0f0; color: #555;
  border: 1px solid #e0e0e0;
  letter-spacing: 0.01em;
}
.edit-cat-select {
  padding: 3px 10px; border-radius: 20px;
  font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 500;
  cursor: pointer; outline: none; appearance: none;
  background: #f0f0f0; color: #555; border: 1px solid #e0e0e0;
  box-sizing: border-box; display: inline-block; vertical-align: middle;
}
.card-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--text-muted);
  border-top: 2px solid var(--border); padding-top: 13px;
}
.meta-item { display: flex; align-items: center; gap: 4px; }
.meta-item svg { color: var(--green); flex-shrink: 0; width: 14px; height: 14px; }
.meta-icon { width: 14px; text-align: center; font-size: 12px; flex-shrink: 0; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.meta-item > svg, .meta-item > span:first-child { width: 16px; text-align: center; display: inline-flex; justify-content: center; flex-shrink: 0; }

/* EDIT IMAGE OVERLAY */
.card-img-edit-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  display: flex; flex-direction: row;
  align-items: center; justify-content: center; gap: 8px;
  padding: 8px;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
  z-index: 2;
}
.card-img-edit-overlay img { display: none; }
.img-btn {
  position: relative; z-index: 1; padding: 6px 14px;
  background: rgba(255,255,255,0.92); border: none; border-radius: var(--radius-pill);
  cursor: pointer; font-family: 'Inter', sans-serif; font-size: 0.8rem;
  font-weight: 600; color: var(--text); transition: background 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.img-btn:hover { background: #fff; }
.img-btn.danger { background: rgba(220,50,40,0.88); color: #fff; }
.img-btn.danger:hover { background: rgba(200,30,20,0.95); }
/* TAG CHIPS */
.card-tag-chip {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 500;
  background: #edf5f0; color: var(--green);
  border: 1px solid #c8e6d0; letter-spacing: 0.01em;
  white-space: nowrap; flex-shrink: 0;
}
.card-tag-overflow {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 600;
  background: #f0f0f0; color: #666;
  border: 1px solid #e0e0e0; cursor: pointer;
  white-space: nowrap; position: relative;
}
.card-tag-overflow:hover { background: #e8e8e8; }
.tag-overflow-popup {
  position: absolute;
  left: 18px; right: 18px;
  z-index: 10;
  background: transparent;
  padding: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
  animation: fadeUp 0.18s cubic-bezier(.22,1,.36,1);
}
.tag-overflow-popup .card-tag-chip {
  display: inline-flex;
}
/* TAG EDIT PICKER */
.tag-edit-row {
  display: flex; flex-wrap: nowrap; gap: 5px; align-items: center;
  height: 28px; overflow: hidden;
  margin-top: 6px; margin-bottom: 10px;
}
.tag-edit-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 500;
  background: #edf5f0; color: var(--green);
  border: 1px solid #c8e6d0;
  white-space: nowrap; flex-shrink: 0;
}
.tag-edit-chip-remove {
  background: none; border: none; cursor: pointer;
  color: var(--green); padding: 0; line-height: 1;
  font-size: 0.75rem; display: flex; align-items: center;
}
.tag-edit-overflow {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.7rem; font-weight: 600;
  background: #f0f0f0; color: #666;
  border: 1px solid #e0e0e0; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
}
.tag-edit-overflow:hover { background: #e8e8e8; }
.tag-add-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 2px 9px; border-radius: 20px;
  background: none; border: 1.5px dashed var(--border);
  color: var(--text-muted); cursor: pointer;
  font-size: 0.72rem; font-weight: 600; font-family: inherit;
  line-height: 1; white-space: nowrap;
  transition: all 0.15s; flex-shrink: 0;
}
.tag-add-btn:hover { border-color: var(--green); color: var(--green); background: #f6faf6; }
.tag-picker-wrap { position: relative; display: inline-block; }
.tag-picker-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 99000;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 10px; padding: 4px 0 0; box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  min-width: 200px; display: flex; flex-direction: column;
}
/* Step-Zutaten/Utensilien-Picker: alles anzeigen ohne Scroll */
[id^="dp-step-ing-picker-"] .tag-picker-scroll,
[id^="dp-step-uten-picker-"] .tag-picker-scroll { overflow-y: visible; }
/* Andere Picker (Tags etc.) behalten max-height */
.tag-picker-dropdown:not([id^="dp-step-"]) { max-height: 280px; }
.tag-picker-dropdown:not([id^="dp-step-"]) .tag-picker-scroll { overflow-y: auto; }
.tag-picker-scroll { flex: 1; }
.tag-picker-footer {
  padding: 6px 8px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; flex-shrink: 0;
}
.tag-picker-done {
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--green); color: #fff; border: none; cursor: pointer;
  transition: background 0.12s;
}
.tag-picker-done:hover { background: var(--green-hover); }
.tag-picker-group-label {
  font-size: 0.67rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 8px 12px 3px; border-top: 1px solid var(--border); margin-top: 2px;
}
.tag-picker-group-label:first-child { border-top: none; margin-top: 0; }
.tag-picker-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 12px; cursor: pointer; font-size: 0.82rem; color: var(--text);
  transition: background 0.1s; user-select: none;
}
.tag-picker-item:hover { background: #f2faf4; }
.tag-picker-item input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--green);
  cursor: pointer; flex-shrink: 0;
}
.tag-picker-item.checked { font-weight: 600; color: var(--green); }
.bulk-tag-item.mixed { color: #b07800; }
.bulk-tag-item.mixed input[type=checkbox] { opacity: 0.5; }


/* ─── CARD STATUS TAB (top-left corner) ─── */
.card-status-tab {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: flex; flex-direction: row; gap: 5px;
  flex-wrap: wrap;
}
.card-status-tab-item {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 20px;
  font-size: 0.93rem; font-weight: 700; letter-spacing: 0.01em;
  white-space: nowrap; line-height: 1.6;
  box-shadow: 0 1px 4px rgba(0,0,0,0.13);
}
.card-status-tab-item.new   { background: #fff8e6; color: #b45309; border: 1px solid #fcd88a; }
.card-status-tab-item.nocat { background: #f1f1f2; color: #4b5563; border: 1px solid #d1d5db; }

input[type="file"] { display: none; }

/* INLINE EDIT INPUTS */
.cat-badge-select {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  padding: 5px 10px; border-radius: 14px; border: 1.5px solid;
  font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; -webkit-appearance: none; appearance: none; outline: none;
  background: var(--white);
}
.edit-save-actions {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  display: flex; gap: 6px;
}
.edit-action-btn {
  width: 36px; height: 36px; border-radius: 14px; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: all 0.15s;
}
.edit-action-btn.cancel { background: rgba(255,255,255,0.95); color: #888; }
.edit-action-btn.cancel:hover { background: #fff; color: #333; }
.edit-action-btn.save { background: var(--green); color: #fff; }
.edit-action-btn.save:hover { background: var(--green-hover); }

.edit-title-input {
  flex: 1; min-width: 0; box-sizing: border-box;
  font-family: Mato-Medium, Mato, -apple-system, system-ui, 'Segoe UI', Roboto, Ubuntu, Cantarell, 'Noto Sans', sans-serif, Helvetica, Arial;
  font-size: 1.1rem; font-weight: 700;
  color: var(--text); border: none; border-radius: 6px;
  background: transparent;
  box-shadow: 0 0 0 2px var(--green) inset;
  padding: 0; margin: 0; display: block;
  line-height: 1.35; resize: none; overflow: hidden;
  min-height: calc(1.1rem * 1.35 * 1);
  height: auto;
}
.edit-title-error {
  font-size: 0.75rem; color: #e8352a; margin-top: 2px; margin-bottom: 4px;
  display: none; line-height: 1.2;
}
.edit-title-error.visible { display: block; }

.edit-desc-input {
  width: 100%; font-family: 'Inter', sans-serif; font-size: 0.87rem;
  color: var(--text-muted); border: none; border-radius: 6px;
  background: transparent; box-shadow: 0 0 0 2px var(--green) inset;
  line-height: 1.55; margin-top: 8px; margin-bottom: 14px; padding: 0;
  white-space: pre-wrap; word-break: break-word; cursor: text;
}

.edit-meta-input {
  font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text-muted);
  border: none; background: transparent;
  outline: none; width: 52px; padding: 0; margin: 0; line-height: inherit;
}
.edit-meta-input::placeholder { color: var(--text-muted); opacity: 0.6; }


/* ─── DELETE CONFIRM ─── */
.delete-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
}
.delete-overlay.open { display: flex; }
#section-clear-overlay { z-index: 3500; }
.delete-modal {
  background: var(--white); border-radius: 18px; padding: 28px 28px 22px;
  width: min(360px, 92vw); box-shadow: 0 24px 80px rgba(0,0,0,0.18);
  animation: popIn 0.2s cubic-bezier(.22,1,.36,1) both; text-align: center;
}
.delete-modal .del-icon { font-size: 2.2rem; margin-bottom: 12px; }
.delete-modal h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.delete-modal p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 22px; line-height: 1.5; }
.delete-modal-actions { display: flex; gap: 10px; justify-content: center; }
.del-btn {
  padding: 10px 24px; border-radius: var(--radius-pill); font-family: 'Inter', sans-serif;
  font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s;
}
.del-btn.cancel { background: #f0f0f0; color: #555; }
.del-btn.cancel:hover { background: #e0e0e0; color: #222; }
.del-btn.confirm { background: #e8352a; color: #fff; }
.del-btn.confirm:hover { background: #c92d22; }

/* ─── SELECT MODE ─── */
.btn-select { background: var(--white); color: var(--text); border: 1.5px solid var(--border); }
.btn-select:hover { background: var(--bg); border-color: #bbb; }
.btn-select.active { background: #edf5f0; color: var(--green); border-color: var(--green); }
.btn-scan { background: var(--white); color: var(--green); border: 1.5px solid var(--green); }
.btn-scan:hover:not(:disabled) { background: #edf5f0; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(61,122,90,0.18); }
.btn-scan:disabled { opacity: 0.4; cursor: not-allowed; }

.select-bar {
  display: none; align-items: center; gap: 10px;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--radius-pill); padding: 8px 16px;
  box-shadow: var(--shadow); margin-bottom: 20px;
  flex-wrap: nowrap;
  overflow: hidden;
  position: sticky;
  top: 12px;
  z-index: 90;
}
.select-bar.open { display: flex; animation: fadeUp 0.2s cubic-bezier(.22,1,.36,1) both; }
.select-bar-count { font-size: 0.9rem; font-weight: 600; color: var(--text); flex-shrink: 0; white-space: nowrap; }
.select-bar-spacer { flex: 1; min-width: 10px; }
.select-bar-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.15s; flex-shrink: 0;
  white-space: nowrap;
}
.select-bar-btn span { display: inline; }
/* Progressive text hiding is handled by JS checkSelectBarCompact() — no static CSS breakpoint needed */
.select-bar-btn.edit { background: #f0f0f0; color: var(--text); }
.select-bar-btn.edit:hover { background: #e0e0e0; }
.select-bar-btn.tag { background: #e8f0ff; color: #3a5ec9; }
.select-bar-btn.tag:hover { background: #d4e0fa; }
.select-bar-btn.tag:disabled { opacity: 0.45; cursor: not-allowed; }
.select-bar-btn.del { background: #ffeeed; color: #d93025; }
.select-bar-btn.del:hover { background: #ffd9d7; }
.select-bar-btn.save { background: var(--green); color: #fff; }
.select-bar-btn.save:hover { background: var(--green-hover); }
.select-bar-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.select-bar-btn.perm-blocked { opacity: 0.45; cursor: not-allowed; position: relative; }
.select-bar-btn.perm-blocked::after { content: ' 🔒'; font-size: 0.75em; }

/* Checkbox overlay on card */
.card-checkbox {
  display: none;
  position: absolute; top: 12px; right: 12px; z-index: 10;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.95); border: 2px solid #ccc;
  align-items: center; justify-content: center;
  cursor: pointer; transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.select-mode .card-checkbox { display: flex; }
.select-mode .card { cursor: pointer; }
.select-mode .card-actions { display: none; }
.card.selected .card-checkbox {
  background: var(--green); border-color: var(--green); color: #fff;
}
.card.selected { box-shadow: 0 0 0 2.5px var(--green), var(--shadow); }
.select-mode .card:not(.editing):hover { transform: none; box-shadow: var(--shadow); }
.select-mode .card.selected:hover { box-shadow: 0 0 0 2.5px var(--green), var(--shadow); transform: none; }
.select-mode .card-checkbox.locked { display: flex; background: rgba(200,200,200,0.7); border-color: #bbb; color: #aaa; cursor: not-allowed; pointer-events: none; }
.select-mode .card:has(.card-checkbox.locked) { cursor: default; }
.select-mode .card:has(.card-checkbox.locked):hover { transform: none; box-shadow: var(--shadow); }


/* ─── MULTI-EDIT MODE (mehrere Karten gleichzeitig) ─── */
/* Karten-eigene ✕/✓-Buttons bleiben sichtbar — zusätzlich gibt es Alle speichern/abbrechen in der Bar */

.select-all-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.15s;
  background: #edf5f0; color: var(--green); flex-shrink: 0;
}
.select-all-btn { white-space: nowrap; }
.select-all-btn:hover { background: #daeee3; }

/* EMPTY */
.empty-state {
  grid-column: 1/-1; text-align: center; padding: 90px 20px; color: var(--text-light);
}
.empty-state .icon { font-size: 3.5rem; margin-bottom: 14px; display: block; opacity: 0.5; }
.empty-state h3 { font-size: 1.3rem; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }

/* ─── MODAL ─── */
@keyframes popIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ══════════════════════════════════════════
   RESPONSIVE SYSTEM
   Breakpoints:
   - 1024px : tablet landscape
   -  768px : tablet portrait
   -  600px : large phone
   -  480px : small phone
   -  360px : very small phone
   ══════════════════════════════════════════ */

/* Fluid base font: 14px (360px) → 16px (1200px+) */
html { font-size: clamp(14px, 1.2vw + 11px, 16px); }

@media (max-width: 1024px) {
  .page { padding: 92px 20px 80px; }
}
@media (max-width: 600px) {
  .page { padding: 92px 14px 80px; }
  .page-header { margin-bottom: 16px; gap: 8px; }
  .page-header h1 { font-size: 1.55rem; }
  .page-header .subtitle { font-size: 0.8rem; margin-top: 3px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .cat-dropdown-wrap { width: 100%; }
}
@media (max-width: 480px) {
  .page { padding: 92px 12px 80px; }
  .page-header h1 { font-size: 1.25rem; }
  .page-header .subtitle { font-size: 0.72rem; }
}


/* ─── CROP MODAL ─── */
.crop-overlay {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.75); align-items: center; justify-content: center;
}
.crop-overlay.open { display: flex; }
.crop-modal {
  background: #222; border-radius: 18px; overflow: hidden;
  width: min(500px, 96vw);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
}
.crop-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid #333;
}
.crop-title { color: #fff; font-weight: 600; font-size: 0.95rem; }
.crop-header-btns { display: flex; gap: 10px; }
.crop-btn-cancel {
  background: #444; color: #ddd; border: none; border-radius: 20px;
  padding: 6px 16px; font-size: 0.9rem; cursor: pointer;
  font-family: inherit;
}
.crop-btn-cancel:hover { background: #555; }
.crop-btn-confirm {
  background: var(--green); color: #fff; border: none; border-radius: 20px;
  padding: 6px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.crop-btn-confirm:hover { filter: brightness(1.1); }

/* The viewport — larger than the frame so grey padding is visible */
.crop-viewport-wrap {
  background: #111;
  padding: 32px 0;
  width: 100%;
}
.crop-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 310 / 210;  /* exact card image ratio */
  background: #000;
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.crop-viewport:active { cursor: grabbing; }

/* The actual image — moved/scaled via JS inline style */
.crop-img {
  position: absolute;
  transform-origin: 0 0;
  pointer-events: none;
  /* no width/height set here, controlled by JS */
}

/* Semi-transparent overlay with a hole = the card frame */
.crop-shadow {
  position: absolute; inset: 0;
  pointer-events: none;
  /* four dark rects drawn via box-shadow isn't reliable — use SVG overlay instead */
}

/* thin white border around the viewport = card frame */
.crop-viewport::after {
  content: ""; position: absolute; inset: 0;
  border: 3px solid #fff;
  pointer-events: none; box-sizing: border-box;
  z-index: 10;
}

.crop-zoom-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; color: #888;
}
#crop-zoom { flex: 1; accent-color: var(--green); cursor: pointer; height: 4px; }

/* ─── LAYOUT WITH SIDEBAR ─── */
.main-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

/* ─── FILTER SIDEBAR ─── */
.filter-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  padding: 18px 0 18px;
  /* kein sticky: scrollt normal mit der Seite */
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c8c0b4 transparent;
}
.filter-sidebar::-webkit-scrollbar { width: 8px; }
.filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.filter-sidebar::-webkit-scrollbar-thumb { background: #c8c0b4; border-radius: 4px; }
.filter-sidebar::-webkit-scrollbar-thumb:hover { background: #a89e94; }
.filter-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.filter-sidebar-title {
  font-size: 0.88rem; font-weight: 700; color: var(--text);
  letter-spacing: 0.01em;
}
.filter-clear-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  padding: 5px 10px; border-radius: var(--radius-pill);
  background: var(--green); color: #fff; border: none;
  cursor: pointer; transition: all 0.15s;
}
.filter-clear-btn:hover { background: var(--green-hover); }
.filter-clear-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.filter-clear-btn:disabled:hover { background: var(--green); }

/* Group — normal mode */
.filter-group { margin-bottom: 2px; }
.filter-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; cursor: pointer; user-select: none;
  font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
}
.filter-group-header:hover { color: var(--text); }
.filter-group-chevron {
  transition: transform 0.2s; color: var(--text-muted); flex-shrink: 0;
}
.filter-group.collapsed .filter-group-chevron { transform: rotate(-90deg); }
.filter-group-items { padding: 2px 0 6px; }
.filter-group.collapsed .filter-group-items { display: none; }

/* Filter item — normal mode */
.filter-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 6px 20px; cursor: pointer;
  font-size: 0.85rem; color: var(--text);
  transition: background 0.12s; position: relative;
}
.filter-item:hover { background: var(--bg); }
.filter-item input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--green);
  cursor: pointer; flex-shrink: 0; margin: 0;
}
.filter-item-label { flex: 1; }

/* Edit mode */
.filter-sidebar.edit-mode .filter-group-header { cursor: default; }
.filter-sidebar.edit-mode .filter-item { cursor: default; }
.filter-sidebar.edit-mode .filter-item:hover { background: none; }
.filter-sidebar.edit-mode .filter-item input[type=checkbox] { opacity: 0.3; cursor: default; pointer-events: none; }

.filter-edit-input {
  flex: 1; font-size: 0.85rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: 6px;
  padding: 3px 8px; outline: none; background: var(--bg);
  color: var(--text); min-width: 0;
}
.filter-edit-input:focus { border-color: var(--green); background: #fff; }

.filter-edit-group-name {
  flex: 1; font-size: 0.8rem; font-family: inherit; font-weight: 700;
  border: 1.5px solid var(--border); border-radius: 6px;
  padding: 3px 8px; outline: none; background: var(--bg);
  color: var(--text-muted);
  min-width: 0;
}
.filter-edit-group-name:focus { border-color: var(--green); background: #fff; }

.fg-del-btn {
  flex-shrink: 0; background: none; border: 1.5px solid #f0c0bb;
  color: #e8352a; border-radius: 6px; cursor: pointer;
  width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s; font-family: inherit;
}
.fg-del-btn:hover { background: #fff0ef; border-color: #e8352a; }

.filter-add-item-btn {
  display: flex; align-items: center; gap: 5px;
  margin: 4px 16px 0 20px; padding: 5px 10px;
  background: none; border: 1.5px dashed var(--border); border-radius: 6px;
  font-size: 0.8rem; color: var(--text-muted); cursor: pointer;
  font-family: inherit; font-weight: 500; transition: all 0.12s;
  width: calc(100% - 36px);
}
.filter-add-item-btn:hover { border-color: var(--green); color: var(--green); background: #f6faf6; }

.filter-add-group-wrap {
  padding: 10px 16px 10px; margin-top: 10px; display: none;
}
.filter-add-group-wrap.visible { display: block; }
.filter-add-group-btn-new {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 6px 10px; background: none; border: 1.5px dashed var(--border);
  border-radius: 6px; font-size: 0.82rem; color: var(--text-muted);
  cursor: pointer; font-family: inherit; font-weight: 500; transition: all 0.12s;
}
.filter-add-group-btn-new:hover { border-color: var(--green); color: var(--green); background: #f6faf6; }

/* Sidebar edit toggle button */
.filter-edit-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  cursor: pointer; border-radius: var(--radius-pill);
  transition: all 0.12s; border: 1.5px solid var(--border);
  background: none; color: var(--text-muted); flex-shrink: 0;
}
.filter-edit-toggle:hover { border-color: var(--text-muted); color: var(--text); }
.filter-edit-toggle.active { border-color: var(--green); color: var(--green); background: #edf5f0; }
.filter-edit-toggle.active:hover { background: var(--green); color: #fff; }

.filter-edit-cancel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  cursor: pointer; border-radius: var(--radius-pill);
  transition: all 0.12s; border: 1.5px solid var(--border);
  background: none; color: var(--text-muted); flex-shrink: 0;
}
.filter-edit-cancel:hover { border-color: #d93025; color: #d93025; }

.filter-item-count {
  margin-left: auto; font-size: 0.72rem; color: var(--text-muted);
  background: var(--bg); border-radius: 10px; padding: 0 5px;
  min-width: 18px; text-align: center; flex-shrink: 0;
}
.filter-item-dim { opacity: 0.38; pointer-events: none; }
.filter-item-dim input { cursor: not-allowed; }

/* Drag handle */
.drag-handle {
  flex-shrink: 0; width: 20px; height: 26px; cursor: grab;
  display: flex; align-items: center; justify-content: center;
  color: #ccc; border-radius: 4px; transition: color 0.12s;
  touch-action: none;
}
.drag-handle:hover { color: #999; }
.drag-handle:active { cursor: grabbing; }

/* Dragging states */
.filter-dragging { opacity: 0.4; }
.filter-drag-over-top { border-top: 2px solid var(--green) !important; }
.filter-drag-over-bottom { border-bottom: 2px solid var(--green) !important; }

/* Content area */
.content-area { flex: 1; min-width: 0; }

/* ── Main layout: filter sidebar stacks on mobile ── */
@media (max-width: 768px) {
  .main-layout { flex-direction: column; gap: 16px; }
  .filter-sidebar { width: 100%; position: static; top: auto; }
  .content-area { width: 100%; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
}

/* ── Header buttons: hide label text on small screens ── */
@media (max-width: 600px) {
  #select-btn .btn-label,
  #new-recipe-btn .btn-label { display: none; }
  #select-btn, #new-recipe-btn { padding: 10px 12px; }
}

/* select-bar compact mode — progressive text hiding */
.btn-text { display: inline; }


/* ═══════════════ DETAIL PAGE ═══════════════ */
#detail-overlay {
  position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  overflow-y: scroll; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c8c0b4 transparent;
}
#detail-overlay::-webkit-scrollbar { width: 8px; }
#detail-overlay::-webkit-scrollbar-track { background: transparent; }
#detail-overlay::-webkit-scrollbar-thumb { background: #c8c0b4; border-radius: 4px; }
#detail-overlay::-webkit-scrollbar-thumb:hover { background: #a89e94; }
#detail-overlay.open { opacity: 1; pointer-events: auto; }
body.detail-open { overflow: hidden; scrollbar-gutter: auto; }
html.detail-open { overflow: hidden; scrollbar-gutter: auto; }
#detail-panel {
  width: 100%;
  display: flex; flex-direction: column;
  transform: translateY(32px);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1);
  overflow: visible;
  position: relative;
  max-width: 1250px;
}
#detail-overlay.open #detail-panel { transform: translateY(0); }

/* top nav bar */
.dp-nav {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 100%);
}
.dp-nav-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(8px);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.dp-nav-btn:hover { background: rgba(255,255,255,0.3); }
.dp-nav-actions { display: flex; gap: 8px; }
.dp-fav-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  color: var(--green); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.15s;
}
.dp-fav-btn:hover { background: #fff; box-shadow: 0 3px 14px rgba(0,0,0,0.2); }
.dp-edit-toggle {
  height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  color: var(--green); cursor: pointer; font-family: 'Inter',sans-serif;
  font-size: 0.9rem; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.15s;
}
.dp-edit-toggle:hover { background: #fff; border-color: var(--green); box-shadow: 0 3px 14px rgba(0,0,0,0.2); }
.dp-edit-toggle.save-mode { background: var(--green); color: #fff; border-color: var(--green); }
.dp-edit-toggle.save-mode:hover { background: var(--green-hover); border-color: var(--green-hover); }
.dp-cancel-btn {
  height: 40px; padding: 0 16px; border-radius: 20px;
  border: 1.5px solid transparent;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  color: var(--green); cursor: pointer; font-family: 'Inter',sans-serif;
  font-size: 0.9rem; font-weight: 600;
  display: none; align-items: center; gap: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  transition: all 0.15s;
}
.dp-cancel-btn:hover { background: #fff; border-color: var(--green); box-shadow: 0 3px 14px rgba(0,0,0,0.2); }
.dp-cancel-btn.visible { display: flex; }

/* gallery */
.dp-gallery {
  position: relative; width: 100%;
  flex-shrink: 0; overflow: hidden; background: #ede8e0;
  aspect-ratio: 310 / 210;
}

.dp-gallery-track {
  display: flex; height: 100%;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.dp-gallery-slide {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.dp-gallery-slide span {
  display: flex; align-items: center; justify-content: center;
}
.dp-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-gallery-placeholder { 
  font-size: 3.5rem;
  color: #bbb;
  opacity: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dp-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid #000;
  background: rgba(255, 255, 255, 0.85); cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; color: #000; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.dp-gallery-arrow:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.35); }
.dp-gallery-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
.dp-gallery-arrow.left { left: 14px; }
.dp-gallery-arrow.right { right: 14px; }
.dp-gallery-dots {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 3;
}
.dp-gallery-dot {
  width: 6px; height: 6px; border-radius: 3px; border: none; padding: 0;
  background: rgba(255,255,255,0.4); cursor: pointer;
  transition: all 0.2s;
}
.dp-gallery-dot.active { width: 20px; background: #fff; }
.dp-gallery-edit-bar {
  display: none; gap: 8px;
  flex-shrink: 0;
  flex-grow: 0;
  align-items: flex-end;
}
.dp-gallery-edit-bar.visible { display: flex; }
/* ── Bottom-Bar Wrapper: Datum + Bild-Buttons ── */
.dp-gallery-bottom-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.60));
  padding: 72px 14px 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.dp-gallery-bottom-bar .dp-gallery-edit-bar {
  pointer-events: all;
}
/* Labels-hidden: alle Beschriftungen gleichzeitig weg */
/* Bottom-bar: Button-Texte und Datumstext ausblenden, nur Icons */
.dp-gallery-bottom-bar.labels-hidden .btn-label { display: none; }
.dp-gallery-bottom-bar.labels-hidden .dp-gallery-img-btn { padding: 0 9px; }
/* Nav-bar: Bearbeiten/Abbrechen/Speichern nur noch Icon */
.dp-nav.labels-hidden .btn-label { display: none; }
.dp-nav.labels-hidden .dp-edit-toggle { padding: 0 10px; }
.dp-nav.labels-hidden .dp-cancel-btn { padding: 0 10px; }

.dp-gallery-img-btn {
  height: 32px; padding: 0 12px; border-radius: 16px; border: none;
  font-family: 'Inter',sans-serif; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: all 0.15s;
}
.dp-gallery-img-btn.add { background: rgba(255,255,255,0.9); color: var(--text); }
.dp-gallery-img-btn.del { background: rgba(217,48,37,0.85); color: #fff; }
.dp-gallery-img-btn.edit { background: var(--green); color: #fff; }
.dp-gallery-img-btn.edit:hover { background: var(--green-hover); }

/* scrollable content */
.dp-content {
  flex: 1; overflow: visible; background: var(--bg);
  display: flex; flex-direction: column; gap: 0; padding-bottom: 0;
}

/* hero info strip */
.dp-hero {
  background: var(--white);
  padding: 20px 20px 0;
  border-bottom: 1px solid var(--border);
}
.dp-hero-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.dp-title-wrap { flex: 1; min-width: 0; }
.dp-title {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.65rem; font-weight: 700; color: var(--text);
  line-height: 1.25; word-break: break-word;
}
.dp-title-input {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.65rem; font-weight: 700; color: var(--text);
  border: none; border-radius: 6px;
  box-shadow: 0 0 0 2px var(--green) inset;
  background: transparent; width: 100%; outline: none; padding: 4px 6px;
  line-height: 1.25;
  resize: none; overflow: hidden;
  display: block; box-sizing: border-box;
  min-height: calc(1.65rem * 1.25 + 4px);
}
.dp-cat-pill {
  display: inline-flex; align-items: center; margin-top: 7px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 0.78rem; font-weight: 600;
  background: #edf5f0; color: var(--green);
  border: 1.5px solid rgba(61,122,90,0.2);
}
.dp-cat-select {
  margin-top: 7px; padding: 4px 10px; border-radius: 20px;
  font-family: 'Inter',sans-serif; font-size: 0.78rem; font-weight: 600;
  background: #edf5f0; color: var(--green);
  border: 1.5px solid rgba(61,122,90,0.2); outline: none; cursor: pointer;
}

/* stats strip */
.dp-stats {
  display: flex; gap: 0; border-top: 1px solid var(--border); overflow-x: auto;
}
.dp-stat {
  flex: 1 1 auto; min-width: max-content; padding: 14px 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  border-right: 1px solid var(--border);
}
.dp-stat:last-child { border-right: none; }
.dp-stat-icon { color: var(--green); display: flex; justify-content: center; width: 100%; }
.dp-stat-val { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.dp-stat-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.dp-stat-input { font-size: 0.9rem; font-weight: 700; font-family: 'Inter',sans-serif; color: var(--text); border: none; border-bottom: 1.5px solid var(--green); background: transparent; outline: none; min-width: 4ch; text-align: center; padding: 0; }
.dp-stat-readonly { font-size: 0.9rem; font-weight: 700; color: var(--text); opacity: 0.6; }
.dp-serv-stepper { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.dp-serv-stepper--disabled .dp-serv-btn { border-color: var(--border); color: var(--text-muted); cursor: not-allowed; opacity: 0.45; }
.dp-serv-reset { margin-top: 4px; }
.dp-serv-reset-inline { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border); background: transparent; color: var(--text-muted); font-size: 0.9rem; cursor: pointer; padding: 0; transition: all 0.15s; flex-shrink: 0; }
.dp-serv-spacer { width: 24px; height: 24px; flex-shrink: 0; }
.dp-serv-reset-inline:hover:not(:disabled) { background: var(--green); color: #fff; border-color: var(--green); }
.dp-serv-reset-inline:disabled { opacity: 0.3; cursor: not-allowed; }
.dp-serv-stepper--disabled .dp-serv-btn:hover { background: transparent; color: var(--text-muted); }
.dp-serv-btn {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--green);
  background: transparent; color: var(--green); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; line-height: 1;
  transition: all 0.15s; flex-shrink: 0; padding: 0;
}
.dp-serv-btn:hover { background: var(--green); color: #fff; }
.dp-serv-btn:disabled { opacity: 0.3; cursor: not-allowed; border-color: var(--border); color: var(--text-muted); background: transparent; }
.dp-serv-val {
  font-size: 0.9rem; font-weight: 700; color: var(--text);
  width: 44px; text-align: center;
  border: none; background: transparent; outline: none;
  font-family: inherit; padding: 0; cursor: text;
}
.dp-serv-val:focus {
  background: #f0faf2; border-radius: 6px;
  box-shadow: 0 0 0 2px var(--green);
}
/* Im Edit-Modus: gleicher Stil wie Zeitfelder (nur grüne Unterstreichung) */
.dp-serv-val--edit-default {
  border: none !important;
  border-bottom: 1.5px solid var(--green) !important;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--text);
  box-shadow: none;
}
.dp-serv-val--edit-default:focus {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
/* Inline-Nährwert-Inputs im Edit-Modus */
.dp-nutr-edit-input--inline {
  width: 38px; font-size: 0.82rem; font-weight: 600;
  font-family: inherit; text-align: right;
  border: none; border-bottom: 1.5px solid var(--border);
  background: transparent; outline: none; padding: 0 1px;
  color: inherit;
}
.dp-nutr-edit-input--inline:focus { border-bottom-color: var(--green); }
.dp-nutr-edit-unit {
  font-size: 0.72rem; color: var(--text-muted); margin-left: 2px;
}
/* Basis-Umschalter-Button in der Spaltenüberschrift */
.dp-nutr-basis-btn {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  font-family: inherit; letter-spacing: 0.03em;
  background: var(--green); color: #fff;
  border: none; border-radius: 5px; padding: 1px 5px;
  cursor: pointer; transition: background 0.15s;
}
.dp-nutr-basis-btn:hover { background: var(--green2, #2d6048); }

/* sections */
.dp-section {
  background: var(--white);
  margin-top: 10px;
  padding: 18px 20px;
}

.dp-section-nutr {
  display: flex; flex-direction: column; align-items: center;
}
.dp-section-nutr .dp-section-head {
  width: 100%; margin-bottom: 32px;
}
.dp-section-nutr #dp-nutrition-grid {
  width: 100%; display: flex; justify-content: center; padding-bottom: 18px;
}
.dp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px;
}
.dp-section-title {
  font-size: 1rem; font-weight: 700; color: var(--green);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.dp-add-row-btn {
  height: 28px; padding: 0 12px; border-radius: 14px;
  border: 1.5px dashed var(--border); background: transparent;
  font-family: 'Inter',sans-serif; font-size: 0.9rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  display: none; align-items: center; gap: 4px;
  transition: all 0.15s;
}
.dp-add-row-btn:hover { border-color: var(--green); color: var(--green); }
.dp-add-row-btn.visible { display: flex; }

/* desc */
.dp-desc { font-size: 0.92rem; color: var(--text-muted); line-height: 1.65; }
.dp-desc-input {
  font-size: 0.92rem; font-family: 'Inter',sans-serif; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 10px 12px; width: 100%; box-sizing: border-box;
  outline: none; resize: vertical; min-height: 80px; line-height: 1.6;
}
.dp-desc-input:focus { border-color: var(--green); }

/* Quelle - URL Input */
.dp-source-url-field {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: var(--white, #fff);
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.dp-source-url-field:focus { border-color: var(--green); }

/* Video Thumbnail */
.dp-video-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.dp-video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}
.dp-video-thumb:hover .dp-video-thumb-img { transform: scale(1.03); }
.dp-video-play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.3);
  transition: background 0.2s;
}
.dp-video-thumb:hover .dp-video-play-btn { background: rgba(0,0,0,.45); }
.dp-video-play-btn svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }

/* Video Modal */
.dp-video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.2s;
}
.dp-video-modal-overlay.visible { opacity: 1; }
.dp-video-modal-box {
  position: relative;
  width: 100%;
  max-width: 860px;
}
.dp-video-modal-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255,255,255,.15);
  border: none;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background 0.15s;
}
.dp-video-modal-close:hover { background: rgba(255,255,255,.3); }
.dp-video-modal-player {
  position: relative;
  padding-top: 56.25%;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 40px rgba(0,0,0,.5);
}

/* tags */
.dp-tags-wrap { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.dp-tag { padding: 5px 12px; border-radius: 20px; background: #f0f0f0; color: #555; font-size: 0.8rem; font-weight: 500; border: 1px solid #e0e0e0; }
.dp-tag.edit { display: flex; align-items: center; gap: 5px; cursor: default; }
.dp-tag.edit:has(.dp-tag-x:hover) { background: #ffeeed; border-color: #f0c0bb; color: #d93025; }
.dp-tag-x { display: flex; align-items: center; cursor: pointer; opacity: 0.45; transition: opacity 0.12s; }
.dp-tag-x:hover { opacity: 1; }
.dp-tag-input {
  font-size: 0.8rem; font-family: 'Inter',sans-serif;
  border: 1.5px dashed var(--border); border-radius: 20px;
  padding: 5px 12px; outline: none; background: transparent;
  width: 120px;
}
.dp-tag-input:focus { border-color: var(--green); }

/* ingredients */
.dp-ing-row, .dp-uten-row {
  display: contents;
}
.dp-ing-row[data-ing-idx], .dp-uten-row[data-uten-idx] {
  display: flex; align-items: center; gap: 8px; grid-column: 1 / -1;
  padding: 6px 0;
}
.dp-ing-row:not([data-ing-idx]).dp-row-first > *, .dp-uten-row:not([data-uten-idx]).dp-row-first > * { padding: 0px 0; }
.dp-ing-uten-grid {
  display: grid; grid-template-columns: max-content 1fr; align-items: center;
}
#dp-ingredient-list, #dp-utensil-list {
  display: grid; grid-template-columns: 16px max-content 1fr; align-items: center;
  column-gap: 0; width: 100%; min-width: 0; overflow: visible;
}
.dp-ing-amt-unit { font-weight: 400; font-size: 0.92rem; color: var(--text); white-space: nowrap; padding: 10px 12px 10px 4px; text-align: left; }
.dp-empty {
  font-size: 0.88rem; color: var(--text-muted); padding: 4px 0;
  white-space: nowrap; grid-column: 1 / -1;
}
.dp-ing-bullet {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 0;
}
.dp-ing-bullet::after {
  content: ''; display: block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); flex-shrink: 0;
}
.dp-ing-amount { font-weight: 400; font-size: 0.92rem; color: var(--text); white-space: nowrap; padding: 10px 0 10px 4px; text-align: left; overflow: visible; }
.dp-ing-unit-col { font-size: 0.92rem; font-weight: 400; color: var(--text); white-space: nowrap; padding: 10px 0; overflow: visible; }
.dp-ing-amt-unit { font-weight: 400; font-size: 0.92rem; color: var(--text); white-space: nowrap; padding: 10px 12px 10px 4px; text-align: left; }
.dp-ing-name { font-size: 0.92rem; color: var(--text); padding: 10px 0; }
/* Utensil rows have no unit column – span amount directly into name col */
/* Mengen-Input: feste Breite per JS (breitester Wert aller Zeilen + Puffer), overflow:hidden damit Grid nicht springt */
.dp-ing-in-amt { font-size: 0.92rem; font-family: 'Inter',sans-serif; font-weight: 400; color: var(--text); border: none; border-bottom: 1.5px solid var(--green); background: transparent; width: 100%; min-width: 30px; outline: none; padding: 2px 0; transition: none; flex-shrink: 0; overflow: hidden; box-sizing: border-box; }
.dp-ing-in-amt:focus { border-color: var(--green); }
/* Name-Input: bekommt 1fr (verbleibenden Platz), overflow:hidden damit Text nicht rausbricht */
.dp-ing-in-name { font-size: 0.92rem; font-family: 'Inter',sans-serif; font-weight: 400; color: var(--text); border: none; border-bottom: 1.5px solid var(--green); background: transparent; width: 100%; min-width: 0; max-width: 100%; outline: none; padding: 2px 0; transition: none; overflow: hidden; box-sizing: border-box; }
.dp-ing-in-name:focus { border-color: var(--green); }

/* Titel-Duplikat-Icon */
.title-check-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 36px; border-radius: 8px;
  border: 1.5px solid var(--border); background: #f5f3ef;
  font-size: 0.85rem; flex-shrink: 0; align-self: center;
  transition: transform 0.2s;
}
.dp-del-btn { width: 26px; height: 26px; border-radius: 6px; border: none; cursor: pointer; background: #ffeeed; color: #d93025; padding: 0; display: flex; align-items: center; justify-content: center; transition: all 0.12s; flex-shrink: 0; }
.dp-del-btn:hover { background: #ffd9d7; }
.dp-gear-btn { width: 24px; height: 24px; border-radius: 6px; border: none; cursor: pointer; background: #f0f0f0; color: #555; padding: 0; display: flex; align-items: center; justify-content: center; transition: all 0.12s; flex-shrink: 0; }
.dp-gear-btn:hover { background: #e0e0e0; }
.dp-drag-handle { color: #d0d0d0; cursor: grab; flex-shrink: 0; display: flex; align-items: center; }
.dp-drag-handle:active { cursor: grabbing; }

/* steps */
/* ── Step view ── */
.dp-step-row {
  padding: 16px 0;
}
/* View mode: remove bottom padding/border from last step */
.dp-step-row[data-step-view-idx]:last-child { border-bottom: none; padding-bottom: 0; }
/* Edit mode: all steps get equal padding, no last-child exception */
.dp-step-row[data-step-idx] { padding: 10px 0; }
.dp-step-row[data-step-idx]:last-child { padding-bottom: 10px; }
#dp-step-list:not(.dp-step-list--empty) { margin-top: -16px; }

.dp-step-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.dp-step-badge {
  display: inline-flex; align-items: center;
  padding: 5px 16px; border-radius: 20px;
  background: #edf5f0; color: var(--green);
  font-size: 0.88rem; font-weight: 700;
  border: 1.5px solid #c8e6d0;
}
.dp-step-badge.done {
  background: #e0f0e6; color: #2a6644; text-decoration: line-through; opacity: 0.7;
}
.dp-step-check {
  height: 32px; padding: 0 9px; border-radius: 20px;
  border: 1.5px solid #c8e6d0; background: #fff;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; flex-shrink: 0; transition: all 0.15s;
  color: var(--green); font-size: 0.82rem; font-weight: 600; font-family: inherit;
  white-space: nowrap;
}
.dp-step-check:hover { background: var(--green); border-color: var(--green); color: #fff; }
.dp-step-check.done { background: var(--green); border-color: var(--green); color: #fff; }
.dp-step-check.done:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.dp-step-check-label { display: none; }
.dp-step-check:hover .dp-step-check-label { display: inline; }
.dp-step-check-default { display: inline-flex; align-items: center; gap: 4px; }
.dp-step-check-hover-undo { display: none; align-items: center; gap: 4px; }
.dp-step-check.done:hover .dp-step-check-default { display: none; }
.dp-step-check.done:hover .dp-step-check-hover-undo { display: inline-flex; }

.dp-step-body { padding-left: 2px; }
.dp-step-meta-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.92rem; color: var(--text-muted);
  margin-bottom: 10px; line-height: 1.6;
}
.dp-step-meta-icon { flex-shrink: 0; margin-top: 2px; opacity: 0.5; }
.dp-step-text { font-size: 0.95rem; color: var(--text); line-height: 1.7; }
.dp-step-row.done .dp-step-text { opacity: 0.45; text-decoration: line-through; }
.dp-step-row.done .dp-step-meta-row { opacity: 0.45; text-decoration: line-through; }

/* ── Step edit ── */
.dp-step-edit-wrap {
  display: flex; gap: 10px; align-items: flex-start;
}
.dp-step-edit-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.dp-step-edit-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
}
.dp-step-edit-badge {
  display: inline-flex; align-items: center;
  padding: 5px 16px; border-radius: 20px;
  background: #edf5f0; color: var(--green);
  font-size: 0.8rem; font-weight: 700;
  border: 1.5px solid #c8e6d0; flex-shrink: 0;
}
.dp-step-sel-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-height: 26px; padding: 3px 0;
  font-size: 0.78rem;
}

.dp-step-sel-icon { flex-shrink: 0; opacity: 0.5; display: flex; align-items: center; }
.dp-step-chip {
  display: inline-flex; align-items: center;
  padding: 2px 4px 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
  background: #f0f0f0; color: #555; border: 1px solid #ddd;
  cursor: default; transition: background 0.12s, border-color 0.12s;
}
.dp-step-chip.uten { background: #f0f0f0; color: #555; border-color: #ddd; }
.dp-step-chip:has(.dp-step-chip-remove:hover) { background: #ffeeed; border-color: #f0c0bb; color: #d93025; }
.dp-step-chip-label { margin-right: 4px; }
.dp-step-chip-edit-btn { background: none; border: none; padding: 0; cursor: pointer; color: var(--green); opacity: 0.55; transition: opacity 0.12s; display: inline-flex; align-items: center; line-height: 1; margin-right: 1px; }
.dp-step-chip-edit-btn:hover { opacity: 1; }
.dp-step-chip-remove { background: none; border: none; padding: 0; cursor: pointer; color: inherit; line-height: 1; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; opacity: 0.4; transition: opacity 0.12s; flex-shrink: 0; }
.dp-step-chip-remove:hover { opacity: 1; }
.dp-step-chip-remove svg { display: block; }
.dp-step-add-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 20px; font-size: 0.72rem; font-weight: 500;
  background: none; border: 1.5px dashed var(--border);
  color: var(--text-muted); cursor: pointer; transition: all 0.12s; font-family: inherit;
}
.dp-step-add-chip:hover { border-color: var(--green); color: var(--green); }
.dp-step-input {
  font-size: 0.9rem; font-family: 'Inter',sans-serif; color: var(--text);
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 9px 11px; width: 100%; box-sizing: border-box;
  outline: none; resize: vertical; line-height: 1.55; min-height: 72px;
  margin-bottom: 0;
}
.dp-step-input:focus { border-color: var(--green); }

/* nutrition */
.dp-nutr-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.dp-nutr-card {
  background: var(--bg); border-radius: 14px; padding: 13px 15px;
  border: 1.5px solid var(--border);
}
.dp-nutr-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 4px; }
.dp-nutr-val { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.dp-nutr-edit-input {
  font-size: 0.9rem; font-weight: 700; font-family: 'Inter', sans-serif;
  color: var(--text); border: none; border-bottom: 2px solid var(--border);
  background: transparent; outline: none; width: 52px;
  text-align: right; padding: 1px 0;
  transition: border-color 0.15s;
}
.dp-nutr-edit-input:focus { border-bottom-width: 2px; }

/* Nährwerte Donut */
.dp-nutr-donut-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
}
.dp-nutr-donut-row {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  justify-content: center; width: 100%;
}
.dp-nutr-donut-svg-wrap {
  position: relative; flex-shrink: 0; cursor: pointer; overflow: visible;
}
.dp-nutr-donut-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
  transition: all 0.25s;
}
.dp-nutr-donut-center-val {
  font-size: 1.65rem; font-weight: 800; color: var(--text); line-height: 1;
}
.dp-nutr-donut-center-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--text-muted); margin-top: 3px;
}
.dp-nutr-legend {
  display: flex; flex-direction: column; gap: 10px;
}
.dp-nutr-legend-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  cursor: pointer; transition: background 0.15s;
  border: 1.5px solid transparent;
}
.dp-nutr-legend-item:hover { background: var(--bg); }
.dp-nutr-legend-item.active { border-color: var(--border); background: var(--bg); }
.dp-nutr-legend-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
}
.dp-nutr-legend-name {
  font-size: 0.86rem; color: var(--text-muted); flex: 1; min-width: 95px;
}
.dp-nutr-legend-val {
  font-size: 0.95rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 0; text-align: right; white-space: nowrap;
}
.dp-nutr-vals-wrap {
  display: flex; gap: 20px; flex-shrink: 0;
}
.dp-nutr-legend-val {
  font-size: 0.95rem; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
  min-width: 0; text-align: right; white-space: nowrap;
}
.dp-nutr-col-header {
  font-size: 0.7rem; font-weight: 600; color: var(--text-muted);
  text-align: right; white-space: nowrap;
}
.dp-nutr-header-row {
  display: flex; gap: 10px; align-items: center;
  padding: 0 14px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.dp-nutr-header-spacer { flex: 1; }

/* Sync val column widths across all rows via JS after render */
.dp-nutr-empty {
  text-align: center; padding: 18px 0;
  font-size: 0.85rem; color: var(--text-muted); font-style: italic;
}

/* ── Sections picker ── */
.dp-sections-picker {
  position: fixed; z-index: 999;
  background: var(--white); border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  border: 1px solid var(--border);
  min-width: 210px; padding: 8px 0; overflow: hidden;
}
.dp-sections-picker-title {
  font-size: 0.72rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: 6px 16px 8px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.dp-sections-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 16px; cursor: pointer; transition: background 0.1s;
  font-size: 0.9rem; color: var(--text);
}
.dp-sections-item:hover { background: var(--bg); }
.dp-sections-toggle {
  width: 34px; height: 20px; border-radius: 10px;
  background: #ddd; position: relative; flex-shrink: 0;
  transition: background 0.2s;
}
.dp-sections-toggle.on { background: var(--green); }
.dp-sections-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dp-sections-toggle.on::after { transform: translateX(14px); }


/* ── Custom Unit Picker (ersetzt natives <select>) ── */
.dp-unit-picker-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  z-index: 9900099;
}
.dp-ing-unit-sel {
  font-size: 0.92rem; font-family: 'Inter',sans-serif; font-weight: 400; color: var(--text);
  border: none; border-bottom: 1.5px solid var(--green); background: transparent;
  outline: none; cursor: pointer; padding: 2px 0; width: 52px;
  text-align: left; white-space: nowrap; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 2px;
  transition: none; flex-shrink: 0;
}
.dp-unit-sel-text { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.dp-unit-sel-arrow { flex-shrink: 0; color: var(--text-muted); }
.dp-ing-unit-sel:focus { border-color: var(--green); }
.dp-unit-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9900099;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18);
  min-width: 120px;
  overflow: visible;
  animation: dropDown 0.15s cubic-bezier(.22,1,.36,1);
}
.dp-unit-dropdown-scroll {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
}
.dp-unit-option {
  padding: 7px 14px;
  font-size: 0.86rem;
  font-family: 'Inter', sans-serif;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.dp-unit-option:hover { background: #f2faf4; }
.dp-unit-option.selected {
  font-weight: 600;
  color: var(--green);
  background: #edf5f0;
}
.dp-ing-unit { font-size: 0.82rem; font-weight: 600; color: var(--green); opacity: 0.75; min-width: 30px; }

/* Unit Manager Modal */
.unit-mgr-overlay {
  display: none; position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,0.45); align-items: center; justify-content: center;
}
.unit-mgr-overlay.open { display: flex; }
.unit-mgr-modal {
  background: var(--white); border-radius: 18px; overflow: hidden;
  width: min(390px, 94vw); box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
}
.unit-mgr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1.5px solid var(--border);
}
.unit-mgr-title { font-weight: 700; font-size: 0.95rem; }
.unit-mgr-close {
  width: 30px; height: 30px; border-radius: 50%; border: none; background: var(--bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 1rem; transition: background 0.15s;
}
.unit-mgr-close:hover { background: var(--border); }
.unit-mgr-list {
  max-height: 300px; overflow-y: auto; padding: 10px 0; display: flex; flex-direction: column; gap: 0;
}
.unit-mgr-row {
  display: flex; align-items: center; gap: 8px; min-width: 0; width: 100%;
  padding: 4px 14px;
  transition: background 0.15s;
}
.unit-mgr-row:focus-within {
  background: #edf5f0; z-index: 1; position: relative;
}
.unit-mgr-drag-handle {
  touch-action: none;
  cursor: grab;
  display: flex;
  align-items: center;
  padding: 4px;
  color: var(--text-muted, #9ca3af);
  flex-shrink: 0;
  border-radius: 4px;
}
.unit-mgr-drag-handle:hover { color: var(--text); }
.unit-mgr-drag-handle:active { cursor: grabbing; }
.unit-mgr-input {
  flex: 1; min-width: 0; padding: 7px 10px; border: none; border-radius: 8px;
  font-family: 'Inter',sans-serif; font-size: 0.88rem; color: var(--text); background: var(--bg);
  outline: none; transition: background 0.15s; width: 0;
}
.unit-mgr-input[readonly] {
  color: var(--text); background: var(--bg); opacity: 1; cursor: default;
}
.unit-mgr-row:focus-within .unit-mgr-input { background: transparent; }
.unit-mgr-input:not([readonly]):focus { background: transparent; }
.unit-mgr-footer {
  padding: 12px 14px; border-top: 1.5px solid var(--border);
  display: flex; gap: 8px; min-width: 0;
}
.unit-mgr-footer input {
  flex: 1; min-width: 0; width: 0; padding: 7px 11px; border: 1.5px solid var(--border); border-radius: 10px;
  font-family: 'Inter',sans-serif; font-size: 0.88rem; color: var(--text); background: var(--bg); outline: none;
}
.unit-mgr-footer input:focus { border-color: var(--green); background: #fff; }
.unit-mgr-add-btn {
  padding: 7px 16px; background: var(--green); color: #fff; border: none;
  border-radius: 10px; font-family: 'Inter',sans-serif; font-size: 0.85rem;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 0.15s; flex-shrink: 0;
}
.unit-mgr-add-btn:hover { background: var(--green-hover); }
.unit-mgr-edit-btn {
  width: 28px; height: 28px; border-radius: 8px; border: none; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--text-muted); transition: background 0.12s; font-size: 0.75rem;
}
.unit-mgr-edit-btn:hover { background: var(--border); }
.dp-step-drag { color: #d0d0d0; cursor: grab; flex-shrink: 0; display: flex; align-items: center; padding-top: 4px; }
.dp-step-drag:active { cursor: grabbing; }
.dp-tag-dropdown {
  position: relative; display: inline-block;
}
.dp-tag-dropdown-btn {
  height: 30px; padding: 0 12px; border-radius: 15px;
  border: 1.5px dashed var(--border); background: transparent;
  font-family: 'Inter',sans-serif; font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted); cursor: pointer;
  display: flex; align-items: center; gap: 5px; transition: all 0.15s;
}
.dp-tag-dropdown-btn:hover { border-color: var(--green); color: var(--green); }
.dp-tag-dropdown-menu {
  position: absolute; top: 36px; left: 0; z-index: 100;
  background: var(--white); border: 1.5px solid var(--border);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 180px; max-height: 240px; overflow-y: auto;
  display: none; flex-direction: column; padding: 6px;
}
.dp-tag-dropdown-menu.open { display: flex; }
.dp-tag-dropdown-group { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 8px 3px; }
.dp-tag-dropdown-item {
  padding: 7px 10px; border-radius: 8px; font-size: 0.85rem; cursor: pointer;
  display: flex; align-items: center; gap: 8px; transition: background 0.1s;
}
.dp-tag-dropdown-item:hover { background: var(--bg); }
.dp-tag-dropdown-item.checked { color: var(--green); font-weight: 600; }
.dp-tag-dropdown-item.checked::before { content: '✓'; font-size: 0.75rem; color: var(--green); }
.dp-tag-dropdown-item:not(.checked)::before { content: ''; display: inline-block; width: 0.75rem; }

  .meta-edit-input {
  font-size: 0.8rem; font-family: 'Inter', sans-serif; color: var(--text-muted);
  border: none; border-bottom: 1px solid var(--border); background: transparent;
  outline: none; width: 52px; padding: 0; line-height: inherit;
}
.meta-edit-input:focus { border-color: var(--green); color: var(--text); }
.meta-edit-input::placeholder { color: var(--text-muted); opacity: 0.5; }
/* ── Gallery date bar ── */
.dp-gallery-date-bar {
  display: flex;
  gap: 10px;
  pointer-events: none;
  align-items: flex-end;
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}
.dp-date-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.63rem;
  color: rgba(255,255,255,0.95);
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
}
.dp-date-row svg { flex-shrink: 0; opacity: 0.85; stroke: rgba(255,255,255,0.95); }
.dp-date-label { font-weight: 700; }
.dp-date-val { font-weight: 400; }

/* ════════════════ ADMIN PANEL ════════════════ */
#admin-panel { min-height: 100vh; background: var(--bg); padding-top: 104px; }
.admin-wrap { max-width: 2000px; margin: 0 auto; padding: 0 45px 80px; }
@media (max-width: 600px) { .admin-wrap { padding: 0 16px 60px; } }

/* Header */
.admin-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.admin-title { font-size: 1.5rem; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.admin-title svg { stroke: var(--green); }
.admin-subtitle { font-size: 0.88rem; color: var(--text-muted); }

/* Stats */
.admin-stats-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 28px; }
@media (max-width: 1000px) { .admin-stats-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .admin-stats-row { grid-template-columns: repeat(2, 1fr); } }
.admin-stat-card { background: #fff; border-radius: 14px; border: 1.5px solid var(--border); padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.admin-stat-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.admin-stat-icon.green { background: #edf5f0; color: var(--green); }
.admin-stat-icon.green svg { stroke: var(--green); }
.admin-stat-icon.teal { background: #e0f5f5; color: #1a9a9a; }
.admin-stat-icon.teal svg { stroke: #1a9a9a; }
.admin-stat-icon.blue { background: #e8f0ff; color: #3a5ec9; }
.admin-stat-icon.blue svg { stroke: #3a5ec9; }
.admin-stat-icon.orange { background: #fff4e6; color: #c97a3a; }
.admin-stat-icon.orange svg { stroke: #c97a3a; }
.admin-stat-icon.red { background: #fef2f2; color: #c93a3a; }
.admin-stat-icon.red svg { stroke: #c93a3a; }
.admin-stat-icon.purple { background: #f5e8ff; color: #8a3ac9; }
.admin-stat-icon.purple svg { stroke: #8a3ac9; }
.admin-stat-value { font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1; }
.admin-stat-label { font-size: 0.78rem; color: var(--text-muted); margin-top: 3px; font-weight: 500; }

/* Tabs */
.admin-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.admin-tab { display: flex; align-items: center; gap: 7px; padding: 10px 18px; border: none; background: none; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 500; color: var(--text-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; border-radius: 8px 8px 0 0; transition: all 0.15s; text-decoration: none; }
.admin-tab:hover { background: #f5f3ef; color: var(--text); }
.admin-tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; background: #edf5f0; }
.admin-tab svg { stroke: currentColor; }

/* Section */
.admin-section { background: #fff; border-radius: 14px; border: 1.5px solid var(--border); margin-bottom: 20px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.admin-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; min-height: 60px; border-bottom: 1px solid var(--border); gap: 12px; flex-wrap: wrap; }
.admin-section-title { font-size: 1rem; font-weight: 600; color: var(--text); white-space: nowrap; }

/* Search */
.admin-search-input { padding: 7px 12px; border-radius: 8px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text-muted); outline: none; width: 220px; transition: border-color 0.15s; background: var(--bg); }
.admin-search-input::placeholder { color: var(--text-muted) !important; font-size: 0.88rem !important; font-family: 'Inter', sans-serif !important; opacity: 1; }
.admin-search-input::-webkit-input-placeholder { color: var(--text-muted) !important; font-size: 0.88rem !important; font-family: 'Inter', sans-serif !important; opacity: 1; }
.admin-search-input::-moz-placeholder { color: var(--text-muted) !important; font-size: 0.88rem !important; font-family: 'Inter', sans-serif !important; opacity: 1; }
.admin-search-input:-ms-input-placeholder { color: var(--text-muted) !important; font-size: 0.88rem !important; font-family: 'Inter', sans-serif !important; opacity: 1; }
.admin-search-input:focus { border-color: var(--green); }
.admin-recipe-filter-select { padding: 7px 9px; border-radius: 8px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text-muted); outline: none; background: var(--bg); cursor: pointer; transition: border-color 0.15s; }
.admin-recipe-filter-select:focus { border-color: var(--green); }
.admin-recipe-filter-reset { padding: 7px 11px; border-radius: 8px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text-muted); background: var(--bg); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.admin-recipe-filter-reset:hover { border-color: #d93025; color: #d93025; background: #fef2f2; }
.admin-sort-th { cursor: pointer; user-select: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.admin-sort-th:hover { color: var(--green); }
.sort-arrow { font-style: normal; color: var(--text-muted); font-size: 0.75em; opacity: 0.35; flex-shrink: 0; line-height: 1; }
.sort-arrow.active { color: var(--green); opacity: 1; }

/* Users table */
.admin-users-list { padding: 0; overflow-x: auto; display: grid; grid-template-columns: minmax(100px,1fr) 155px 165px 180px max-content max-content; width: 100%; }
.admin-users-header { display: contents; }
.admin-users-header > span { background: var(--bg); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; padding: 14px 16px; }
.admin-users-header > span:first-child { padding-left: 20px; }
.admin-users-header > span:last-child { padding-right: 20px; }
.admin-user-row { display: contents; }
.admin-user-row > div { padding: 14px 16px; border-bottom: 1px solid #f5f3ef; display: flex; align-items: center; background: #fff; transition: background 0.1s; min-width: 0; overflow: hidden; }
.admin-user-row > div:first-child { padding-left: 20px; }
.admin-user-row > div:last-child { padding-right: 20px; justify-content: flex-end; }
.admin-user-row:hover > div { background: #fafaf8; }
.admin-user-row:last-child > div { border-bottom: none; }
.admin-users-header-old { display: none; }
.admin-user-row-old { display: none; }
.admin-user-row:last-child { border-bottom: none; }
.admin-user-row:hover { background: #fafaf8; }
.admin-user-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-user-name > div:last-child { min-width: 0; overflow: hidden; }
.admin-user-name > div:last-child > div:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--green), #2d6048); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }
.admin-user-avatar.small { width: 26px; height: 26px; font-size: 0.72rem; }
.admin-user-online { font-size: 0.72rem; color: #16a34a; font-weight: 600; }
.admin-user-offline { font-size: 0.72rem; color: #9ca3af; font-weight: 500; }
.admin-role-select { padding: 5px 10px; border-radius: 7px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; outline: none; background: var(--bg); transition: all 0.15s; }
.admin-role-select.admin { border-color: #c97a3a; color: #c97a3a; background: #fff4e6; }
.admin-role-select.user { border-color: #86efac; color: #15803d; background: #f0fdf4; }
.admin-role-select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Buttons */
.admin-btn-primary { display: flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 9px; border: none; background: var(--green); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
.admin-btn-primary:hover { background: var(--green-hover); }
.admin-btn-secondary { padding: 6px 12px; border-radius: 7px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.admin-btn-secondary:hover { background: var(--white); border-color: var(--green); color: var(--green); }
.admin-btn-danger { padding: 6px 12px; border-radius: 7px; border: 1.5px solid #fecaca; background: #fef2f2; color: #d93025; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: all 0.15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.admin-btn-danger:hover:not(:disabled) { background: #d93025; color: #fff; border-color: #d93025; }
.admin-btn-danger.small { padding: 5px 8px; }
.admin-btn-copy { padding: 6px 14px; border-radius: 7px; border: 1.5px solid var(--green); background: #edf5f0; color: var(--green); font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.admin-btn-copy:hover { background: var(--green); color: #fff; }

/* Badges */
.admin-badge { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 0.73rem; font-weight: 600; width: fit-content; white-space: nowrap; }
.admin-badge.active { background: #dcfce7; color: #15803d; }
.admin-badge.used { background: #f3f4f6; color: #6b7280; }
.admin-badge.expired { background: #fff7ed; color: #c2410c; }
.admin-badge.deactivated { background: #f3f4f6; color: #9ca3af; }

/* Invites */
.admin-invite-create { display: flex; gap: 10px; padding: 16px 20px; align-items: center; flex-wrap: wrap; }
.admin-invite-note-input { flex: 1; min-width: 200px; padding: 9px 14px; border-radius: 9px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text); outline: none; background: var(--bg); transition: border-color 0.15s; }
.admin-invite-note-input:focus { border-color: var(--green); }
.admin-invite-expires-select { padding: 9px 12px; border-radius: 9px; border: 1.5px solid var(--border); font-family: 'Inter', sans-serif; font-size: 0.88rem; color: var(--text); outline: none; background: var(--bg); cursor: pointer; transition: border-color 0.15s; white-space: nowrap; flex-shrink: 0; }
.admin-invite-expires-select:focus { border-color: var(--green); }
.admin-invite-error { margin: 0 20px 16px; padding: 10px 14px; border-radius: 9px; background: #fef2f2; border: 1px solid #fecaca; color: #d93025; font-size: 0.84rem; }
.admin-invite-link-box { display: flex; align-items: center; gap: 10px; margin: 0 20px 16px; padding: 10px 14px; border-radius: 9px; background: #f0fdf4; border: 1px solid #86efac; }
.admin-invite-link-input { flex: 1; border: none; background: transparent; font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text); outline: none; min-width: 0; }
.admin-invites-list { padding: 0; overflow-x: auto; display: grid; grid-template-columns: minmax(100px,1fr) minmax(100px,1fr) minmax(100px,1fr) 130px 130px 130px 100px max-content; width: 100%; min-width: 950px; }

.admin-invites-header { display: contents; }
.admin-invites-header > span { background: var(--bg); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; padding: 14px 16px; }
.admin-invites-header > span:first-child { padding-left: 20px; }
.admin-invites-header > span:last-child { padding-right: 20px; }
.admin-invite-row { display: contents; }
.admin-invite-row > div { padding: 14px 16px; border-bottom: 1px solid #f5f3ef; display: flex; align-items: center; background: #fff; transition: background 0.1s; min-width: 0; overflow: hidden; }
.admin-invite-row > div:first-child { padding-left: 20px; }
.admin-invite-row > div:last-child { padding-right: 20px; justify-content: flex-end; }
.admin-invite-row:hover > div { background: #fafaf8; }
.admin-invite-row:last-child > div { border-bottom: none; }
.admin-invite-row.faded > div { opacity: 0.45; }
.admin-invite-row.used > div { background: #e8e8e8; opacity: 0.6; }
.admin-invite-row.deactivated > div { background: #e4e4e4; opacity: 0.65; }
.admin-invite-row.expired > div { background: #e4e4e4; opacity: 0.65; }
.admin-pwlinks-list { padding: 0; overflow-x: auto; display: grid; grid-template-columns: minmax(100px,1fr) minmax(100px,1fr) minmax(100px,1fr) 130px 130px 130px 100px max-content; width: 100%; min-width: 950px; }
.admin-pwlinks-header { display: contents; }
.admin-pwlinks-header > span { background: var(--bg); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; padding: 14px 16px; }
.admin-pwlinks-header > span:first-child { padding-left: 20px; }
.admin-pwlinks-header > span:last-child { padding-right: 20px; }
.admin-pwlink-row { display: contents; }
.admin-pwlink-row > div { padding: 14px 16px; border-bottom: 1px solid #f5f3ef; display: flex; align-items: center; background: #fff; transition: background 0.1s; min-width: 0; overflow: hidden; }
.admin-pwlink-row > div:first-child { padding-left: 20px; }
.admin-pwlink-row > div:last-child { padding-right: 20px; justify-content: flex-end; }
.admin-pwlink-row:hover > div { background: #fafaf8; }
.admin-pwlink-row:last-child > div { border-bottom: none; }
.admin-pwlink-row.faded > div { opacity: 0.45; }
.admin-pwlink-row.used > div { background: #e8e8e8; opacity: 0.6; }
.admin-pwlink-row.deactivated > div { background: #e4e4e4; opacity: 0.65; }
.admin-pwlink-row.expired > div { background: #e4e4e4; opacity: 0.65; }
.admin-btn-danger:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-invites-grid { display: grid; grid-template-columns: 220px 1fr 100px 180px 110px 110px; width: 100%; min-width: 800px; }
.admin-invites-header-cell { padding: 10px 0; background: var(--bg); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-invites-header-cell:first-child { padding-left: 20px; }
.admin-invites-header-cell:last-child { padding-right: 20px; }
.admin-invite-cell { padding: 13px 0; border-bottom: 1px solid #f5f3ef; display: flex; align-items: center; min-width: 0; overflow: hidden; }
.admin-invite-cell:first-child { padding-left: 20px; }
.admin-invite-cell:last-child { padding-right: 20px; }
.admin-invite-cell.faded { opacity: 0.45; }
.admin-invite-row:last-child { border-bottom: none; }

.admin-invite-row:hover { background: #fafaf8; }
.admin-invite-token { font-family: monospace; font-size: 0.8rem; color: var(--green); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 100%; vertical-align: middle; }
.admin-invite-token:hover { text-decoration: underline; }
.admin-invite-link { display: flex; align-items: center; gap: 6px; font-family: monospace; font-size: 0.78rem; color: var(--text-muted); cursor: pointer; min-width: 0; overflow: hidden; transition: color 0.12s; }
.admin-invite-link span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.admin-invite-link:hover { color: var(--green); }
.admin-invite-note { font-size: 0.83rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.admin-invite-meta { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.admin-invite-usedby { display: flex; align-items: center; gap: 7px; font-size: 0.83rem; color: var(--text); white-space: nowrap; overflow: hidden; min-width: 0; }
.admin-invites-table-wrap { overflow-x: auto; }

/* Recipes table */
.admin-recipes-table-wrap { overflow-x: auto; }
.admin-recipes-header { display: grid; grid-template-columns: 2fr 140px 165px 195px 230px 110px; gap: 10px; padding: 10px 20px; background: var(--bg); font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); min-width: 1050px; align-items: center; }
.admin-recipe-row { display: grid; grid-template-columns: 2fr 140px 165px 195px 230px 110px; gap: 10px; padding: 10px 20px; border-bottom: 1px solid #f5f3ef; align-items: center; transition: background 0.1s; min-width: 1050px; }
.admin-cell-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.admin-recipe-row:last-child { border-bottom: none; }
.admin-recipe-row:hover { background: #fafaf8; }
.ar-cell-user { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.ar-cell-user span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; color: var(--text-muted); }
.admin-recipe-row:last-child { border-bottom: none; }
.admin-recipe-row:hover { background: #fafaf8; }
.admin-recipe-info { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.admin-recipe-thumb { width: 42px; height: 42px; border-radius: 8px; background-size: cover; background-position: center; flex-shrink: 0; }
.admin-recipe-thumb.no-img { background: var(--bg); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.admin-recipe-name { font-size: 0.88rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; min-width: 0; text-decoration: none; }
.admin-recipe-name:hover { text-decoration: underline; text-decoration-color: var(--green); color: var(--green); }
.admin-recipe-cat { font-size: 0.75rem; color: var(--text-muted); }
.admin-recipe-owner { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--text-muted); }
.admin-recipe-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-recipe-tag { display: inline-block; padding: 2px 7px; background: #edf5f0; color: var(--green); border-radius: 5px; font-size: 0.72rem; font-weight: 600; }

.admin-users-header span:last-child,
.admin-user-row > div:last-child,
.admin-recipes-header span:last-child,
.admin-recipe-row > div:last-child { display: flex; justify-content: flex-end; align-items: center; }
.admin-empty { text-align: center; padding: 32px; color: var(--text-muted); font-size: 0.88rem; }
.admin-loading { text-align: center; padding: 28px; color: var(--text-muted); font-size: 0.88rem; }
.admin-toast { position: fixed; bottom: 24px; right: 24px; z-index: 99000; padding: 12px 20px; border-radius: 10px; background: #1a1a1a; color: #fff; font-size: 0.88rem; font-weight: 500; box-shadow: 0 4px 20px rgba(0,0,0,0.2); display: none; }
.admin-toast.error { background: #d93025; }

@media (max-width: 900px) {
  .admin-users-list { grid-template-columns: max-content max-content max-content max-content; }
  .admin-users-header > span:nth-child(3), .admin-users-header > span:nth-child(4), .admin-users-header > span:nth-child(5),
  .admin-user-row > div:nth-child(3), .admin-user-row > div:nth-child(4), .admin-user-row > div:nth-child(5) { display: none; }
}

/* ── Rollenverwaltung ── */
.roles-layout {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 0;
  min-height: 200px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.roles-sidebar {
  display: flex;
  flex-direction: column;
  border-right: 1.5px solid var(--border);
  background: var(--bg-secondary, #faf9f6);
}
.roles-search-wrap {
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.roles-user-list {
  overflow-y: auto;
  flex: 1;
}
.roles-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}
.roles-user-item:last-child { border-bottom: none; }
.roles-user-item:hover { background: rgba(0,0,0,0.03); }
.roles-user-item.selected { background: #edf5f0; border-left: 3px solid var(--green); padding-left: 10px; }
.roles-detail-panel {
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.roles-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.roles-detail-header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
}
.roles-detail-scroll {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Berechtigungs-Gruppen */
.roles-perm-group {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.roles-perm-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-secondary, #f7f5f1);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
}
.roles-perm-group-items {
  display: flex;
  flex-direction: column;
}
/* Toggle-Switch Label */
.roles-perm-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
  user-select: none;
}
.roles-perm-toggle:last-child { border-bottom: none; }
.roles-perm-toggle:hover { background: rgba(0,0,0,0.025); }
.roles-perm-toggle.on { background: #f0fdf4; }
.roles-toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #d1d5db;
  flex-shrink: 0;
  transition: background 0.2s;
}
.roles-perm-toggle.on .roles-toggle-track { background: var(--green); }
.roles-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.roles-perm-toggle.on .roles-toggle-thumb { transform: translateX(16px); }
.roles-perm-label {
  font-size: 0.86rem;
  color: var(--text);
  flex: 1;
}
.roles-perm-toggle:not(.on) .roles-perm-label { color: var(--text-muted); }
/* Badge */
.roles-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.roles-badge.admin  { background: #fef3c7; color: #b45309; }
.roles-badge.member { background: #f0fdf4; color: #15803d; }
.roles-badge.user   { background: #f3f4f6; color: #6b7280; }
.roles-perm-toggle.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

@media (max-width: 750px) {
  .roles-layout { grid-template-columns: 1fr; }
  .roles-sidebar { border-right: none; border-bottom: 1.5px solid var(--border); }
  .roles-user-list { max-height: 200px; }
  .roles-detail-panel { max-height: none; }
}
/* Clip overflowing content in link/token grid cells */
.admin-pwlink-row > div:nth-child(2),
.admin-pwlink-row > div:nth-child(3),
.admin-invite-row > div:nth-child(1),
.admin-invite-row > div:nth-child(2),
.admin-invite-row > div:nth-child(3) { overflow: hidden; min-width: 0; }
.admin-pwlinks-header > span:nth-child(2),
.admin-pwlinks-header > span:nth-child(3),
.admin-invites-header > span:nth-child(1),
.admin-invites-header > span:nth-child(2),
.admin-invites-header > span:nth-child(3) { overflow: hidden; min-width: 0; }
/* Users table: tighter padding so column headers fit */
.admin-users-list .admin-users-header > span { padding-left: 12px; padding-right: 12px; }
.admin-users-list .admin-users-header > span:first-child { padding-left: 20px; }
.admin-users-list .admin-users-header > span:last-child { padding-right: 20px; }
.admin-user-row > div { padding-left: 12px; padding-right: 12px; }
.admin-user-row > div:first-child { padding-left: 20px; }
.admin-user-row > div:last-child { padding-right: 20px; }

/* ══════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE OVERRIDES
   Fixes: detail-view buttons overflow, select-bar wrapping,
   navbar, filter sidebar, cards, page-header on all screens
   ══════════════════════════════════════════════════════════ */



/* ── Page header: always stays in one row — buttons never drop below title ── */
/* Base: alle Header-Buttons 39px hoch, gleiche Breite via padding */
#select-btn, #ai-import-btn, #new-recipe-btn {
  height: 39px;
  padding: 0 16px;
  font-size: 0.88rem;
  white-space: nowrap;
  box-sizing: border-box;
}

/* FAB-Buttons: ebenfalls 39px, gleiche Basis */
.fab-btn {
  height: 39px !important;
  padding: 0 16px !important;
  font-size: 0.88rem !important;
  white-space: nowrap !important;
  box-sizing: border-box;
}

/* ── Wenn alle 3 Header-Buttons sichtbar: früher und stärker schrumpfen ── */
/* Mit 3 Buttons: Label weg ab 680px */
@media (max-width: 680px) {
  .has-three-btns #select-btn .btn-label,
  .has-three-btns #ai-import-btn .btn-label,
  .has-three-btns #new-recipe-btn .btn-label { display: none; }
  .has-three-btns #select-btn,
  .has-three-btns #ai-import-btn,
  .has-three-btns #new-recipe-btn { padding: 0 11px; font-size: 0.84rem; }
}
/* Mit 2 Buttons: Label weg ab 480px */
@media (max-width: 480px) {
  #select-btn .btn-label,
  #ai-import-btn .btn-label,
  #new-recipe-btn .btn-label { display: none; }
  #select-btn, #ai-import-btn, #new-recipe-btn { padding: 0 11px; font-size: 0.84rem; }
}

/* Weiter schrumpfen bei sehr kleinen Screens */
@media (max-width: 400px) {
  .has-three-btns #select-btn,
  .has-three-btns #ai-import-btn,
  .has-three-btns #new-recipe-btn { height: 33px; padding: 0 9px; font-size: 0.78rem; }
  .has-three-btns #select-btn svg,
  .has-three-btns #ai-import-btn svg,
  .has-three-btns #new-recipe-btn svg { width: 12px !important; height: 12px !important; }
}
@media (max-width: 360px) {
  .page-header { gap: 6px; }
  #select-btn, #ai-import-btn, #new-recipe-btn { height: 33px; padding: 0 9px; font-size: 0.78rem; }
  #select-btn svg, #ai-import-btn svg, #new-recipe-btn svg { width: 12px !important; height: 12px !important; }
  .page-header h1 { font-size: 1rem; }
  .page-header .subtitle { font-size: 0.65rem; }
}

/* ── Select bar: shrink progressively to stay single-line (handled by JS checkSelectBarCompact) ── */
@media (max-width: 600px) {
  .select-bar { padding: 6px 12px; gap: 6px; border-radius: 12px; }
  .select-bar-count { font-size: 0.82rem; min-width: 40px; }
  .select-bar-btn { padding: 6px 9px; font-size: 0.8rem; gap: 4px; }
  .select-all-btn { padding: 6px 10px; font-size: 0.8rem; gap: 4px; }
}
@media (max-width: 480px) {
  .select-bar { padding: 5px 9px; gap: 4px; }
  .select-bar-count { font-size: 0.76rem; min-width: 28px; }
  .select-bar-btn { padding: 5px 8px; }
  .select-all-btn { padding: 5px 8px; }
}

/* ── Filter sidebar: compact on mobile ── */
@media (max-width: 768px) {
  .filter-sidebar { padding: 12px 0; }
  .filter-sidebar-header { padding: 0 12px 10px; }
  .filter-group-header { padding: 6px 12px; font-size: 0.75rem; }
  .filter-item { padding: 5px 12px 5px 16px; font-size: 0.82rem; }
  .filter-clear-btn { font-size: 0.75rem; padding: 4px 9px; }
  .filter-edit-toggle { width: 28px; height: 28px; }
  .filter-edit-cancel { width: 28px; height: 28px; }
}

/* ── Alles skaliert mit dem Titel ab 600px ── */
@media (max-width: 600px) {
  /* Suchleiste */
  .search-input { height: 36px; font-size: 0.82rem; padding: 0 12px 0 35px; box-sizing: border-box; }
  .search-wrap svg { left: 11px; width: 16px; height: 16px; }
  /* Kategorie-Dropdown */
  .cat-dropdown-trigger { width: 100%; min-width: 0; height: 36px; font-size: 0.82rem; padding: 0 13px; box-sizing: border-box; }
  /* Header-Buttons */
  #select-btn, #ai-import-btn, #new-recipe-btn { height: 36px; font-size: 0.82rem; padding: 0 14px; }
  .fab-btn { height: 36px !important; font-size: 0.82rem !important; padding: 0 14px !important; }
  /* Filter Sidebar gesamt */
  .filter-sidebar { padding: 8px 0; }
  /* Filter Header */
  .filter-sidebar-header { padding: 0 9px 7px; margin-bottom: 5px; }
  /* Filter Titel */
  .filter-sidebar-title { font-size: 0.8rem; }
  /* Filter Gruppen-Header */
  .filter-group-header { font-size: 0.74rem; padding: 4px 9px; }
  /* Filter Items */
  .filter-item { font-size: 0.78rem; padding: 4px 9px 4px 13px; }
  /* Filter Buttons: Zurücksetzen, Bearbeiten, Abbrechen */
  .filter-clear-btn { font-size: 0.72rem; padding: 3px 7px; }
  .filter-edit-toggle { width: 24px; height: 24px; }
  .filter-edit-cancel { width: 24px; height: 24px; }
}

@media (max-width: 480px) {
  /* Suchleiste */
  .search-input { height: 30px; font-size: 0.76rem; padding: 0 10px 0 28px; box-sizing: border-box; }
  .search-wrap svg { left: 8px; width: 14px; height: 14px; }
  /* Kategorie-Dropdown */
  .cat-dropdown-trigger { height: 30px; font-size: 0.76rem; padding: 0 11px; box-sizing: border-box; }
  /* Header-Buttons */
  #select-btn, #ai-import-btn, #new-recipe-btn { height: 30px; font-size: 0.76rem; padding: 0 11px; }
  .fab-btn { height: 30px !important; font-size: 0.76rem !important; padding: 0 11px !important; }
  /* Filter Sidebar gesamt */
  .filter-sidebar { padding: 6px 0; }
  /* Filter Header */
  .filter-sidebar-header { padding: 0 7px 5px; margin-bottom: 3px; }
  /* Filter Titel */
  .filter-sidebar-title { font-size: 0.74rem; }
  /* Filter Gruppen-Header */
  .filter-group-header { font-size: 0.68rem; padding: 3px 7px; }
  /* Filter Items */
  .filter-item { font-size: 0.72rem; padding: 3px 7px 3px 11px; }
  /* Filter Buttons */
  .filter-clear-btn { font-size: 0.64rem; padding: 2px 6px; }
  .filter-edit-toggle { width: 22px; height: 22px; }
  .filter-edit-cancel { width: 22px; height: 22px; }
}

/* ── Cards: prevent overflow, fit small screens ── */
@media (max-width: 400px) {
  .card-body { padding: 12px 14px 14px; }
  .card-title { font-size: 1rem; }
  .card-meta { gap: 8px; font-size: 0.78rem; }
  .card-meta .meta-item { gap: 3px; }
  .img-btn { padding: 5px 10px; font-size: 0.75rem; }
}

/* ── Detail view: nav buttons ── */
@media (max-width: 768px) {
  .dp-edit-toggle { height: 36px; padding: 0 13px; font-size: 0.85rem; }
  .dp-cancel-btn  { height: 36px; padding: 0 13px; font-size: 0.85rem; }
  .dp-fav-btn { width: 36px; height: 36px; }
  .dp-gallery-img-btn { height: 30px; padding: 0 10px; font-size: 0.82rem; }
}
@media (max-width: 480px) {
  .dp-nav { padding: 10px 12px; }
  .dp-nav-actions { gap: 6px; }
  .dp-edit-toggle { height: 32px; padding: 0 10px; font-size: 0.78rem; }
  .dp-cancel-btn  { height: 32px; padding: 0 10px; font-size: 0.78rem; }
  .dp-fav-btn { width: 32px; height: 32px; }
}

/* ── Detail hero section ── */
@media (max-width: 480px) {
  .dp-hero { padding: 14px 14px 0; }
  .dp-title { font-size: 1.35rem; }
  .dp-title-input { font-size: 1.35rem; }
  .dp-stat { padding: 10px 6px; gap: 4px; }
  .dp-stat-val { font-size: 0.82rem; }
  .dp-stat-input { font-size: 0.82rem; max-width: 6ch; }
  .dp-stat-label { font-size: 0.62rem; }
  .dp-section { padding: 14px 14px; }
}
@media (max-width: 360px) {
  .dp-title { font-size: 1.2rem; }
  .dp-stats { flex-wrap: wrap; }
  .dp-stat { min-width: 50%; flex: none; border-right: none;
    border-bottom: 1px solid var(--border); }
  .dp-stat:nth-child(odd) { border-right: 1px solid var(--border); }
}

/* ── Detail gallery edit bar: immer eine Zeile, alles schrumpft gleichmäßig ── */
/* ab 800px: Buttons etwas kleiner bevor labels wegfallen */
@media (max-width: 800px) {
  .dp-gallery-img-btn { height: 30px; padding: 0 10px; font-size: 0.86rem; gap: 4px; }
  .dp-gallery-img-btn svg { width: 11px !important; height: 11px !important; }
}
/* ab 770px: Bild-Buttons nur noch Icons, kein Text */
@media (max-width: 770px) {
  .dp-gallery-img-btn .btn-label { display: none; }
  .dp-gallery-img-btn { padding: 0 10px; }
}
@media (max-width: 600px) {
  .dp-gallery-bottom-bar { padding: 52px 10px 10px; gap: 6px; }
  .dp-gallery-date-bar { gap: 6px; }
  .dp-date-row { font-size: 0.6rem; gap: 3px; }
  .dp-gallery-img-btn { height: 27px; padding: 0 8px; font-size: 0.8rem; gap: 3px; }
  .dp-gallery-img-btn svg { width: 10px !important; height: 10px !important; }
}
@media (max-width: 480px) {
  .dp-gallery-bottom-bar { padding: 44px 8px 8px; gap: 5px; }
  .dp-gallery-date-bar { gap: 5px; }
  .dp-date-row { font-size: 0.56rem; gap: 2px; }
  .dp-date-row svg { width: 9px !important; height: 9px !important; }
  .dp-gallery-img-btn { height: 25px; padding: 0 7px; font-size: 0.76rem; gap: 3px; }
  .dp-gallery-img-btn svg { width: 9px !important; height: 9px !important; }
}
@media (max-width: 450px) {
  .dp-gallery-bottom-bar { padding: 40px 7px 7px; gap: 4px; }
  .dp-gallery-date-bar { gap: 4px; }
  .dp-date-row { font-size: 0.5rem; gap: 2px; }
  .dp-date-row svg { width: 8px !important; height: 8px !important; }
  .dp-gallery-img-btn { height: 23px; padding: 0 6px; font-size: 0.72rem; gap: 2px; }
  .dp-gallery-img-btn svg { width: 8px !important; height: 8px !important; }
}
@media (max-width: 380px) {
  .dp-date-row { font-size: 0.46rem; }
  .dp-gallery-img-btn { height: 21px; padding: 0 5px; font-size: 0.67rem; }
}
@media (max-width: 340px) {
  .dp-date-row { font-size: 0.42rem; }
  .dp-gallery-img-btn { height: 20px; padding: 0 5px; font-size: 0.62rem; }
}

/* ── Ingredient / step rows in detail ── */
@media (max-width: 480px) {
  .dp-section-title { font-size: 0.88rem; }
  .dp-ing-amount { font-size: 0.92rem; padding: 8px 0 8px 4px; }
  .dp-ing-unit-col { font-size: 0.92rem; padding: 8px 0; }
  .dp-ing-amt-unit { font-size: 0.92rem; padding: 8px 12px 8px 4px; }
  .dp-ing-name { font-size: 0.92rem; padding: 8px 0; }
  .dp-step-text { font-size: 0.88rem; }
  .dp-add-row-btn { font-size: 0.82rem; height: 26px; }
}

/* ── Card edit overlay buttons: don't overflow on small cards ── */
@media (max-width: 480px) {
  .card-img-edit-overlay { flex-wrap: wrap; gap: 5px; padding: 6px; }
  .edit-save-actions { top: 8px; right: 8px; gap: 4px; }
  .edit-action-btn { width: 32px; height: 32px; }
}

/* ── FAB buttons: progressive shrink (unabhängig von Header-Buttons) ── */
/* FAB hat immer alle 3 oder 2 Buttons — schrumpft gleichmäßig */

/* 500px: Label noch sichtbar, etwas kompakter */
@media (max-width: 500px) {
  .fab-btn {
    height: 35px !important;
    padding: 0 12px !important;
    font-size: 0.82rem !important;
  }
  .fab-btn svg { width: 13px !important; height: 13px !important; }
}

/* 400px: Label weg, nur Icon */
@media (max-width: 400px) {
  .fab-btn .btn-label { display: none !important; }
  .fab-btn {
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
  }
  .fab-btn svg { width: 13px !important; height: 13px !important; }
  #scroll-top-btn { width: 32px !important; height: 32px !important; }
}

/* 360px: minimal */
@media (max-width: 360px) {
  .fab-btn {
    height: 30px !important;
    padding: 0 8px !important;
  }
  .fab-btn svg { width: 12px !important; height: 12px !important; }
  #scroll-top-btn { width: 30px !important; height: 30px !important; }
}

/* ── Fixed select bar (bottom) ── */
@media (max-width: 480px) {
  #fixed-select-bar { padding: 6px 10px !important; gap: 6px !important; }
}

/* ── Admin tabs: scrollable on mobile ── */
@media (max-width: 600px) {
  .admin-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .admin-tab { white-space: nowrap; padding: 8px 12px; font-size: 0.82rem; }

}

/* ── Tag picker dropdown: max-width on small screens ── */
@media (max-width: 480px) {
  .tag-picker-dropdown { min-width: min(200px, 85vw); max-height: 230px; }
}

/* ── Bulk tag modal ── */
@media (max-width: 480px) {
  .delete-modal { padding: 20px 18px 16px; }
  .delete-modal h3 { font-size: 1rem; }
  .delete-modal p { font-size: 0.82rem; }
}

/* ── Prevent horizontal scroll on body ── */
/* Prevent horizontal overflow without killing vertical scroll */
html { overflow-x: clip; }

/* ── Scrollbars überall einheitlich (wie im Rezept-Detail-Overlay) ── */
* { scrollbar-width: thin; scrollbar-color: #c8c0b4 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #c8c0b4; border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: #a89e94; }
/* Body-Scrollbar exakt wie Detail-Overlay: ab Navbar-Unterkante */
html { scrollbar-width: thin; scrollbar-color: #c8c0b4 transparent; }
html::-webkit-scrollbar { width: 8px; }
html::-webkit-scrollbar-track { background: transparent; margin-top: 56px; }
html::-webkit-scrollbar-thumb { background: #c8c0b4; border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover { background: #a89e94; }


/* ── Mobile filter sidebar: collapsed by default on ≤768px ── */

/* Toggle-Button im Header (nur auf Mobile sichtbar) */
.filter-mobile-toggle {
  display: none;
  align-items: center; justify-content: space-between;
  flex: 1; background: none; border: none; cursor: pointer;
  padding: 0; font-family: inherit; text-align: left;
  gap: 6px;
}
.filter-mobile-chevron {
  color: var(--text-muted);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}

/* Collapsible body: alles unter dem Header */
.filter-sidebar-body {
  /* no style needed — just used as selector target */
}

@media (max-width: 768px) {
  /* Toggle-Button einblenden */
  .filter-mobile-toggle { display: flex; }
  /* Normaler Titel-Text ausblenden (er ist jetzt im Button) */
  .filter-sidebar > .filter-sidebar-header > .filter-sidebar-title { display: none; }

  /* Alles ausser dem Header verstecken */
  #special-filters-container,
  #filter-groups-container,
  #filter-add-group-wrap {
    display: none;
    overflow: hidden;
  }

  /* Wenn aufgeklappt → alles anzeigen */
  .filter-sidebar.mobile-expanded #special-filters-container,
  .filter-sidebar.mobile-expanded #filter-groups-container {
    display: block;
  }
  .filter-sidebar.mobile-expanded #filter-add-group-wrap.visible {
    display: block;
  }

  /* Chevron dreht sich wenn aufgeklappt */
  .filter-sidebar.mobile-expanded .filter-mobile-chevron {
    transform: rotate(180deg);
  }

  /* Header-Layout anpassen: Toggle-Button links, Buttons rechts */
  .filter-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 10px;
    border-bottom: none;
    margin-bottom: 0;
    gap: 8px;
  }

  /* Border-bottom nur wenn aufgeklappt */
  .filter-sidebar.mobile-expanded .filter-sidebar-header {
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }
}

/* ── Scroll-top button: flash animation when triggered by fab-add-btn ── */
@keyframes scrollTopFlash {
  0%   { transform: scale(1);    background: var(--green); }
  30%  { transform: scale(1.25); background: var(--green2, #2d6048); }
  60%  { transform: scale(1.1);  background: var(--green); }
  100% { transform: scale(1);    background: var(--green); }
}
#scroll-top-btn.scroll-top-flash {
  animation: scrollTopFlash 0.65s cubic-bezier(.4,0,.2,1) forwards;
}
#scroll-top-btn.scroll-top-flash svg {
  animation: scrollTopFlash 0.65s cubic-bezier(.4,0,.2,1) forwards;
}

/* Suppress native clear button on type="search" inputs */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}