/* Pre-Flight-Check: Bedienung mit Handschuhen und bei Sonnenlicht.
   Grosse Tippflaechen, hoher Kontrast, keine feinen Linien.

   Farben und Schriften nach der SKYSOIL-Website: Signal-Gruen als
   einziger Akzent, dunkles Gruen-Schwarz fuer den Kopf, JetBrains Mono
   fuer Labels und Zaehler. Bewusst nur ein helles Schema, weil es im
   Feld bei Sonne besser lesbar ist und die Unterschrift auf Weiss
   so aussieht wie spaeter im Dokument. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono.ttf') format('truetype');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --grund: #ffffff;
  --flaeche: #F7F9F7;
  --rand: #E2E8E4;
  --rand-stark: #C9D3CC;
  --text: #0F1A12;
  --gedimmt: #6B7A6E;
  --akzent: #2F8F4E;
  --akzent-dunkel: #24733E;
  --akzent-hell: #E8F4EC;
  --leucht: #3DCC5A;
  --dunkel: #0F1A12;
  --dunkel-2: #16241A;
  --dunkel-linie: #1F2D24;
  --warn: #B4361F;
  --warn-hell: #FCEDEA;
  --schatten: 0 1px 2px rgba(15, 26, 18, .06), 0 2px 8px rgba(15, 26, 18, .05);
  --radius: 8px;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  /* Sichere Zone bei iPhone/iPad mit Notch */
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Kein Gummiband-Scrollen beim Abhaken */
  overscroll-behavior-y: contain;
}

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

/* Kein Zoom beim Fokus auf iOS: Schrift nie unter 16px */
input, textarea, select { font-size: 17px; }

/* Eingabefelder ausdruecklich hell, sonst setzt Safari im Dunkelmodus
   eigene Farben und es entsteht helles Grau auf Weiss */
input, textarea {
  background: var(--grund);
  color: var(--text);
  -webkit-text-fill-color: var(--text);
}
input::placeholder, textarea::placeholder {
  color: #8A988D;
  -webkit-text-fill-color: #8A988D;
}
input:disabled, textarea:disabled {
  background: var(--flaeche);
  opacity: 1;
}

[hidden] { display: none !important; }

h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }

/* Kleine Ueberschrift in Mono, wie auf der Website */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gedimmt);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background: var(--dunkel);
  flex: none;
}

.wortmarke {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .14em;
  color: #fff;
  white-space: nowrap;
}
.wortmarke.dunkel { color: var(--dunkel); font-size: 20px; margin-bottom: 26px; }

/* ---------------------------------------------------------- Anmeldung */

.deckblatt {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  padding-top: calc(24px + var(--oben));
  background: var(--flaeche);
}

.karte {
  width: 100%;
  max-width: 400px;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 12px;
  padding: 32px 28px;
  box-shadow: var(--schatten);
}

.karte h1 { margin: 0 0 4px; font-size: 30px; }
.karte label {
  display: block;
  margin: 22px 0 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedimmt);
}
.karte input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
}
.karte input:focus, .feld input:focus, .feld textarea:focus,
.dialog-karte input:focus {
  outline: 3px solid var(--akzent);
  outline-offset: -1px;
  border-color: var(--akzent);
}
.karte .knopf { width: 100%; margin-top: 20px; }

/* ------------------------------------------------------------- Kopf */

.oben {
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: 0 1px 0 var(--rand);
}

.kopf {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  padding: 8px 16px;
  padding-top: calc(8px + var(--oben));
  background: var(--dunkel);
  color: #fff;
}

.kopf-titel { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kopf-titel strong {
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf .klein {
  font-family: var(--mono);
  font-size: 12px;
  color: #9DB0A2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kopf .knopf.schlicht { color: #fff; padding-left: 4px; padding-right: 8px; }
/* In der Einsatzansicht ersetzt der Zurueck-Knopf die Wortmarke */
.kopf #zurueck:not([hidden]) + .wortmarke { display: none; }

.sync {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--dunkel-linie);
  color: #CFE0D3;
  white-space: nowrap;
}
.sync::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--leucht);
  margin-right: 7px;
  vertical-align: 1px;
}
.sync[data-zustand="offen"]::before,
.sync[data-zustand="laeuft"]::before { background: #E8B33A; }
.sync[data-zustand="offline"]::before { background: #9DB0A2; }
.sync[data-zustand="fehler"] { background: var(--warn); color: #fff; }
.sync[data-zustand="fehler"]::before { background: #fff; }

/* ---------------------------------------------------------- Schritte */

.schritte {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 10px 16px 12px;
  background: var(--grund);
}

.schritt {
  -webkit-appearance: none;
  appearance: none;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 7px;
  align-items: center;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.schritt[aria-current="step"] {
  background: var(--flaeche);
  border-color: var(--rand);
}

.schritt-nr {
  grid-row: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--rand-stark);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--gedimmt);
  background: var(--grund);
}
.schritt[aria-current="step"] .schritt-nr {
  border-color: var(--dunkel);
  background: var(--dunkel);
  color: #fff;
}
.schritt.fertig .schritt-nr {
  border-color: var(--akzent);
  background: var(--akzent);
  color: #fff;
}

.schritt-text { min-width: 0; display: flex; flex-direction: column; }
.schritt-titel {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.schritt-zahl {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gedimmt);
}
.schritt.fertig .schritt-zahl { color: var(--akzent); }
.schritt .balken { grid-column: 1 / -1; }

/* Fortschrittsbalken, in Schritten und unten in der Leiste */
.balken {
  height: 6px;
  border-radius: 3px;
  background: var(--rand);
  overflow: hidden;
}
.balken-fuellung {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: var(--akzent);
  transition: width .25s ease;
}

/* ------------------------------------------------------------ Seiten */

.seite {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px calc(130px + var(--unten));
}
#seite-liste { padding-top: 32px; }

.reihe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.reihe h2 { margin: 0; font-size: 34px; }

.schritt-kopf { margin: 4px 0 20px; }
.schritt-kopf h2 { margin: 0; font-size: 30px; }
.schritt-kopf p { margin: 6px 0 0; }

.hinweis { color: var(--gedimmt); font-size: 15px; }
.fehler {
  color: var(--warn);
  background: var(--warn-hell);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 15px;
  margin: 14px 0 0;
}

/* ------------------------------------------------------------ Knöpfe */

.knopf {
  -webkit-appearance: none;
  appearance: none;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--akzent);
  border-radius: var(--radius);
  background: var(--akzent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.knopf:active { background: var(--akzent-dunkel); transform: translateY(1px); }
.knopf.gross { min-height: 54px; font-size: 18px; width: 100%; }
.knopf.schlicht {
  background: transparent;
  border-color: transparent;
  color: inherit;
  font-weight: 500;
}
.knopf.rand {
  background: var(--grund);
  border-color: var(--rand-stark);
  color: var(--text);
}
.knopf:disabled { opacity: .45; cursor: default; }

.knopf-reihe {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* ------------------------------------------------------- Einsatzliste */

.liste { list-style: none; margin: 0; padding: 0; }

.liste li {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--grund);
  box-shadow: var(--schatten);
  overflow: hidden;
}

.eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.eintrag:active { background: var(--flaeche); }
.eintrag-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.eintrag-name { font-weight: 600; font-size: 18px; }
.eintrag-unter { font-family: var(--mono); font-size: 12px; color: var(--gedimmt); }

.marke {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  color: var(--gedimmt);
}
.marke.fertig { background: var(--akzent-hell); border-color: transparent; color: var(--akzent); }

/* ------------------------------------------------------------ Blöcke */

.block {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
  background: var(--grund);
  box-shadow: var(--schatten);
}

.block-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 16px;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  font-weight: 700;
}
.block-kopf .stand {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--gedimmt);
}
.block-kopf.fertig .stand { color: var(--akzent); }
.block-kopf.fertig .stand::before { content: "✓ "; }

/* Prüfpunkt: ganze Zeile ist die Tippfläche */
.punkt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--rand);
  background: none;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.block-kopf + .punkt { border-top: 0; }
.punkt:active { background: var(--flaeche); }

.kasten {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: -2px;
  border: 2px solid var(--rand-stark);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: transparent;
  background: var(--grund);
}
.punkt[aria-pressed="true"] .kasten {
  background: var(--akzent);
  border-color: var(--akzent);
  color: #fff;
}
.punkt[aria-pressed="true"] .punkt-text { color: var(--gedimmt); }

.punkt-text { flex: 1; }
.punkt-text .b-hinweis {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: #7A5A10;
  background: #FDF3D8;
  border-radius: 4px;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: 2px;
}
.punkt.nicht-relevant { opacity: .4; }

/* -------------------------------------------------------- Textfelder */

.feld {
  border-top: 1px solid var(--rand);
  padding: 12px 16px;
}
.block-kopf + .feld, .block-text + .feld { border-top: 0; }
.feld label {
  display: block;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
}
.feld input, .feld textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
}
.feld textarea { min-height: 74px; resize: vertical; }

.block-text {
  margin: 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--gedimmt);
}

/* ------------------------------------------------------- Freigabe */

.uebersicht { list-style: none; margin: 0; padding: 0; }
.uebersicht li + li { border-top: 1px solid var(--rand); }
.uebersicht button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.uebersicht button:active { background: var(--flaeche); }
.uebersicht .ue-text { flex: 1; min-width: 0; }
.uebersicht .ue-titel { font-weight: 600; display: block; }
.uebersicht .ue-stand { font-family: var(--mono); font-size: 12px; color: var(--gedimmt); }
.uebersicht .ue-stand.offen { color: var(--warn); }
.uebersicht .balken { width: 120px; flex: none; }

.erklaerungen { margin: 0; padding: 14px 16px 4px; }
.erklaerungen p { margin: 0 0 12px; font-size: 15px; }
.erklaerungen .quelle {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gedimmt);
  margin-bottom: 2px;
}

.unterschrift { padding: 6px 16px 16px; }
.sig-flaeche {
  position: relative;
  border: 2px dashed var(--rand-stark);
  border-radius: var(--radius);
  background: #ffffff;
  touch-action: none;
}
.sig-flaeche.gesetzt { border-style: solid; border-color: var(--akzent); }
.sig-flaeche canvas { display: block; width: 100%; height: 180px; }
/* Unterschriftslinie wie auf Papier */
.sig-flaeche::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 36px;
  border-bottom: 1px solid var(--rand-stark);
  pointer-events: none;
}
.sig-platzhalter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gedimmt);
  font-size: 15px;
  pointer-events: none;
}
.sig-knoepfe {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  align-items: center;
}
.sig-knoepfe .klein { font-family: var(--mono); font-size: 12px; color: var(--gedimmt); }

/* --------------------------------------------------- Abschlussleiste */

.abschluss-leiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px max(16px, calc((100% - 780px) / 2 + 16px));
  padding-bottom: calc(12px + var(--unten));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--rand);
}
.abschluss-leiste .gesamt { flex: 1; min-width: 0; }
.abschluss-leiste .stand {
  font-family: var(--mono);
  font-size: 13px;
  margin-bottom: 7px;
}
.abschluss-leiste .balken { height: 8px; border-radius: 4px; }
.abschluss-leiste .knopf { flex: none; width: auto; min-width: 220px; }
.stand .offen { color: var(--gedimmt); }
.stand .fertig { color: var(--akzent); }

/* -------------------------------------------------------------- Dialog */

.dialog {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(15, 26, 18, .55);
}
.dialog-karte {
  width: 100%;
  max-width: 460px;
  max-height: 82vh;
  overflow-y: auto;
  background: var(--grund);
  color: var(--text);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}
.dialog-karte h3 { margin: 0 0 12px; font-size: 22px; }
.dialog-karte input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius);
  margin-top: 12px;
}
.dialog-knoepfe {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 22px;
}
.dialog-liste { margin: 8px 0 0; padding-left: 20px; font-size: 15px; }
.dialog-liste li { margin-bottom: 5px; }

/* ------------------------------------------------------ Schmale Geräte */

@media (max-width: 700px) {
  .schritte { gap: 4px; padding: 8px 10px 10px; }
  .schritt { grid-template-columns: 1fr; justify-items: center; padding: 6px 4px; row-gap: 5px; }
  .schritt-text { align-items: center; }
  .schritt-titel { font-size: 12px; }
  .schritt-zahl { font-size: 11px; }
  .schritt .balken { width: 100%; }
  .uebersicht .balken { width: 70px; }
  .abschluss-leiste .knopf { min-width: 0; }
  .reihe h2 { font-size: 28px; }
}

.dialog-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.dialog-links .knopf {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* Schritte, die erst nach der Startfreigabe offen sind */
.schritt.gesperrt .schritt-titel,
.schritt.gesperrt .schritt-zahl { color: #9AA79D; }
.schritt.gesperrt .schritt-nr { border-style: dashed; }

.sperre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--radius);
  background: #FDF3D8;
  color: #5C430B;
  font-size: 15px;
}
.sperre p { margin: 0; }
.sperre .knopf { flex: none; }

.block-innen { padding: 14px 16px; margin-top: 0; }

@media (max-width: 820px) {
  .schritte { gap: 4px; padding: 8px 10px 10px; }
  .schritt { grid-template-columns: 1fr; justify-items: center; padding: 6px 4px; row-gap: 5px; }
  .schritt-text { align-items: center; }
  .schritt-titel { font-size: 13px; }
  .schritt-zahl { font-size: 11px; }
  .schritt .balken { width: 100%; }
}