/* «Das Brett» — Kern: nur Mechanik, keine Anmutung.
   Alles, was nach Gestaltung aussieht (Farben, Schriften, Kanten, Rhythmus),
   steht in stil-a/b/c.css. Hier steht nur, was in allen drei Linien gleich
   funktionieren muss. */

/* Muss ganz oben stehen: sonst überstimmt eine Klassenregel mit display:flex
   das hidden-Attribut und das Panel bliebe sichtbar. */
[hidden] { display: none !important; }

* { box-sizing: border-box; }

body { margin: 0; -webkit-font-smoothing: antialiased; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

/* ---------- Grundraster ---------- */

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.spalte { display: flex; flex-direction: column; min-width: 0; }
.spalte-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.spalte-inhalt { display: flex; flex-direction: column; flex: 1; }

.job { display: block; width: 100%; text-align: left; }
.meta { display: flex; align-items: center; }
.job-fuss { display: flex; align-items: center; }
.werkzeuge { margin-left: auto; display: flex; }

.fortschritt { display: inline-flex; align-items: center; }
.einheiten { display: flex; }

/* ---------- Kopf und Leisten ---------- */

.kopf-oben { display: flex; align-items: center; flex-wrap: wrap; }
.ansicht-wechsel { display: flex; }
.firmen-leiste, .kunden-leiste { display: flex; flex-wrap: wrap; }
.kunden-zeile { display: flex; align-items: center; }
.sortierung { display: flex; align-items: center; margin-left: auto; }

/* ---------- Panel ---------- */

#schleier { position: fixed; inset: 0; z-index: 30; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 100%);
  z-index: 40;
  display: flex;
  flex-direction: column;
}

.panel-kopf { display: flex; align-items: center; justify-content: space-between; }
.panel-inhalt { overflow-y: auto; flex: 1; }
.panel-fuss { display: flex; flex-wrap: wrap; }
.panel-fuss #panel-loeschen { margin-left: auto; }

.feld { display: block; }
.feld-name { display: block; }
.feld input[type="text"], .feld input[type="date"], .feld textarea, .feld select {
  width: 100%;
}
.feld textarea { resize: vertical; }

.status-wahl { display: flex; flex-wrap: wrap; }

.task-liste { list-style: none; margin: 0; padding: 0; }
.task { display: flex; align-items: center; }
.task-text { flex: 1; overflow-wrap: anywhere; cursor: pointer; }
.task-neu { display: flex; }
.task-neu input { flex: 1; min-width: 0; }

/* ---------- Erledigt ---------- */

.woche-kopf { display: flex; align-items: baseline; justify-content: space-between; }
.fertig-zeile { display: flex; align-items: center; }
.fertig-titel { flex: 1; overflow-wrap: anywhere; }

/* ---------- Umbruchschutz ---------- */

.titel, .beschrieb { overflow-wrap: anywhere; }

/* ---------- Handy: Spalten stapeln ---------- */

@media (max-width: 820px) {
  .board { grid-template-columns: 1fr; }
  .panel { top: auto; height: 92vh; width: 100%; }
  .sortierung { margin-left: 0; }

  /* Umbrechende Chips fressen auf dem Handy fast die halbe Höhe, bevor die
     erste Karte kommt. Deshalb scrollen sie seitlich statt zu stapeln. */
  .firmen-leiste, .kunden-leiste {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .firmen-leiste::-webkit-scrollbar, .kunden-leiste::-webkit-scrollbar { display: none; }
  .firmen-leiste > *, .kunden-leiste > * { flex: 0 0 auto; }
  .firmen-zeile, .kunden-zeile { flex-wrap: nowrap; min-width: 0; }
}