/* --- Farben ------------------------------------------------------------
   Zwei Sätze: heller Tag und dunkler Abend. Der Browser sagt, welcher.
   Kein Umschalter in der Oberfläche - das wäre eine Einstellung, die
   jeder Benutzer einmal sucht und nie wieder anfasst.                    */
:root {
  color-scheme: light dark;

  /* Die Hausfarben, unveraendert wie im Auftritt der Gruppe */
  --gruen:      #007758;
  --gruen-tief: #004230;
  --gruen-hell: #6fb2a0;
  --nachtblau:  #001123;

  --grund:      #eef2f1;
  --flaeche:    #ffffff;
  --flaeche-2:  #f4f8f7;
  --linie:      #dde6e3;
  --linie-satt: #bccdc8;
  --text:       #001123;
  --text-leise: #566b66;
  --betont:     #007758;
  --betont-satt:#004230;
  --betont-blass:#e3f0ec;

  --gut:        #00674c;  --gut-grund:      #d9efe7;
  --warn:       #8a5a00;  --warn-grund:     #fdf0d5;
  --schlecht:   #a51414;  --schlecht-grund: #fbe3e3;
  --neutral:    #4a5f5a;  --neutral-grund:  #e7eeec;
  /* Am 31.08.2026 leicht nachgedunkelt: als Marke "versandt und
     gemeldet" trug dieses Blau nur 4,1:1 gegen seinen Grund und lag
     damit unter dem Lesbarkeitsmass von 4,5. Jetzt 4,7:1. */
  --info:       #0a7096;  --info-grund:     #ddf0f7;

  /* Das helle Ende ist bewusst nicht heller: weisse Schrift auf #0a8a63
     ergibt einen Kontrast von 4.35 und verfehlt die uebliche Grenze von
     4.5. Auf #00815f sind es 4.87. */
  --kopf-grund: linear-gradient(100deg, #004230 0%, #007758 62%, #00815f 100%);

  --schatten:   0 1px 2px rgba(0, 17, 35, .06),
                0 1px 3px rgba(0, 17, 35, .07);
  --schatten-2: 0 6px 18px rgba(0, 17, 35, .12);
  --rund:       12px;
  --rund-klein: 8px;
  --kopfhoehe:  58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Das Nachtblau der Gruppe traegt hier den Grund. */
    --grund:      #001123;
    --flaeche:    #06203a;
    --flaeche-2:  #0a2947;
    --linie:      #133455;
    --linie-satt: #1e4a72;
    --text:       #e6eef2;
    --text-leise: #93aab6;
    --betont:     #6fb2a0;
    --betont-satt:#8fcbbb;
    --betont-blass:#04352a;

    --gut:        #7fd6b4;  --gut-grund:      #04352a;
    --warn:       #f0c04a;  --warn-grund:     #3a2c07;
    --schlecht:   #f0a0a0;  --schlecht-grund: #3d1414;
    --neutral:    #a3b6c2;  --neutral-grund:  #0d2b48;
    --info:       #6fc9e8;  --info-grund:     #062f42;

    --kopf-grund: linear-gradient(100deg, #001a12 0%, #004230 70%, #005c43 100%);

    --schatten:   0 1px 2px rgba(0, 0, 0, .5);
    --schatten-2: 0 6px 20px rgba(0, 0, 0, .6);
  }
}

/* --- Grundgerüst ------------------------------------------------------ */

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

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

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--betont); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 .25rem; letter-spacing: -.01em; }
h2 { font-size: 1.0625rem; margin: 0 0 .75rem; letter-spacing: -.005em; }
h3 { font-size: .9375rem; margin: 0 0 .5rem; }
p  { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }

.leise   { color: var(--text-leise); }
.klein   { font-size: .8125rem; }
.winzig  { font-size: .75rem; }
.stark   { font-weight: 600; }
.nummer  { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo,
                        Consolas, monospace;
           font-size: .8125rem; font-variant-ligatures: none; }
.rechts  { text-align: right; }
.nowrap  { white-space: nowrap; }
.abstand-oben { margin-top: 1.25rem; }
.nur-gross { display: none; }

/* --- Kopfleiste ------------------------------------------------------- */

.kopf {
  position: sticky; top: 0; z-index: 20;
  background: var(--kopf-grund);
  color: #fff;
  display: flex; align-items: center;
  gap: 1rem; padding: 0 1rem;
  min-height: var(--kopfhoehe);
  box-shadow: 0 1px 0 rgba(0, 17, 35, .14);
}

.marke {
  display: flex; align-items: center; gap: .5625rem;
  font-weight: 650; letter-spacing: -.02em;
  color: #fff; flex: none;
}
.marke:hover { text-decoration: none; }
.marke .zeichen {
  width: 32px; height: 32px; border-radius: 9px;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center; flex: none;
}
.marke .zeichen svg { width: 21px; height: 21px; display: block; }
.marke .wort { display: none; font-size: 1rem; }

.kopf .wer { margin-left: auto; display: flex; align-items: center;
             gap: .875rem; flex: none; }
.kopf .wer .name { display: none; font-size: .8125rem; font-weight: 500;
                   color: #fff; }
.kopf .wer a { color: #fff; }

/* Das Menü. Auf dem Telefon eine eigene Zeile, die sich seitlich schieben
   laesst - kein Klappmenue, das erst einen Klick kostet und ohne
   JavaScript ohnehin umstaendlich waere.                                 */
.menue {
  position: sticky; top: var(--kopfhoehe); z-index: 19;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  display: flex; gap: .25rem;
  padding: 0 .5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.menue::-webkit-scrollbar { display: none; }
.menue a {
  flex: none;
  padding: .6875rem .75rem;
  color: var(--text-leise);
  font-size: .875rem; font-weight: 500;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.menue a:hover { color: var(--text); text-decoration: none;
                 background: var(--flaeche-2); }
.menue a.hier { color: var(--betont); border-bottom-color: var(--betont);
                font-weight: 650; }

.inhalt { max-width: 1240px; margin: 0 auto; padding: 1rem; }

/* --- Meldestreifen: neue Bemerkungen ---------------------------------- */
/*
   Er klebt unter dem Menue, damit er auch beim Blaettern in einer langen
   Liste stehen bleibt. `z-index` eins unter dem Menue: beim Scrollen soll
   das Menue oben liegen, nicht der Streifen.

   Bernstein und nicht rot: eine Nachricht vom Kollegen ist kein Fehler.
   Auffallen soll sie trotzdem - deshalb ein kraeftiger Rand links, wie bei
   den Meldungen im Inhalt.
*/
.meldestreifen {
  position: sticky; top: calc(var(--kopfhoehe) + 42px); z-index: 18;
  background: var(--warn-grund);
  border-bottom: 1px solid #e8d2b4;
  padding: .5rem .75rem .625rem;
}
.melderzeile {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-bottom: .375rem;
  font-size: .8125rem; color: var(--warn);
}
.melderrest { color: var(--text-leise); }
.melderalle { margin-left: auto; }

.melder {
  background: var(--flaeche);
  border: 1px solid #e8d2b4;
  border-left: 3px solid var(--warn);
  border-radius: var(--rundung);
  padding: .5rem .625rem;
}
.melder + .melder { margin-top: .375rem; }

.melderkopf {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-size: .75rem; margin-bottom: .1875rem;
}
.melderkopf .von { font-weight: 600; color: var(--text); }
.melderkopf .woran { color: var(--betont); font-family: var(--schrift-fest); }
.melderkopf .wann { color: var(--text-leise); margin-left: auto; }

.meldertext {
  font-size: .875rem; color: var(--text);
  /* Ein langer Text darf den Streifen nicht ueber die halbe Seite
     wachsen lassen. Wer alles lesen will, klickt auf den Auftrag. */
  max-height: 4.5rem; overflow-y: auto;
  white-space: pre-wrap; overflow-wrap: anywhere;
}

.melderform {
  display: flex; gap: .375rem; margin-top: .4375rem; flex-wrap: wrap;
}
.melderfeld {
  flex: 1 1 12rem; min-width: 0;
  padding: .3125rem .5rem;
  border: 1px solid var(--linie); border-radius: var(--rundung);
  background: var(--grund); color: var(--text);
  font: inherit; font-size: .8125rem;
}
.melderfeld:focus-visible {
  outline: 2px solid var(--betont); outline-offset: 1px;
}
.knopf.klein { padding: .3125rem .625rem; font-size: .8125rem; }

/* Auf schmalen Geraeten steht das Menue umgebrochen; ein fester Abstand
   nach oben waere dort falsch. Dann klebt der Streifen gar nicht - eine
   halbe Seite Meldung auf einem Telefon nuetzt niemandem. */
@media (max-width: 560px) {
  .meldestreifen { position: static; }
  .melderkopf .wann { margin-left: 0; }
}

/* --- Karten ----------------------------------------------------------- */

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  margin-bottom: 1rem;
}
.karte > .kopfzeile {
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche-2);
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.karte > .kopfzeile h2 { margin: 0; }
.karte > .kopfzeile .dazu { margin-left: auto; font-size: .8125rem; color: var(--text-leise); }
.karte > .rumpf,
/* Auch wenn ein Formular die Karte fuellt - sonst klebt der Text am Rand.
   So geschehen am 06.10.2026 im Hinweis unter den Retourenpositionen. */
.karte > form > .rumpf { padding: 1rem; }
.karte { overflow: hidden; }
.karte > .fusszeile,
.karte > form > .fusszeile {
  padding: .75rem 1rem;
  border-top: 1px solid var(--linie);
  background: var(--flaeche-2);
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .8125rem; color: var(--text-leise);
}

.seitenkopf { margin-bottom: 1.125rem; }
.seitenkopf .zurueck { font-size: .8125rem; display: inline-block;
                       margin-bottom: .375rem; }
/* Ein gruener Strich vor der Ueberschrift. Kostet nichts und gibt jeder
   Seite einen Anker fuers Auge. */
.seitenkopf h1 { position: relative; padding-left: .75rem; }
.seitenkopf h1::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em;
  width: 4px; border-radius: 2px; background: var(--betont);
}

/* --- Kennzahlen ------------------------------------------------------- */

.kennzahlen {
  display: grid; gap: .75rem; margin-bottom: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kennzahl {
  position: relative; overflow: hidden;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: .875rem 1rem .875rem 1.125rem;
  color: inherit;
  display: block;
}
/* Der Platzhalter, wenn gar nichts offen ist. Er traegt keine Zahl und
   soll deshalb auch nicht wie eine Kachel mit Zahl aussehen - er darf ueber
   die ganze Breite laufen und bleibt ruhig. */
.kennzahl.alles-ruhig {
  grid-column: 1 / -1;
  color: var(--text-leise);
}
.kennzahl.alles-ruhig .was { font-size: .9375rem; }

.kennzahl::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--betont);
}
a.kennzahl:hover {
  text-decoration: none;
  border-color: var(--betont);
  box-shadow: var(--schatten-2);
}
.kennzahl .wert { font-size: 1.875rem; font-weight: 650; line-height: 1.1;
                  letter-spacing: -.03em; color: var(--betont); }
.kennzahl .was  { font-size: .78125rem; color: var(--text-leise);
                  margin-top: .125rem; }
.kennzahl.achtung::before { background: var(--warn); }
.kennzahl.achtung .wert   { color: var(--warn); }
.kennzahl.ruhe::before    { background: var(--linie-satt); }
.kennzahl.ruhe .wert      { color: var(--text-leise); }

/* --- Tabellen --------------------------------------------------------- */

.tabellenrahmen { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left;
  font-size: .6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-leise);
  padding: .625rem 1rem;
  background: var(--flaeche-2);
  border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
tbody td { padding: .75rem 1rem; border-bottom: 1px solid var(--linie);
           vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--betont-blass); }
td .zweitzeile { color: var(--text-leise); font-size: .75rem; margin-top: .125rem; }

ul.blank { list-style: none; margin: 0; padding: 0; }
ul.blank li + li { margin-top: .1875rem; }

/* Eine Nummer, die als ERSTES in einer Zelle steht, wird zum Block.
   ---------------------------------------------------------------------
   Sonst sitzt sie zwei Pixel zu tief, und in einer Tabellenzeile faellt
   genau das auf.
   Der Grund: `.nummer` ist mit .8125rem kleiner als der Text der Zelle
   (1rem). Als INLINE-Element sitzt sie auf der Grundlinie der Zeile, und
   die richtet sich nach der groesseren Schrift - die Oberkante der
   kleineren Glyphen liegt dadurch tiefer. Die Nachbarzellen E1-Auftrag
   und Trackingnummern fuehren ihre Nummern in `ul.blank li`, also als
   Block mit eigener Zeilenhoehe, und stehen deshalb hoeher.
   Als Block bekommt die Nummer ihre eigene Zeilenhoehe und steht auf
   derselben Hoehe wie die Nachbarn. */
tbody td > .nummer:first-child,
tbody td > a:first-child > .nummer:first-child { display: block; }

/* --- Tagestrenner ------------------------------------------------------
   Eine Zeile in derselben Tabelle, die den Tag ansagt. Damit sieht man auf
   einen Blick, was an welchem Tag passiert ist, ohne Datumsangaben Zeile
   fuer Zeile zu vergleichen.                                              */

tr.taggruppe td {
  background: var(--betont-blass);
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  padding: .5rem 1rem;
  font-size: .8125rem; font-weight: 650;
  color: var(--betont-satt);
  letter-spacing: .01em;
  /* AUSDRUECKLICH NICHT klebend.
     Der erste Entwurf hatte hier `position: sticky` mit einem festen
     Abstand von oben. Zwei Dinge gingen dabei schief:
       * Der Abstand war geraten (56 + 42 = 98 px). Gemessen endet die
         Menueleiste erst bei 103 px - der Trenner sass also fuenf Pixel
         hinter ihr.
       * Ein klebender Trenner ueberdeckt beim Scrollen die erste Zeile des
         Tages, der unter ihm beginnt. Genau das war zu sehen: oben fehlte
         immer ein Stueck von dem, was zum naechsten Tag gehoert.
     Ein Trenner muss nicht mitwandern. Er trennt. */
}
tbody tr.taggruppe:first-child td { border-top: none; }
tbody tr.taggruppe:hover td { background: var(--betont-blass); }
tr.taggruppe .anzahl {
  float: right; font-weight: 600; color: var(--betont-satt);
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 999px; padding: 0 .5rem; font-size: .75rem;
}

.leer { padding: 2.75rem 1rem; text-align: center; color: var(--text-leise); }
.leer svg { width: 92px; height: 92px; margin-bottom: .375rem; opacity: .6; }
.leer .gross { font-size: 1rem; color: var(--text); margin-bottom: .25rem;
               font-weight: 600; }

/* --- Zustandsmarken --------------------------------------------------- */

.marke-zustand {
  display: inline-block; white-space: nowrap;
  padding: .1875rem .5625rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600;
  background: var(--neutral-grund); color: var(--neutral);
}
/* Die Skala geht von "offen" ueber "laeuft" nach "fertig":
   bernstein -> blau -> gruen. `gemeldet` und `zugestellt` trugen bis zum
   31.08.2026 beide `--gut` und waren untereinander nicht zu unterscheiden.
   `versandt` (= noch nicht gemeldet) ist bernstein, weil es ein offener
   Punkt ist - so zaehlt es auch die Kachel auf der Uebersicht. */
.z-gemeldet        { background: var(--info-grund);     color: var(--info); }
.z-exportiert,
.z-teilversandt,
.z-versandt        { background: var(--warn-grund);     color: var(--warn); }

/* Nicht der Auftragszustand: Datei verarbeitet, Sitzung in Ordnung,
   angemeldet. Sie hingen frueher an `z-gemeldet` mit und waeren sonst
   mit umgefaerbt worden. */
.z-inordnung       { background: var(--gut-grund);      color: var(--gut); }
.z-zurueckgestellt,
.z-storniert       { background: var(--schlecht-grund); color: var(--schlecht); }
.z-neu             { background: var(--neutral-grund);  color: var(--neutral); }

/* Die zwei berechneten Zustaende der Auftragsliste (siehe Treffer.status).
   Ohne eigene Regel bekaemen sie die Grundfarbe der Marke - grau. Bei
   "Zustellung stockt" waere das falsch herum: die wichtigste Meldung der
   Liste saehe aus wie eine Nebensache. */
.z-zugestellt         { background: var(--gut-grund);      color: var(--gut); }
.z-zustellung_stockt  { background: var(--schlecht-grund); color: var(--schlecht); }

/* Hier wartet niemand mehr, hier fehlt etwas: das Paket ist raus, aber die
   Rueckmeldung kam nie. Rot und nicht bernstein - "wartet auf Versand" ist
   ein normaler Zwischenstand, das hier ist ein Ausfall. */
.z-rueckmeldung_fehlt { background: var(--schlecht-grund); color: var(--schlecht); }
/* Geht nicht ans Lager, bis jemand die Anschrift ansieht - rot wie die
   fehlende Rueckmeldung: hier wartet nichts, hier fehlt etwas. */
.z-anschrift_pruefen { background: var(--schlecht-grund); color: var(--schlecht); }
.z-conxpert_abgelehnt { background: var(--schlecht-grund); color: var(--schlecht); }
.z-gesperrt          { background: var(--schlecht-grund); color: var(--schlecht); }

/* --- Retouren ------------------------------------------------------------ */
.z-r-angekuendigt,
.z-r-beauftragt    { background: var(--neutral-grund);  color: var(--neutral); }
.z-r-unterwegs     { background: var(--info-grund);     color: var(--info); }
.z-r-angekommen,
.z-r-in_pruefung   { background: var(--warn-grund);     color: var(--warn); }
.z-r-abgeschlossen { background: var(--gut-grund);      color: var(--gut); }
.z-r-storniert     { background: var(--neutral-grund);  color: var(--neutral); }
.belege { display: grid; gap: 1rem; margin-top: 1rem;
          grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.beleg { margin: 0; }
.beleg img, .beleg video { display: block; width: 100%; max-height: 16rem;
                           object-fit: contain; background: var(--flaeche-2);
                           border-radius: 6px; }
.beleg figcaption { margin-top: .25rem; overflow-wrap: anywhere; }
.ohne-vorschau { padding: 2rem 1rem; text-align: center;
                 background: var(--flaeche-2); border-radius: 6px; }
.retouren-werkzeuge { display: grid; gap: 1rem; margin-top: .75rem; }
.retouren-werkzeuge form { display: flex; flex-wrap: wrap; gap: .5rem;
                           align-items: flex-end; }
.retouren-werkzeuge .feld { margin-bottom: 0; flex: 1 1 14rem; }
.retouren-werkzeuge .feld.kurz { flex: 0 0 6rem; }
.retouren-werkzeuge input { width: 100%; }
.retourenverlauf, .retourenliste { margin: 0; padding-left: 1.1rem; }
.retourenverlauf li, .retourenliste li { margin-bottom: .4rem; }
.haken-feld { display: block; margin: .5rem 0; }
.retoure-anlegen input[type=text] { width: 100%; max-width: 24rem; }
.retourenhinweis p { margin: 0 0 .375rem; }
.retourenhinweis p:last-child { margin-bottom: 0; }
.retourenfuss { justify-content: flex-end; }
.retourentabelle input.menge-eingabe { width: 4.75rem; padding: .375rem .5rem;
                                      text-align: right; }
.retourentabelle td { vertical-align: top; }
.retourentabelle tr.ausgeschlossen td { color: var(--text-leise); }
.retourentabelle tr.ausgeschlossen td.haupt .nummer { text-decoration: line-through; }
.retourentabelle .bisher { margin-top: .25rem; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .5rem; }
form.inline { display: inline; margin: 0; }

/* Zustellkategorien, wie UPS sie liefert. Die Buchstaben sind UPS' eigene:
   D zugestellt, I unterwegs, M angekuendigt, P abgeholt, X Ausnahme,
   RS Ruecklauf. Dieselbe Skala wie oben: unterwegs blau, angekommen gruen. */
.z-zu-D            { background: var(--gut-grund);      color: var(--gut); }
.z-zu-I,
.z-zu-P            { background: var(--info-grund);     color: var(--info); }
.z-zu-M            { background: var(--neutral-grund);  color: var(--neutral); }
.z-zu-X,
.z-zu-RS           { background: var(--schlecht-grund); color: var(--schlecht); }

/* Die Zustellung steht in einer eigenen Spalte. Frueher hing sie unter
   der Weclapp-Rueckmeldung, und beide waren gruene Pillen - beim
   Ueberfliegen nicht zu unterscheiden. */
.zustellung .wann { color: var(--text-leise); font-size: .75rem;
                    margin-top: .1875rem; }

/* Die Rueckmeldung an Weclapp im Gutfall: erledigt, also leise. Ein Haken
   statt einer Pille - sonst konkurriert sie mit der Zustellung um
   Aufmerksamkeit, die sie nicht braucht. */
.haken { color: var(--gut); font-weight: 700; }

/* UPS-Texte koennen lang werden ("Wird an Absender zurueckgesendet",
   "Adressinformationen erforderlich"). Als nowrap-Pille sprengen sie die
   Spalte und erzwingen einen waagerechten Rollbalken ueber die ganze
   Tabelle. Hier darf deshalb umbrochen werden - lieber zwei Zeilen in der
   Pille als eine Tabelle, die seitlich wegrutscht.

   Der Text kommt von UPS und wird bewusst nicht gekuerzt: eine eigene
   Kurzfassung veraltet still, sobald UPS einen Status ergaenzt. */
.zustellung .marke-zustand {
  white-space: normal;
  max-width: 11rem;
  text-align: left;
  line-height: 1.3;
}

/* --- Formulare -------------------------------------------------------- */

input, select, button, textarea { font: inherit; color: inherit; }

input[type=text], input[type=search], input[type=password],
input[type=number], select, textarea {
  width: 100%;
  padding: .5625rem .75rem;
  border: 1px solid var(--linie-satt);
  border-radius: var(--rund-klein);
  background: var(--flaeche);
  color: var(--text);
}
input::placeholder { color: var(--text-leise); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--betont); outline-offset: 1px;
}

button, .knopf {
  display: inline-block;
  padding: .5625rem 1.125rem;
  border: 1px solid var(--betont);
  border-radius: var(--rund-klein);
  background: var(--betont); color: #fff;
  font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
button:hover, .knopf:hover { background: var(--betont-satt);
                             border-color: var(--betont-satt);
                             color: #fff; text-decoration: none; }
button.leiser, .knopf.leiser {
  background: var(--flaeche); color: var(--text); border-color: var(--linie-satt);
}
button.leiser:hover, .knopf.leiser:hover { background: var(--flaeche-2);
                                          color: var(--text);
                                          border-color: var(--betont); }

.suchleiste { display: grid; gap: .5rem; grid-template-columns: 1fr; }
.suchleiste .weit { grid-column: 1 / -1; }

.feld { margin-bottom: .875rem; }
.feld > span { display: block; font-size: .8125rem; font-weight: 500;
               margin-bottom: .3125rem; }
.feld .hilfe { font-weight: 400; color: var(--text-leise); font-size: .75rem; }

/* Bestandspflege: Zaehlwert, Bemerkung, Knopf. Auf dem Telefon untereinander,
   ab 640px nebeneinander - der Knopf steht dann auf einer Linie mit den
   Feldern, nicht mit deren Beschriftung. */
.bestandsform { display: grid; gap: .5rem 1rem; grid-template-columns: 1fr; }
.bestandsform .feld { margin-bottom: 0; }
.bestandsform button { width: 100%; }

/* Zu- und Abgang in der Historie. Nicht allein ueber die Farbe: das Vorzeichen
   steht ohnehin in der Zahl, die Farbe verstaerkt nur. */
.zugang { color: var(--gut); }
.abgang { color: var(--schlecht); }

/* --- Einrichtung nach einer Einladung --------------------------------- */

/* Etwas breiter als die Anmeldekarte: hier stehen drei Schritte, ein
   QR-Code und drei Felder untereinander. */
.anmeldekarte.breit { max-width: 30rem; }

.schritte { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.schritte > li { margin-bottom: 1rem; }
.schritte > li::marker { color: var(--betont); font-weight: 650; }

/* Der QR-Code braucht seinen weissen Grund auch im dunklen Erscheinungsbild -
   ein Leser findet ihn sonst nicht. Deshalb steht die Farbe hier fest und
   nicht als Variable. */
.qr { background: #fff; padding: .75rem; border-radius: var(--rund-klein);
      display: inline-block; margin: .75rem 0 .5rem; line-height: 0; }
/* Mit viewBox skaliert der Inhalt mit. OHNE viewBox wuerde eine feste
   Groesse hier den Code beschneiden - siehe die Erklaerung an _qr_bild().
   `height: auto` haelt ihn quadratisch, `max-width` verhindert Ueberlauf
   auf schmalen Telefonen. */
.qr svg { display: block; width: 13.25rem; max-width: 100%; height: auto; }

/* Das Geheimnis wird abgetippt. Grosszuegig gesperrt, damit sich 8 und B
   nicht verwechseln lassen, und umbrechbar, damit es auf dem Telefon passt. */
.geheimnis { font-size: .9375rem; letter-spacing: .08em; word-break: break-all;
             background: var(--flaeche-2); padding: .5rem .625rem;
             border-radius: var(--rund-klein); margin: 0; }

/* Die Wiederherstellungscodes. Zum Ausdrucken gedacht, also gross genug zum
   Ablesen und in zwei Spalten, damit sie auf eine Seite passen. */
.codes { columns: 2; column-gap: 1.5rem; margin: 0 0 1.25rem;
         padding-left: 1.5rem; }
.codes li { font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo,
                        Consolas, monospace;
            font-size: .9375rem;
            padding: .1875rem 0; break-inside: avoid; }

/* --- Aktualisieren ---------------------------------------------------- */
/* Ein Verweis auf die eigene Adresse, kein JavaScript. Sitzt am Ende der
   Menueleiste und ist durch eine Trennlinie davon abgesetzt: er fuehrt
   nirgendwo hin, er laedt neu. */

.menue .aktualisieren {
  display: flex; align-items: center; gap: .375rem;
  color: var(--betont);
  border-left: 1px solid var(--linie);
  margin-left: .25rem; padding-left: .875rem;
  border-bottom: 2px solid transparent;
}
.menue .aktualisieren:hover { text-decoration: none; color: var(--betont-satt); }
.menue .aktualisieren .zeichen { display: flex; }
.menue .aktualisieren svg { width: 15px; height: 15px; display: block; }

/* Auf dem Telefon nur das Zeichen und die Uhrzeit - "Aktualisieren"
   ausgeschrieben schoebe die Menuepunkte aus dem Bild. */
.menue .aktualisieren .wort { display: none; }
.menue .aktualisieren .stand {
  font-variant-numeric: tabular-nums;
  color: var(--text-leise); font-weight: 400;
}

/* --- Bemerkungen zu einem Auftrag ------------------------------------- */

textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.bemerkungen textarea, .feld textarea { display: block; }

/* Die bisherigen Bemerkungen, juengste zuerst. Bewusst als Liste mit
   Trennlinien und nicht als Tabelle: der Text ist unterschiedlich lang,
   und auf dem Telefon soll er die volle Breite bekommen. */
.bemerkungen { list-style: none; margin: 1.25rem 0 0; padding: 0; }
.bemerkung {
  border-top: 1px solid var(--linie);
  padding: .75rem 0;
}
.bemerkung:last-child { padding-bottom: 0; }
/* Zeilenumbrueche so anzeigen, wie sie getippt wurden - eine Notiz mit
   Aufzaehlung soll nicht zu einem Absatz zusammenlaufen. `pre-wrap` bricht
   trotzdem lange Zeilen um. */
.bemerkung .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.bemerkung .wer { margin-top: .25rem; }

/* In der Auftragsliste: ein kleiner Zaehler, damit man sieht, wo etwas
   notiert ist, ohne jeden Auftrag aufzumachen. */
.notizmarke {
  display: inline-block; margin-left: .375rem;
  padding: .0625rem .3125rem;
  border-radius: 999px;
  background: var(--betont-blass); color: var(--betont);
  font-size: .6875rem; font-weight: 600;
}

/* --- Meldungen -------------------------------------------------------- */

.meldung {
  padding: .75rem 1rem; border-radius: var(--rund-klein);
  margin-bottom: 1rem; font-size: .875rem;
  border-left: 4px solid transparent;
}
.meldung.fehler  { background: var(--schlecht-grund); color: var(--schlecht);
                   border-left-color: var(--schlecht); }
.meldung.gut     { background: var(--gut-grund);      color: var(--gut);
                   border-left-color: var(--gut); }
.meldung.hinweis { background: var(--warn-grund);     color: var(--warn);
                   border-left-color: var(--warn); }
.meldung.info    { background: var(--info-grund);     color: var(--info);
                   border-left-color: var(--info); }
.meldung a { color: inherit; text-decoration: underline; }

/* --- Beschreibungslisten ---------------------------------------------- */

.paare { display: grid; grid-template-columns: 1fr; gap: .625rem 1.5rem; margin: 0; }
.paare > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .75rem;
               align-items: baseline; }
.paare dt { color: var(--text-leise); font-size: .8125rem; }
.paare dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.zweispalten { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

.anschrift { line-height: 1.5; }

/* --- Lieferanschrift bearbeiten (anschrift.py) ------------------------ */

.anschriftfelder { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
.anschriftfelder input { width: 100%; }
details > summary { cursor: pointer; font-weight: 500; margin-bottom: .75rem; }
.anschrift-freigabe { margin-top: 1rem; padding-top: .75rem;
                      border-top: 1px solid var(--linie); }
.anschriftverlauf { margin-top: 1rem; }
.anschriftverlauf ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.anschriftverlauf li { margin-bottom: .25rem; }

/* --- Positionen eines Auftrags ---------------------------------------- */

.position > .kopfzeile { align-items: flex-start; }
.position .artikel { min-width: 0; }
.position .artikel .name { font-weight: 650; color: var(--betont-satt); }

/* --- Blättern --------------------------------------------------------- */

.blaettern { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.blaettern .zaehler { margin-left: auto; }
.blaettern .proseite { display: flex; gap: .375rem; align-items: baseline; }
.blaettern .proseite strong {
  font-weight: 650; color: var(--betont-satt);
  background: var(--betont-blass); border-radius: var(--rund-klein);
  padding: 0 .4375rem;
}

/* --- Anmeldeseite ----------------------------------------------------- */

.anmeldeseite {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 1.5rem 1rem;
  /* Ein sanfter Schein in der Hausfarbe, damit die Seite nicht wie ein
     leeres Blatt mit einem Kasten darauf wirkt. */
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--betont-blass), transparent 70%),
    var(--grund);
}
.anmeldekarte { width: 100%; max-width: 25rem; }
.anmeldekarte .bild {
  background: var(--kopf-grund);
  padding: 1.625rem 1.5rem 1.25rem;
  text-align: center;
}
.anmeldekarte .bild svg { width: 100%; max-width: 268px; height: auto;
                          display: block; margin: 0 auto; }
.anmeldekarte .bild .marke { justify-content: center; margin-top: 1rem; }
.anmeldekarte .bild .marke .wort { display: inline; }
.anmeldekarte .rumpf { padding: 1.5rem; }
.anmeldekarte button { width: 100%; margin-top: .25rem; }
.anmeldekarte .titel { text-align: center; margin-bottom: 1.25rem;
                       margin-top: -.75rem; }

/* --- Ab Tablet -------------------------------------------------------- */

@media (min-width: 640px) {
  body { font-size: 15px; }
  .anschriftfelder { grid-template-columns: 1fr 1fr; }
  .inhalt { padding: 1.5rem; }
  /* Auf breiten Schirmen steht das Menue mittig. Auf dem Telefon nicht:
     dort ist die Leiste breiter als der Schirm und wird geschoben - eine
     Zentrierung wuerde den ersten Punkt nach links aus dem Bild schieben. */
  .menue { justify-content: center; }
  .menue a { padding-left: 1rem; padding-right: 1rem; }
  .marke .wort { display: inline; }
  /* NUR die Sichtbarkeit. Farbe und Groesse stehen oben und gelten fuer
     alle Breiten - stuenden sie hier noch einmal, ueberschriebe dieser
     Block sie. Genau das war der Fall: der Anmeldename stand mit
     var(--text-leise) (#566b66) auf der gruenen Leiste, Kontrast 1.31.
     Praktisch unlesbar, und beim Programmieren nicht aufgefallen, weil
     die Farbe auf schmalen Schirmen gar nicht sichtbar ist. */
  .kopf .wer .name { display: inline; }
  /* Mitwachsend statt fest vier: seit der Zustellkachel sind es fuenf,
     und eine feste Vier liesse die letzte allein in der zweiten Reihe.
     auto-fit legt so viele nebeneinander, wie bei 11rem Mindestbreite
     hineinpassen - vier auf schmalen, fuenf auf breiten Bildschirmen. */
  .kennzahlen { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
  .suchleiste { grid-template-columns: 1fr auto auto auto; align-items: center; }
  .suchleiste .weit { grid-column: auto; }
  .menue .aktualisieren .wort { display: inline; }
  .bestandsform { grid-template-columns: 10rem 1fr auto; align-items: end; }
  .bestandsform button { width: auto; }
  .paare > div { grid-template-columns: 10rem 1fr; }
  h1 { font-size: 1.75rem; }
}

@media (min-width: 960px) {
  .zweispalten { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .nur-gross { display: table-cell; }
}

/* --- Unter 720px werden Tabellen zu Karten -----------------------------
   Eine Tabelle mit sieben Spalten ist auf einem Telefon unlesbar, und
   seitliches Schieben verliert die erste Spalte. Deshalb wird jede Zeile
   zu einem Block und jede Zelle bekommt ihre Spaltenueberschrift davor -
   aus dem Attribut data-spalte, damit die Ueberschrift nur einmal im
   Quelltext steht.                                                       */

@media (max-width: 719px) {
  .tabellenrahmen { overflow-x: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  thead { position: absolute; left: -9999px; }
  tbody tr {
    border-bottom: 1px solid var(--linie);
    padding: .75rem 1rem;
  }
  tbody tr:last-child { border-bottom: none; }
  tbody td {
    padding: .1875rem 0; border: none;
    display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem;
    align-items: baseline;
  }
  tbody td::before {
    content: attr(data-spalte);
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-leise); font-weight: 600;
  }
  tbody td:empty { display: none; }
  /* Die Gruppenzeile ist keine Karte, sondern eine Ueberschrift. Sie
     bekommt deshalb weder die Rasterdarstellung noch die Beschriftung aus
     data-spalte - sonst stuende dort "Bestellung: Mo 25.08.2026". */
  tbody tr.taggruppe { padding: 0; border-bottom: none; }
  tbody tr.taggruppe td { display: block; grid-template-columns: none; }
  tbody tr.taggruppe td::before { display: none; }
  .blaettern .proseite { width: 100%; }
  tbody td.haupt {
    grid-template-columns: 1fr; gap: 0;
    margin-bottom: .375rem; font-size: 1rem;
  }
  tbody td.haupt::before { display: none; }
  .paare > div { grid-template-columns: 1fr; gap: 0; }
  .blaettern .zaehler { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  a.kennzahl { transition: box-shadow .15s, border-color .15s; }
  .menue a, button, .knopf { transition: background .15s, color .15s,
                                         border-color .15s; }
}

@media print {
  .kopf, .menue, .suchleiste, .blaettern { display: none; }
  .karte { box-shadow: none; break-inside: avoid; }
}