/* Munchies Bestellsystem, gemeinsame Marken-Tokens und Grundgeruest.
   Helle Flaeche mit dunkler Schrift ist im Freien besser lesbar als eine
   dunkle Oberflaeche: das Display leuchtet dann gegen die Sonne an. Nur die
   Anzeige am Fernseher ist dunkel, die laeuft erst in der Daemmerung. */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlowcond-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/barlowcond-800.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url(fonts/barlowcond-800i.woff2) format('woff2')}

/* Werte aus dem Brandsheet und aus gotthemunchies.de, nicht neu erfunden.
   Munchies Blue #143DBC, Warm Cream #F4EFE5, Tomato Red #D62828,
   Signal Yellow #FFC107. */
:root{
  --blau:#143DBC; --blau-tief:#0E2C8A; --rot:#D62828; --gelb:#FFC107;
  --creme:#F4EFE5; --sand:#F3E6D0;
  --tinte:#14213D; --anzeige:#0A1020;
  --leise:#5C6784; --linie:#DED5C6; --weiss:#fff;
  --satz:'Barlow',ui-sans-serif,system-ui,sans-serif;
  --wucht:'Barlow Condensed','Barlow',ui-sans-serif,system-ui,sans-serif;
  --schatten:0 1px 2px rgba(20,61,188,.06), 0 24px 48px -32px rgba(20,61,188,.45);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--creme); color:var(--tinte); font-family:var(--satz);
  font-size:17px; line-height:1.4; -webkit-text-size-adjust:100%;
  overscroll-behavior:none; -webkit-tap-highlight-color:transparent;
}
.zahl{font-family:var(--wucht);font-weight:800;font-style:italic;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.wucht{font-family:var(--wucht);font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:-.005em;line-height:.9}

/* Rote Vorzeile ueber einer Ueberschrift. Auf der Website heisst sie
   .tagline und steht ueber jedem Abschnitt. */
.oben{font-family:var(--wucht);font-weight:700;font-size:.8rem;letter-spacing:.16em;
      text-transform:uppercase;color:var(--rot);margin:0 0 .3rem}
.oben.leise{color:var(--leise)}

/* Die Zahlenkachel der Marke: geneigtes Rechteck, Zahl in Barlow Condensed,
   kleines Wort darunter. Steht auf gotthemunchies.de unter dem Countdown und
   ist hier die Form, in der ueberall Nummern gezeigt werden. */
.feld{background:var(--blau);border-radius:6px;padding:.5rem .8rem;text-align:center;
      transform:skew(-6deg);display:inline-block}
.feld > *{display:block;transform:skew(6deg)}
.feld .zahl{font-family:var(--wucht);font-weight:800;font-style:italic;
            font-variant-numeric:tabular-nums;color:var(--creme);line-height:1}
.feld .was{margin-top:.1rem;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
           color:rgba(244,239,229,.7);font-weight:600}
.feld.gelb{background:var(--gelb)}
.feld.gelb .zahl{color:var(--tinte)}
.feld.gelb .was{color:rgba(20,33,61,.65)}

/* Gestrichelter Kasten. Auf der Website umrandet er das Eintragefeld, hier
   den Bon des Gastes: sieht nach Zettel aus, nicht nach Rechnung. */
.zettel{border:2px dashed var(--linie);border-radius:6px;background:var(--weiss);padding:.85rem 1rem}

/* Kopfzeile: klebt oben, enthaelt nur, was im Betrieb wirklich gebraucht wird */
.kopf{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:.6rem;
  padding:.55rem .8rem; background:var(--blau); color:var(--weiss);
  padding-top:calc(.55rem + env(safe-area-inset-top));
}
/* Das Logo statt eines nachgebauten Schriftzugs: Cremefarbenes Schild,
   blaue Buchstaben, roter Strich, gelber Punkt auf dem i. Auf Blau und auf
   dem dunklen Fernseher gleichermassen lesbar. */
.kopf .marke{height:30px;width:auto;display:block;flex:0 0 auto}
.kopf .titel{font-family:var(--wucht);font-weight:700;font-size:.78rem;letter-spacing:.16em;
             text-transform:uppercase;color:rgba(244,239,229,.85)}
.kopf .dehn{flex:1}
.balken{height:7px;background:var(--rot);transform:skew(-30deg)}

/* Verbindungsampel. Gruen wird nicht angezeigt, nur der Fehlerfall faellt auf. */
.funk{font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;padding:.2rem .5rem;border-radius:4px;background:rgba(255,255,255,.15)}
.funk.weg{background:var(--rot);color:#fff}
.funk.ok{display:none}

button{font-family:var(--satz);font-size:1rem;cursor:pointer;border:0;border-radius:9px}
.knopf{
  min-height:56px; padding:.7rem 1.1rem; background:var(--rot); color:#fff;
  font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem;
  transform:skew(-6deg);
}
.knopf > span{display:inline-block;transform:skew(6deg)}
.knopf:disabled{background:#B9B2A6;color:#fff}
.knopf.still{background:var(--weiss);color:var(--tinte);border:2px solid var(--linie)}
/* Geisterknopf auf farbigem Grund, wie .knopf.rand.hell auf der Website.
   In der blauen Kopfzeile soll kein weisser Block neben dem Logo stehen. */
.knopf.rand{background:transparent;color:var(--creme);box-shadow:inset 0 0 0 2px rgba(244,239,229,.55)}
/* Kleine Fassung fuer die Kopfzeile. Bleibt ueber 40 px hoch, das ist im
   Kopf noch treffbar; die Knoepfe, auf die es ankommt, sind weiter 56 px. */
.knopf.klein{min-height:40px;padding:.3rem .75rem;font-size:.72rem;letter-spacing:.1em}
.knopf.blau{background:var(--blau)}
.knopf.gelb{background:var(--gelb);color:var(--tinte)}

/* PIN-Schleuse, liegt ueber allem */
.schleuse{position:fixed;inset:0;z-index:50;background:var(--blau);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.5rem}
.schleuse.auf{display:flex}
.schleuse .marke{width:min(62vw,18rem);height:auto;margin-bottom:.4rem}
.schleuse input{font-family:var(--wucht);font-weight:800;font-size:3rem;text-align:center;width:11rem;padding:.4rem;border:0;border-radius:9px;letter-spacing:.4em;text-indent:.4em}
.schleuse .fehler{color:var(--gelb);font-weight:600;min-height:1.4em}

.hinweis{margin:.8rem;padding:.7rem .9rem;border-radius:6px;background:var(--gelb);color:var(--tinte);font-weight:600}
.hinweis:empty{display:none}