/* Walther-App — Walther-Look, mobil zuerst, hell und dunkel. */

:root {
  --blau: #1a3e8f;
  --blau-hell: #2a56b8;
  --rot: #d2122e;
  --petrol: #006774;
  --text: #27272d;
  --text-leise: #5c5c66;
  --flaeche: #f4f5f7;
  --karte: #ffffff;
  --linie: #dcdee4;
  --schatten: 0 1px 2px rgba(26, 62, 143, 0.08), 0 4px 14px rgba(26, 62, 143, 0.07);
  --radius: 14px;
  --trenner: max(10px, env(safe-area-inset-bottom));
}

@media (prefers-color-scheme: dark) {
  :root {
    --blau: #2f5bc4;
    --blau-hell: #4a76d8;
    --rot: #ef3b52;
    --petrol: #1596a3;
    --text: #eceef3;
    --text-leise: #a7abb6;
    --flaeche: #14161c;
    --karte: #1e212a;
    --linie: #333744;
    --schatten: none;
  }
}

* {
  box-sizing: border-box;
}

/* Das `hidden`-Kennzeichen muss immer gewinnen. Sonst hebt ein spaeteres
   `display: flex` (Kopfzeile, Fussleiste) es wieder auf und die Leisten
   waeren auch auf der Anmeldeseite zu sehen. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--flaeche);
  color: var(--text);
  font-family: Poppins, Inter, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.huelle {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--blau);
  color: #fff;
}

.kopf-logo {
  height: 28px;
  width: auto;
  flex: 0 0 auto;
}

.kopf-titel {
  font-weight: 600;
  font-size: 1.05rem;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kopf-knopf {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 40px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.kopf-knopf:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* --- Inhalt ------------------------------------------------------------- */

.inhalt {
  flex: 1 1 auto;
  padding: 16px;
  padding-bottom: calc(84px + var(--trenner));
  outline: none;
}

.ladehinweis {
  color: var(--text-leise);
  text-align: center;
  padding: 40px 0;
}

h1 {
  font-size: 1.45rem;
  margin: 0 0 4px;
}

h2 {
  font-size: 1.1rem;
  margin: 24px 0 10px;
}

.unterzeile {
  color: var(--text-leise);
  margin: 0 0 18px;
  font-size: 0.95rem;
}

/* --- Kacheln ------------------------------------------------------------ */

.kacheln {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.kachel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 104px;
  padding: 12px 6px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  color: var(--text);
  text-decoration: none;
  text-align: center;
  position: relative;
}

.kachel:active {
  transform: scale(0.97);
}

.kachel-symbol {
  font-size: 1.7rem;
  line-height: 1;
}

.kachel-titel {
  font-weight: 600;
  font-size: 0.95rem;
}

.kachel-klein {
  font-size: 0.72rem;
  color: var(--text-leise);
}

.kachel-bald {
  opacity: 0.75;
}

.kachel-zahl {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--rot);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Karten und Listen -------------------------------------------------- */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 14px;
  margin-bottom: 12px;
}

.karte-wichtig {
  border-left: 5px solid var(--rot);
}

.karte-kopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.karte-titel {
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0;
}

.karte-meta {
  color: var(--text-leise);
  font-size: 0.82rem;
  margin: 2px 0 8px;
}

.karte-text {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.neu-punkt {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rot);
  margin-left: 6px;
  vertical-align: middle;
}

.leer {
  text-align: center;
  color: var(--text-leise);
  padding: 32px 12px;
}

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

.feld {
  display: block;
  margin-bottom: 14px;
}

.feld-text {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="file"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px;
  font: inherit;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 10px;
}

input[type="file"] {
  padding: 10px;
  font-size: 0.92rem;
}

textarea {
  min-height: 110px;
  resize: vertical;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--petrol);
  outline-offset: 2px;
}

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 600;
  border-radius: 10px;
  border: 1px solid transparent;
  background: var(--blau);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.knopf:hover {
  background: var(--blau-hell);
}

.knopf:disabled {
  opacity: 0.6;
  cursor: default;
}

.knopf-breit {
  width: 100%;
}

.knopf-leise {
  background: transparent;
  color: var(--blau);
  border-color: var(--linie);
}

.knopf-rot {
  background: var(--rot);
}

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

.knopf-klein {
  min-height: 42px;
  padding: 8px 14px;
  font-size: 0.9rem;
}

.auswahl {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  font-size: 1rem;
}

.auswahl input {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: 0 0 auto;
}

/* --- Hinweise ----------------------------------------------------------- */

.meldung {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-left: 5px solid var(--petrol);
  background: var(--karte);
}

.meldung-fehler {
  border-left-color: var(--rot);
  color: var(--text);
}

.meldung-ok {
  border-left-color: var(--petrol);
}

.startpasswort {
  font-family: "Courier New", monospace;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--flaeche);
  border: 1px dashed var(--blau);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
  margin: 10px 0;
  overflow-wrap: anywhere;
}

/* --- Fussleiste --------------------------------------------------------- */

.fussleiste {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  background: var(--karte);
  border-top: 1px solid var(--linie);
  padding-bottom: var(--trenner);
}

.fussleiste a {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  font-size: 0.74rem;
  color: var(--text-leise);
  text-decoration: none;
  padding: 6px 2px;
}

.fussleiste a[aria-current="page"] {
  color: var(--blau);
  font-weight: 600;
}

.fussleiste .fuss-symbol {
  font-size: 1.25rem;
  line-height: 1;
}

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

.anmeldung {
  max-width: 420px;
  margin: 8vh auto 0;
}

.anmeldung .karte {
  padding: 20px;
}

.anmeldung-logo {
  display: block;
  height: 44px;
  margin: 0 auto 16px;
}

/* --- Tabelle (Nutzerliste) --------------------------------------------- */

.nutzer-zeile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.nutzer-zeile:last-child {
  border-bottom: none;
}

.nutzer-info {
  flex: 1 1 auto;
  min-width: 0;
}

.nutzer-name {
  font-weight: 600;
}

.nutzer-klein {
  color: var(--text-leise);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

.marke {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  margin: 2px 4px 2px 0;
}

.marke-chef {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.marke-gesperrt {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}

/* --- Arbeitsbereiche (Zeit, Material, Lieferschein) --------------------- */

.karte-laeuft {
  border-left: 5px solid var(--petrol);
}

.karte-neu {
  border-left: 5px solid var(--blau);
}

.karte-inner {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0 4px;
}

.zeit-gross {
  font-size: 2rem;
  font-weight: 700;
  margin: 6px 0 0;
  color: var(--blau);
}

.wochen-zeile {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}

.wochen-zeile:last-child {
  border-bottom: none;
}

.wochen-zeile-heute {
  font-weight: 700;
  color: var(--blau);
}

.wochen-summe {
  font-weight: 700;
  border-top: 2px solid var(--linie);
  margin-top: 4px;
}

.wochen-tag {
  flex: 1 1 auto;
}

.wochen-wert {
  flex: 0 0 auto;
  white-space: nowrap;
}

.zeile-block {
  margin-bottom: 8px;
}

.zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 0;
  border-bottom: 1px solid var(--linie);
}

.zeile:last-child {
  border-bottom: none;
}

.zeile-rest {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.zeile-grund {
  color: var(--text-leise);
  font-size: 0.82rem;
  padding-bottom: 6px;
}

.zeit-uhrzeit {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.zeit-art {
  flex: 1 1 auto;
}

.marke-laeuft {
  background: var(--petrol);
  border-color: var(--petrol);
  color: #fff;
}

.marke-geaendert {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.leer-klein {
  color: var(--text-leise);
  font-size: 0.9rem;
  margin: 4px 0;
}

.hinweis-rot {
  color: var(--rot);
  font-weight: 600;
  margin: 6px 0 0;
}

.zurueck {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--blau);
  font-weight: 600;
  text-decoration: none;
}

.such-zeile {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.such-zeile input {
  flex: 1 1 auto;
  min-width: 0;
}

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.chip {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 8px 14px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
}

.chip-aktiv {
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
}

.chip-warn.chip-aktiv {
  background: var(--rot);
  border-color: var(--rot);
}

.artikel-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  color: var(--text);
  text-decoration: none;
}

.artikel-zeile:last-child {
  border-bottom: none;
}

.artikel-name {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.artikel-bestand {
  flex: 0 0 auto;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
}

.artikel-warn {
  color: var(--rot);
}

.artikel-klein {
  color: var(--text-leise);
  font-size: 0.78rem;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.foto-reihe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.foto-fach {
  margin: 0;
  width: calc(50% - 5px);
}

.foto {
  display: block;
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linie);
  background: var(--flaeche);
}

.foto-text {
  color: var(--text-leise);
  font-size: 0.78rem;
  text-align: center;
  padding-top: 2px;
}

@media (min-width: 560px) {
  .kacheln {
    grid-template-columns: repeat(4, 1fr);
  }

  .foto-fach {
    width: 160px;
  }
}

/* --- Etappe 3: Ausrüstung (Kleidung, Werkzeug, Fuhrpark, Aufkleber) ------ */

.knopf-gruen {
  background: var(--petrol);
  border-color: var(--petrol);
  color: #fff;
}

/* Marken mit Ampel-Farben: Fristen, Zustände, Rückgaben. */
.marke-ok {
  background: #e6f4ec;
  border-color: #9fd3b6;
  color: #1c6b41;
}

.marke-warn {
  background: #fdf1dc;
  border-color: #e8c583;
  color: #8a5a06;
}

.marke-rot {
  background: var(--rot);
  border-color: var(--rot);
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  .marke-ok {
    background: #14301f;
    border-color: #2f6b46;
    color: #8fdcb0;
  }

  .marke-warn {
    background: #33260d;
    border-color: #7a5c1c;
    color: #eccb85;
  }
}

/* Zwei Felder nebeneinander — auf dem Handy untereinander, wenn es eng wird. */
.feld-paar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.feld-paar > .feld {
  flex: 1 1 140px;
  min-width: 0;
}

/* Unterschrift: die Fläche nimmt Finger und Maus an. */
.unterschrift {
  margin: 6px 0 10px;
}

.unterschrift-flaeche {
  display: block;
  width: 100%;
  height: 160px;
  background: #ffffff;
  border: 1px dashed var(--linie);
  border-radius: 10px;
  /* Ohne touch-action scrollt die Seite beim Unterschreiben. */
  touch-action: none;
  cursor: crosshair;
}

.unterschrift-bild {
  display: block;
  width: 140px;
  height: 60px;
  object-fit: contain;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: #ffffff;
}

.foto-klein {
  display: block;
  width: 120px;
  height: 90px;
  object-fit: cover;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--flaeche);
}

/* Auswahlliste für die Aufkleber. */
.auswahl-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
  cursor: pointer;
}

.auswahl-zeile:last-child {
  border-bottom: none;
}

.auswahl-zeile input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

/* Der Druckbogen: A4, 3 Spalten zu 8 Reihen = 24 Etiketten je Seite. */
.druckbogen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4mm;
  margin-top: 12px;
}

.etikett {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2mm;
  min-height: 34mm;
  padding: 3mm 2mm;
  border: 1px dashed var(--linie);
  border-radius: 6px;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}

.etikett-code {
  display: block;
  width: 26mm;
  height: 26mm;
  background: #ffffff;
}

.etikett-text {
  min-width: 0;
}

.etikett-titel {
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.etikett-klein {
  color: var(--text-leise);
  font-size: 0.75rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

/*
  Drucken: nur der Bogen.
  Wichtig fuer den Aufruf ueber den Browser-Druckdialog — sonst waere im PDF
  alles ausser dem Bogen (Kopfzeile, Knoepfe, Listen) mit drauf.
*/
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  .kopf,
  .fussleiste,
  .nicht-drucken,
  .zurueck,
  .meldung,
  .knopf-reihe,
  .chips {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  /*
    Der Bildschirmrand hat auf Papier nichts verloren: die 16 px Innenabstand
    und der Freiraum fuer die Fussleiste schoben den Bogen nach unten, die
    achte Etikettenreihe landete auf Seite 2. Im Druck also alles auf null.
  */
  .inhalt {
    padding: 0 !important;
  }

  /*
    3 Spalten zu 8 Reihen muessen auf EIN A4-Blatt passen — es wird ja auf
    einen fertigen Etikettenbogen gedruckt. Bei 8 mm Seitenrand bleiben
    281 mm Hoehe: 8 x 33,5 mm + 7 x 1 mm = 275 mm. Deshalb hier feste
    Etikettenhoehe und ein kleinerer Code als am Bildschirm.
  */
  .druckbogen {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-auto-rows: 33.5mm;
    gap: 1mm;
    margin-top: 0;
  }

  .etikett {
    border: 1px solid #999;
    border-radius: 0;
    color: #000;
    height: 33.5mm;
    min-height: 0;
    padding: 1mm;
    gap: 0.5mm;
    /* Von oben aufbauen: der Code steht immer ganz drauf. Ein zu langer
       Text wird unten abgeschnitten, statt den Code anzuschneiden. */
    justify-content: flex-start;
    overflow: hidden;
  }

  .etikett-code {
    width: 19mm;
    height: 19mm;
  }

  .etikett-titel {
    font-size: 7pt;
  }

  .etikett-klein {
    color: #333;
    font-size: 6pt;
  }
}