/* ============================================================
   fooddiez.de — dish.css
   single-gericht.php only. Not in the mockup — built fresh, but on
   the same visual language: rounded cards (18/22px), saffron
   accent, mono for labels/numbers, Charter serif for long text.
   ============================================================ */

.dish-hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 4vw, 52px); align-items: start;
  padding: clamp(18px, 3vw, 30px) 0 clamp(34px, 5vw, 54px);
}
.dish-hero h1 {
  font-size: clamp(2.1rem, 4.8vw, 3.4rem);
  line-height: 1.04; letter-spacing: -0.022em;
  margin: 6px 0 12px; font-style: italic; overflow-wrap: anywhere;
}
/* QA round 1 (2026-08-11): the 3 cornerstone dishes carry a fuller,
   keyword-complete fd_h1 override past 70 chars — smaller font-size only,
   never reworded. See feedback_long_h1_fix_via_font_size. */
.dish-hero h1.long { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.dish-hero .phon {
  font-family: var(--ff-mono); font-size: 0.9375rem; color: var(--ink-2);
  margin: 0 0 18px; letter-spacing: 0.02em; overflow-wrap: anywhere;
}
.dish-hero .phon i { font-style: normal; color: var(--herb); font-weight: 700; text-transform: uppercase; }
.dish-hero .gloss { font-size: 1.0625rem; line-height: 1.66; color: var(--ink-2); max-width: 46ch; margin: 0 0 12px; }
.dish-hero .byline { font-family: var(--ff-mono); font-size: 0.75rem; color: var(--ink-3); margin: 0 0 24px; }
.dish-hero .byline a { color: var(--herb); border-bottom: 1px solid currentColor; }

.dish-figure {
  margin: 0; border-radius: 22px; overflow: hidden; position: relative;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--surface); aspect-ratio: 4 / 3;
  /* source photos are 500–620 px wide; don't let a wide viewport upscale them */
  max-width: 620px;
}
.dish-figure img { width: 100%; height: 100%; object-fit: cover; }
.dish-figure figcaption {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--mast-bg); color: var(--mast-ink);
  font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 6px 12px 6px 14px;
}

/* Steckbrief card, same dl/fact grammar as the home deck.
   The card chrome (background/border/padding) lives on this wrapper, NOT on
   the <dl> itself — a <dl> may only contain <dt>/<dd>/<div>/<script>/
   <template> children, so the "Steckbrief" kicker label has to sit outside
   it (Lighthouse a11y: "definition-list" audit). */
.steckbrief {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 18px; padding: 18px; margin: 0 0 22px;
}
.steckbrief dl { display: grid; gap: 10px; margin: 0; }
.steckbrief .kicker {
  font-family: var(--ff-mono); font-size: 0.6875rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--herb); margin: 0 0 4px;
}
.steckbrief .fact { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.steckbrief dt { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-3); padding-top: 3px; }
.steckbrief dd { margin: 0; font-size: 0.8125rem; color: var(--ink); }
.steckbrief dd .sub { color: var(--ink-3); }
.steckbrief dd a { color: var(--herb); border-bottom: 1px solid currentColor; }

/* recipe body: two columns — ingredients card beside the numbered steps */
.recipe { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(24px, 4vw, 48px); align-items: start; }

.zutaten {
  background: var(--herb-wash); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 20px 22px;
  position: sticky; top: 20px;
}
.zutaten h2 { font-size: 1.125rem; margin: 0 0 4px; }
.zutaten .yield { font-family: var(--ff-mono); font-size: 0.625rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--herb-deep); margin: 0 0 14px; }
.zutaten ul { list-style: none; margin: 0; padding: 0; display: grid; }
.zutaten li {
  font-size: 0.9375rem; line-height: 1.5; color: var(--ink);
  padding: 9px 0; border-top: 1px solid var(--line);
}
.zutaten li:first-child { border-top: 0; padding-top: 0; }

/* ---------- section heads on the dish page ----------
   "Zubereitung" and "Häufige Fragen zu X" are the article's own top-level
   sections; the h2s inside .dish-notes ("Warum die Konsistenz Absicht ist" …)
   are subheads within one of them. All three were clamp(1.25,2.2vw,1.6rem) —
   the same size — so the page had an h1 and then a single flat tier of
   headings, and nothing in the type told you which blocks were structure and
   which were commentary. Raising the section tier to 2rem puts a real third
   step between the 3.4rem dish name and the 1.6rem prose subhead. */
.schritte h2 { font-size: clamp(1.45rem, 2.7vw, 2rem); line-height: 1.12; margin: 0 0 16px; }
.schritte ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 20px; }
.schritte li { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.schritte li::before {
  content: counter(step);
  font-family: var(--ff-mono); font-variant-numeric: tabular-nums;
  font-size: 0.8125rem; font-weight: 700;
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-ink);
  display: flex; align-items: center; justify-content: center;
}
.schritte li p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-2); padding-top: 4px; }

/* ---------- editorial notes ----------
   The .eyebrow is new. Every other section on this site announces itself with
   one (hero, all five front-page bands, every .page-head), but the two blocks
   below the recipe just began — a bold line of text with no kicker and no rule.
   That is also what made the lower half of the page read as loose: .prose is
   capped at 68ch and left-aligned, so from here down the layout abandoned the
   full-bleed two-column grammar it had been using and hugged the left edge with
   no shape on the right. The eyebrow's ::after hairline spans the whole
   container, which re-establishes the full width and turns the narrow column
   underneath into a deliberate reading measure. */
.dish-notes { margin-top: var(--sec); }
.dish-notes h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 12px; }

/* ---------- FAQ ----------
   Still no new colours, radii or type scale — but this section was added after
   the design pass that shaped the rest of the page, and it showed. Four things
   were wrong.

   1. Its h2 was the same size as the .dish-notes subheads above it, so a
      top-level section announced itself no louder than a paragraph heading.
   2. It had no eyebrow, unlike every other section on the site.
   3. .faq-list was capped at 68ch on a page whose top half is a full-bleed
      two-column grid, so seven cards sat in the left half with the right half
      empty. It now borrows .recipe's OWN 0.72fr/1.28fr split — the layout this
      exact page already uses one screen higher — with the heading in the left
      rail and the stack on the right. It fills the width by reusing an
      established grammar rather than inventing one.
   4. The open row was pixel-identical to the six closed ones apart from being
      taller, and the +/− was a thin unframed mono glyph. Open now takes the
      --herb-wash ground and --herb border of the .zutaten card, and the marker
      is a round token like .schritte li::before, filled saffron when open.
      Contrast on every new pairing: --ink on --herb-wash 13.1:1 light /
      11.5:1 dark, --ink-2 on --herb-wash 5.5:1 light / 6.9:1 dark,
      --btn-ink on --btn-bg 7.8:1 light / 11.8:1 dark. */
.dish-faq { margin-top: var(--sec); }
.dish-faq h2 { font-size: clamp(1.45rem, 2.7vw, 2rem); line-height: 1.12; margin: 0 0 10px; }
.faq-intro .eyebrow { margin-bottom: 12px; }
.faq-note { font-size: 0.875rem; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 34ch; }
.faq-list { display: grid; gap: 10px; align-content: start; }
.faq-item {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color .18s ease, background-color .18s ease;
}
.faq-item:hover { border-color: var(--herb); }
.faq-item[open] { background: var(--herb-wash); border-color: var(--herb); }
.faq-item summary {
  cursor: pointer; font-family: var(--ff-display); font-weight: 700;
  font-size: 1rem; line-height: 1.4; color: var(--ink);
  list-style: none; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* QA round 3: question text now lives in an <h3> for the accordion/outline
   rule (was a bare text node). Reset so the UA h3 style doesn't change
   anything visually — summary already carries the real type/weight/color. */
.faq-item summary .faq-q { margin: 0; font: inherit; }
.faq-item summary::after {
  content: "+"; margin-left: auto; flex: none;
  width: 26px; height: 26px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: var(--ff-mono); font-weight: 400; font-size: 1rem;
  line-height: 1; color: var(--herb);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.faq-item[open] summary::after {
  content: "−"; background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink);
}
.faq-item summary:hover { color: var(--herb); }
.faq-item summary:hover::after { border-color: var(--herb); }
.faq-item > p {
  margin: 0; padding: 0 18px 17px;
  font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); max-width: 64ch;
}

@media (min-width: 901px) {
  .dish-faq {
    display: grid; grid-template-columns: 0.72fr 1.28fr;
    gap: clamp(24px, 4vw, 48px); align-items: start;
  }
  /* mirrors .zutaten's sticky rail in the recipe block above */
  .faq-intro { position: sticky; top: 20px; }
}

@media (max-width: 900px) {
  .dish-hero { grid-template-columns: minmax(0, 1fr); }
  .dish-figure { max-width: 100%; }
  .recipe { grid-template-columns: minmax(0, 1fr); }
  .zutaten { position: static; }
  .dish-faq h2 { margin-bottom: 18px; }
  .faq-note { display: none; }
}
@media (max-width: 720px) {
  .steckbrief .fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}