/* PickupBox - workstation user interface.

   A separate file, no <style> in the document: the server sets a strict
   Content-Security-Policy without 'unsafe-inline'.

   The brand scale below is taken verbatim from the master project's
   internal/web/static/css/input.css, so PickupBox looks like it belongs to the
   same family. What is NOT taken over is Tailwind itself: that would add an
   npm build step, and a stylesheet that has to be rebuilt separately is a
   known trap (a compiled stylesheet in a sibling project went un-rebuilt for
   two weeks and silently dropped every utility class added in that time).
   Hand-written CSS compiled into the binary has no such step.

   Class names stay German because they mirror the domain vocabulary used in
   the templates (frei/belegt/reserviert/gesperrt). */

:root {
  /* Brand scale, identical to the master project (logo green #71ba27). */
  --marke-50:  #f2f9ec;
  --marke-100: #e0f2d0;
  --marke-200: #c3e6a4;
  --marke-300: #a1d873;
  --marke-600: #71ba27;
  --marke-700: #5c9820;
  --marke-800: #4a7a1a;
  --marke-900: #3d6416;
  --marke-950: #22380c;

  /* Neutrals, following Tailwind's slate the master builds on. */
  --papier:    #f8fafc; /* slate-50  */
  --flaeche:   #ffffff;
  --linie:     #e2e8f0; /* slate-200 */
  --linie-satt:#cbd5e1; /* slate-300 */
  --text:      #0f172a; /* slate-900 */
  --gedaempft: #64748b; /* slate-500 */

  /* Box states. Green means available, so it shares the brand hue; the other
     states deliberately use different hues so they stay distinguishable for
     someone with a red-green deficiency, not only by colour but by the state
     label printed in every box. */
  --frei:          var(--marke-700);
  --frei-feld:     var(--marke-50);
  --belegt:        #b45309; /* amber-700 */
  --belegt-feld:   #fffbeb; /* amber-50  */
  --reserviert:    #4338ca; /* indigo-700 */
  --reserviert-feld:#eef2ff;/* indigo-50  */
  --sperre:        #b91c1c; /* red-700 */
  --sperre-feld:   #fef2f2; /* red-50  */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  background: var(--papier);
  color: var(--text);
}

/* A visible focus ring is mandatory: these workstations are operated with a
   keyboard and a barcode scanner. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--marke-600);
  outline-offset: 2px;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
}
.sprungmarke:focus {
  left: 8px; top: 8px; z-index: 10;
  background: var(--flaeche); padding: 10px 14px; border: 2px solid var(--marke-600);
}

header.kopf {
  display: flex; align-items: center; gap: 18px;
  height: 52px; padding: 0 20px;
  background: var(--marke-950); color: #fff;
}
header.kopf .marke { font-weight: 700; font-size: 18px; letter-spacing: .3px; }
header.kopf .standort { color: var(--marke-200); }
header.kopf .platz {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-size: 14px; color: var(--marke-100);
}
.modus-abzeichen {
  padding: 3px 10px; border-radius: 4px; font-weight: 600;
  background: var(--marke-600); color: #fff; text-transform: uppercase; font-size: 12px;
}
.modus-abzeichen.lager { background: var(--marke-800); }
.modus-abzeichen.unbekannt { background: var(--sperre); }
/* kasse aendert absichtlich nichts: der Grundzustand oben IST das Abzeichen
   der Kasse, und "kombiniert" tragt dieselbe Klasse. Die Regel steht hier
   leer und nicht mit einer Kopie von --marke-600, weil zwei Zahlen fuer eine
   Farbe heisst, dass eine davon veraltet. Ohne sie sieht jede Pruefung eine
   Klasse, die in keiner Regel vorkommt -- also genau das Muster, hinter dem
   sonst ein Tippfehler steckt. */
.modus-abzeichen.kasse { }

nav.bereiche {
  display: flex; gap: 2px; padding: 0 20px;
  background: var(--marke-900);
}
nav.bereiche a {
  color: var(--marke-100); text-decoration: none; padding: 9px 16px; font-size: 14px;
}
nav.bereiche a[aria-current="page"] {
  background: var(--papier); color: var(--text); font-weight: 600;
}

main { padding: 20px; }
h1 { font-size: 21px; margin: 0 0 16px; }
h2 { font-size: 16px; margin: 0 0 10px; }

.kennzahlen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.kennzahl {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  padding: 12px 18px; min-width: 110px;
}
.kennzahl .zahl { font-size: 26px; font-weight: 700; }
.kennzahl .bezeichnung { color: var(--gedaempft); font-size: 13px; }

.tafel {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: 16px; margin-bottom: 18px;
}

.faecher {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
}
.fach {
  border: 1px solid var(--linie); border-left-width: 5px; border-radius: 6px;
  padding: 10px 12px; background: var(--flaeche);
}
.fach .code { font-weight: 700; font-size: 17px; }
/* The cabinet above the drawer number, and only where a site has more than
   one unit. Small on purpose: the number is what somebody reads across the
   room, the cabinet is what keeps it from meaning two places. */
.fach .schrankzeile,
td > .schrankzeile {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gedaempft); margin-bottom: 2px;
}
.fach .zustand { font-size: 12px; font-weight: 600; text-transform: uppercase; }
.fach .inhalt { font-size: 13px; color: var(--gedaempft); margin-top: 4px; }
.fach.frei        { border-left-color: var(--frei);        background: var(--frei-feld); }
.fach.frei .zustand { color: var(--frei); }
.fach.belegt      { border-left-color: var(--belegt);      background: var(--belegt-feld); }
.fach.belegt .zustand { color: var(--belegt); }
.fach.reserviert  { border-left-color: var(--reserviert);  background: var(--reserviert-feld); }
.fach.reserviert .zustand { color: var(--reserviert); }
.fach.gesperrt    { border-left-color: var(--sperre);      background: var(--sperre-feld); }

/* Goods that have been in the drawer for a week.
   Deliberately NOT a new colour. The drawer is already amber for "belegt", and
   a second amber on top of it is invisible; a red would say "gesperrt", which
   is a different thing and not true. So the mark is a dashed outline in the
   text colour plus a line that says how long — the same reasoning as the state
   labels above, where the word carries the meaning and the colour only helps
   find it. */
.fach.liegtlang   { outline: 2px dashed var(--text); outline-offset: -3px; }
.fach .liegtlang-zeile {
  margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--text);
}
.hinweis.liegenlang {
  border-left: 4px solid var(--belegt);
  padding: 8px 12px; margin: 0 0 12px; background: var(--belegt-feld);
}
.fach.gesperrt .zustand { color: var(--sperre); }

label { display: block; font-weight: 600; margin-bottom: 5px; }
.hinweistext { color: var(--gedaempft); font-size: 13px; margin: 4px 0 0; }

/* A field that may stay empty says so in its own label, quieter than the
   label itself. Most drawers hold an ordinary ERP order, so the Bloomwell
   field is blank almost every time and must not look like something was
   forgotten. */
.optional { color: var(--gedaempft); font-weight: normal; }

input[type=text], input[type=password], input[type=number], select {
  font: inherit; padding: 9px 11px; border: 1px solid var(--linie-satt);
  border-radius: 6px; background: #fff; width: 100%; max-width: 420px;
}
input.suche { font-size: 20px; padding: 14px; }

button {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 10px 18px; border-radius: 6px; border: 1px solid transparent;
  background: var(--marke-600); color: #fff;
}
button:hover { background: var(--marke-700); }
button.zweitrangig { background: #fff; color: var(--text); border-color: var(--linie-satt); }
button.zweitrangig:hover { background: var(--papier); }
button.gewichtig { font-size: 17px; padding: 13px 22px; }
button:disabled { opacity: .5; cursor: not-allowed; }

form.reihe { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }

.treffer { border: 1px solid var(--linie); border-radius: 8px; padding: 18px; background: var(--flaeche); }
/* A site that was switched off. Dimmed rather than hidden: what was collected
   there is still in the record, and somebody looking for it should find the
   site rather than conclude it never existed. */
tr.stillgelegt td { opacity: .55; }

/* A relocation this pharmacy has to act on, as opposed to one it is only
   watching. Both are shown — the request concerns both houses — but only one
   of them is somebody's job this morning. */
.tafel.unsere-aufgabe { border-left: 6px solid var(--marke-600); }

/* The one-time password. Set in a monospaced face at a size somebody can read
   off the screen while writing on paper — which is what is going to happen,
   because there is no second chance to look. */
.kennwort-ausgabe .geheimnis {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: 1px;
  background: var(--marke-50); border: 1px solid var(--marke-300);
  border-radius: 6px; padding: 6px 12px; display: inline-block;
  user-select: all;
}

/* The answer "it is in the other town". Set apart from a hit, because the one
   thing that must not happen here is somebody reading it as a drawer they can
   open. */
.treffer.woanders { border-left: 6px solid var(--reserviert); }
.treffer.woanders h2 { margin-bottom: 10px; }

.fachgross { font-size: 54px; font-weight: 800; line-height: 1.1; letter-spacing: 1px; }
.fachgross-bezeichnung { color: var(--gedaempft); font-size: 13px; text-transform: uppercase; }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0; }
.daten dt { color: var(--gedaempft); }
.daten dd { margin: 0; font-weight: 600; }

.meldung { border-radius: 6px; padding: 11px 14px; margin-bottom: 16px; border: 1px solid; }
.meldung.gut     { background: var(--frei-feld);   border-color: var(--frei);   color: var(--marke-900); }
.meldung.schlecht{ background: var(--sperre-feld); border-color: var(--sperre); color: #7f1d1d; }
.meldung.hinweis { background: #eff6ff;            border-color: #1d4ed8;       color: #1e3a8a; }

table { border-collapse: collapse; width: 100%; background: var(--flaeche); }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--linie); }
th { background: var(--papier); font-size: 13px; }
tr:last-child td { border-bottom: none; }

.anmeldung {
  max-width: 380px; margin: 9vh auto; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; padding: 28px;
}
.anmeldung h1 { text-align: center; }
.anmeldung button { width: 100%; margin-top: 8px; }
.anmeldung input { max-width: none; }
.feld { margin-bottom: 14px; }

/* User administration. The state word carries the colour; the colour alone
   never carries the meaning, because a locked account and one that merely has
   no password yet must stay distinguishable in a printout or on a washed-out
   screen in a sales area. */
.zustand { font-size: 13px; font-weight: 600; }
.zustand.frei     { color: var(--frei); }
.zustand.offen    { color: var(--belegt); }
.zustand.gesperrt { color: var(--sperre); }
/* The Bloomwell states reuse the colours already in use for the same meanings
   elsewhere, so somebody who has learnt the warehouse screen does not have to
   learn a second vocabulary. The word carries it either way. */
.zustand.gut      { color: var(--frei); }
.zustand.warnung  { color: var(--belegt); }
.zustand.schlecht { color: var(--sperre); }

fieldset.feld {
  border: 1px solid var(--linie); border-radius: 6px; padding: 10px 14px;
}
fieldset.feld legend { color: var(--gedaempft); font-size: 13px; padding: 0 4px; }
label.ankreuz {
  display: flex; align-items: center; gap: 8px; font-weight: 400;
  margin-bottom: 6px;
}
label.ankreuz input { width: auto; }

/* Work-list tabs. The count sits in the tab because the warehouse decides
   where to look by how much is waiting, not by the label. */
nav.reiter { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--linie); }
nav.reiter a {
  padding: 9px 16px; text-decoration: none; color: var(--gedaempft);
  border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0;
  margin-bottom: -1px; font-weight: 600;
}
nav.reiter a:hover { background: var(--papier); color: var(--text); }
nav.reiter a[aria-current="page"] {
  background: var(--flaeche); color: var(--text);
  border-color: var(--linie); border-bottom-color: var(--flaeche);
}
nav.reiter .anzahl {
  display: inline-block; min-width: 20px; padding: 1px 7px; margin-left: 6px;
  border-radius: 10px; background: var(--papier); border: 1px solid var(--linie);
  font-size: 12px; text-align: center;
}
nav.reiter a[aria-current="page"] .anzahl { background: var(--marke-50); border-color: var(--marke-200); }

/* An order waiting for days gets a marker on the left, not a red row: the
   whole list is work, and colouring all of it says nothing. */
tr.dringend td:first-child { box-shadow: inset 3px 0 0 var(--belegt); }
tr.dringend td:first-child strong { color: var(--belegt); }

/* Handover list. It is a document, so it gets document proportions on paper
   and stays a normal page on screen. */
.beleg { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 22px; }
.beleg-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.beleg-kopf h1 { margin: 0 0 4px; }
.beleg-anzahl { text-align: center; border: 2px solid var(--text); border-radius: 8px; padding: 8px 18px; }
.beleg-anzahl .zahl { font-size: 38px; font-weight: 800; line-height: 1; }
.beleg-anzahl .bezeichnung { font-size: 12px; text-transform: uppercase; color: var(--gedaempft); }
/* The destination drawer number on the relocation note. It is the one thing
   on the sheet that has to end up written on the parcel, so it is the one
   thing set larger than the rest. */
.zielfach { font-size: 18px; }

.beleg-tabelle { margin-top: 16px; }
.beleg-tabelle th.haken, .beleg-tabelle td.haken { width: 34px; text-align: center; }
.beleg-tabelle td.haken { border: 1px solid var(--linie-satt); }

.unterschriften { display: flex; gap: 40px; margin-top: 38px; font-size: 13px; color: var(--gedaempft); }
.unterschriften > div { flex: 1; }
.unterschriften .linie { display: block; border-top: 1px solid var(--text); margin-bottom: 6px; height: 42px; }

@media print {
  /* The app chrome is not part of the document. */
  header.kopf, nav.bereiche, nav.reiter, footer.fuss,
  .sprungmarke, .nicht-drucken, button { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  main { padding: 0; }
  .beleg { border: none; border-radius: 0; padding: 0; }
  /* A row must not break across pages: half a box on each sheet is how a
     tick-off list loses an entry. */
  .beleg-tabelle tr { page-break-inside: avoid; }
  .beleg-tabelle thead { display: table-header-group; }
  .unterschriften { page-break-inside: avoid; }
}

/* The shelves, drawn the way they stand in the room: named cabinets side by
   side, drawers stacked inside. The counter says "Regal 4, Schublade 59", so
   that is what the picture shows — not a grid of columns and rows, which is an
   abstraction nobody uses out loud. */
/* "Der Kunde kommt am ...". A drawer that carries this is occupied on
   purpose, not forgotten — without saying so, somebody frees it after two
   weeks. Marked, not alarming: nothing is wrong here. */
.angekuendigt {
  display: inline-block; font-size: 13px; font-weight: 600;
  background: #eef2ff; color: var(--reserviert);
  border: 1px solid var(--reserviert); border-radius: 4px; padding: 1px 7px;
  white-space: nowrap;
}
/* The quiet second line under a job's badge: not the state, but what the
   state leaves out — when the next attempt is due, or that nothing will
   happen at all until somebody signs off on payments. Both are things the
   badge alone claims by omission. */
.zustandnotiz {
  display: block; font-size: 13px; color: var(--gedaempft);
  margin-top: 3px; white-space: nowrap;
}
/* Kept on one line: wrapped, it broke after the number and left "Versuche"
   alone on the next row. */
.versuche { white-space: nowrap; }
.termin { margin: 12px 0 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.termin label { flex-basis: 100%; margin: 0; }
.termin input[type=date] { width: auto; }
.termin input[type=text] { flex: 1 1 180px; }
.termin .hinweistext { flex-basis: 100%; }

/* The excerpt banner. A hundred drawers with one of them highlighted is a
   wall, not a picture — so when a search finds something, only the half of
   each cabinet that holds it is drawn. Saying so is not optional: a picture
   that silently leaves half the room out is worse than one that is simply
   large. */
.ausschnitt {
  background: var(--marke-50); border: 1px solid var(--marke-300);
  border-radius: 6px; padding: 8px 12px; margin: 12px 0 0;
  font-size: 14px;
}
.ausschnitt a { margin-left: 8px; }

/* The cut-down picture is allowed to breathe: with half the drawers there is
   room for a larger label, and the label is what somebody reads across the
   room. */
.teilansicht .schublade { font-size: 15px; padding: 9px 6px; }

/* One row, never two. The cabinets stand side by side in the room, and a
   picture that folds the fifth one onto a second line describes furniture that
   is not there — the person looking for drawer 71 then counts along the wrong
   row. The number of shelves per site is configurable and deliberately has no
   upper limit, so when they no longer fit the row scrolls sideways instead of
   breaking. */
.regalreihe {
  display: flex; flex-wrap: nowrap; gap: 14px; margin: 14px 0;
  overflow-x: auto; padding-bottom: 8px;
}
.regal { flex: 1 1 0; min-width: 104px; }
.regal h3 { margin: 0 0 6px; font-size: 14px; text-align: center; color: var(--gedaempft); }
.regalkorpus {
  background: #4b5563; border-radius: 12px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.schublade {
  background: var(--flaeche);
  border: 1px solid var(--linie-satt);
  border-radius: 5px;
  padding: 7px 6px;
  text-align: center;
  font-size: 13px; font-weight: 700;
}
.schublade.frei        { background: var(--frei-feld);       border-color: var(--frei); }
.schublade.belegt      { background: var(--belegt-feld);     border-color: var(--belegt); }
.schublade.reserviert  { background: var(--reserviert-feld); border-color: var(--reserviert); }
.schublade.gesperrt    { background: var(--sperre-feld);     border-color: var(--sperre); }

/* The crossbar. The cabinets are built in blocks — the operator's own drawing
   shows ten drawers, a bar, then ten more — and a picture of one unbroken
   stack describes furniture that is not there. Somebody counting down from the
   top to find drawer 14 counts past the bar.

   Drawn as a gap with a rule in it rather than a border on the drawer: the bar
   belongs to the cabinet, not to the drawer above it. */
.schublade.blockende { margin-bottom: 14px; position: relative; }
.schublade.blockende::after {
  content: "";
  position: absolute; left: -6px; right: -6px; bottom: -9px;
  height: 4px; border-radius: 2px;
  background: #6b7280;
}

/* The drawer a search found. A customer is standing at the counter, so this
   has to be findable across the room — the operator's own mock-up marks it in
   red, and red against the dark cabinet is what carries that far. No
   animation: a steady frame is enough, and a blinking shelf is unusable for
   anybody who reacts badly to movement. */
.schublade.gesucht, .fach.gesucht {
  background: var(--sperre); color: #fff; border-color: var(--sperre);
  outline: 3px solid var(--marke-600); outline-offset: 2px;
}

/* Two drawers described into the same place. Marked as wrong, not drawn over:
   a picture that quietly hides one of them is how somebody ends up at an empty
   drawer. */
.schublade.doppelt { outline: 3px dashed var(--sperre); outline-offset: 2px; }

@media (max-width: 640px) {
  /* Still one row, narrower cabinets. Scrolling a shelf row sideways keeps the
     arrangement readable; wrapping it does not. */
  .regal { min-width: 82px; }
  .schublade { font-size: 12px; padding: 6px 4px; }
}

/* The other drawers of the same customer. Set as a list of drawer numbers
   rather than prose: the person at the counter has a customer in front of them
   and needs the number, not a sentence to parse. */
/* A row nobody searched for: another drawer of the customer whose drawer was
   found. Set apart, because a table that silently mixes the two claims the
   search found more than it did. */
tr.mitgefunden td { background: var(--marke-50); }
.beiwerk {
  font-size: 12px; font-weight: 600; color: var(--marke-800);
  border: 1px solid var(--marke-300); border-radius: 4px; padding: 1px 6px;
  white-space: nowrap;
}

.weitere { margin: 8px 0 4px; padding-left: 20px; }
.weitere li { margin: 3px 0; }
.weitere .fachnr { font-weight: 700; font-size: 16px; }

/* A label that is read aloud but not drawn. Thirty rows of "Spalte für A2-07"
   would bury the table, but a field without a name is unusable with a screen
   reader. */
.nurlesbar {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* The dialog over a drawer, in CSS alone.
   
   It is driven by :target — a link sets the fragment, the matching panel
   appears. No JavaScript, so the Content-Security-Policy stays as strict as it
   is, and nothing about this page depends on scripting being available.
   
   What that costs, honestly: Escape does not close it (the backdrop and the
   Abbrechen link do), and focus is not trapped inside. The panel is reachable
   and labelled, but it is not a modal dialog in the ARIA sense and does not
   claim to be one. */
.fachdialog { display: none; }
.fachdialog:target {
  display: block;
  position: fixed; inset: 0; z-index: 50;
}
.dialoghintergrund {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .55);
}
.dialogkasten {
  position: relative;
  max-width: 540px; margin: 12vh auto 0;
  background: var(--marke-700); color: #fff;
  border-radius: 14px; padding: 24px 26px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .35);
}
.dialogkasten h2 { margin: 0 0 4px; color: #fff; font-size: 20px; }
.dialogzeile { margin: 4px 0; color: #eaf5df; }
.dialoghinweis { margin: 16px 0 8px; font-weight: 700; }

/* Red is "look at this", not "blocked" — the operator's mock-up marks the
   payment and the prescription, never the drawer itself. */
.achtung {
  display: inline-block; background: var(--sperre); color: #fff;
  border-radius: 5px; padding: 6px 12px; font-weight: 700;
}

.dialogknoepfe {
  display: flex; gap: 10px; justify-content: flex-end;
  align-items: center; margin-top: 22px;
}
.knopfartig {
  font-weight: 600; text-decoration: none;
  padding: 10px 18px; border-radius: 6px;
  background: var(--linie); color: var(--text);
}
.knopfartig:hover { background: var(--linie-satt); }

/* A drawer with something in it is a link, and has to look like the others. */
a.schublade { text-decoration: none; color: inherit; display: block; }
a.schublade:hover { filter: brightness(.96); }

/* Orders that are not in a drawer yet.
   
   The operator's draft showed these as a grid of bare name buttons, with
   everything behind a click. A dialog is for confirming an action; there is no
   action here, only an answer for the person at the counter. So the answer is
   on the card: who, which order, how long, how far along, prescription and
   payment. One look instead of a click and a click back. */
.wartende { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.wartend {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 8px; padding: 12px 14px;
}
.wartend .name { font-size: 16px; font-weight: 700; }
.wartend .merkmale { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.wartend.dringend { border-left: 3px solid var(--belegt); }

footer.fuss { padding: 14px 20px; color: var(--gedaempft); font-size: 12px; }

@media (max-width: 640px) {
  header.kopf { height: auto; padding: 10px 14px; flex-wrap: wrap; }
  header.kopf .platz { margin-left: 0; width: 100%; }
  nav.bereiche { overflow-x: auto; }
  main { padding: 14px; }
  .fachgross { font-size: 42px; }
}

/* The status light.
   Three colours and a word beside each of them: a dot alone says nothing to
   somebody who has not been told what it means, and the people reading this
   are at a counter with a customer waiting. The word carries the meaning, the
   colour only makes it findable. */
.ampel { display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
         color: inherit; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--linie); }
.ampel:hover { background: var(--flaeche); }
.ampel .punkt { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.ampel-wort { font-size: 13px; }
.ampel.gruen .punkt { background: #1a7f37; }
.ampel.gelb  .punkt { background: #bf8700; }
.ampel.rot   .punkt { background: #b42318; }
/* Colour is never the only carrier: red and yellow also say "bitte ansehen"
   in the text beside the dot, so a screen read by somebody who cannot tell
   them apart still works. */
.ampel.rot, .ampel.gelb { font-weight: 600; }

.ampel-meldung { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ampel-meldung .punkt { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.ampel-meldung.gruen .punkt { background: #1a7f37; }
.ampel-meldung.gelb  .punkt { background: #bf8700; }
.ampel-meldung.rot   .punkt { background: #b42318; }

/* The record of one run, under its row. Numbered, because the order of the
   steps is what makes it readable. */
.protokoll { margin: 6px 0 0; padding-left: 20px; font-size: 13px; color: var(--gedaempft); }
.protokoll li { margin: 2px 0; }
.protokollzeile td { border-top: 0; padding-top: 0; }
/* The note somebody writes when they settled an order by hand. A field sized
   for an order number cuts its own example in half, and an example nobody can
   read is no example. */
.protokollzeile input[type="text"] { min-width: 26rem; max-width: 100%; }

/* The big drawer code on a shelf tile. It was in the templates with no rule
   behind it, so it inherited whatever the tile gave it — found by the check
   below, which reads both files and compares them. */
.nr { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Adding a Bloomwell order, on the counter screen.
   Its own block with a line under it, and room before the handover button.
   Folded away it is one quiet line; unfolded it ended up with its "Nachtragen"
   button hard against the big green "Ware übergeben" — and somebody who had
   just typed an address and hit the wrong one would hand the goods over with
   the address unsaved. That is the silent failure this section exists to
   prevent, happening right after somebody tried to prevent it. */
.nachtragen { border: 1px solid var(--linie); border-radius: 8px;
              padding: 10px 12px; margin: 12px 0 20px; background: var(--papier); }
.nachtragen summary { cursor: pointer; font-size: 14px; }
.nachtragen[open] { padding-bottom: 14px; }
.nachtragen .reihe { align-items: flex-end; }
/* An address is long. A field sized for an order number cuts it off halfway
   and the person pasting cannot see what they pasted. */
.nachtragen input[type="text"] { min-width: 28rem; max-width: 100%; }

/* Ein Dateiname oder Befehl mitten im Satz. Nur die Schrift wechselt — ein
   Kasten um drei Woerter zerreisst den Absatz, in dem sie stehen. */
code { font-family: "Cascadia Mono", Consolas, ui-monospace, monospace; font-size: 0.95em; }

/* Ein Befehl, der abgeschrieben oder kopiert wird. Monospaced, weil ein
   Bindestrich in einer Proportionalschrift neben einem Unterstrich nicht zu
   unterscheiden ist — und wer das hier liest, tippt es auf einem Server ab,
   an dem gerade etwas nicht laeuft. Auswaehlbar in einem Stueck. */
.befehl {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 15px;
  background: var(--papier); border: 1px solid var(--linie-satt);
  border-radius: 6px; padding: 8px 12px;
  display: block; margin: 8px 0; overflow-x: auto;
  user-select: all;
}

/* Die Angaben zum Dienst: Bezeichnung links, Antwort rechts. Kein Raster,
   weil der Pfad einer Dienstbefehlszeile lang ist und umbrechen darf. */
.dienstangaben { margin: 0; }
.dienstangaben div { display: flex; gap: 10px; padding: 4px 0; flex-wrap: wrap; }
.dienstangaben dt { color: var(--gedaempft); min-width: 180px; }
.dienstangaben dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Das zugeklappte Protokoll im Verlauf. Die Zusammenfassung sieht wie ein
   Verweis aus, weil sie einer ist — und sie nennt die Zahl der Zeilen, damit
   niemand aufklappt, um zu sehen, ob etwas drin ist. */
.protokollklappe { margin-top: 6px; }
.protokollklappe > summary {
  cursor: pointer; color: var(--marke-700); font-size: 13px;
  width: fit-content;
}
.protokollklappe > summary:hover { text-decoration: underline; }