/* ===========================================================================
   NUR-COMPUTER — Stylesheet NUR fuer die Druckansicht der Preisliste
   ---------------------------------------------------------------------------
   Bewusst eine eigene Datei und eine eigene Seite: die Bildschirmliste ist
   zum Nachschlagen mit dem Daumen gebaut, der Ausdruck zum Auflegen auf die
   Theke. Zwei Aufgaben, zwei Layouts — statt eines Kompromisses, der beides
   halb kann.

   Zweispaltig, weil 303 Artikel einspaltig acht bis neun Blaetter sind und
   zweispaltig drei bis vier. Punktlinie zwischen Name und Preis, weil das
   Auge sonst bei 60 Zeilen pro Spalte verrutscht — dasselbe Mittel wie in
   einer gut gesetzten Speisekarte.
   ======================================================================== */

@font-face{
  font-family:'Anton';
  src:url('/assets/fonts/anton.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{ --linie:#D8DDE2; --grau:#5F6873; --tinte:#14181C; --rot:#C01A2C }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#F4F6F8;color:var(--tinte)}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:10pt;line-height:1.35;
  -webkit-font-smoothing:antialiased
}

/* Am Bildschirm: ein Blatt in der Mitte, damit man sieht, was gedruckt wird */
.blatt-a4{
  background:#fff;max-width:210mm;margin:18px auto;padding:16mm 12mm;
  box-shadow:0 10px 30px rgba(16,20,24,.13)
}

/* Hinweisband, nur am Bildschirm */
.bildschirm{
  background:#14181C;color:#fff;padding:11px 16px;font-size:.9rem;
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center
}
.bildschirm b{font-weight:700}
.bildschirm a{color:#fff;text-decoration:underline}
.bildschirm .taste{
  border:1px solid rgba(255,255,255,.4);border-radius:5px;padding:1px 7px;
  font-family:ui-monospace,monospace;font-size:.85em
}

/* --- Kopf des Dokuments (Seite 1) -------------------------------------- */
.dk{display:flex;gap:10mm;align-items:flex-start;
    border-bottom:1.6pt solid #000;padding-bottom:5mm;margin-bottom:6mm}
.dk-text{flex:1;min-width:0}
.dk-name{font-family:'Anton',Impact,sans-serif;font-size:23pt;line-height:1;letter-spacing:.01em}
.dk-name .punkt{color:var(--rot)}
.dk-claim{font-size:9pt;color:var(--grau);margin-top:1.5mm}
.dk-daten{margin-top:3.5mm;font-size:8.6pt;line-height:1.55}
.dk-daten b{font-weight:700}
.dk-zeiten{margin-top:2.5mm;font-size:8.2pt;color:#333;line-height:1.5}
.dk-qr{width:26mm;flex:0 0 26mm;text-align:center}
.dk-qr img{width:26mm;height:26mm;display:block}
.dk-qr span{display:block;font-size:6.6pt;color:var(--grau);margin-top:1mm;line-height:1.3}

.dk-stand{
  display:flex;flex-wrap:wrap;gap:3mm 6mm;align-items:baseline;
  font-size:8.4pt;color:#333;margin:0 0 5mm
}
.dk-stand .marke{
  font-weight:700;color:#000;border:.8pt solid #000;border-radius:2mm;padding:.6mm 2mm
}

/* --- Kopf, der sich auf jeder Seite wiederholt -------------------------
   Liegt im oberen Seitenrand. Chrome und Edge zeichnen feste Elemente auf
   jeder Druckseite, Firefox nur auf der ersten — deshalb stehen alle
   wichtigen Angaben zusaetzlich im Kopf von Seite 1 und im Fuss.        */
.dk-fest{display:none}

/* --- Die Liste ---------------------------------------------------------- */
.spalten{columns:2;column-gap:8mm;column-rule:.4pt solid #E3E7EB}
.kat{break-inside:avoid-column;margin:0 0 4mm}
.kat h2{
  font-family:'Anton',Impact,sans-serif;font-size:12pt;line-height:1.1;
  margin:0 0 1.5mm;padding-bottom:1mm;border-bottom:1.1pt solid #000;
  break-after:avoid;display:flex;justify-content:space-between;
  align-items:baseline;gap:3mm
}
.kat h2 .zahl{font-family:inherit;font-size:7.6pt;color:var(--grau);font-weight:400;white-space:nowrap}
.kat h3{
  font-size:8.4pt;font-weight:700;color:#000;margin:2.6mm 0 1mm;
  padding-bottom:.6mm;border-bottom:.4pt dotted #999;break-after:avoid
}
.z{display:flex;align-items:baseline;gap:1.5mm;padding:.5mm 0;break-inside:avoid}
.z .n{flex:0 1 auto;font-size:8.6pt;line-height:1.3}
.z .fuell{flex:1 1 auto;min-width:3mm;border-bottom:.4pt dotted #B9C0C7;transform:translateY(-.9mm)}
.z .p{flex:0 0 auto;font-size:8.6pt;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.z .p .ab{font-weight:400;font-size:7.4pt;color:#333}
.z .p.anfrage{font-weight:400;font-style:italic;font-size:8pt;color:#333}
.sp{display:block;font-size:7.4pt;color:#444;line-height:1.3;margin:.2mm 0 .6mm}
.kat-text{font-size:7.8pt;color:#333;line-height:1.4;margin:0 0 1.5mm}
.kat-service{font-size:7.8pt;color:#000;line-height:1.4;margin:1mm 0 0;font-weight:600}

/* Farben aus der Pflegedatei: im Druck ist alles schwarz. Tinte ist teuer,
   und ein Graustufendrucker macht aus Rot ein schmutziges Grau. */
.f-rot,.f-blau,.f-gruen,.f-orange,.f-grau,.argb,.f-argb{
  color:#000!important;-webkit-text-fill-color:#000;background:none;font-weight:700
}

/* --- Fuss --------------------------------------------------------------- */
.dfuss{
  margin-top:7mm;padding-top:3mm;border-top:.8pt solid #000;
  font-size:7.6pt;color:#333;line-height:1.5;column-span:all
}
.dfuss b{color:#000}

/* ======================================================================== */
@media print{
  @page{size:A4 portrait;margin:15mm 11mm 12mm}
  html,body{background:#fff;font-size:10pt}
  .bildschirm{display:none}
  .blatt-a4{max-width:none;margin:0;padding:0;box-shadow:none}
  .dk-fest{
    display:block;position:fixed;top:-11mm;left:0;right:0;
    font-size:7pt;color:#333;border-bottom:.4pt solid #BBB;padding-bottom:1mm
  }
  .dk-fest .rechts{float:right}
  a{color:#000;text-decoration:none}
  .spalten{column-fill:auto}
}

@media (max-width:640px){
  /* Am Handy ist die Druckansicht einspaltig lesbar statt zweispaltig winzig */
  .spalten{columns:1}
  .blatt-a4{padding:16px;margin:0}
  .dk{flex-direction:column;gap:5mm}
  .dk-qr{align-self:flex-start}
}