/*
 * MessNode — die Gestaltung der App.
 *
 * Eine eigene Datei, nicht mehr ein <style>-Block in index.html. Der Server
 * liefert die App mit "style-src 'self'" aus — ohne 'unsafe-inline', mit
 * Absicht (deploy/caddy/Caddyfile). Ein eingebetteter Block und jedes
 * style="…"-Attribut werden damit vom Browser verworfen. Am 16.09.2026, beim
 * ersten Aufruf unter https://app.messnode.de, erschien die App deshalb ganz
 * ohne Gestaltung (MN-0121). Lokal fiel es nie auf: Die Vorschau sendet keine
 * solche Richtlinie.
 *
 * Deshalb auch: keine style-Attribute in den Ansichten. Wer eine Einzelheit
 * braucht, legt hier eine Klasse an.
 */
/* Eine Oberfläche für die Baustelle, nicht für den Schreibtisch.
   Große Flächen (Handschuhe), hoher Kontrast (Keller und Sonne),
   nichts, was beim Scrollen wegrutscht. */
:root {
  --grund: #ffffff; --flaeche: #f4f5f7; --rand: #d7dae0;
  --text: #16181d; --text-leise: #5b6170;
  --ak: #14532d; --ak-on: #ffffff;
  --gut: #15803d; --schlecht: #b91c1c; --offen: #a16207;
  --tippflaeche: 48px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14161a; --flaeche: #1e2127; --rand: #333842;
    --text: #eceef2; --text-leise: #a0a7b4;
    --ak: #4ade80; --ak-on: #0b1a10;
    --gut: #4ade80; --schlecht: #f87171; --offen: #fbbf24;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--grund); color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}
#kopf {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--flaeche); border-bottom: 1px solid var(--rand);
}
#kopf b { font-size: 17px; letter-spacing: .3px; }
#stand { margin-left: auto; font-size: 13px; color: var(--text-leise); }
#stand.offline { color: var(--offen); font-weight: 600; }
#inhalt { padding: 16px; padding-bottom: max(24px, env(safe-area-inset-bottom)); max-width: 900px; margin: 0 auto; }

h1 { font-size: 21px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 24px 0 8px; }
p.leise { color: var(--text-leise); margin: 0 0 16px; }

button, .knopf {
  min-height: var(--tippflaeche); padding: 12px 20px;
  font: inherit; font-weight: 600;
  background: var(--ak); color: var(--ak-on);
  border: 0; border-radius: 10px; cursor: pointer;
}
button.zweit { background: transparent; color: var(--text); border: 1px solid var(--rand); }
button:disabled { opacity: .5; cursor: default; }
label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: 14px; }
input, select {
  width: 100%; min-height: var(--tippflaeche); padding: 10px 12px;
  font: inherit; color: var(--text);
  background: var(--grund); border: 1px solid var(--rand); border-radius: 10px;
}
input[type=file] { padding: 10px; }

.karte {
  display: block; width: 100%; text-align: left;
  background: var(--flaeche); border: 1px solid var(--rand); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; color: var(--text);
  font: inherit; min-height: var(--tippflaeche); cursor: pointer;
}
    /* Fuer die Geraeteliste (ansichten/geraete.ts). */
    .karte.auffaellig { border-left: 3px solid var(--warn, #b8860b); }
    .kopfzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .chip { font-size: 12px; padding: 1px 8px; border-radius: 999px;
            border: 1px solid currentColor; opacity: .85; }
    .chip.gut { color: #0a6b3d; }
    .chip.warn { color: #8a5a00; }
    .chip.fehler { color: #a11; }
    .knopfzeile { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; }
    /* Eine Massnahme, die sich nicht zuruecknehmen laesst, soll auch so aussehen. */
    .knopf.gefahr, button.gefahr {
      font: inherit; font-size: 15px; padding: 9px 16px; border-radius: 3px;
      border: 1px solid #a11; background: transparent; color: #a11; cursor: pointer;
    }
    button.gefahr:hover { background: #a11; color: #fff; }
.karte b { display: block; }
.karte span { color: var(--text-leise); font-size: 14px; }

.meldung { padding: 12px 14px; border-radius: 10px; margin: 12px 0; font-size: 15px; }
.meldung.fehler { background: color-mix(in srgb, var(--schlecht) 14%, transparent); color: var(--schlecht); }
.meldung.warnung { background: color-mix(in srgb, var(--offen) 16%, transparent); color: var(--offen); }
.meldung.gut { background: color-mix(in srgb, var(--gut) 14%, transparent); color: var(--gut); }
.meldung p { margin: 8px 0 0; }
.klein { font-size: 13px; opacity: .85; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--rand); }
th { font-size: 13px; color: var(--text-leise); font-weight: 600; }
td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.urteil { font-weight: 700; white-space: nowrap; }
.urteil.bestanden { color: var(--gut); }
.urteil.nicht_bestanden { color: var(--schlecht); }
.urteil.offen, .urteil.nicht_zutreffend { color: var(--text-leise); }
.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.kacheln .karte b { font-size: 22px; font-variant-numeric: tabular-nums; }

/* ── Ehemals style-Attribute (MN-0121) ─────────────────────────────── *
 * Mit !important, und das mit Absicht: Ein style-Attribut schlägt jede Regel.
 * Ohne das verlor zum Beispiel .mitte-oder gegen "p.leise { margin: … }" —
 * gemessen am 16.09.2026, Abstand 0 statt 20 px. Diese Klassen ersetzen
 * Attribute und müssen deshalb genauso stark sein, sonst sieht die App
 * anders aus als vorher. */
.abstand-klein { margin: 0 0 6px !important; }
.abstand-unten { margin: 0 0 8px !important; }
.abstand-oben { margin: 8px 0 0 !important; }
.breit { width: 100% !important; }
.knopf-klein { min-height: 36px !important; padding: 6px 14px !important; font-size: 14px !important; }
.mitte-oder { text-align: center !important; margin: 20px 0 8px !important; }
.karte-still { cursor: default !important; }
.karte-eng { padding: 12px !important; margin: 10px 0 !important; }
h3.maske { font-size: 16px !important; margin: 18px 0 4px !important; }
.unterschrift-feld { width: 100% !important; max-width: 600px !important; height: 180px !important; touch-action: none !important; border: 1px solid var(--rand) !important; border-radius: 10px !important; background: #fff !important; }
.protokoll-rahmen { width: 100% !important; height: 70vh !important; border: 1px solid var(--rand) !important; border-radius: 10px !important; background: #fff !important; }
.scanner { position: relative !important; max-width: 480px !important; }
.scanner video { width: 100% !important; border-radius: 10px !important; background: #000 !important; }
.scanner-rahmen { position: absolute !important; inset: 18% 10% !important; border: 2px solid #fff !important; border-radius: 8px !important; opacity: .7 !important; pointer-events: none !important; }