/* Einkaufsliste — Print-CSS (A4). Werte oben sind bequem anpassbar. */
:root {
  --cols: 4;        /* Spalten im Raster */
  --img-h: 22mm;           /* Bildhoehe (kompakt, aber erkennbar) */
  --gap: 4mm;              /* Abstand zwischen Karten */
}

@page { size: A4; margin: 10mm; }

html, body { background: #fff; color: #000; margin: 0; }
body {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 9pt;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;   /* schwarze Nummern-Badges drucken lassen */
}

.kopf { display: flex; justify-content: space-between; align-items: baseline;
        border-bottom: 2px solid #000; padding-bottom: 3px; margin-bottom: 8px;
        break-after: avoid; }
.kopf h1 { font-size: 15pt; margin: 0; }
.kopf .meta { font-size: 8pt; color: #333; }

section { margin: 0 0 8px; }
h2.kategorie {
  font-size: 11pt; margin: 8px 0 4px; padding-bottom: 2px;
  border-bottom: 2px solid var(--cat-color, #000); break-after: avoid;
  color: var(--cat-color, #000);
}
h2.kategorie .swatch {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  background: var(--cat-color, #000); margin-right: 6px; vertical-align: middle;
}

.raster {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

.karte {
  border: 1px solid #bbb; border-radius: 3px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  break-inside: avoid; position: relative;
  color: #000; text-decoration: none;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

/* Klickbare Kachel -> Migros-Produktseite. Hinweis nur am Bildschirm (Hover). */
.karte .hint {
  position: absolute; top: 4px; right: 4px; display: none;
  background: #ff6600; color: #fff; font-size: 7pt; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); white-space: nowrap;
}
@media screen {
  .karte:hover {
    cursor: pointer; border-color: #ff6600;
    box-shadow: 0 3px 12px rgba(255,102,0,.40); transform: translateY(-2px);
  }
  .karte:hover .hint { display: block; }
}
.karte .nr {
  font-size: 17pt; font-weight: 800; line-height: 1;
  background: var(--cat-color, #000); color: #fff; border-radius: 3px;
  padding: 1px 6px; margin-bottom: 3px; letter-spacing: 1px;
}
.karte img {
  width: 100%; height: var(--img-h); object-fit: contain; background: #fff;
  margin-bottom: 3px;
}
.karte .titel {
  font-size: 8pt; line-height: 1.15; font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.3em;
}
.karte .untertitel { font-size: 7.5pt; color: #333; margin-top: 1px; }
.karte .preis { font-size: 9pt; font-weight: 700; margin-top: 2px; }
.karte .kein-bild {
  width: 100%; height: var(--img-h); display: flex; align-items: center;
  justify-content: center; color: #999; font-size: 7pt; border: 1px dashed #ccc;
  margin-bottom: 3px;
}