/* ==========================================================================
   KAORU — HTML-Fassung der Speisekarten
   --------------------------------------------------------------------------
   Wird ausschliesslich auf Seiten geladen, die [kaoru_karte_html] enthalten.
   Deshalb steht das hier und nicht in kaoru.css: Die Karten sind ein
   Sonderfall einer einzigen Seite, das Hauptstylesheet soll davon frei
   bleiben.

   Das Akkordeon selbst kommt aus kaoru.css (.faq .wp-block-details) — hier
   nur der Inhalt der Karte. Alle Farben und Schriftgroessen stammen aus den
   Tokens in :root, es werden keine neuen definiert.
   ========================================================================== */

/* Der Akkordeon-Inhalt darf breiter sein als der Fliesstext-Standard (70ch). */
.faq .wp-block-details > .kmenu { max-width: none; padding: 0 24px 28px; }
.kmenu__status { margin: 0; padding: 4px 0 20px; color: var(--paper-faint); font-size: var(--fs-body); }

/* --- Abschnitt ---------------------------------------------------------- */
.kaoru-menu__section { margin-top: 38px; }
.kaoru-menu__section:first-child { margin-top: 4px; }

.kaoru-menu__section-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap;
  margin: 0 0 6px; color: var(--paper);
  font-family: var(--f-display); font-weight: var(--fw-display); font-size: var(--fs-h3); line-height: 1.1; letter-spacing: 0;
}
/* Der Abschnittspreis steht im h2 und würde dessen Display-Serife in
   Schnitt 500 erben — bei gleicher Pixelgröße wirkt das deutlich größer als
   die Positionspreise. Deshalb hier ausdrücklich auf die Grundschrift. */
.kaoru-menu__section-price {
  color: var(--gold);
  font-family: var(--f-body); font-size: var(--fs-body); font-weight: 400;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kaoru-menu__section-note { margin: 0 0 18px; color: var(--paper-faint); font-size: var(--fs-body); }

.kaoru-menu__group-title {
  margin: 28px 0 12px; color: var(--gold);
  font-size: var(--fs-ui); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}

/* --- Positionen --------------------------------------------------------- */
.kaoru-menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hair-soft); }
.kaoru-menu__item { background: var(--ink); padding: 15px 18px; }

.kaoru-menu__item-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.kaoru-menu__code {
  flex: 0 0 auto; min-width: 3.6em; color: var(--gold);
  font-size: var(--fs-ui); font-variant-numeric: tabular-nums;
}
.kaoru-menu__name { flex: 1 1 14ch; margin: 0; color: var(--paper); font-size: var(--fs-body); font-weight: 600; }
.kaoru-menu__allergens { color: var(--paper-faint); font-size: var(--fs-ui); }
.kaoru-menu__price { margin-left: auto; font-size: var(--fs-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Beschreibung und Preisvarianten unter dem Code einruecken. */
.kaoru-menu__desc { margin: 5px 0 0; padding-left: calc(3.6em + 14px); color: var(--paper-dim); font-size: var(--fs-ui); }
.kaoru-menu__prices {
  list-style: none; margin: 9px 0 0; padding-left: calc(3.6em + 14px);
  display: grid; gap: 5px;
}
.kaoru-menu__price-variant { display: flex; gap: 14px; color: var(--paper-dim); font-size: var(--fs-ui); }
.kaoru-menu__price-label { flex: 1; }
.kaoru-menu__price-variant .kaoru-menu__price { margin-left: 0; color: var(--paper); }

/* --- Zusatzstoffe und Allergene ----------------------------------------- */
.kaoru-menu__legend-list {
  margin: 0 0 20px; padding-left: 1.5em; columns: 2; column-gap: 32px;
  color: var(--paper-dim); font-size: var(--fs-ui);
}
.kaoru-menu__legend-list--allergens { list-style: none; padding-left: 0; }
.kaoru-menu__legend-key { color: var(--gold); }

@media (max-width: 640px) {
  .faq .wp-block-details > .kmenu { padding-inline: 18px; }
  .kaoru-menu__desc,
  .kaoru-menu__prices { padding-left: 0; }
  .kaoru-menu__legend-list { columns: 1; }
}