/* Pizza Pazzo – Demo Online-Vorbestellung
   Farben, Schriften und Sticker-Optik wie auf pizzapazzo.de
   (dicke Konturen, harte Versatz-Schatten, keine runden Ecken). */

@font-face{ font-family:'Arco'; src:url('schriften/arco.woff2') format('woff2'); font-weight:400 900; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('schriften/fraunces-bolditalic.woff2') format('woff2'); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:'Fraunces'; src:url('schriften/fraunces-black.woff2') format('woff2'); font-weight:900; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('schriften/barlow-medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Barlow'; src:url('schriften/barlow-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face{ font-family:'Barlow Condensed'; src:url('schriften/barlow-condensed-medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face{ font-family:'Barlow Condensed'; src:url('schriften/barlow-condensed-bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root{
  --cream:#FFFDE8; --ink:#1D1D1B; --lilac:#DBB6D7; --lilac-deep:#BC9AC8; --lilac-text:#AB54A1;
  --mint:#A8D3AF; --paper:#FFFFFF; --grey:#6B6459; --rosa:#F7BECA; --red:#EB5D48;
  --ink-faint:#8C8478;
  --font-display:'Arco',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-sub:'Fraunces',Georgia,serif;
  --font-body:'Barlow',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-label:'Barlow Condensed','Barlow',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; }
body{ background:var(--cream); color:var(--ink); font-family:var(--font-body); font-weight:500; line-height:1.5; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
button, input, textarea, select{ font:inherit; color:inherit; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--lilac-text); outline-offset:2px; }

.display{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; line-height:.95; letter-spacing:-.01em; }
.sub{ font-family:var(--font-sub); font-style:italic; font-weight:700; }
.label{ font-family:var(--font-label); font-weight:700; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.star{ color:var(--lilac-text); }
.leise{ color:var(--grey); font-size:13.5px; }

.checker{
  height:14px;
  background-image:
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%),
    linear-gradient(45deg, var(--ink) 25%, transparent 25%, transparent 75%, var(--ink) 75%);
  background-size:14px 14px; background-position:0 0, 7px 7px; background-color:var(--paper);
}

.btn{
  font-family:var(--font-label); display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--lilac); border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink);
  padding:11px 18px; font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  cursor:pointer; text-decoration:none; transition:transform .12s, box-shadow .12s; min-height:44px;
}
.btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--ink); }
.btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:3px 3px 0 var(--ink); }
.btn-mint{ background:var(--mint); }
.btn-weiss{ background:var(--paper); }
.btn-rosa{ background:var(--rosa); }
.btn-schwarz{ background:var(--ink); color:var(--cream); }
.btn-gross{ font-size:15px; padding:14px 22px; min-height:52px; }
.btn-klein{ font-size:11.5px; padding:7px 11px; min-height:36px; box-shadow:2px 2px 0 var(--ink); }

.kasten{ background:var(--paper); border:3px solid var(--ink); box-shadow:6px 6px 0 var(--ink); }
.kicker{ font-family:var(--font-label); display:inline-block; background:var(--mint); border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink); padding:5px 12px; font-size:11px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; transform:rotate(-1.5deg); }

.demo-leiste{ background:var(--ink); color:var(--cream); font-family:var(--font-label); font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; text-align:center; padding:6px 12px; }
.demo-leiste a{ color:var(--lilac); }

/* Kleine Hinweis-Meldung (z. B. "SMS an den Kunden") */
.toast-bereich{ position:fixed; left:50%; top:14px; transform:translateX(-50%); z-index:90; display:grid; gap:10px; width:min(420px, calc(100% - 24px)); }
.toast{ background:var(--paper); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 14px; font-size:14.5px;
  animation:toast-rein .25s ease-out; }
.toast b{ display:block; font-family:var(--font-label); letter-spacing:.1em; text-transform:uppercase; font-size:11.5px; color:var(--lilac-text); }
@keyframes toast-rein{ from{ transform:translateY(-12px); opacity:0; } to{ transform:none; opacity:1; } }

/* Dialog (Allergene, Optionen) */
dialog{ border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); background:var(--paper); padding:0; width:min(520px, calc(100% - 24px)); max-height:calc(100% - 40px); margin:auto; }
dialog::backdrop{ background:rgba(29,29,27,.45); }
.dialog-kopf{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:14px 16px; border-bottom:2px solid var(--ink); background:var(--cream); }
.dialog-inhalt{ padding:16px; overflow:auto; }
.schliessen{ background:none; border:2px solid var(--ink); width:38px; height:38px; font-size:20px; line-height:1; cursor:pointer; flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }