/*
  flyer.css — eigenständiges Stylesheet für /speisekarte/flyer/ (Auftrag Teil 2). Bewusst getrennt von
  site.css: andere Bildsprache, eigene Tokens aus der Vorlage D:/Alawafi/flyer.html (nur gelesen). Farben,
  Schriften, Kopf-Baustein und der dunkle Goldrahmen (.brand-frame) stehen in flyer-tokens.css (@import) —
  geteilt mit /flyer/ (Auftrag Teil 3), statt in beiden Dateien verdoppelt.

  Genau ZWEI A4-Blätter (Betreiber: die fließende Mehrseiten-Fassung "passt nicht mehr auf zwei A4-Seiten"):
  wie in der Vorlage zwei feste Seiten-Boxen (.sheet, 210 × 297 mm, overflow hidden) und @page{margin:0}, damit
  jede Box genau ein Druckblatt ist. Die Kategorien verteilt der Generator beim Bauen als ganze Blöcke auf
  zwei Blätter × drei feste Spalten (FlyerMenu.LayoutTwoPages) — bewusst KEIN CSS-Spaltenfluss mehr: der
  schob Artikel ohne ihr Kategorie-Band in die nächste Spalte, sodass sie unter der falschen Überschrift zu
  stehen schienen (Betreiber-Rückmeldung). menu-flyer.js setzt je Blatt zwei Stellschrauben — --fit (Schriftgröße) und
  --gap (Abstände) —, bis die Spalten die cremefarbene Karte füllen, ohne überzulaufen. Die Grundwerte hier
  (--fit:.95, --gap:.8) passen auch ohne Skript; die Mindest-Schriftgröße sichert max(10px, …) im CSS selbst ab
  (10px = 7,5pt — darunter sind Namen/Preise auf Papier nicht mehr lesbar).
*/
@import url('/flyer-tokens.css');

/* ---------- Bildschirm: die beiden Blätter untereinander auf grauem Grund, in echter Druckgröße ---------- */
.stage {
  display: flex; flex-direction: column; align-items: center; gap: 30px;
  padding: 26px 10px 60px;
  overflow-x: auto;
}

/* ---------- das A4-Blatt: dunkler Goldrahmen-Grund (.brand-frame, flyer-tokens.css) ---------- */
.sheet {
  flex: none;
  width: 210mm; height: 297mm;
  overflow: hidden;            /* ein Sub-Pixel-Überstand darf beim Druck kein drittes, leeres Blatt erzeugen */
  padding: 9mm;
  display: flex; flex-direction: column;
  box-shadow: 0 26px 60px rgba(58, 9, 18, .35);
}

/* ---------- Seite 1: Kopfband mit Gerichtsfoto bis an den Blattrand (negative Ränder heben das Padding auf) */
.p1 .masthead {
  flex: none;
  margin: -9mm -9mm 5mm;
  padding: 11mm 9mm 5mm;
  background-image: linear-gradient(180deg, rgba(58, 9, 18, .2) 0%, rgba(58, 9, 18, .88) 78%, var(--primary-deep) 100%),
                     url('/img/gericht-mixed-grill.jpeg');
  background-size: cover;
  background-position: center 30%;
}
.p1 .masthead::after { display: none; }   /* der Goldbalken passt nicht aufs Fotoband — der Rahmen reicht als Trenner */
.p1 .masthead .logo { width: 54px; height: 54px; }
.p1 .name-de { font-size: 30px; }

/* Schmale Kontaktzeile unten auf Seite 1 — wer nur die Vorderseite sieht, findet trotzdem Shop und Telefon. */
.strip {
  flex: none; margin: 3.5mm 0 0; text-align: center;
  color: var(--cream); font-size: 11px; font-weight: 600; letter-spacing: .3px;
}
.strip b { color: var(--gold-light); font-weight: 800; }
.sep { color: var(--gold); margin: 0 6px; }

/* ---------- Seite 2: schmale Namensleiste statt des großen Kopfs (wie die Rückseite der Vorlage) ---------- */
.miniband {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 1mm 0 3mm; margin-bottom: 4mm;
  border-bottom: 2px solid var(--gold);
}
.miniband .m-de { color: var(--gold-light); font-weight: 900; font-size: 22px; letter-spacing: 1.5px; }
.miniband .m-ar { color: var(--cream); font-size: 17px; }

/* ---------- Speisekarte: creme Karte im dunklen Rahmen; füllt den Rest des Blatts, innen drei feste Spalten ---------- */
.menu {
  flex: 1 1 0; min-height: 0;   /* Höhe kommt vom Blatt, nicht vom Inhalt — menu-flyer.js misst dagegen */
  background: var(--cream);
  border-radius: 8px;
  padding: 4.5mm 5mm;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.cols {
  --fit: .95; /* Schriftmaßstab — setzt menu-flyer.js je Blatt; .95 passt die Live-Karte auch ohne Skript */
  --gap: .8;  /* Abstandsmaßstab — setzt menu-flyer.js je Blatt */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;   /* .cols = Höhe der höchsten Spalte — genau das misst menu-flyer.js */
}
.col { min-width: 0; padding: 0 2.5mm; }
.col:first-child { padding-left: 0; }
.col:last-child { padding-right: 0; }
.col + .col { border-left: 1px solid var(--line); }   /* Trennlinie wie die frühere column-rule */
.sec { margin-bottom: calc(6px * var(--gap)); }
.sec-head {
  display: flex; align-items: center; gap: 6px;
  padding: calc(2px + 1.5px * var(--gap)) 9px; margin: 0 0 calc(4px * var(--gap));
  background: linear-gradient(95deg, var(--primary) 0%, var(--primary-deep) 55%, var(--primary-black) 100%);
  border: 1px solid var(--gold);
  border-radius: 999px 8px 8px 999px;
}
.sec-de {
  flex: 1; color: var(--gold-light); font-weight: 900; font-size: max(10.5px, calc(13px * var(--fit)));
  letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; line-height: 1.25;
}
.sec-ar { color: var(--cream); font-size: max(10.5px, calc(13px * var(--fit))); white-space: nowrap; line-height: 1.25; }

.items { list-style: none; margin: 0; padding: 0; }
.item { padding: calc(1.2px * var(--gap)) 0; line-height: 1.2; }
.item-top { display: flex; align-items: flex-end; gap: 4px; }
/* Name darf umbrechen (lange Namen in schmaler Spalte), Punktlinie und Preis bleiben unten rechts. */
.item .de { flex: 0 1 auto; font-size: max(10px, calc(12px * var(--fit))); font-weight: 700; color: var(--ink); }
.item .dots { flex: 1 1 6px; min-width: 6px; margin-bottom: .3em; border-bottom: 1.2px dotted var(--gold); }
.item .price { flex: none; font-weight: 800; color: var(--primary); font-size: max(10px, calc(12px * var(--fit))); white-space: nowrap; }
.item .ar { direction: rtl; text-align: left; font-size: max(10px, calc(12px * var(--fit))); color: #6f6467; line-height: 1.3; }

/* ---------- Seite 2 unten: Fußband mit Bestell-QR-Code, Einladung zum Bestellen, Adresse ---------- */
.footer-band {
  flex: none; margin-top: 4mm;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-black) 100%);
  border: 1px solid var(--gold); border-radius: 8px;
  color: var(--cream);
  padding: 3mm 5mm;
  display: flex; align-items: center; gap: 5mm;
}
/* 30 mm Kantenlänge inkl. heller Ruhezone: aus normalem Leseabstand scannen Handys das vom Papier sicher. */
.qr-card { flex: none; background: #fff; border: 1px solid var(--gold); border-radius: 4px; padding: 1mm; }
.qr { display: block; width: 30mm; height: 30mm; }
.order { flex: 1; }
.order p, .contact p { margin: 0; }
.order-de { color: var(--gold-light); font-weight: 900; font-size: 19px; line-height: 1.2; }
.order-ar { color: var(--cream); font-size: 16px; line-height: 1.4; }
.order-url { color: #fff; font-weight: 800; font-size: 15px; letter-spacing: .3px; margin-top: 1mm !important; }
.contact { text-align: right; }
.thanks-de { color: var(--gold-light); font-weight: 800; font-size: 16px; }
.thanks-ar { font-size: 13px; opacity: .9; }
.contact address { font-style: normal; font-size: 11px; line-height: 1.5; font-weight: 600; margin-top: 1mm; }

/* ---------- Hinweis, wenn die Karte beim Bauen nicht zu holen war (gleicher Fall wie /speisekarte/) ---------- */
.flyer-fallback { max-width: 210mm; margin: 24px auto; text-align: center; color: var(--cream); padding: 60px 20px; }
.flyer-fallback a { color: var(--gold-light); font-weight: 700; }

@page { size: A4; margin: 0; }
@media print {
  /* html/body-Reset + print-color-adjust stehen in flyer-tokens.css — beiden Flyern gemeinsam. */
  html, body { margin: 0; padding: 0; }
  .stage { display: block; padding: 0; gap: 0; overflow: visible; }
  .sheet { box-shadow: none; break-inside: avoid; }
  /* Blatt 2 immer auf eine neue Seite, aber nach dem letzten Blatt kein Umbruch (sonst ein leeres drittes). */
  .sheet.p1 { break-after: page; }
  .sheet.p2 { break-after: auto; }
}