/* ===========================================================================
   Gestaltungsgrundlage des Produktions-Dashboards
   ---------------------------------------------------------------------------
   Die eine Stelle, an der Farben, Schriftgrößen, Abstände und die
   Balkendarstellung festgelegt sind. Übernommen aus docs/dashboard-vorschau.html.

   Jede Oberfläche lädt diese Datei und nimmt die Werte von hier. Wer eine
   Farbe oder eine Größe ändern will, ändert sie hier und nirgends sonst.
   In den einzelnen Seiten stehen nur noch Anordnung und Sonderfälle.

   Geladen wird nichts aus dem Internet. Im Packraum gibt es keinen Zugang
   dorthin, und die Anzeige muss auch nach einem Stromausfall sofort richtig
   aussehen.
   =========================================================================== */


/* --- Schrift ---------------------------------------------------------------
   Titillium Web in den Schnitten 300, 400, 600, 700 und 900, ausgeliefert aus
   dem eigenen Ordner unter gemeinsam/schrift.

   Die Dateien stammen von Google Fonts, nicht aus dem Brand-Delivery-Paket
   der Marke: für die dortige Fassung war keine Lizenzdatei auffindbar, die
   das Einbetten klar erlaubt. Titillium Web steht unter der SIL Open Font
   License 1.1, die das Einbetten und Ausliefern vom eigenen Server
   ausdrücklich gestattet. Wortlaut und Herkunft stehen in
   gemeinsam/schrift/HERKUNFT.md und der beiliegenden OFL.txt.

   font-display: block sorgt dafür, dass kurz nichts statt der falschen Schrift
   steht. Auf dem Fernseher würde ein Umspringen der Ziffern auffallen.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("schrift/titillium-web-300.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("schrift/titillium-web-400.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("schrift/titillium-web-600.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("schrift/titillium-web-700.woff2") format("woff2");
}
@font-face {
  font-family: "Titillium Web";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("schrift/titillium-web-900.woff2") format("woff2");
}


:root {
  /* --- Markenfarben aus dem Brand Guide ---------------------------------- */
  --leaf:  #11312E;   /* Text und dunkle Flächen */
  --moss:  #ADBB92;
  --cream: #F7EDB0;
  --rosa:  #F6AFA9;
  --bone:  #FAF3DE;   /* Flächen */

  --page:  #EFE4C6;   /* abgedunkeltes Bone als Seitengrund */
  --panel: #FAF3DE;   /* Flächen auf dem Seitengrund */
  --feld:  #FFFFFF;   /* Eingabefelder, damit sie sich von der Fläche abheben */
  --leaf-dunkel: #0B2320;  /* Leaf, eine Spur dunkler: Knopf unter dem Zeiger */

  /* Abstufungen des Textes. Eine Farbe, vier Stärken. */
  --ink:   #11312E;
  --ink-2: rgba(17, 49, 46, .60);
  --ink-3: rgba(17, 49, 46, .32);
  --line:  rgba(17, 49, 46, .13);
  --track: rgba(17, 49, 46, .09);

  /* --- Signalfarben -------------------------------------------------------
     Abgedunkelte Markentöne, damit sie auf hellem Grund lesbar sind. Die
     Originale des Brand Guide sind dafür zu hell.

     Farbe trägt nie allein die Aussage. Neben jedem farbigen Balken stehen
     immer die Restmenge und der Prozentwert.

     Schwellen laut Abschnitt 5 der Spezifikation:
       Tagesfortschritt und Packaufträge
         bis 50 % rot, 51 bis 80 % gelb, ab 81 % grün
       Tempo für Woche und Jahr (Ist geteilt durch Soll bis heute)
         unter 95 % rot, 95 bis unter 100 % gelb, ab 100 % grün
  ------------------------------------------------------------------------- */
  --sig-rot:   #BC5348;
  --sig-gelb:  #B08A0E;
  --sig-gruen: #57783C;

  /* --- Schrift ------------------------------------------------------------
     Royale Couture wird nicht eingebettet, sie erscheint nur als Teil des
     Logos. Die Ersatzschriften greifen nur, falls eine Datei fehlt.
  ------------------------------------------------------------------------- */
  --font: "Titillium Web", "Segoe UI", system-ui, -apple-system,
          Helvetica, Arial, sans-serif;

  /* --- Schriftgrößen ------------------------------------------------------
     Zwei Sätze, weil zwei Entfernungen: der Fernseher wird aus einigen
     Metern gelesen, der Produktions-PC aus einem halben.

     Die Zahl ist das Hauptmotiv, der Balken bestätigt sie nur. Deshalb der
     große Abstand zwischen Hauptzahl und allem anderen.
  ------------------------------------------------------------------------- */

  /* Fernseher, ausgelegt auf 1920 mal 1080 */
  --tv-hauptzahl:   92px;   /* gepackte Stückzahl im Tagesfortschritt */
  --tv-prozent:     62px;   /* der Prozentwert daneben */
  --tv-vonzahl:     30px;   /* "von 1.000" */
  --tv-uhrzeit:     42px;
  --tv-datum:       25px;
  --tv-auftrag:     29px;   /* Name eines Packauftrags, einspaltig */
  --tv-auftrag-eng: 25px;   /* zweispaltig, ab fünf Aufträgen */
  --tv-menge:       38px;   /* gepackte Menge je Auftrag */
  --tv-menge-eng:   32px;
  --tv-ziel:        19px;
  --tv-rest:        16px;
  --tv-person:      18px;
  --tv-schicht:     22px;
  --tv-aufgabe:     21px;
  --tv-mitteilung:  20px;
  --tv-tempo:       20px;

  /* Produktions-PC und Verwaltung */
  --pc-eingabe:     74px;   /* das Zahlenfeld der Buchungsmaske */
  --pc-knopf:       25px;
  --pc-titel:       32px;   /* die ausgewählte Sorte */
  --pc-sorte:       21px;   /* eine Sorte in der Liste */
  --pc-frage:       19px;
  --pc-stand:       17px;
  --pc-text:        16px;
  --pc-klein:       15px;
  --pc-winzig:      14px;

  /* --- Abstände und Formen ------------------------------------------------
     Flächen werden durch Abstand getrennt, nicht durch Rahmen und Schatten.
  ------------------------------------------------------------------------- */
  --luft-klein:  9px;
  --luft:        20px;
  --luft-gross:  30px;

  --rundung:        8px;
  --rundung-gross: 10px;

  --balken-hoch:   22px;   /* Tagesfortschritt */
  --balken-mittel:  9px;   /* Packaufträge */
  --balken-schmal:  7px;   /* Sortenliste der Buchungsmaske */
  --balken-tempo:  10px;   /* Woche und Jahr */
}


/* --- Grundlage ------------------------------------------------------------ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Ziffern mit fester Breite. Ohne das springen die Zahlen bei jeder
   Aktualisierung hin und her. */
.num, input[type="number"], .zahl, time {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

/* Kleine Überschrift über einer Fläche. */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}


/* --- Balken ----------------------------------------------------------------
   Ein Balken besteht aus der Spur, der Füllung und wahlweise einer Sollmarke.

     <div class="balken" style="height:var(--balken-hoch)">
       <span class="fuell-gruen" style="width:72%"></span>
       <i style="left:66%"></i>
     </div>

   Die Füllung wird nie über 100 Prozent hinaus gezeichnet. Wird ein Ziel
   überschritten, bleibt der Balken stehen und die Mehrleistung steht als
   Zahl daneben (Abschnitt 5).
--------------------------------------------------------------------------- */

.balken {
  position: relative;
  width: 100%;
  background: var(--track);
  border-radius: 2px;
  height: var(--balken-mittel);
}

.balken > span {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  /* Eine eingehende Buchung ist eine der drei Stellen, an denen sich etwas
     bewegen darf (Abschnitt 10). */
  transition: width 1.1s cubic-bezier(.22, .7, .25, 1);
}

/* Die Sollmarke: ein Strich quer über den Balken. */
.balken > i {
  position: absolute; top: -5px; bottom: -5px;
  width: 3px; background: var(--ink); opacity: .55;
  border-radius: 2px;
}

/* Der Stand vor einer Änderung der Saisonmenge. Bleibt als helle Markierung
   stehen, damit kein Balken durch eine Zieländerung zurückspringt. */
.balken > .vorher {
  position: absolute; top: 0; bottom: 0;
  width: 2px; background: var(--ink); opacity: .22;
}

.fuell-rot   { background: var(--sig-rot); }
.fuell-gelb  { background: var(--sig-gelb); }
.fuell-gruen { background: var(--sig-gruen); }

.text-rot   { color: var(--sig-rot); }
.text-gelb  { color: var(--sig-gelb); }
.text-gruen { color: var(--sig-gruen); }


/* --- Logo und Wortmarke --------------------------------------------------- */

.logo { display: flex; align-items: center; gap: 10px; }
.logo img { display: block; height: 42px; width: auto; }

.wortmarke {
  font-size: 18px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; line-height: 1.15;
}
.wortmarke small {
  display: block; font-size: 10px; font-weight: 400;
  letter-spacing: .3em; color: var(--ink-3);
}


/* --- Flächen -------------------------------------------------------------- */

.karte {
  background: var(--panel);
  border-radius: var(--rundung-gross);
  padding: 22px 26px;
  margin-bottom: var(--luft);
}

.karte h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}


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

.feld { margin-bottom: 14px; }

.feld label {
  display: block; font-size: var(--pc-klein); font-weight: 600;
  margin-bottom: 6px;
}

.feld input, .feld select {
  width: 100%; font-family: var(--font); font-size: 19px; font-weight: 600;
  padding: 12px 14px; border: 1px solid rgba(17, 49, 46, .25);
  border-radius: var(--rundung); background: #fff; color: var(--ink);
}

.feld input:focus, .feld select:focus { outline: none; border-color: var(--leaf); }

.knopf {
  width: 100%; font-family: var(--font); font-size: 19px; font-weight: 700;
  color: var(--bone); background: var(--leaf);
  border: 0; border-radius: var(--rundung); padding: 15px; cursor: pointer;
}

.knopf:hover { background: #0b2320; }
.knopf:disabled { background: var(--ink-3); cursor: default; }

/* Ein zurückhaltender Knopf für Werkzeuge in Tabellen. */
.knopf-leise {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  border: 1px solid rgba(17, 49, 46, .2); background: transparent;
  color: var(--ink); padding: 6px 11px; border-radius: 6px;
  cursor: pointer; white-space: nowrap;
}
.knopf-leise:hover { border-color: var(--leaf); }
.knopf-leise:disabled { color: var(--ink-3); border-color: var(--line); cursor: default; }
.knopf-leise.gefahr { color: var(--sig-rot); border-color: rgba(188, 83, 72, .35); }


/* --- Meldungen ------------------------------------------------------------
   Neben der Farbe steht immer Text. Wer die Farbe nicht unterscheiden kann,
   liest dasselbe.
--------------------------------------------------------------------------- */

.meldung {
  font-size: var(--pc-klein); font-weight: 600; line-height: 1.5;
  padding: 12px 14px; border-radius: var(--rundung); margin-bottom: 14px;
}
.meldung.fehler  { background: rgba(188, 83, 72, .14);  color: var(--sig-rot); }
.meldung.hinweis { background: rgba(176, 138, 14, .16); color: var(--sig-gelb); }
.meldung.gut     { background: rgba(87, 120, 60, .16);  color: var(--sig-gruen); }

.hinweistext { font-size: var(--pc-winzig); line-height: 1.55; color: var(--ink-3); }


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

.liste-tabelle { width: 100%; border-collapse: collapse; }

.liste-tabelle th {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-align: right; padding: 0 10px 8px; white-space: nowrap;
}
.liste-tabelle th.links, .liste-tabelle td.links { text-align: left; }

.liste-tabelle td {
  font-size: var(--pc-klein); text-align: right; padding: 11px 10px;
  border-top: 1px solid var(--line); vertical-align: baseline;
}

.liste-tabelle .name { font-weight: 700; font-size: var(--pc-text); }
.liste-tabelle .sku  { font-size: 13px; color: var(--ink-3); }