/* Speisekarte - Akzent und Sonderbausteine der App, nur Bildschirm (media="screen"). Das gemeinsame Bild kommt aus
   firmen.css, der Ausdruck aus styles.css. Farben nur ueber die Variablen aus firmen.css. Der Aufbau der Kreuztabelle
   steht hier und in styles.css - wer ihn aendert, aendert beide. */
@media screen {
  :root {
    --g: linear-gradient(135deg, #a8d8a0 0%, #3f8f4f 60%, #0f2a16 120%);
    --accent: #3f8f4f;
  }

  nav.tabs { flex-wrap: wrap; }
  @media (max-width: 560px) {
    nav.tabs button { font-size: 13px; padding: 10px 2px; }
  }
  .muster { border-color: color-mix(in srgb, var(--warn) 55%, transparent); color: var(--warn); font-weight: 600; font-size: 14px; }
  #gError { margin-bottom: 10px; }
  .buttons { display: grid; margin-bottom: 12px; }
  .wahl label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); cursor: pointer; }
  .wahl label span { min-width: 0; overflow-wrap: anywhere; }
  .kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .kopf h3 { min-width: 0; overflow-wrap: anywhere; }
  .kopf > .muted { white-space: nowrap; flex: none; }
  .zahl { font-size: 18px; font-weight: 700; white-space: nowrap; flex: none; }
  .liste { list-style: none; padding: 0; display: grid; gap: 0; }
  .liste li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; }
  .liste li:first-child { border-top: 0; padding-top: 0; }
  .liste li > span:first-child { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; flex: 1; }
  .knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 48%; }
  .badge.archiviert { color: var(--muted); }
  .gespeichert { color: var(--ok); font-weight: 600; font-size: 14px; text-align: right; margin-top: 8px; }
  .gespeichert.links-buendig { text-align: left; margin: 0 4px 10px; }
  .planwahl { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
  .planwahl button { flex: none; }
  dialog { width: min(640px, calc(100vw - 24px)); }

  /* Gerichte: Marken je Allergen, die Kennzahl der Ungeprueften */
  .card.blass { opacity: .6; }
  .card > p.muted { margin-top: 4px; overflow-wrap: anywhere; }
  .marken { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .badge.allergen { color: var(--text); border-color: var(--border-stark); cursor: help; }
  .kennzahl { font-size: 14px; line-height: 1.5; }
  .kennzahl.offen { border-color: color-mix(in srgb, var(--off) 60%, transparent); }
  .kennzahl.offen b { color: var(--off); }
  .kennzahl.gut { color: var(--ok); font-weight: 600; }
  b.offen, td.offen { color: var(--off); }

  /* Formular: die 14 Kaestchen, Nummer und Kurzwort, darunter der Wortlaut */
  .kreuze { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
  .kreuze > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 14px; }
  .kreuze label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
  .kreuze label input { margin-top: 3px; flex: none; }
  .kreuze label span { min-width: 0; overflow-wrap: anywhere; }
  .kreuze small { display: block; font-size: 12px; line-height: 1.35; color: var(--muted); }
  label.schmal { max-width: 200px; }

  /* Die beiden Ausdrucke als Vorschau */
  .breit { overflow-x: auto; margin-top: 12px; }
  .tab { width: 100%; border-collapse: collapse; font-size: 14px; }
  .tab.kreuz th, .tab.kreuz td { border: 1px solid var(--border-stark); padding: 5px 6px; }
  .tab.kreuz th { font-size: 12px; font-weight: 600; color: var(--text-soft); }
  .tab.kreuz .kat td { color: var(--muted); background: var(--surface-2); }
  .tab.kreuz .keine { color: var(--ok); }
  .fuss h4 { font-size: 13px; font-weight: 600; }

  /* Unterpunkt Allergene: Wahl des Ausdrucks */
  .teile button.on { border-color: var(--accent); color: var(--accent); }

  /* Gaestekarte: Schalter, Verweis, Code zum Einbinden, QR-Code, Hinweise fuer den Betrieb */
  .schalter { font-weight: 600; font-size: 14px; margin-top: 10px; }
  .schalter.an { color: var(--ok); }
  .schalter.aus { color: var(--muted); }
  .card > .actions { margin-top: 10px; }
  .einbetten { display: grid; gap: 8px; margin-top: 10px; }
  .einbetten a { overflow-wrap: anywhere; font-size: 14px; }
  .einbetten .code { width: 100%; min-height: 84px; font: 12px/1.4 ui-monospace, Consolas, monospace; resize: vertical; }
  .qrtitel { margin-top: 18px; font-size: 15px; }
  .qrzeile { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-top: 10px; }
  .qr { flex: none; width: 180px; background: #fff; border-radius: 8px; line-height: 0; overflow: hidden; }
  .qr svg { width: 100%; height: auto; display: block; }
  .qrgrenzen { flex: 1; min-width: 200px; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; display: grid; gap: 6px; }
  .betrieb ul { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; display: grid; gap: 8px; color: var(--text-soft); }
  #aufsteller { display: none; }
  .legende { color: var(--text-soft); }
  .vermerk { color: var(--muted); }
}

/* Aufbau der Kreuztabelle und der Legende - gilt am Bildschirm wie auf Papier */
.tab.kreuz th.g, .tab.kreuz td.g { text-align: left; overflow-wrap: anywhere; min-width: 140px; }
.tab.kreuz th.a { vertical-align: bottom; text-align: center; width: 30px; }
.tab.kreuz th.a span { display: block; margin: 0 auto; }
.tab.kreuz th.a .kw { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 400; margin-top: 4px; }
.tab.kreuz td.x { text-align: center; font-weight: 700; }
.tab.kreuz td.offen, .tab.kreuz td.keine { text-align: center; }
.tab.kreuz td.offen { font-weight: 700; }
.tab.kreuz .kat td { text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.legende { list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; line-height: 1.45; }
.vermerk { font-size: 12px; margin-top: 10px; }