/* ===========================================================================
   Bestellsystem Maxicatering & Event – oeffentliche Seiten
   Mobile first: die Grundgestaltung gilt fuer das Telefon, groessere Bildschirme
   bekommen ueber Media Queries mehr Platz. Keine festen Pixelbreiten.
   =========================================================================== */

:root{
  --ink:#1b1b1b;
  --muted:#5c5c5c;
  --line:#d8d2c6;
  --paper:#fbf8f2;
  --accent:#8a1f1f;
  --accent2:#f3ece0;
  --tap:48px;                 /* Mindesthoehe fuer alles, was angetippt wird */
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:17px/1.55 "Georgia","Times New Roman",serif;
  overflow-wrap:break-word;      /* lange Adressen sprengen nichts mehr */
  word-break:normal;
}

img,svg,table{max-width:100%}
img{height:auto}

.wrap{
  width:100%;
  max-width:780px;
  margin:0 auto;
  padding:0 14px;
}

/* --------------------------------------------------------------- Kopfzeile */
.topbar{
  background:#fff;
  border-bottom:3px solid var(--ink);
  padding:12px 14px;
  text-align:center;
}
.brand{
  display:block;
  font-size:clamp(22px,6.5vw,30px);
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:.5px;
}
.claim{color:var(--muted);font-size:15px}

main.wrap{padding-top:16px;padding-bottom:36px}

h1{font-size:clamp(22px,6vw,30px);line-height:1.2;margin:.4em 0}
h2{font-size:clamp(19px,5vw,24px);margin:1.2em 0 .4em}
h2 .sub{font-size:15px;color:var(--muted);font-weight:400}
h3{font-size:clamp(17px,4.5vw,20px);margin:.2em 0 .6em}
h4{font-size:17px;margin:.6em 0 .2em}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin-bottom:14px;
}
.small{font-size:14px}
.hint{color:var(--muted);font-size:15px;margin:.4em 0}
.hint.center{text-align:center}
.none{color:var(--muted)}
.r{text-align:right}
.req{color:var(--accent)}
.sr{position:absolute;left:-9999px}

/* ------------------------------------------------------------ Wochenkarte */
.menucard .week{
  background:#fff;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:16px 14px;
  margin-bottom:14px;
  text-align:center;
}
.menucard h1{font-size:clamp(20px,5.5vw,28px);margin:.1em 0 .5em}
.menucard .dishes{list-style:none;margin:0;padding:0}
.menucard .dishes li{margin:.6em 0;font-size:clamp(16px,4.3vw,19px)}
.menucard .wd{font-weight:700;margin-right:.35em;white-space:nowrap}
.menucard .soup{margin-top:1em;font-size:clamp(16px,4.3vw,19px)}
.menucard .note{text-align:center;color:var(--muted);font-size:15px}

/* ---------------------------------------------------------- Lieferangebot */
.pricelist{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.pricelist td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.pricelist td:last-child{text-align:right;white-space:nowrap;width:1%}
.pricelist tr:last-child td{border-bottom:none}
.pricelist .grp td{background:var(--accent2);font-weight:700}

/* --------------------------------------------------------------- Formular */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.orderform h2{border-bottom:2px solid var(--ink);padding-bottom:.2em}

fieldset.choice{border:none;margin:0 0 10px;padding:0}
fieldset.choice legend{font-weight:700;padding:0 0 6px}

.opt{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:var(--tap);
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:9px;
  margin-bottom:8px;
  background:#fff;
  cursor:pointer;
}
.opt input{width:24px;height:24px;flex:none;margin:0}
.opt > span:first-of-type{flex:1}
.opt .price{flex:none;color:var(--muted);font-size:15px;white-space:nowrap}
.opt:hover{background:var(--accent2)}

.addr{display:none;margin-top:8px}
.addr.show{display:block}

label{display:block;font-weight:700;margin-bottom:4px}

input[type=text],input[type=email],input[type=tel],input[type=number],
input[type=password],input[type=date],select,textarea{
  width:100%;
  font-family:inherit;
  font-size:16px;              /* verhindert das Hineinzoomen auf dem iPhone */
  line-height:1.4;
  min-height:var(--tap);
  padding:10px;
  border:1px solid #b9b2a4;
  border-radius:9px;
  background:#fff;
  color:inherit;
}
textarea{min-height:88px}
input[type=number]{text-align:center;-moz-appearance:textfield}
.field{margin-bottom:14px}

/* Tagesauswahl: auf dem Telefon zwei Spalten, damit die Woche auf einen Blick passt */
.days{display:grid;grid-template-columns:1fr;gap:8px}
.day{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:56px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 10px;
  background:#fff;
  cursor:pointer;
  font-weight:400;
}
.day.sel{border-color:var(--ink);border-width:2px;background:var(--accent2)}
.day input{width:24px;height:24px;flex:none;margin:0}
.dayname{font-weight:700;flex:none}
.dishname{color:var(--muted);font-size:14px;flex:1;min-width:0}

.dayblock h3{border-bottom:2px solid var(--line);padding-bottom:.3em}

.row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:none}
.rowmain{flex:1;min-width:0}
.rowmain .price{color:var(--muted);font-size:15px;white-space:nowrap}
.qty{flex:none;width:84px;text-align:center}
.qty label{font-size:13px;font-weight:400;color:var(--muted);margin-bottom:2px}
.sidepick{margin-top:8px}

.extras{margin-top:10px;border-top:1px solid var(--line);padding-top:4px}
.extras summary{
  cursor:pointer;
  font-weight:700;
  padding:12px 0;
  min-height:var(--tap);
  display:flex;
  align-items:center;
}
.extras summary:hover{color:var(--accent)}
.daysum{text-align:right;margin:10px 0 0;font-size:16px}

.totalbar{
  position:sticky;
  bottom:0;
  z-index:5;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:16px 0;
  box-shadow:0 -2px 12px rgba(0,0,0,.08);
}
.totalbar strong{font-size:clamp(19px,5.5vw,24px);white-space:nowrap}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:var(--tap);
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:9px;
  padding:11px 16px;
  font:inherit;
  font-size:16px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.btn:hover{background:#000}
.btn.big{font-size:17px;padding:13px 18px}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn.danger{background:var(--accent)}
.cancelform{margin:18px 0 30px;text-align:center}

form.inline{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
form.inline label{margin:0;flex:1 1 100%}
form.inline input{flex:1 1 160px;width:auto}
form.inline .btn{flex:none}

/* --------------------------------------------- Meldungen und Bestaetigung */
.msg{padding:12px 14px;border-radius:9px;margin-bottom:14px;border:1px solid}
.msg ul{margin:.4em 0 0 1.1em;padding:0}
.msg.err{background:#fdecec;border-color:#e0a5a5}
.msg.warn{background:#fdf6e3;border-color:#e2cf9a}
.msg.ok{background:#eaf4ea;border-color:#a8cfa8}

.confirm{text-align:center}
.confirm .lead{font-size:18px}
.codebox{
  background:#fff;
  border:2px solid var(--ink);
  border-radius:10px;
  padding:16px 12px;
  margin:14px 0;
}
.codelabel{color:var(--muted)}
.code{
  font-size:clamp(30px,11vw,44px);
  font-weight:700;
  letter-spacing:.14em;
  line-height:1.2;
}
.qr{
  margin-top:10px;
  width:min(232px,68vw);
  height:auto;
  image-rendering:pixelated;
}

.sum{width:100%;border-collapse:collapse}
.sum td{padding:6px 3px;border-bottom:1px solid var(--line);vertical-align:top}
.sum td:first-child{width:1%;white-space:nowrap;padding-right:8px}
.sum td:last-child{text-align:right;white-space:nowrap;width:1%}
.sum .tot td{border-top:2px solid var(--ink);border-bottom:none;font-weight:700;font-size:18px}

.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.actions .btn{flex:1 1 200px}

.statusline{margin:0 0 10px}
.badge{
  display:inline-block;
  padding:3px 10px;
  border-radius:99px;
  font-size:14px;
  background:var(--accent2);
  border:1px solid var(--line);
  margin-right:6px;
  white-space:nowrap;
}
.badge.s-geliefert{background:#e8f3e8;border-color:#a8cfa8}
.badge.s-storniert{background:#fdecec;border-color:#e0a5a5}

.daygroup{margin-bottom:14px}
.daygroup h4{margin:.6em 0 .2em}
.lockednote{color:var(--muted);font-size:15px}
.textpage p{white-space:normal}

/* ---------------------------------------------------------------- Fusszeile */
.footer{
  border-top:1px solid var(--line);
  background:#fff;
  padding:16px 0;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  color:var(--muted);
  font-size:15px;
}
.footer p{margin:.3em 0}
.footer a{color:var(--muted);display:inline-block;padding:4px 0}

/* ================================================================ ab 480px */
@media (min-width:480px){
  .days{grid-template-columns:1fr 1fr}
  .qty{width:92px}
}

/* ================================================================ ab 700px */
@media (min-width:700px){
  body{font-size:18px}
  .wrap{padding:0 16px}
  .card{padding:16px}
  .days{grid-template-columns:1fr 1fr}
  .actions .btn{flex:0 0 auto}
}

@media print{
  .orderform,.topbar,.footer,.actions,.totalbar{display:none}
}