/* PrüfPilot, gemeinsames Aussehen für Suite und Betreiber-App.
   Handy zuerst, dann Desktop. Keine externen Schriften, keine Bibliotheken,
   nichts, was eine Internetverbindung braucht.

   Farbwelt: Die Werte hier sind nur der Rückfall. Die echten Farben kommen je
   Mandant aus /marke.css, das NACH dieser Datei geladen wird und dieselben
   Variablen überschreibt. So bekommt jeder Kunde sein eigenes Aussehen, ohne
   dass eine Datei angefasst wird.

   Für Liebenstein Service GmbH stammen Farben, Bildmarke und Schrift aus dem
   echten Briefkopf auf liebenstein-service.de: Dunkelgrün #2f3a29, Hellgrün
   #829d72, Hausschrift Cairo. Die Ampel benutzt bewusst ANDERE Töne als die
   Marke, sonst verschwimmt "erledigt" mit dem Firmengrün. Zusätzlich trägt
   jeder Merker einen Punkt und Text, damit die Aussage nicht allein an der
   Farbe hängt. */

/* Hausschrift, selbst ausgeliefert. Eingebundene Google-Schriften wären ein
   Datenschutzverstoß, weil jeder Aufruf die IP des Betreibers an Google gäbe. */
@font-face {
  font-family: "Cairo";
  src: url("/static/schrift/cairo.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --marke: #2f3a29;
  --marke-hell: #3f4d37;
  --marke-tief: #232c1f;
  --akzent: #829d72;
  --akzent-hell: #eef2ea;
  --akzent-rand: #cfdbc6;
  --marke-blass: #f0f2ee;
  --sand: #f6f4ee;

  --grund: #f3f5f2;
  --karte: #ffffff;
  --rand: #dfe4dc;
  --rand-stark: #c6cec2;
  --text: #1b2418;
  --text-leise: #5d6b58;

  --gruen: #1a7a4c;
  --gruen-hell: #e6f4ec;
  --gelb: #a86a00;
  --gelb-hell: #fdf1de;
  --rot: #b32218;
  --rot-hell: #fdeceb;
  --blau: #1f5f8b;
  --blau-hell: #e8f1f7;

  --schatten: 0 1px 2px rgba(24, 36, 20, 0.06), 0 6px 18px rgba(24, 36, 20, 0.06);
  --schatten-hoch: 0 8px 30px rgba(24, 36, 20, 0.16);
  --radius: 12px;
  --radius-klein: 8px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: "Cairo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  background: var(--grund);
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: "tnum" on;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 10px; letter-spacing: -0.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.16rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 10px; }
a { color: var(--marke-hell); }
small { font-size: 0.82rem; }

/* ------------------------------------------------------------------ Kopf
   Weiß mit der echten Bildmarke, wie der Briefkopf des Auftraggebers. Er tritt
   gegenüber seinen Kunden als Anbieter auf (Vertrag Anlage 3), also gehört sein
   Zeichen nach oben und nicht ein erfundenes Symbol. */
.kopf {
  background: #fff;
  color: var(--marke);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--rand);
  box-shadow: 0 1px 3px rgba(24, 36, 20, 0.05);
}
.kopf .marke {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--marke);
  min-width: 0;
}
.kopf .marke img.bildmarke {
  height: 38px;
  width: auto;
  flex: none;
  display: block;
}
/* Rückfall, wenn der Mandant keine eigene Bildmarke hinterlegt hat */
.kopf .marke.ohne-bild::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--akzent);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.5);
  flex: none;
}
.kopf .marke .beschriftung { min-width: 0; }
.kopf .marke span {
  font-weight: 400;
  color: var(--text-leise);
  font-size: 0.8rem;
  display: block;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf .rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-leise);
}
.kopf .rechts .knopf.leise { border-color: var(--rand-stark); color: var(--marke); }

.reiter {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  background: var(--marke);
  padding: 0 10px;
  position: sticky;
  top: 0;
  z-index: 19;
  scrollbar-width: thin;
}
.reiter button {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.82);
  padding: 13px 15px;
  font-size: 0.94rem;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.reiter button:hover { color: #fff; }
.reiter button.aktiv { color: #fff; border-bottom-color: var(--akzent); font-weight: 600; }

main { padding: 20px 16px 40px; max-width: 1240px; margin: 0 auto; }
.ansicht { display: none; }
.ansicht.aktiv { display: block; animation: auf 0.18s ease-out; }
@keyframes auf { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- Karten */
.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--schatten);
}
.karte > :last-child { margin-bottom: 0; }
.karte h2 { display: flex; align-items: center; gap: 10px; }

.gitter { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .gitter.zwei { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .gitter.drei { grid-template-columns: repeat(3, 1fr); }
  .gitter.vier { grid-template-columns: repeat(4, 1fr); }
}

/* Kennzahl-Kachel mit farbiger Kante, damit Wichtiges sofort auffällt */
.zahl {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  padding: 14px 16px;
  box-shadow: var(--schatten);
}
.zahl b {
  display: block;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--marke);
  font-variant-numeric: tabular-nums;
}
.zahl small { color: var(--text-leise); display: block; margin-top: 2px; }
.zahl.wichtig { border-left-color: var(--rot); }
.zahl.wichtig b { color: var(--rot); }
.zahl.achtung { border-left-color: var(--gelb); }
.zahl.achtung b { color: var(--gelb); }
.zahl.gut { border-left-color: var(--gruen); }
.zahl.gut b { color: var(--gruen); }

/* --------------------------------------------------------------- Formulare */
label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-leise);
  margin: 12px 0 5px;
}
input, select, textarea, button { font: inherit; }
input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: #fff;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover, select:hover, textarea:hover { border-color: var(--akzent); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(111, 145, 66, 0.18);
}
input[readonly] { background: var(--sand); color: var(--text-leise); }
textarea { min-height: 88px; resize: vertical; }
input[type="checkbox"] { width: auto; accent-color: var(--akzent); }
input[type="file"] { padding: 9px; background: var(--sand); }

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--marke);
  color: #fff;
  border: 1px solid var(--marke);
  border-radius: var(--radius-klein);
  padding: 11px 17px;
  cursor: pointer;
  font-weight: 600;
  min-height: 46px;
  text-decoration: none;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
}
.knopf:hover { background: var(--marke-hell); box-shadow: var(--schatten); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.knopf.leise { background: #fff; color: var(--marke); border-color: var(--rand-stark); }
.knopf.leise:hover { background: var(--akzent-hell); border-color: var(--akzent); }
.knopf.klein { padding: 7px 12px; font-size: 0.86rem; min-height: 36px; font-weight: 600; }
.knopf.warn { background: var(--rot); border-color: var(--rot); }
.knopf.warn:hover { background: #911b13; }
.knopf.breit { width: 100%; }

.zeile { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.zeile.rechts { justify-content: flex-end; }

/* --------------------------------------------------------------- Tabellen */
.tabelle-huelle {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
}
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; background: #fff; }
th, td { text-align: left; padding: 10px 12px; vertical-align: top; }
th {
  background: var(--sand);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-leise);
  white-space: nowrap;
  border-bottom: 1px solid var(--rand-stark);
  position: sticky;
  top: 0;
}
tbody tr { border-bottom: 1px solid var(--rand); }
tbody tr:nth-child(even) { background: #fbfcfa; }
tbody tr:hover { background: var(--akzent-hell); }
tbody tr:last-child { border-bottom: none; }

/* ----------------------------------------------------------------- Merker */
.merker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.merker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.merker.gruen { background: var(--gruen-hell); color: var(--gruen); border-color: #bfe3cd; }
.merker.gelb { background: var(--gelb-hell); color: var(--gelb); border-color: #f0dcb4; }
.merker.rot { background: var(--rot-hell); color: var(--rot); border-color: #f3c8c5; }
.merker.grau { background: #eef1ec; color: var(--text-leise); border-color: var(--rand); }
.merker.blau { background: var(--blau-hell); color: var(--blau); border-color: #c8dcea; }

/* Bewertungskürzel des Auftraggebers: G, E, S */
.bewertung {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 0.86rem;
  border: 1px solid transparent;
}
.bewertung.S { background: var(--rot-hell); color: var(--rot); border-color: #f3c8c5; }
.bewertung.E { background: var(--gelb-hell); color: var(--gelb); border-color: #f0dcb4; }
.bewertung.G { background: #eef1ec; color: var(--text-leise); border-color: var(--rand); }

/* ---------------------------------------------------------------- Hinweise */
.hinweis {
  background: var(--gelb-hell);
  border: 1px solid #f0dcb4;
  border-left: 4px solid var(--gelb);
  border-radius: var(--radius-klein);
  padding: 12px 14px;
  font-size: 0.92rem;
  margin-bottom: 12px;
}
.hinweis.gut { background: var(--gruen-hell); border-color: #bfe3cd; border-left-color: var(--gruen); }
.hinweis.schlecht { background: var(--rot-hell); border-color: #f3c8c5; border-left-color: var(--rot); }
.hinweis.ruhig { background: var(--blau-hell); border-color: #c8dcea; border-left-color: var(--blau); }
.leise { color: var(--text-leise); font-size: 0.9rem; }

/* Leerer Zustand: nie eine tote Fläche, immer sagen was zu tun ist */
.leer {
  text-align: center;
  padding: 34px 20px;
  color: var(--text-leise);
  background: var(--sand);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius-klein);
}
.leer b { display: block; color: var(--text); font-size: 1.02rem; margin-bottom: 4px; }

.melder {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(8px);
  background: var(--marke-tief);
  color: #fff;
  padding: 13px 20px;
  border-radius: 10px;
  box-shadow: var(--schatten-hoch);
  z-index: 60;
  max-width: 92vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.melder.schlecht { background: var(--rot); }
.melder.gut { background: var(--gruen); }
.melder.sichtbar { opacity: 1; transform: translateX(-50%); }

.schleier {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 18, 0.5);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 50;
}
.schleier.offen { display: flex; }
.fenster {
  background: #fff;
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--schatten-hoch);
}
.fenster h2 { margin-top: 0; }

.fuss { text-align: center; color: var(--text-leise); font-size: 0.8rem; padding: 22px 16px 34px; }

/* -------------------------------------------- Anmeldung und Registrierung */
.mitte {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(1100px 460px at 50% -12%, rgba(111, 145, 66, 0.16), transparent 62%),
    var(--grund);
}
.mitte .karte { max-width: 430px; width: 100%; margin: 0; padding: 26px; }
.mitte h1 { display: flex; align-items: center; gap: 11px; }
.mitte h1.ohne-bild::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--marke);
  box-shadow: inset 0 0 0 4px var(--akzent);
  flex: none;
}
/* Anmeldeseite: die Bildmarke des Prüfdienstes steht über dem Formular, damit
   der Betreiber sofort sieht, bei wem er sich anmeldet. */
.markenkopf { text-align: center; margin-bottom: 18px; }
.markenkopf img { height: 62px; width: auto; display: inline-block; }
.markenkopf .name {
  display: block;
  margin-top: 9px;
  font-weight: 700;
  color: var(--marke);
  letter-spacing: 0.02em;
}

/* ------------------------------------ Stichwort-Bausteine der Zeiterfassung
   T-100: frühere Einträge als anklickbare Vorlage, wie der Auftraggeber es aus
   mite kennt. Die Liste steht unter dem Eingabefeld und bleibt im Fluss der
   Seite, damit sie auf dem Handy nichts überdeckt. */
.bausteine { margin-top: 6px; display: grid; gap: 6px; }
.bausteine:empty { display: none; }
.baustein {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  background: var(--sand);
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.baustein:hover, .baustein:focus-visible { border-color: var(--marke); background: #fff; }
.baustein .zeile-klein { color: var(--text-leise); font-size: 0.82rem; margin-top: 2px; }

/* ------------------------------------------------- Betreiber-App, Prüfpunkte */
.punkt {
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: 14px;
  margin-bottom: 12px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.punkt.fertig { border-color: #bfe3cd; background: var(--gruen-hell); }
.punkt .titel { font-weight: 600; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.punkt .hint { color: var(--text-leise); font-size: 0.86rem; margin-bottom: 9px; }
/* T-195: Zustaendigkeit/Dokumentationsart der TRAS-120-Pruefpunkte. Sticht
   bewusst hervor, wenn die Pruefung NICHT vom Betreiber selbst kommt (Fach-
   betrieb/Sachverstaendiger/Befaehigte Person) oder eine eigene Doku
   verlangt, sonst bleibt dem Betreiber unsichtbar, dass ein Abhaken hier
   nicht reicht (Review-Befund, 18.08.2026). */
.punkt .verantwortung {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gelb);
  background: var(--gelb-hell);
  border: 1px solid var(--gelb);
  border-radius: 999px;
  padding: 2px 10px;
  margin-bottom: 9px;
}
.jn { display: flex; gap: 9px; }
.jn button { flex: 1; min-height: 52px; font-size: 1rem; }
.jn button.gewaehlt { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.jn button.gewaehlt.nein { background: var(--rot); border-color: var(--rot); }

.fortschritt {
  height: 10px;
  background: var(--rand);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 5px;
}
.fortschritt i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--akzent), var(--gruen));
  width: 0;
  transition: width 0.3s ease-out;
}
.turnusleiste { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 5px; }
.turnusleiste button { white-space: nowrap; }

img.vorschau {
  max-width: 100%;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
  margin-top: 9px;
}

/* Auf dem Handy dürfen Bedienflächen nicht klein sein: draußen mit Handschuhen */
@media (max-width: 620px) {
  main { padding: 14px 12px 32px; }
  .karte { padding: 15px; }
  .knopf { min-height: 50px; }
  .knopf.klein { min-height: 42px; }
  h1 { font-size: 1.32rem; }
}

@media print {
  .kopf, .reiter, .knopf, .melder, .fuss, .nicht-drucken, .schleier { display: none !important; }
  body { background: #fff; font-size: 11pt; color: #000; }
  main { padding: 0; max-width: none; }
  .karte { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; }
  .tabelle-huelle { border: none; }
  th { background: #eee !important; }
}