/* Rezepte */
.toolbar { display: grid; gap: 10px; margin-bottom: 16px; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px; margin: -2px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; text-align: left; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; min-width: 0; }
.card:hover { border-color: var(--accent); }
.art { --ring: color-mix(in srgb, var(--fg) 9%, transparent);
  position: relative; display: grid; place-items: center; height: 112px;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, var(--ring) 34% 35%, transparent 35% 46%, var(--ring) 46% 47%, transparent 47%),
    hsl(var(--h) var(--art-s) var(--art-l));
  color: hsl(var(--h) 45% var(--art-ink)); font: 700 44px/1 var(--font-display); }
.art.big { height: 148px; border-radius: 14px; font-size: 60px; }
.card .body { padding: 12px 14px 14px; display: grid; gap: 6px; }
.card h3 { font-size: 17px; overflow-wrap: anywhere; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); }
.empty-state { text-align: center; padding: 36px 16px; color: var(--muted); display: grid; gap: 12px; justify-items: center; }


/* Rezeptfoto */
.art.photo { overflow: hidden; background: hsl(var(--h) var(--art-s) var(--art-l)); }
.art.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photoedit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.photoedit img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.photoedit .check { display: inline-flex; align-items: center; gap: 8px; }
input[type="file"] { font: inherit; max-width: 100%; }

input[type="file"]::file-selector-button { font: inherit; padding: 8px 14px; margin-right: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: inherit; cursor: pointer; }

.tag.new { background: var(--honey-soft); color: var(--honey); font-weight: 700; }

/* Zutaten-Zeilen im Rezeptformular */
.ingfield { display: grid; gap: 10px; }
.ingfield .lbl { font-weight: 600; font-size: 14px; }
.ingrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ingrow .ing-n, .ingrow .ing-extra { grid-column: 1 / -1; }
.ingrow input, .ingrow select { min-width: 0; width: 100%; }
.ing-extra { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 13px; }
.ing-extra[hidden] { display: none; }
.ing-extra label { display: inline-flex; gap: 6px; align-items: center; }
.ing-x { align-self: center; }
@media (min-width: 700px) {
  .ingrow { grid-template-columns: 90px 130px minmax(0, 1fr) auto; }
  .ingrow .ing-n { grid-column: auto; }
  .ingrow .ing-x { order: 4; }
  .ingrow .ing-extra { grid-column: 1 / -1; }
}