/* AnimeStreet & CuoriFood – Retro-Cartoon der 50er/60er in den Farben der Website:
   Papier-Beige mit Rasterpunkten, Petrol, Tomatenrot, Senf. Dicke Konturen, harte Schatten. */
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-display: swap; src: url(/schrift/barlowcondensed-normal-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 400; font-display: swap; src: url(/schrift/barlowcondensed-normal-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/schrift/barlowcondensed-normal-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url(/schrift/barlowcondensed-normal-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Satisfy"; font-weight: 400; font-display: swap; src: url(/schrift/satisfy-normal-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400 500; font-display: swap; src: url(/schrift/inter-normal-400-latin.woff2) format("woff2"); }

:root {
  --tinte: #1f2a2a;
  --petrol: #224a49;
  --petrol-2: #2e5e5c;
  --teal: #4f7b70;
  --rot: #e53e26;
  --rot-dunkel: #b52a17;
  --senf: #e8b13a;
  --papier: #ece5d8;
  --creme: #f7ebd5;
  --weiss: #fffaf0;
  --gruen: #5a8f29;
  --leise: #5e665f;
  --kontur: 3px solid var(--tinte);
  --schatten: 4px 4px 0 var(--tinte);
  --schatten-klein: 2px 2px 0 var(--tinte);
  --rund: 14px;
  --titel: "Barlow Condensed", "Arial Narrow", sans-serif;
  --schreib: "Satisfy", cursive;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 16px/1.35 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--tinte);
  background-color: var(--papier);
  background-image: radial-gradient(rgba(34, 74, 73, .10) 1px, transparent 1.4px);
  background-size: 7px 7px;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  overscroll-behavior: none;
}
input, textarea, select { -webkit-user-select: text; user-select: text; font: inherit; color: var(--tinte); }
button { font: inherit; cursor: pointer; border: 0; touch-action: manipulation; color: inherit; background: none; }
button:disabled { opacity: .45; cursor: default; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin: 0; }

/* ---------- Kopf: Petrol mit Strahlenkranz, Logo, Markise ---------- */
.kopf {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 16px; min-height: 66px; color: var(--creme);
  background: var(--petrol);
  background-image: repeating-conic-gradient(from 0deg at 12% 140%, rgba(255,255,255,.06) 0 5deg, transparent 5deg 10deg);
}
.kopf .marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.kopf .marke img { width: 52px; height: 52px; border-radius: 50%; background: var(--weiss); border: var(--kontur); box-shadow: var(--schatten-klein); }
.kopf .marke b { display: block; font-family: var(--titel); font-weight: 700; font-size: 26px; line-height: .9; letter-spacing: .04em; text-transform: uppercase; text-shadow: 2px 2px 0 var(--rot); }
.kopf .marke i { display: block; font-family: var(--schreib); font-style: normal; font-size: 19px; line-height: 1.1; color: var(--senf); }
.kopf .raum { flex: 1; }
.kopf nav { display: flex; gap: 8px; }
.kopf nav a {
  font-family: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 17px;
  color: var(--tinte); background: var(--creme); text-decoration: none; padding: 7px 14px; border-radius: 999px; border: var(--kontur); box-shadow: var(--schatten-klein);
}
.kopf nav a[aria-current="page"] { background: var(--rot); color: var(--weiss); }
.uhr { font-family: var(--titel); font-weight: 700; font-size: 24px; letter-spacing: .04em; background: var(--tinte); color: var(--senf); padding: 3px 10px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.verbindung { width: 16px; height: 16px; border-radius: 50%; background: #7cc243; border: 2.5px solid var(--tinte); flex: none; }
.verbindung.weg { background: var(--rot); animation: blinken 1s infinite; }
@keyframes blinken { 50% { opacity: .25; } }
/* Markise des Trucks: rot-weiß gestreift mit Bogenkante */
.markise { height: 18px; position: relative; background: repeating-linear-gradient(90deg, var(--rot) 0 28px, var(--weiss) 28px 56px); border-bottom: 3px solid var(--tinte); }
.markise::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px;
  background: radial-gradient(circle at 14px 0, var(--rot) 11px, var(--tinte) 11px 13.5px, transparent 13.5px) 0 0 / 56px 12px repeat-x,
              radial-gradient(circle at 42px 0, var(--weiss) 11px, var(--tinte) 11px 13.5px, transparent 13.5px) 0 0 / 56px 12px repeat-x;
  pointer-events: none; z-index: 2;
}

/* ---------- Knöpfe ---------- */
.knopf {
  font-family: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 18px;
  background: var(--creme); color: var(--tinte); padding: 10px 16px; border-radius: 12px; border: var(--kontur); box-shadow: var(--schatten-klein);
  transition: transform .06s, box-shadow .06s;
}
.knopf:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--tinte); }
.knopf.rot { background: var(--rot); color: var(--weiss); }
.knopf.petrol { background: var(--petrol); color: var(--creme); }
.knopf.senf { background: var(--senf); }
.knopf.gruen { background: var(--gruen); color: var(--weiss); }
.knopf.gross { font-size: 26px; padding: 14px 22px; border-radius: 16px; box-shadow: var(--schatten); }
.knopf.gross:active:not(:disabled) { transform: translate(4px, 4px); }
.knopf.klein { font-size: 15px; padding: 7px 11px; border-radius: 10px; }

/* Kennzeichen eines Gerichts: farbiger Kreis mit Kürzel */
.kennung {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--k, var(--teal)); color: var(--weiss); border: 2.5px solid var(--tinte);
  font-family: var(--titel); font-weight: 700; font-size: 16px; letter-spacing: .02em; line-height: 1; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}
.kennung.gross { width: 46px; height: 46px; font-size: 21px; border-width: 3px; }

/* Hinweis unten */
#hinweis {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(140px);
  background: var(--tinte); color: var(--creme); padding: 12px 14px 12px 18px; border-radius: 14px; border: 3px solid var(--tinte); box-shadow: 4px 4px 0 var(--rot);
  display: flex; gap: 16px; align-items: center; z-index: 60; transition: transform .2s; max-width: calc(100vw - 32px);
  font-family: var(--titel); font-weight: 700; font-size: 20px; letter-spacing: .03em;
}
#hinweis.sichtbar { transform: translateX(-50%) translateY(0); }
#hinweis.fehler { background: var(--rot); color: var(--weiss); box-shadow: 4px 4px 0 var(--tinte); }
#hinweis button { background: var(--senf); color: var(--tinte); padding: 8px 14px; border-radius: 10px; border: 2.5px solid var(--creme); font-family: var(--titel); font-weight: 700; text-transform: uppercase; font-size: 18px; }

/* Dialog */
dialog { border: var(--kontur); border-radius: 18px; padding: 0; box-shadow: 8px 8px 0 var(--tinte); width: min(540px, calc(100vw - 32px)); background: var(--creme); color: var(--tinte); }
dialog::backdrop { background: rgba(31, 42, 42, .55); }
dialog .inhalt { padding: 20px; }
dialog h2 { font-size: 30px; line-height: 1; }
dialog .fuss { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 3px dashed rgba(31,42,42,.25); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--titel); font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 999px; background: var(--weiss); border: 2.5px solid var(--tinte); box-shadow: var(--schatten-klein);
}
.chip[aria-pressed="true"] { background: var(--petrol); color: var(--creme); }

.feld { display: grid; gap: 6px; margin: 12px 0; }
.feld label { font-family: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 15px; color: var(--petrol); }
.feld input, .feld textarea, .feld select { padding: 11px 13px; border: var(--kontur); border-radius: 12px; background: var(--weiss); width: 100%; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: none; box-shadow: 0 0 0 3px var(--senf); }
.leise { color: var(--leise); }
.stand { font-size: 11px; opacity: .55; }
.zeit { font-variant-numeric: tabular-nums; }

/* Zeitstrahl einer Bestellung */
.zeitstrahl { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 14px; }
.zeitstrahl > span { background: var(--weiss); border: 2px solid var(--tinte); border-radius: 8px; padding: 2px 7px; white-space: nowrap; }
.zeitstrahl b { font-family: var(--titel); font-size: 15px; letter-spacing: .03em; }
.zeitstrahl > .pfeil { border: 0; background: none; padding: 0; color: var(--leise); }
.zeitstrahl .eingang { background: #e3efe9; }
.zeitstrahl .fertig { background: #e2f0d2; }
.zeitstrahl .zurueckgeholt, .zeitstrahl .geaendert { background: #fff1c9; }
.zeitstrahl .storniert { background: #fbd9d2; }

@media (max-width: 620px) {
  .kopf { gap: 8px; padding: 8px 10px; }
  .kopf .marke > div { display: none; }
  .kopf .marke img { width: 42px; height: 42px; }
  .kopf nav a { padding: 5px 9px; font-size: 15px; }
  .uhr { display: none; }
}

/* ---------- Ladebildschirm ---------- */
#ladebild { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: var(--petrol); transition: opacity .4s, transform .4s; cursor: pointer; }
#ladebild.weg { opacity: 0; transform: scale(1.04); pointer-events: none; }
.lb-strahlen { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,.07) 0 6deg, transparent 6deg 12deg); animation: drehen 40s linear infinite; }
.lb-inhalt { position: relative; text-align: center; padding: 20px; max-width: 760px; }
.lb-logo { width: 150px; height: 150px; border-radius: 50%; background: var(--weiss); border: var(--kontur); box-shadow: 6px 6px 0 var(--tinte); animation: wippen 1.6s ease-in-out infinite; }
.lb-gruss { font-family: var(--schreib); font-size: clamp(30px, 5vw, 54px); line-height: 1.15; color: var(--creme); text-shadow: 3px 3px 0 var(--rot); margin: 22px 0 14px; animation: rein .6s ease-out both; }
.lb-pizza { display: inline-block; width: 96px; height: 96px; animation: drehen 2.2s linear infinite; filter: drop-shadow(4px 4px 0 var(--tinte)); }
.lb-pizza svg { width: 96px; height: 96px; }
.lb-unter { font-family: var(--titel); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 18px; color: var(--senf); margin: 12px 0 0; }
@keyframes drehen { to { transform: rotate(360deg); } }
@keyframes wippen { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes rein { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .lb-strahlen, .lb-logo, .lb-pizza, .lb-gruss { animation: none; } }