/* Selbst gehostete Schriften (statt Google Fonts CDN) - vermeidet die
   Uebertragung der Besucher-IP an Google-Server beim Laden der Seite.
   Nur latin/latin-ext-Subsets, da die App ausschliesslich deutsche Texte zeigt. */
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/static/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Struktur-Tokens (theme-unabhängig) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --text-xs: .75rem; --text-sm: .85rem; --text-base: 1rem;
  --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 2rem;
  --sidebar-width: 264px; --topbar-height: 60px; --content-max: 1100px;
  /* Emoji-Schriftarten am Ende explizit auflisten - ohne sie finden manche
     Browser/Systeme (v.a. Linux-Desktops ohne Noto Color Emoji, manche
     WebViews) fuer die App-Icons (📖 📁 🔗 ...) keine passende Schrift und
     zeigen leere Kaestchen statt echter Emoji. */
  --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-serif: 'Fraunces', Georgia, "Times New Roman", serif;

  /* Farb-Tokens: Hell (Standard) */
  --bg: #faf9f6;
  --chrome-bg: #dfe8da;
  --surface: #ffffff;
  --surface-2: #efe9df;
  --surface-hover: #f4f0e8;
  --text: #201b15;
  --text-muted: #6e6255;
  --border: #e3dccf;
  --link: #b5562e;
  --link-hover: #8f421f;
  --accent-sage: #4f6a45;
  --accent-sage-bg: rgba(79,106,69,0.12);
  --btn-bg: #8f421f;
  --btn-bg-hover: #742f13;
  --btn-text: #fffaf5;
  --tag-bg: rgba(181,86,46,0.10);
  --tag-text: #8f421f;
  --danger-bg: #fbe4df;
  --danger-text: #a33324;
  --danger-border: #f3c4ba;
  --shadow-sm: 0 1px 2px rgba(32,22,14,.06);
  --shadow-md: 0 8px 24px rgba(32,22,14,.10);
  --shadow-lg: 0 24px 56px rgba(32,22,14,.18);
  --overlay: rgba(32,22,14,.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1b1815;
    --chrome-bg: #252220;
    --surface: #252220;
    --surface-2: #2f2a26;
    --surface-hover: #362f2a;
    --text: #f2e8dc;
    --text-muted: #b7a996;
    --border: #3c332c;
    --link: #d98f5f;
    --link-hover: #eaa876;
    --accent-sage: #93b280;
    --accent-sage-bg: rgba(147,178,128,0.16);
    --btn-bg: #cd7f4f;
    --btn-bg-hover: #dd9366;
    --btn-text: #1b1815;
    --tag-bg: rgba(217,143,95,0.16);
    --tag-text: #e3a878;
    --danger-bg: rgba(198,90,66,0.18);
    --danger-text: #e6947c;
    --danger-border: rgba(198,90,66,0.4);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 56px rgba(0,0,0,.6);
    --overlay: rgba(0,0,0,.55);
  }
}

:root[data-theme="dark"] {
  --bg: #1b1815;
  --chrome-bg: #252220;
  --surface: #252220;
  --surface-2: #2f2a26;
  --surface-hover: #362f2a;
  --text: #f2e8dc;
  --text-muted: #b7a996;
  --border: #3c332c;
  --link: #d98f5f;
  --link-hover: #eaa876;
  --accent-sage: #93b280;
  --accent-sage-bg: rgba(147,178,128,0.16);
  --btn-bg: #cd7f4f;
  --btn-bg-hover: #dd9366;
  --btn-text: #1b1815;
  --tag-bg: rgba(217,143,95,0.16);
  --tag-text: #e3a878;
  --danger-bg: rgba(198,90,66,0.18);
  --danger-text: #e6947c;
  --danger-border: rgba(198,90,66,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.6);
  --overlay: rgba(0,0,0,.55);
}

* { box-sizing: border-box; }

/* Sicherheitsnetz gegen horizontales Scrollen durch einzelne zu breite Elemente
   (z.B. eine lange Quell-URL ohne Umbruchstellen) - verhindert, dass so etwas
   die ganze Seite seitlich aufreisst. Elemente mit eigenem overflow-x:auto
   (z.B. Tabellen) sind davon unberuehrt, da sie einen eigenen Scroll-Kontext haben. */
html { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease;
  overflow-x: hidden;
}

h1, h2, .brand, .recipe-card-body h3 { font-family: var(--font-serif); }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--topbar-height);
  padding: 0 var(--space-5);
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 30;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  font-size: var(--text-xl);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.menu-toggle:hover { background: var(--surface-2); }

.theme-toggle {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md);
  color: var(--text); font-size: var(--text-lg); cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.theme-toggle:hover { background: var(--surface-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: 600; color: var(--text); text-decoration: none; }
.brand-icon { width: 28px; height: 28px; object-fit: contain; }

.add-btn {
  margin-left: auto;
  background: var(--btn-bg);
  color: var(--btn-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.add-btn:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* App-Shell: Sidebar + Inhalt */
.app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-height)); }

.sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  flex-shrink: 0;
  align-self: stretch;
  background: var(--chrome-bg);
  border-right: 1px solid var(--border);
  padding: var(--space-4);
  font-family: var(--font-sans);
}
.sidebar-overlay { display: none; }

.sidebar-resize-handle {
  position: absolute; top: 0; right: -3px; bottom: 0; width: 6px;
  cursor: col-resize; z-index: 26;
}
.sidebar-resize-handle:hover, .sidebar-resize-handle.dragging { background: var(--link); opacity: 0.35; }

.sidebar-nav { margin-top: var(--space-5); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.sidebar-nav-header {
  font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin-bottom: var(--space-2); padding: 0 var(--space-2);
}
.sidebar-nav-link {
  display: block; padding: var(--space-2); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--text-sm);
  transition: background 0.12s, color 0.12s;
}
.sidebar-nav-link:hover { background: var(--surface-hover); color: var(--link); }
.sidebar-nav-link.active { background: var(--tag-bg); color: var(--link); }

.category-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.cat-add-btn {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  width: 26px; height: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.cat-add-btn:hover { background: var(--link); color: #fff; border-color: var(--link); }

.cat-root { list-style: none; margin: 0; padding: 0; }
.cat-node { position: relative; }
.cat-children {
  list-style: none; margin: var(--space-1) 0 0 8px; padding: 0 0 0 12px;
  border-left: 1px solid var(--border);
}
.cat-node.collapsed > .cat-children { display: none; }

.cat-row { display: flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-sm); transition: background 0.12s; cursor: grab; }
.cat-row:hover { background: var(--surface-hover); }
.cat-row:hover .cat-delete-btn, .cat-row:hover .cat-rename-btn { display: inline-flex; }
.cat-row.dragging { opacity: 0.4; cursor: grabbing; }
.cat-row.drag-over { background: var(--tag-bg); outline: 2px dashed var(--link); outline-offset: -2px; }

.cat-toggle, .cat-toggle-spacer, .cat-delete-btn, .cat-rename-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  width: 26px; height: 26px; flex-shrink: 0; text-align: center; font-size: var(--text-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.cat-delete-btn, .cat-rename-btn { display: none; border-radius: var(--radius-sm); width: 28px; height: 28px; font-size: var(--text-base); }
.cat-delete-btn { margin-right: var(--space-1); }
.cat-rename-btn { margin-left: auto; }
.cat-rename-btn:hover { background: var(--surface-2); color: var(--link); }
.cat-delete-btn:hover { background: var(--danger-bg); color: var(--danger-text); }

.cat-rename-input-inline {
  flex: 1; min-width: 0; font-family: var(--font-sans); font-size: var(--text-sm);
  padding: 1px var(--space-1); border: 1px solid var(--link); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  /* Ohne eigenen Rand fuegt sich ein Link nahtlos zwischen Nachbarn ein, das
     sichtbar umrandete Eingabefeld braucht aber etwas Luft, sonst wirkt es an
     z.B. dem farbig hinterlegten "Alle Rezepte" foermlich festgeklebt. */
  margin: var(--space-1) 0;
}
.cat-rename-input-inline:focus { outline: none; box-shadow: 0 0 0 2px var(--tag-bg); }
.cat-node.collapsed > .cat-row .cat-toggle { transform: rotate(-90deg); display: inline-block; }

.cat-link {
  flex: 1;
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text);
  font-size: var(--text-base);
  font-weight: 500;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.cat-link:hover { color: var(--link); }
.cat-link.cat-depth-1 { font-weight: 700; }
.cat-link.cat-depth-2 { font-weight: 400; }
.cat-link.cat-depth-3 { font-weight: 400; font-size: var(--text-sm); color: var(--text-muted); }
.cat-link.active { border-left-color: var(--link); background: var(--tag-bg); color: var(--link); font-weight: 700; }

.container { max-width: var(--content-max); flex: 1; margin: 0 auto; padding: var(--space-5); min-width: 0; }

.active-filter-pill {
  display: inline-flex; gap: var(--space-2); align-items: center;
  background: var(--tag-bg); border: 1px solid var(--border);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  margin-bottom: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--tag-text);
}
.active-filter-pill a { color: var(--text-muted); text-decoration: none; font-weight: 700; }
.active-filter-pill a:hover { color: var(--text); }

.category-pill {
  display: inline-block;
  background: var(--accent-sage-bg); border: 1px solid transparent;
  color: var(--accent-sage); text-decoration: none;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  transition: background 0.12s;
}
.category-pill:hover { background: var(--accent-sage); color: var(--surface); }

.detail-meta-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.detail-meta-panel .meta-row { margin: 0; }
.detail-meta-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}
.detail-tags.tags { margin-top: 0; justify-content: flex-end; }

.search-bar { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.search-bar input[type=text] {
  flex: 1; min-width: 200px; padding: var(--space-3) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); font-family: var(--font-sans); background: var(--surface); color: var(--text);
}
.search-bar select, .search-bar button {
  padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text); font-family: var(--font-sans); cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.search-bar select:hover, .search-bar input[type=text]:hover { border-color: var(--link); }
.search-bar button { background: var(--btn-bg); color: var(--btn-text); border: none; font-weight: 600; }

.usage-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.usage-filter-form select {
  width: auto; margin-bottom: 0; padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-sans); cursor: pointer;
}
.usage-filter-form .btn-secondary { text-decoration: none; }

.usage-pagination { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }

.usage-detail-text {
  white-space: pre-wrap; word-break: break-word; font-family: var(--font-sans); font-size: var(--text-sm);
  background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3);
  max-height: 50vh; overflow-y: auto; margin: 0; color: var(--text);
}
.usage-detail-link { color: var(--link); word-break: break-all; }
.usage-detail-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.usage-detail-images img { width: 100%; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 1; }
.search-bar button:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-sm); }

.tag-autocomplete { position: relative; flex: 1; min-width: 160px; }
.tag-autocomplete input[type=text] { margin-bottom: 0; }
.tag-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: var(--space-1) 0;
  max-height: 240px; overflow-y: auto;
}
.tag-suggestions.hidden { display: none; }
.tag-suggestion {
  padding: var(--space-2) var(--space-3); cursor: pointer; font-family: var(--font-sans);
  font-size: var(--text-sm); color: var(--text);
}
.tag-suggestion:hover, .tag-suggestion.active { background: var(--tag-bg); color: var(--tag-text); }

/* Kompakte einzeilige Statistik (Startseite, API-Nutzung) */
.usage-summary {
  font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted);
  background: var(--surface-2); border-radius: var(--radius-md); border: 1px solid var(--border);
  padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); display: inline-block;
}
.usage-summary strong { color: var(--text); font-weight: 700; }
@media (max-width: 640px) {
  .usage-summary { display: block; }
}

/* Startseite: Suche links, Statistikzeile rechts, in einer Zeile (Desktop).
   Feste, gemeinsame Hoehe fuer Suchfeld/Button und die Statistik-Pille, statt
   sich auf Flex-Stretch zu verlassen (verhaelt sich bei verschachtelten
   Flex-Containern nicht konsistent). */
.home-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.home-toolbar .usage-summary {
  /* <p> hat vom Browser einen margin-top, den es sonst nirgends braucht - ohne
     margin:0 wird die Box beim vertikalen Zentrieren in .home-toolbar dadurch
     asymmetrisch nach unten verschoben (nicht auf gleicher Hoehe wie die Suche). */
  margin: 0; flex-shrink: 0; white-space: nowrap; box-sizing: border-box;
  height: 44px; padding-top: 0; padding-bottom: 0;
  display: flex; align-items: center; gap: var(--space-2);
}
.usage-stat { white-space: nowrap; }
.usage-sep { opacity: 0.5; }
.home-toolbar .search-bar { margin-bottom: 0; flex: 1; min-width: 0; order: -1; }
.home-toolbar .search-bar input[type=text],
.home-toolbar .search-bar button { height: 44px; box-sizing: border-box; }
@media (max-width: 900px) {
  .home-toolbar { flex-direction: column; align-items: stretch; }
  .home-toolbar .usage-summary {
    white-space: normal; height: auto; flex-wrap: wrap;
    padding-top: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-3); order: 0;
  }
  .home-toolbar .search-bar { order: 0; }
  .home-toolbar .search-bar input[type=text], .home-toolbar .search-bar button { height: auto; }
}

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--space-5);
}

.recipe-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: block;
}
.recipe-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--link); }
.recipe-card { cursor: grab; }
.recipe-card.dragging { opacity: 0.4; cursor: grabbing; }
.recipe-card .img-wrap { overflow: hidden; }
.recipe-card img { width: 100%; height: 155px; object-fit: cover; display: block; transition: transform 0.35s ease; }
.recipe-card:hover img { transform: scale(1.06); }
.no-image {
  width: 100%; height: 155px; display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; background: var(--surface-2);
}
.recipe-card-body { padding: var(--space-4); }
.recipe-card-body h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.meta { font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-sans); }

.tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.tag {
  background: var(--tag-bg); color: var(--tag-text); font-size: var(--text-xs); font-weight: 600; padding: 3px var(--space-3);
  border-radius: var(--radius-pill); font-family: var(--font-sans);
}

.empty-state { text-align: center; padding: var(--space-7) var(--space-5); color: var(--text-muted); }
.empty-state.hidden { display: none; }

/* Add page */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.tab-btn {
  padding: var(--space-2) var(--space-4); border: none; background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--text-base); color: var(--text-muted); border-bottom: 3px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--link); border-bottom-color: var(--link); font-weight: 700; }
.tab-panel.hidden { display: none; }
.hint { color: var(--text-muted); font-size: var(--text-sm); font-family: var(--font-sans); }
.add-manual-hint {
  margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--text-sm); font-family: var(--font-sans);
}
.add-manual-hint a { color: var(--link); font-weight: 600; }

form input[type=url], form input[type=text], form input[type=number], form input[type=password], form input[type=email], form textarea, form input[type=file], form select {
  width: 100%; padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-sans); background: var(--surface); color: var(--text); margin-bottom: var(--space-3);
  transition: border-color 0.15s, box-shadow 0.15s;
}
form input:hover, form textarea:hover, form select:hover { border-color: var(--text-muted); }
form input:focus, form textarea:focus, form select:focus {
  outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--tag-bg);
}
form button[type=submit] {
  background: var(--btn-bg); color: var(--btn-text); border: none; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md); cursor: pointer; font-family: var(--font-sans); font-weight: 600;
  box-shadow: var(--shadow-sm); transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
form button[type=submit]:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
form button:disabled { opacity: 0.6; cursor: wait; }

.loading { text-align: center; padding: var(--space-6); }
.loading.hidden { display: none; }
.spinner {
  border: 4px solid var(--border); border-top: 4px solid var(--link); border-radius: 50%;
  width: 36px; height: 36px; animation: spin 0.8s linear infinite; margin: 0 auto var(--space-3);
}
@keyframes spin { to { transform: rotate(360deg); } }
.error { background: var(--danger-bg); color: var(--danger-text); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--danger-border); font-family: var(--font-sans); margin-top: var(--space-4); }
.error.hidden { display: none; }

/* Login */
.login-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; background: var(--bg); }
.login-card {
  width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6);
}
.login-card h1 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.login-card .error { margin-bottom: var(--space-3); }
.login-card label { display: block; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-1); }
.login-card .hint { margin-bottom: var(--space-3); }
.login-forgot { margin: var(--space-3) 0 0; text-align: center; font-family: var(--font-sans); font-size: var(--text-sm); }

/* Footer mit rechtlichen Links */
.site-footer {
  display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-5) var(--space-4); font-family: var(--font-sans); font-size: var(--text-xs); color: var(--text-muted);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--link); text-decoration: underline; }

/* Impressum / Datenschutz */
.legal-page { display: flex; justify-content: center; min-height: 100vh; background: var(--bg); padding: var(--space-6) var(--space-4); }
.legal-card {
  width: 100%; max-width: 720px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); height: fit-content;
}
.legal-card > a.brand { margin-bottom: var(--space-5); }
.legal-content h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-5); }
.legal-content h2 { font-size: var(--text-lg); margin: var(--space-5) 0 var(--space-2); }
.legal-content p, .legal-content ul { font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1.6; color: var(--text); margin: 0 0 var(--space-3); }
.legal-content ul { padding-left: var(--space-5); }
.legal-content a { color: var(--link); }

/* Admin: Benutzerverwaltung */
.users-table-scroll { overflow-x: auto; }
.users-table { width: 100%; min-width: 480px; border-collapse: collapse; margin: var(--space-4) 0; font-family: var(--font-sans); }
.users-table th, .users-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.users-table th { color: var(--text-muted); font-weight: 600; font-size: var(--text-sm); }
.badge-admin {
  display: inline-block; background: var(--accent-sage-bg); color: var(--accent-sage);
  padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-family: var(--font-sans);
}
.badge-unverified {
  display: inline-block; background: var(--danger-bg); color: var(--danger-text);
  padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); font-family: var(--font-sans);
  margin-left: var(--space-1);
}
.admin-users-form { max-width: 420px; }
.checkbox-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); font-family: var(--font-sans); }
.checkbox-row input { width: auto; margin: 0; }

.delete-user-form { display: inline-block; vertical-align: middle; margin-right: var(--space-2); }
.reset-password-details { display: inline-block; vertical-align: middle; margin-right: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); }
.reset-password-details summary { cursor: pointer; color: var(--text-muted); }
.reset-password-details summary:hover { color: var(--link); }
.reset-password-form { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.reset-password-form input { margin-bottom: 0; width: auto; }

/* Rezept teilen - eigenes Website-Popup (natives [popover]-Attribut: rendert im
   Top-Layer, schliesst automatisch bei Klick daneben/Escape, ganz ohne eigenes JS
   dafuer) statt einer permanent sichtbaren Karte unten auf der Seite. */
.share-popover {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-5) var(--space-4);
  width: min(640px, calc(100vw - var(--space-6))); max-height: min(85vh, 600px); overflow-y: auto;
}
.share-popover::backdrop { background: rgba(0,0,0,.45); }
.share-popover-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.share-popover-header h2 {
  /* [popover] setzt intern eine eigene Standard-Textfarbe, die die Vererbung
     von body ueberschreibt - ohne dieses Farb-Reset stand die Ueberschrift
     immer in reinem Schwarz statt der Theme-Textfarbe. */
  margin: 0; font-size: var(--text-lg); color: var(--text);
}
.share-popover-close {
  background: none; border: none; cursor: pointer; color: var(--text-muted); font-size: var(--text-xl);
  line-height: 1; padding: var(--space-1); flex-shrink: 0;
}
.share-popover-close:hover { color: var(--link); }

.confirm-popover {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: var(--space-5) var(--space-4);
  width: min(420px, calc(100vw - var(--space-6)));
}
.confirm-popover::backdrop { background: rgba(0,0,0,.45); }
.confirm-popover h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); color: var(--text); }
.confirm-popover p { margin: 0 0 var(--space-4); color: var(--text-muted); }
.confirm-popover-actions { display: flex; justify-content: space-between; gap: var(--space-3); }
.share-panel-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: stretch; }
.share-col {
  /* bewusst kein eigener Rahmen/Padding (keine dritte Verschachtelungsebene) -
     Inhalt bleibt so buendig mit der "Teilen"-Ueberschrift. */
  min-width: 0;
}
.share-col h3 { margin: 0 0 var(--space-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.share-col .hint { margin-top: 0; }
.share-users-form { margin-bottom: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.share-users-form .pantry-chips { margin-bottom: 0; min-height: 0; }
.share-users-form > button[type=submit] { align-self: flex-start; }
.public-share-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.public-share-url {
  flex: 1; min-width: 160px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.shared-badge {
  display: inline-block; background: var(--tag-bg); color: var(--tag-text);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
}

/* Öffentliche Rezeptansicht */
.public-topbar { justify-content: flex-start; }
.public-badge {
  margin-left: auto; color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-sm);
}

/* Sidebar: angemeldeter Benutzer, unten links */
.sidebar-user {
  margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border);
  font-family: var(--font-sans); font-size: var(--text-sm);
}
.sidebar-user-row { display: flex; align-items: center; gap: var(--space-2); }
.sidebar-user-avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--btn-bg); color: var(--btn-text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; font-size: var(--text-base);
}
.sidebar-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sidebar-user-name { font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-link { color: var(--text-muted); text-decoration: none; font-size: var(--text-xs); }
.sidebar-user-link:hover { color: var(--link); }
button.sidebar-user-link {
  background: none; border: none; padding: 0; margin: 0; font-family: var(--font-sans); cursor: pointer;
}
.sidebar-user .logout-form button {
  background: none; border: none; color: var(--link); cursor: pointer; font-family: var(--font-sans);
  font-size: var(--text-xs); padding: 2px var(--space-2); margin: -2px calc(var(--space-2) * -1);
  border-radius: var(--radius-sm); text-align: left; transition: background 0.15s, color 0.15s;
}
.sidebar-user .logout-form button:hover { background: var(--link-hover); color: var(--btn-text); }

/* Detail page */
.detail, .panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-5) var(--space-6);
}
.panel + .panel { margin-top: var(--space-5); }
.panel h1, .panel h2 { margin-top: 0; }
.back-link { font-family: var(--font-sans); color: var(--link); text-decoration: none; font-weight: 600; }
.back-link:hover { color: var(--link-hover); }
.detail-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius-lg); margin: var(--space-3) 0; box-shadow: var(--shadow-md); }

.detail-gallery { margin: var(--space-3) 0; }
.detail-gallery-main { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.detail-gallery-main .detail-image { margin: 0; display: block; border-radius: 0; box-shadow: none; }
.gallery-drag-wrap { width: 100%; overflow: hidden; touch-action: pan-y; }
.gallery-track { display: flex; width: 300%; transform: translateX(-33.3333%); }
.gallery-slide { flex: 0 0 33.3333%; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.5); color: #fff; font-size: var(--text-xl); line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.gallery-nav:hover { background: rgba(0,0,0,.75); }
.gallery-prev { left: var(--space-3); }
.gallery-next { right: var(--space-3); }
.gallery-counter {
  position: absolute; bottom: var(--space-3); right: var(--space-3);
  background: rgba(0,0,0,.55); color: #fff; font-size: var(--text-xs); font-family: var(--font-sans);
  padding: 2px var(--space-2); border-radius: var(--radius-pill);
}
.detail-gallery-thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }
.gallery-thumb {
  padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); cursor: pointer;
  overflow: hidden; background: none; opacity: 0.6; transition: opacity 0.15s, border-color 0.15s;
}
.gallery-thumb:hover { opacity: 0.85; }
.gallery-thumb.active { opacity: 1; border-color: var(--link); }
.gallery-thumb img { width: 64px; height: 64px; object-fit: cover; display: block; }
.detail-gallery-main .detail-image { cursor: zoom-in; }

.lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: rgba(10,8,6,.92); align-items: center; justify-content: center;
  touch-action: none; overflow: hidden;
}
.lightbox-overlay.active { display: flex; }
.lightbox-drag-wrap { width: 100%; height: 100%; overflow: hidden; position: relative; }
.lightbox-track { display: flex; width: 300%; height: 100%; transform: translateX(-33.3333%); }
.lightbox-slide { flex: 0 0 33.3333%; display: flex; align-items: center; justify-content: center; height: 100%; }
.lightbox-image { max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); pointer-events: none; user-select: none; }
.lightbox-close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 10;
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,.5); color: #fff; font-size: var(--text-xl); line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s;
}
.lightbox-overlay .gallery-nav, .lightbox-overlay .gallery-counter { z-index: 10; }
.lightbox-close:hover { background: rgba(0,0,0,.75); }
body.lightbox-open { overflow: hidden; }

@media (max-width: 640px) {
  .lightbox-overlay { background: #000; }
  .lightbox-image { max-width: 100vw; max-height: 100vh; border-radius: 0; box-shadow: none; }
  .lightbox-prev, .lightbox-next { display: none; }
  /* Kategorie-Pille und Tags untereinander statt links/rechts verteilt, wenn sie umbrechen */
  .detail-meta-secondary { flex-direction: column; align-items: flex-start; }
  .detail-tags.tags { justify-content: flex-start; }
  /* Löschen-Button auf dem Handy nur als Icon, rechts ausgerichtet statt neben Bearbeiten.
     margin-left:auto muss auf dem .delete-form sitzen, nicht auf dem Button darin -
     der Button selbst ist kein direktes Flex-Kind von .detail-actions. Bei langen
     Titeln bricht .detail-actions in eine eigene Zeile um, nimmt dabei aber ohne
     width:100% nur die Breite ihres Inhalts ein - "rechtsbuendig" waere dann nur
     rechtsbuendig INNERHALB dieser schmalen Box, nicht auf dem Bildschirm. */
  .detail-actions { width: 100%; }
  .btn-delete-label { display: none; }
  .delete-form { margin-left: auto; }
  .btn-delete {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-lg);
  }
}
.detail-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); }
.detail-header h1 { font-size: var(--text-2xl); margin: var(--space-2) 0; }
.detail-actions { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); flex-wrap: wrap; }
/* Hoehere Spezifitaet noetig als "form button[type=submit]" (padding/background/box-shadow),
   sonst sehen <button class="btn-danger/btn-secondary"> in Formularen (z.B. "Löschen") groesser
   und andersfarbig aus als <a class="btn-secondary">-Links wie "Bearbeiten". */
.btn-secondary, .btn-danger, form button.btn-secondary, form button.btn-danger {
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); text-decoration: none; font-size: var(--text-sm); cursor: pointer; border: 1px solid var(--border);
  font-family: var(--font-sans); font-weight: 600; box-shadow: none; transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.btn-secondary, form button.btn-secondary { background: var(--surface); color: var(--text); }
.btn-secondary:hover, form button.btn-secondary:hover { background: var(--surface-hover); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-danger, form button.btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-border); }
.btn-danger:hover, form button.btn-danger:hover { filter: brightness(0.95); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.description { color: var(--text-muted); font-size: var(--text-lg); line-height: 1.5; }
.meta-row { display: flex; gap: var(--space-4); font-family: var(--font-sans); color: var(--text-muted); margin: var(--space-3) 0; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.detail-times {
  display: flex; gap: var(--space-4); flex-wrap: wrap; margin-left: auto;
  /* gleicher linker Versatz wie .portion-stepper (1px Rahmen + Padding), damit die
     Icons darunter auf gleicher Hoehe wie das Portionen-Icon beginnen, wenn die
     Zeiten (z.B. auf dem Handy) unter die Portionen umbrechen */
  padding-left: calc(var(--space-2) + 1px);
}
.meta-icon { display: inline-block; width: 1.3em; text-align: center; }
.detail-columns { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-6); margin-top: var(--space-5); }
.ingredients h2, .steps h2 { font-size: var(--text-xl); }
.ingredients ul { list-style: none; padding: 0; }
.ingredients li { padding: var(--space-2) 0; border-bottom: 1px dashed var(--border); }
.ingredient-row { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.ingredient-row input[type=checkbox] { flex-shrink: 0; margin-top: 4px; }
.ingredient-text { flex: 1; min-width: 0; }
.ingredients .ing-amount { color: var(--link); }
.steps ol { padding-left: var(--space-5); }
.steps li { margin-bottom: var(--space-4); line-height: 1.6; }
.source-line { margin-top: var(--space-6); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); }
.source-line a { color: var(--link); overflow-wrap: anywhere; word-break: break-word; }
.ai-notes { font-style: italic; }

/* Portionsrechner */
.portion-stepper {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
}
.portion-btn {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-size: var(--text-base);
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
/* @media (hover: hover) statt einfachem :hover, sonst bleibt der Button auf
   Touch-Geraeten nach dem Antippen "haengen" (Mobilbrowser simulieren :hover
   beim Tap und loesen es erst beim naechsten Tap woanders wieder). */
@media (hover: hover) {
  .portion-btn:hover { background: var(--link); color: #fff; border-color: var(--link); }
}
/* :active statt :hover fuers Tastendruck-Feedback auf dem Handy - faerbt sich beim
   Antippen kurz ein und geht dank der obigen transition beim Loslassen sanft mit
   minimaler Verzoegerung zurueck, bleibt aber (anders als :hover) nie haengen. */
.portion-btn:active { background: var(--link); color: #fff; border-color: var(--link); }
#portion-count { font-weight: 700; color: var(--text); }

/* Edit form */
.edit-form label { display: block; margin: var(--space-4) 0 var(--space-1); font-family: var(--font-sans); font-weight: 600; font-size: var(--text-sm); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.form-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }

/* Zutaten-/Schritte-Editor: Zeilen mit Drag-Griff, einzelnen Feldern und Entfernen-Button */
.ingredient-edit-list, .step-edit-list { display: flex; flex-direction: column; gap: var(--space-1); }
.sortable-row {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 4px var(--space-2);
}
.drag-handle {
  flex-shrink: 0; cursor: grab; color: var(--text-muted); font-size: var(--text-base);
  padding: 0 var(--space-1); user-select: none; touch-action: none;
}
.drag-handle:active { cursor: grabbing; }
.move-buttons { display: none; flex-direction: column; flex-shrink: 0; }
.move-btn {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 9px; line-height: 1.3; padding: 0 var(--space-1); transition: color 0.15s;
}
.move-btn:hover { color: var(--link); }
.ingredient-edit-row input[type=text], .step-edit-row textarea {
  margin-bottom: 0; padding: 6px var(--space-2);
}
.ingredient-edit-row input[name=ingredient_amount] { flex: 0 0 70px; }
.ingredient-edit-row input[name=ingredient_unit] { flex: 0 0 90px; }
.ingredient-edit-row input[name=ingredient_name] { flex: 1; min-width: 0; }
.step-edit-row .step-number {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--tag-bg); color: var(--tag-text);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 700;
}
.step-edit-row textarea {
  flex: 1; min-width: 0; resize: none; overflow: hidden; line-height: 1.4;
}
.row-remove-btn {
  flex-shrink: 0; background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: var(--text-lg); line-height: 1; padding: 0 var(--space-1); transition: color 0.15s;
}
.row-remove-btn:hover { color: var(--danger-text); }
.add-row-btn {
  display: block; width: 100%; margin-top: var(--space-2); padding: var(--space-2);
  background: none; border: 1px dashed var(--border); border-radius: var(--radius-md);
  color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.add-row-btn:hover { border-color: var(--link); color: var(--link); }

@media (max-width: 640px) {
  .ingredient-edit-row input[name=ingredient_amount] { flex: 0 0 56px; }
  .ingredient-edit-row input[name=ingredient_unit] { flex: 0 0 64px; }
  /* Der Griff funktioniert dank Pointer Events auch per Touch - die Auf/Ab-Buttons
     bleiben zusaetzlich als Fallback fuer feine Korrekturen sichtbar. */
  .move-buttons { display: flex; }
}

/* Bild-Picker (Edit-Modus) */
.image-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); font-family: var(--font-sans); }
.image-picker-item {
  position: relative; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-2); transition: border-color 0.15s, transform 0.15s;
}
/* Nur auf Geraeten mit echtem Hover anheben - sonst "hovert" ein Finger beim
   Vorbeischieben ueber Nachbarkacheln waehrend des Ziehens und der Hub flackert. */
@media (hover: hover) {
  .image-picker-item:hover { transform: translateY(-2px); }
}
.image-picker-item.selected { border-color: var(--link); }
.image-picker-select { display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer; }
.image-picker-item img { width: 100%; height: 90px; object-fit: cover; display: block; }
.cover-badge {
  position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff;
  font-size: var(--text-xs); text-align: center; padding: 2px 0;
}
.cover-badge-hint { opacity: 0; transition: opacity 0.15s; }
.image-picker-item:hover .cover-badge-hint { opacity: 1; }
.image-picker-remove {
  position: absolute; top: 4px; right: 4px; z-index: 2; width: 22px; height: 22px; line-height: 20px;
  border: none; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: var(--text-sm);
  cursor: pointer; padding: 0; text-align: center;
}
.image-picker-remove:hover { background: var(--link); }
.image-drag-handle {
  position: absolute; top: 4px; left: 4px; z-index: 3; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; font-size: var(--text-md); cursor: grab;
  /* verhindert, dass der Browser die Geste als Seiten-Scroll interpretiert -
     sonst kommt auf Touch-Geraeten kein pointermove fuers Ziehen an */
  touch-action: none;
  user-select: none;
}
/* Waehrend des Ziehens wird das ECHTE Element schwebend positioniert (nicht ein
   separat gestylter Klon) - so sieht es beim Bewegen exakt so aus wie sonst auch. */
.dragging-live { position: fixed; z-index: 1000; pointer-events: none; margin: 0; }
.drag-placeholder { background: var(--surface-2); border: 1px dashed var(--border); box-sizing: border-box; }
.image-upload-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; font-family: var(--font-sans); }
.image-upload-row input[type=file] { width: auto; margin-bottom: 0; flex: 1; min-width: 200px; }

/* "Was kann ich kochen?" */
.pantry-input { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.pantry-input .tag-autocomplete { flex: 1; min-width: 200px; }

.pantry-quantity-picker {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: var(--space-3); margin-bottom: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm);
}
.pantry-quantity-picker.hidden { display: none; }
#pantry-quantity-label { font-weight: 600; }
.pantry-quantity-chips { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.pantry-qty-chip, .pantry-quantity-picker button {
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm);
  transition: background 0.12s, color 0.12s;
}
.pantry-qty-chip:hover { background: var(--link); color: #fff; border-color: var(--link); }
#pantry-quantity-custom {
  width: auto; margin-bottom: 0; flex: 1; min-width: 120px;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-sans); background: var(--surface); color: var(--text);
}
#pantry-quantity-custom:focus { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--tag-bg); }

.pantry-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.pantry-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--tag-bg); color: var(--tag-text); border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
}
.pantry-chip button {
  background: none; border: none; color: inherit; cursor: pointer; font-size: var(--text-base);
  line-height: 1; padding: 0 var(--space-1);
}
.pantry-match { color: var(--accent-sage); font-weight: 600; }
.pantry-missing { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Responsive */
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar {
    position: fixed; top: var(--topbar-height); bottom: 0; left: -100%;
    width: 80vw; max-width: 320px; z-index: 25;
    box-shadow: var(--shadow-lg); transition: left .2s ease; overflow-y: auto;
  }
  .sidebar.open { left: 0; }
  .sidebar-resize-handle { display: none; }
  .sidebar-overlay.visible {
    display: block; position: fixed; inset: 0; top: var(--topbar-height);
    background: var(--overlay); z-index: 20;
  }
}

@media (max-width: 640px) {
  .recipe-grid { grid-template-columns: 1fr 1fr; }
  .detail, .panel { padding: var(--space-4); }
  .share-popover { padding: var(--space-4) var(--space-3); width: calc(100vw - var(--space-4)); }
  .share-panel-columns { gap: var(--space-6); }
  .tabs { flex-wrap: wrap; gap: 0; }
  .tab-btn { padding: var(--space-2) var(--space-2); font-size: var(--text-sm); }
  .detail-columns { grid-template-columns: 1fr; }
  .share-panel-columns { grid-template-columns: 1fr; gap: var(--space-5); }
  .row3 { grid-template-columns: 1fr; }
  .search-bar { flex-direction: column; }
  .topbar { padding: 0 var(--space-3); }
  .container { padding: var(--space-4); }
  .image-picker { grid-template-columns: repeat(3, 1fr); }
  .add-btn-label { display: none; }
  .add-btn {
    width: 40px; height: 40px; padding: 0;
    margin-left: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-lg);
  }
  .theme-toggle {
    position: static;
    margin-left: auto;
    width: 40px; height: 40px;
    box-shadow: none;
  }
}