/* Komfort I (docs/AUSBAU.md Stufe 1): Gestaltung der kleinen Bequemlichkeiten – je Bereich ein Abschnitt, alles aus den Tokens von
   style.css (STIL.md B6, E1: keine Farbwerte hier, Schrift nur auf dem Raster). Breitformat zuerst (STIL.md B1): PC, Fernseher und
   Handy quer geben den Ausschlag, im Hochformat bricht es nur um. */

/* ----- Am Tresen: „Alles verkaufen“ (web/js/tresen.js) – die Übersicht als eigenes Fenster, eine Zeile je Posten (Symbol, Name mit
   Rechnung, rechts die Summe) */
.tresen-alles { margin-bottom: var(--a6); }
.tresen-liste { display: grid; gap: var(--a2); margin: var(--a3) 0; }
.tresen-liste li { display: grid; grid-template-columns: 33px 1fr auto; gap: var(--a1) var(--a5); align-items: center;
  padding: var(--a2) 0; background: url("/img/ui/perf.png") repeat-x left bottom / 8px 4px; }
.tresen-liste li canvas.mini { width: 33px; height: 33px; }
.tresen-liste li canvas.icon { width: 24px; height: 24px; justify-self: center; }
.tresen-was { display: flex; flex-wrap: wrap; gap: 0 var(--a4); align-items: baseline; }
.tresen-bleibt { flex-basis: 100%; }
.tresen-summe { font-weight: 700; white-space: nowrap; justify-self: end; }
.tresen-zusammen { text-align: right; margin: var(--a2) 0 var(--a4); }

/* ----- „Wohin?“: Lieblingsorte und zuletzt besuchte Ziele (web/js/wohin.js) – Stern rechts an jedem Ziel, Tippfläche ≥ 44 px */
.deps li.mit-stern { display: grid; grid-template-columns: auto 1fr auto; gap: var(--a1) var(--a5); align-items: center; }
.deps li.mit-stern > .note:only-of-type:first-child { grid-column: 1 / 3; }
.deps li .wohin-stern { margin: 0; padding: 0 6px; justify-self: end; }
.wohin-stern canvas.mini { width: 33px; height: 33px; }

/* ----- Sammelbuch: „Alle · Fehlt noch · Gefunden“ (web/js/sammelbuch.js) – gewählt ist der eingesunkene Knopf (aria-pressed) */
.buch-filter { justify-content: flex-start; margin: var(--a2) 0 var(--a4); }
.buch-seite + .buch-seite { margin-top: var(--a8); }

/* ----- Preisnotizbuch (web/js/notizbuch.js): im Lager der Knopf „Preise“ neben der Suche (keine eigene Zeile – im Handy quer zählt
   jede Zeile), je Zeile der beste zuletzt gesehene Preis; im Buch eine Zeile je Laden (Preis, Ort, Zeit) – Breitformat zuerst */
.habe-kopf.mit-notiz { grid-template-columns: 1fr 1fr auto; }
.habe-kopf.mit-notiz input { grid-column: 1 / 3; }
.habe-kopf.mit-notiz select[name=ordnen] { grid-column: 2 / 4; }
.habe-kopf .notiz-knopf { margin: 0; white-space: nowrap; }
.notiz-liste { display: grid; gap: var(--a2); margin: var(--a2) 0 var(--a6); }
.notiz-liste li { display: grid; grid-template-columns: 5em 1fr auto; gap: var(--a1) var(--a5); align-items: baseline;
  padding: var(--a1) 0; background: url("/img/ui/perf.png") repeat-x left bottom / 8px 4px; }
.notiz-preis { white-space: nowrap; text-align: right; }
.notiz-ware h3 canvas.mini { width: 33px; height: 33px; vertical-align: middle; }

/* ----- Lager: Neues markiert, Ordnen nach Wert (web/js/lager-ordnen.js) – Wachssiegel und „neu“ gleich hinter dem Namen */
.neu-marke { display: inline-flex; gap: var(--a1); align-items: center; margin-left: var(--a3); font-weight: 400; white-space: nowrap; }
.habe-liste .neu-marke canvas.mini { width: 22px; height: 22px; }

/* ----- Extrablatt beim Ankommen (web/js/extrablatt.js): Datumszeile zwischen Doppellinien wie unter einem Zeitungskopf, darunter
   „Auf deinem Hof“ und „Neu im Spiel“ – im Breitformat zwei Spalten nebeneinander, schmal untereinander */
.extrablatt-unterzeile { display: flex; gap: var(--a3); align-items: center; justify-content: center; margin: 0 0 var(--a4); padding: var(--a2) 0;
  border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); }
.extrablatt-unterzeile canvas.icon { width: 24px; height: 24px; }
.extrablatt-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: var(--a4) var(--a8); }
.extrablatt-spalte h3 { margin: 0 0 var(--a2); padding-bottom: var(--a1); border-bottom: 1px solid var(--ink); }
.extrablatt-spalte p { margin: 0 0 var(--a2); }
body.fullfarm .info-panel:has(.extrablatt) { max-width: 880px; }   /* am PC aufgeschlagen breit (im Handy quer bleibt es das Seitenblatt) */