/* ============================================================
   HACCP Temperaturkontrolle – Shepherd's Delight
   Brand nach Design.md. Statusfarben bewusst NICHT aus der Brand:
   Burnt Orange ist hier CTA-Farbe und darf mit keinem Warnzustand
   verwechselbar sein.
   ============================================================ */

/* Schriften self-hosted, kein Google-Fonts-Request (DSGVO).
   woff2-Dateien nach static/fonts/ legen – bis dahin greift der Fallback. */
@font-face {
  font-family: "Calistoga";
  src: url("fonts/calistoga-regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("fonts/publicsans-variable.woff2") format("woff2-variations");
  font-weight: 300 800; font-display: swap;
}

:root {
  /* Brand */
  --sage:        #B3BBB0;
  --beige:       #D5C9B5;
  --orange:      #A84400;
  --orange-hover:#B36030;
  --charcoal:    #363A34;
  --cream:       #FAFAF3;

  /* Status – funktional, nicht Brand */
  --st-ok:     #3F6B44;  /* Moosgrün  – im Sollbereich */
  --st-warn:   #8B1E1E;  /* Weinrot   – Abweichung, klar getrennt von Burnt Orange */
  --st-offen:  #40607A;  /* Stahlblau – Messung steht aus (Gelb wäre zu nah am Orange) */
  --st-ruhe:   #7A7E78;  /* Grau      – Standort außer Betrieb */

  --shadow: 4px 4px 0 rgba(42, 39, 32, .15);
  --radius: 4px;
  --gap: 1.25rem;

  /* Calistoga hat nur Gewicht 400 und kein Kursiv – Headlines nie fetten. */
  --font-display: "Calistoga", Georgia, serif;
  --font-ui: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.5;
  color: var(--charcoal);
  background: var(--sage);
  -webkit-text-size-adjust: 100%;
}

/* Papier-Grain, dezent */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }

a { color: var(--orange); }
a:hover { color: var(--orange-hover); }

.wrap { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: 1rem 1rem 4rem; }
.wrap--wide { max-width: 1180px; }

/* ------------------------------------------------------------------ Header */
.topbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem;
  background: var(--charcoal); color: var(--cream);
}
.topbar__brand { font-family: var(--font-display); font-size: 1.15rem; text-decoration: none; color: var(--cream); }
.topbar__nav { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.topbar__nav a { color: var(--cream); text-decoration: none; opacity: .85; }
.topbar__nav a:hover { opacity: 1; text-decoration: underline; }
.topbar__user { opacity: .7; font-size: .85rem; }

/* ------------------------------------------------------------------- Karten */
.card {
  background: var(--beige);
  border: 1px solid rgba(54, 58, 52, .18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
  margin-bottom: var(--gap);
}

/* ------------------------------------------------------------------ Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.4rem;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
  border: 1px solid var(--charcoal); border-radius: var(--radius);
  background: transparent; color: var(--charcoal);
  text-decoration: none; cursor: pointer;
  transition: background .12s, color .12s;
}
.btn:hover { background: rgba(54, 58, 52, .08); color: var(--charcoal); }
.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--cream); box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--cream); }
.btn--block { display: flex; width: 100%; }
.btn--big { min-height: 64px; font-size: 1.15rem; }
.btn--quiet { border-color: rgba(54, 58, 52, .3); font-weight: 400; }
.btn--danger { border-color: var(--st-warn); color: var(--st-warn); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------------ Formular */
label { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .02em;
        text-transform: uppercase; margin-bottom: .35rem; }
input[type=text], input[type=number], input[type=date], input[type=password],
input[type=tel], select, textarea {
  width: 100%; min-height: 48px; padding: .6rem .75rem;
  font-family: var(--font-ui); font-size: 1rem; color: var(--charcoal);
  background: var(--cream);
  border: 1px solid rgba(54, 58, 52, .35); border-radius: var(--radius);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--orange); outline-offset: 1px; border-color: var(--orange);
}
textarea { min-height: 80px; resize: vertical; }
.field { margin-bottom: 1rem; }
.field__hint { font-size: .85rem; opacity: .75; margin-top: .3rem; }
.check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .75rem; }
.check input { width: 22px; height: 22px; margin-top: .15rem; flex: none; }
.check label { text-transform: none; font-weight: 400; font-size: 1rem; margin: 0; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1 1 180px; }

/* ------------------------------------------------------------------ Meldungen */
.flash { padding: .85rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
         border-left: 5px solid; background: var(--cream); font-weight: 500; }
.flash--ok    { border-color: var(--st-ok); }
.flash--warn  { border-color: var(--st-warn); background: #F6E9E9; }
.flash--error { border-color: var(--st-warn); background: #F6E9E9; }

/* ------------------------------------------------------------------ Dashboard */
.gruppe { margin-bottom: 2rem; }
.gruppe__kopf { display: flex; align-items: baseline; justify-content: space-between;
                gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.gruppe--ruhe { opacity: .78; }

.ruhe-banner {
  background: var(--st-ruhe); color: var(--cream);
  padding: 1rem 1.25rem; border-radius: var(--radius); margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.ruhe-banner strong { font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; }
.ruhe-banner p { margin: .35rem 0 .9rem; font-size: .92rem; }
.ruhe-banner .btn { background: var(--cream); border-color: var(--cream); color: var(--charcoal); }

.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kachel {
  background: var(--beige); border: 1px solid rgba(54, 58, 52, .18);
  border-left: 6px solid var(--st-offen);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1rem; text-decoration: none; color: var(--charcoal); display: block;
}
.kachel:hover { color: var(--charcoal); transform: translate(-1px, -1px); }
.kachel--ok         { border-left-color: var(--st-ok); }
.kachel--abweichung { border-left-color: var(--st-warn); }
.kachel--teilweise  { border-left-color: var(--st-offen); }
.kachel--offen      { border-left-color: var(--st-offen); }
.kachel--ruhe       { border-left-color: var(--st-ruhe); }
.kachel__name { font-family: var(--font-display); font-size: 1.15rem; margin-bottom: .15rem; }
.kachel__soll { font-size: .82rem; opacity: .7; margin-bottom: .6rem; }
.kachel__wert { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.kachel__wert--abweichung { color: var(--st-warn); }
.kachel__meta { font-size: .82rem; opacity: .75; margin-top: .35rem; }
.kachel__schichten { display: flex; gap: .4rem; margin-top: .7rem; }

.pill { font-size: .75rem; padding: .2rem .6rem; border-radius: 999px;
        border: 1px solid currentColor; font-weight: 600; letter-spacing: .02em; }
.pill--ok    { color: var(--st-ok); }
.pill--warn  { color: var(--st-warn); }
.pill--offen { color: var(--st-offen); }
.pill--ruhe  { color: var(--st-ruhe); }

/* ------------------------------------------------------------------ PIN-Pad */
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; max-width: 320px; margin: 1rem auto; }
.pinpad button { min-height: 64px; font-size: 1.5rem; font-family: var(--font-ui); font-weight: 600;
                 background: var(--cream); border: 1px solid rgba(54,58,52,.3);
                 border-radius: var(--radius); cursor: pointer; color: var(--charcoal); }
.pinpad button:active { background: var(--beige); }
.pin-anzeige { display: flex; justify-content: center; gap: .75rem; margin: 1.25rem 0; }
.pin-punkt { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--charcoal); }
.pin-punkt--voll { background: var(--charcoal); }

/* ------------------------------------------------------------- Temperatur-UI */
.temp-eingabe {
  width: 100%; text-align: center; font-size: 3.2rem; font-weight: 700;
  min-height: 96px; letter-spacing: .02em; font-family: var(--font-ui);
}
.temp-eingabe.ist-abweichung { border-color: var(--st-warn); color: var(--st-warn); border-width: 2px; }
.temp-soll { text-align: center; font-size: 1rem; opacity: .8; margin-bottom: 1rem; }
.temp-hinweis { text-align: center; font-weight: 600; min-height: 1.6em; margin-bottom: 1rem; }
.temp-hinweis--warn { color: var(--st-warn); }
.temp-hinweis--ok   { color: var(--st-ok); }
.massnahme-box { display: none; border-top: 2px solid var(--st-warn); padding-top: 1rem; margin-top: 1rem; }
.massnahme-box.sichtbar { display: block; }

/* ------------------------------------------------------------------ Tabellen */
table.liste { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--cream); }
table.liste th, table.liste td { padding: .5rem .6rem; text-align: left;
                                 border-bottom: 1px solid rgba(54,58,52,.15); }
table.liste th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
                 background: var(--charcoal); color: var(--cream); }
table.liste tr.abweichung td { background: #F6E9E9; }

.leer { text-align: center; padding: 2.5rem 1rem; opacity: .7; }

/* ------------------------------------------------------------------- Scanner */
#scanner { width: 100%; max-width: 480px; margin: 0 auto; display: block;
           border-radius: var(--radius); background: #000; }
.scan-status { text-align: center; margin: 1rem 0; font-weight: 600; }

@media (max-width: 520px) {
  .wrap { padding: .75rem .75rem 3rem; }
  h1 { font-size: 1.5rem; }
  .kacheln { grid-template-columns: 1fr; }
}

/* ============================================================
   DRUCK – bewusst ohne Brand. Ein Protokoll ist ein Dokument,
   kein Marketing. Schwarz auf Weiß, maximale Lesbarkeit.
   ============================================================ */
@media print {
  @page { size: A4 portrait; margin: 14mm 12mm; }

  body { background: #fff !important; color: #000; font-size: 9.5pt; }
  body::before { display: none !important; }
  .topbar, .no-print, .btn { display: none !important; }
  .wrap { max-width: none; padding: 0; }

  .druck-seite { page-break-after: always; }
  .druck-seite:last-child { page-break-after: auto; }

  .druck-kopf { border-bottom: 2px solid #000; padding-bottom: 6pt; margin-bottom: 10pt; }
  .druck-kopf h1 { font-family: inherit; font-size: 14pt; font-weight: 700; margin: 0 0 2pt; }
  .druck-kopf .betrieb { font-size: 8.5pt; line-height: 1.35; }
  .druck-kopf .meta { font-size: 9pt; margin-top: 5pt; }
  .druck-kopf .meta strong { display: inline-block; min-width: 90pt; }

  table.protokoll { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
  table.protokoll th, table.protokoll td {
    border: .5pt solid #000; padding: 2.5pt 3pt; vertical-align: top;
  }
  table.protokoll th { background: #e8e8e8 !important; font-weight: 700; text-align: left;
                       -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.protokoll thead { display: table-header-group; }
  tr.th-geraet th { background: #fff !important; border-bottom: 1pt solid #000;
                    font-size: 10pt; padding: 4pt 3pt; }
  table.protokoll tr { page-break-inside: avoid; }
  td.num { text-align: right; white-space: nowrap; }
  td.abw { font-weight: 700; }
  tr.zeile-abweichung td { background: #f0f0f0 !important;
                           -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.zeile-ruhe td { background: #d8d8d8 !important; font-style: italic;
                     -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr.zeile-luecke td { color: #666; }

  .druck-fuss { margin-top: 14pt; font-size: 8pt; page-break-inside: avoid; }
  .unterschrift { margin-top: 24pt; display: flex; gap: 30pt; }
  .unterschrift div { flex: 1; border-top: .5pt solid #000; padding-top: 3pt; font-size: 8pt; }

  .etiketten { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; }
  .etikett { border: 1pt dashed #666; padding: 6mm; text-align: center; page-break-inside: avoid; }
  .etikett svg { width: 45mm; height: 45mm; }
  .etikett h3 { font-family: inherit; font-size: 13pt; font-weight: 700; margin: 4pt 0 1pt; }
  .etikett .soll { font-size: 11pt; font-weight: 700; }
  .etikett .url { font-size: 6.5pt; color: #555; word-break: break-all; margin-top: 3pt; }
}

/* Bildschirmdarstellung der Druckseiten */
.druck-seite { background: var(--cream); padding: 1.75rem; margin-bottom: 1.5rem;
               box-shadow: var(--shadow); border-radius: var(--radius); }
.druck-kopf { border-bottom: 2px solid var(--charcoal); padding-bottom: .6rem; margin-bottom: 1rem; }
.druck-kopf .betrieb { font-size: .85rem; opacity: .8; }
table.protokoll { width: 100%; border-collapse: collapse; font-size: .85rem; }
table.protokoll th, table.protokoll td { border: 1px solid rgba(54,58,52,.35); padding: .3rem .4rem; }
table.protokoll th { background: var(--charcoal); color: var(--cream); text-align: left; }
tr.zeile-abweichung td { background: #F6E9E9; }
tr.zeile-ruhe td { background: rgba(122,126,120,.22); font-style: italic; }
tr.zeile-luecke td { opacity: .55; }
.etiketten { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.etikett { border: 1px dashed rgba(54,58,52,.5); padding: 1.25rem; text-align: center; }
.etikett svg { width: 170px; height: 170px; }
.etikett .url { font-size: .7rem; opacity: .6; word-break: break-all; margin-top: .4rem; }