/* ==========================================================================
   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); }

/* Vegetarisch — seit der Karte Mannheim 2026. Ein kleines Siegel statt des
   gepunkteten Unterstrichs, den Browser an <abbr> haengen; die Erklaerung
   steht im title und kommt beim Zeigen. Steht zwischen Allergenen und Preis,
   der Preis haelt mit margin-left:auto weiter rechts. */
.kaoru-menu__veggie {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 1.7em; height: 1.7em; border: 1px solid var(--gold-dim); border-radius: 50%;
  color: var(--gold); font-size: 11px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: help;
}

/* Auswahl ohne eigenen Preis (Dorayaki: vier Fuellungen, ein Preis).
   Eingerueckt wie Beschreibung und Preisvarianten. */
.kaoru-menu__options {
  list-style: none; margin: 9px 0 0; padding-left: calc(3.6em + 14px);
  display: flex; flex-wrap: wrap; gap: 4px 18px;
  color: var(--paper-dim); font-size: var(--fs-ui);
}
.kaoru-menu__option::before { content: "–"; margin-right: .45em; color: var(--gold-dim); }

/* Positionen ohne Nummer (Eis, Dorayaki, Getraenke): Die Einrueckung
   richtet sich nach der Nummernspalte. Fehlt die, haengen Beschreibung und
   Auswahl sonst mit einer leeren Spalte davor in der Luft. */
.kaoru-menu__item:not(:has(.kaoru-menu__code)) :is(.kaoru-menu__desc, .kaoru-menu__prices, .kaoru-menu__options) { padding-left: 0; }

/* --- 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,
  .kaoru-menu__options { padding-left: 0; }
  .kaoru-menu__legend-list { columns: 1; }
}