/* Design nach den PDF-Preislisten von P'son Gourmet Select */
:root{--blau:#0000d4;--rot:#ff0000;--rot-d:#e00000;--link:#0563c1;--text:#000;--grau:#555;--gelb:#ffff00;--ok:#1a7f37}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Arial,"Liberation Sans",Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.4;font-size:16px}
a{color:var(--link)}
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
.lieferung,.gelb,.fuss,.check,.klein,.termine,.abholort,.breit-zeile{font-family:Calibri,Carlito,"Segoe UI",Arial,sans-serif}

/* Kopf */
.kopf{text-align:center;padding:24px 0 0}
.logo{display:block;margin:0 auto;width:400px;max-width:85%;height:auto}
.claim{font-weight:700;font-size:17px;margin-top:6px}

/* Reiter (nur Übersichtsseite) */
.tabs{display:flex;gap:8px;margin:16px 0 0}
.tab{flex:1;padding:10px 8px;font:700 15px Arial,sans-serif;border:1px solid #000;background:#fff;cursor:pointer}
.tab.aktiv{background:#000;color:#fff}

/* Blatt */
.blatt{padding:6px 0 10px}
.bestellform{display:none}
.bestellform.aktiv{display:block}
.titel{text-align:center;font-size:17px;font-weight:700;margin:8px 0 6px}
.frist{text-align:center;color:var(--rot);font-weight:700;font-size:17px;margin:0 0 14px}
.frist a{color:var(--link)}
.schwarz-frist{color:#000}

/* Preisliste */
.pl-kopf,.produkt{display:grid;grid-template-columns:1fr 190px 140px 110px;column-gap:14px;align-items:baseline}
.pl-kopf{font-weight:700;font-size:20px;padding-bottom:2px}
.pl-kopf span:nth-child(3){font-size:17px;text-align:center}
.pl-euro{text-align:right;font-size:20px}
.pl-euro small{display:block;font:italic 400 10px Arial,sans-serif;color:var(--rot)}
.produkt{padding:16px 0 4px}
.p-name{font-weight:700;font-size:23px}
.p-name small{display:block;font-size:14px;font-weight:400}
.p-preis{font-weight:700;font-size:23px;white-space:nowrap}
.p-preis small{font-size:16px;font-weight:400}
.p-menge{display:flex;justify-content:center;align-items:center;align-self:center}
.p-betrag{text-align:right;border-bottom:1px solid #000;min-height:26px;font-size:16px;align-self:end;padding-bottom:2px}
.p-betrag small{color:var(--grau);font-size:12px}
.p-info,.p-hinweis{grid-column:1/-1;font-size:15px;padding-top:8px}
.p-hinweis{padding-top:10px}
.p-menge .eins{font-weight:700;font-size:23px}
.gewaehlt .p-menge .eins{color:var(--blau)}
.p-menge input{width:46px;height:36px;text-align:center;font:700 18px Arial,sans-serif;border:none;border-bottom:2px dotted #000;background:transparent;-moz-appearance:textfield;border-radius:0}
.p-menge input::-webkit-inner-spin-button,.p-menge input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mm{width:30px;height:30px;font-size:18px;line-height:1;border:1px solid #000;background:#fff;cursor:pointer;border-radius:50%;color:#000;padding:0}
.mm:hover{background:#000;color:#fff}
.produkt.gewaehlt .p-name,.produkt.gewaehlt .p-menge input{color:var(--blau)}
.produkt.gewaehlt .p-betrag{font-weight:700}

.allg{font-size:15px;margin:22px 0 6px;line-height:1.9}
.allg small{font-family:Calibri,Carlito,Arial,sans-serif}
.summe{text-align:right;font-size:16px;margin:4px 0 18px}
.summe-wert{font-size:19px}
.summe small{display:block;color:var(--grau);font-size:12px}

/* Lieferadresse wie im PDF: Beschriftung + gepunktete Linie */
.lieferung{display:grid;grid-template-columns:1.15fr 1fr;gap:6px 34px;font-size:14px;margin-top:6px}
.l-titel{font-size:14px;margin:6px 0 6px}
.zeile{display:flex;align-items:flex-end;gap:6px;margin:0 0 10px;font-size:14px}
.zeile>span{white-space:nowrap}
.zeile input,.plzort input{flex:1;min-width:0;font:inherit;font-size:15px;padding:3px 2px 1px;border:none;border-bottom:1.5px dotted #000;background:transparent;border-radius:0;color:var(--blau)}
.plzort{flex:1;display:flex;gap:8px;min-width:0}
.plzort input[name=plz]{flex:0 0 80px}
.zeile input:focus,.plzort input:focus{outline:none;border-bottom:2px solid var(--blau);background:#f5f5ff}
.l-rechts{padding-top:34px}
.l-notiz{font-size:14px;margin:-2px 0 0}
.knoepfe{display:flex;gap:12px;justify-content:flex-end;margin-top:26px}
.knoepfe.mitte{justify-content:center;margin:22px 0}
.knopf{background:#000;color:#fff;border:none;font:700 16px Arial,sans-serif;padding:8px 18px;min-width:96px;cursor:pointer}
.knopf:hover{background:#333}
.knopf:disabled{opacity:.6;cursor:wait}
.ungueltig{border-bottom:2px solid var(--rot)!important;background:#fff0f0!important}

/* Barverkauf */
.lieferung.ohne-rand{grid-template-columns:1fr}
.abholort{font-size:15px;margin:10px 0 4px}
.termine{font-size:15px;display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;margin-bottom:14px}
.termin{display:flex;gap:6px;align-items:center;cursor:pointer}
.termin input{accent-color:var(--blau);width:17px;height:17px}
.termin:has(input:checked){color:var(--blau);font-weight:700}
.termine.ungueltig{outline:2px solid var(--rot);outline-offset:4px;background:transparent!important}
.breit-zeile{margin-top:10px}
.abhol-rechts{padding-top:0}
.termine.senkrecht{flex-direction:column;align-items:flex-start;gap:6px;margin-top:6px}
.termine.senkrecht>span{font-size:14px}

/* Rechtliche Hinweise */
.grundpreis{color:var(--grau);white-space:nowrap}
.lm-info{font-size:13px;line-height:1.6;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:6px 0;margin:4px 0 10px;font-family:Calibri,Carlito,Arial,sans-serif}
.vertrag{font-size:13px;color:#333;margin:8px 0 4px;font-family:Calibri,Carlito,Arial,sans-serif}
.knopf.senden{min-width:240px;white-space:nowrap}

/* Hinweise */
.gelb{width:max-content;max-width:100%;margin:18px auto 10px;padding:1px 4px;background:var(--gelb);text-align:center;font-weight:700;color:var(--rot-d);font-size:15px}
.gelb .schwarz{color:#000}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:14px 0 6px}
.check input{margin-top:2px;accent-color:var(--blau);width:17px;height:17px;flex:none}
.check.ungueltig{color:var(--rot);background:none!important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{color:var(--rot-d);border:1px solid var(--rot-d);padding:8px 12px;margin:10px 0;font-size:14px;font-weight:700}
.klein{font-size:12px;color:var(--grau);text-align:center;margin:8px 0 0}
.hinweis-box{text-align:center;margin-top:20px}

/* Danke-Seite */
.zahlkasten{border:1px solid var(--rot-d);border-left:5px solid var(--rot-d);padding:8px 14px;margin:12px auto 4px;max-width:560px;text-align:center;font-family:Calibri,Carlito,Arial,sans-serif}
.zk-titel{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--rot-d);font-weight:700}
.zk-text{font-size:16px;font-weight:700;color:#000;margin:2px 0}
.zk-bank{font-size:13px;color:var(--grau)}
.danke-kopf{display:flex;gap:16px;align-items:center;border:2px solid var(--ok);padding:14px 18px;margin:10px 0 18px;font-size:15px}
.danke-kopf .haken{flex:none;margin:0}
.danke-titel{font-size:20px;font-weight:700;margin-bottom:2px}
.danke-info{color:var(--grau);font-size:14px;margin-top:4px}
.angaben{display:grid;grid-template-columns:1fr;max-width:560px;gap:0}
.angaben .zeile{border-bottom:1.5px dotted #000;padding-bottom:2px}
.angaben .zeile b{color:var(--blau);font-weight:400;font-size:15px;flex:1;overflow-wrap:anywhere}
a.knopf{display:inline-block;text-decoration:none;text-align:center}
.knopf.hell-knopf{background:#fff;color:#000;border:2px solid #000}
.knoepfe.mitte{flex-wrap:wrap}
.box{border:1px solid #000;padding:22px;margin:20px 0}
.danke{text-align:center}
.haken{width:56px;height:56px;line-height:56px;border-radius:50%;background:var(--ok);color:#fff;font-size:32px;margin:0 auto 8px}
.danke h1{font-size:22px}
.zusammenfassung,.testmodus pre{text-align:left;background:#fafafa;border:1px solid #ddd;padding:14px;font-size:13px;white-space:pre-wrap;overflow-x:auto}
.testmodus{text-align:left;border:2px dashed var(--rot);padding:14px;margin:16px 0}
.testmodus iframe{width:100%;height:900px;border:1px solid #ccc;background:#fff}
.warn{color:var(--rot-d);font-weight:700}
.btn{display:inline-block;background:#000;color:#fff;border:none;padding:10px 22px;font:700 16px Arial,sans-serif;cursor:pointer;text-decoration:none}
.btn.hell{background:#fff;color:#000;border:1px solid #000}
.aktionen{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.text h1{font-size:22px}
.text h2{font-size:17px;margin-top:22px}

/* Fuß wie in der PDF */
.fuss{text-align:center;font-size:13px;padding:10px 0 36px}
.fuss .wrap>div{margin:6px 0}
.fuss .wrap>.bank{color:var(--rot-d);font-weight:700;font-size:21px;margin-top:16px;line-height:1.45}
.fuss .bank-klein{color:var(--rot-d);font-weight:700;font-size:12px}
.fuss .wrap>.links{margin-top:16px}

@media (max-width:700px){
  .pl-kopf{display:none}
  .produkt{grid-template-columns:1fr auto;row-gap:4px}
  .p-name{grid-column:1/-1;font-size:20px}
  .p-preis{font-size:19px}
  .p-betrag,.pl-euro{display:none}
  .fracht{grid-template-columns:1fr auto}
  .fracht .p-preis{display:none}
  .fracht .p-name{grid-column:1}
  .fracht .p-menge{grid-column:2;grid-row:1}
  .p-info,.p-hinweis{padding-top:2px;font-size:14px}
  .lieferung{grid-template-columns:1fr}
  .l-rechts{padding-top:0}
  .angaben{grid-template-columns:1fr}
  .danke-kopf{align-items:flex-start}
  .zeile{flex-wrap:wrap}
  .zeile>span{width:100%}
  .knoepfe{justify-content:stretch}
  .knopf{flex:1;padding:12px}
  .fuss .wrap>.bank{font-size:16px}
  .tab{font-size:13px}
  .gelb{width:auto}
}
@page{size:A4;margin:10mm 12mm}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{font-size:12px;line-height:1.3}
  .wrap{max-width:none;padding:0}
  .kopf{padding-top:0}
  .logo{width:230px}
  .claim{font-size:13px;margin-top:2px}
  .titel{font-size:14px;margin:6px 0 4px}
  .frist{font-size:13px;margin-bottom:8px}
  .tabs,.knoepfe,.check,.klein,.fehler,.mm,.fuss .links,.testmodus{display:none!important}
  .bestellform{display:none!important}
  .bestellform.aktiv{display:block!important}
  .pl-kopf,.pl-kopf span:nth-child(3),.pl-euro{font-size:14px}
  ::placeholder{color:transparent}
  .danke-kopf{width:100%}
  .pl-kopf,.produkt{grid-template-columns:1fr 140px 80px 90px}
  .produkt{padding:6px 0 2px;break-inside:avoid}
  .p-name,.p-preis,.p-menge .eins{font-size:16px}
  .p-preis small{font-size:12px}
  .p-info,.p-hinweis{font-size:11px;padding-top:2px}
  .p-menge input{font-size:14px;height:24px;width:36px}
  .allg{font-size:11px;margin:10px 0 4px;line-height:1.5}
  .summe{font-size:13px;margin-bottom:8px}
  .summe-wert{font-size:15px}
  .lieferung,.zeile{font-size:12px}
  .zeile{margin-bottom:6px}
  .zeile input,.plzort input,.angaben .zeile b{font-size:13px}
  .danke-kopf{padding:8px 12px;margin:6px 0 10px;font-size:12px;break-inside:avoid}
  .danke-kopf .haken{width:36px;height:36px;line-height:36px;font-size:22px}
  .danke-titel{font-size:15px}
  .gelb{font-size:12px;margin:10px auto 6px}
  .fuss{padding:4px 0 0;font-size:11px}
  .fuss .wrap>div{margin:2px 0}
  .fuss .wrap>.bank{font-size:15px;margin-top:6px}
  .fuss .bank-klein{font-size:10px}
  .angaben,.lieferung,.gelb,.fuss,.zahlkasten{break-inside:avoid}
  .zahlkasten{padding:5px 10px;margin:8px auto 2px}
  .zk-text{font-size:13px}
}