/* Übersicht v4 (Runde 4, 05.11.2026): mehr Luft, Status unter dem Datum, am Handy nur das Wichtigste.
   Nur Anzeige. Farben aus app.css: Fläche #fff, Desk #E7EBE8, Grün #2F5A43 / #23453A, Balken #E2EAE5, Tinte #1C2420, leise #5E6A64. Rundung höchstens 6 px. */

/* Titel und Bezeichnungen links, Zahlen links unter ihrem Titel, gleich breite Ziffern */
#liste, #liste table.liste { font-variant-numeric: tabular-nums; }
#liste .werkzeug { padding-top: 14px; padding-bottom: 14px; }

/* ---------- Handy: die Karte zeigt Name, Status, Datum von bis, Haken und „verschickt …“ ---------- */
#liste .karte { margin: 0 0 10px; }
#liste .karte-auf { padding: 18px 16px 4px; }
#liste .karte .zeile { margin-top: 8px; line-height: 20px; }
#liste .karte .schl, #liste .karte .unten, #liste .karte .wann { display: none; }
#liste .karte-fuss { padding: 0 6px 8px 16px; justify-content: flex-end; }
#liste .karten { padding-top: 10px; }
@media (max-width: 1023px) {
  #liste .infozeile { margin-top: 10px; }
  #liste .infozeile .stand { display: none; }
}

/* ---------- PC ab 1024 px ---------- */
@media (min-width: 1024px) {
  #liste .werkzeug { padding: 18px 20px; gap: 12px 16px; }
  #liste .infozeile { margin-top: 12px; gap: 4px 24px; }
  #liste table.liste { border-spacing: 0 10px; margin-top: 16px; table-layout: fixed; }
  #liste table.liste th:nth-child(2) { width: 56px; } #liste table.liste th:nth-child(3) { width: 17%; } #liste table.liste th:nth-child(4) { width: 13%; }
  #liste table.liste th:nth-child(5) { width: 196px; } #liste table.liste th:nth-child(6) { width: 190px; } #liste table.liste th:nth-child(7) { width: 104px; } #liste table.liste th.aktion-kopf { width: auto; }
  #liste table.liste td { overflow-wrap: anywhere; }
  #liste table.liste th { background: none; color: var(--gruen-dunkel); padding: 6px 12px; text-align: left; white-space: nowrap; }
  #liste table.liste td { padding: 20px 12px; line-height: 24px; text-align: left; }
  #liste table.liste td:first-child { border-radius: var(--r) 0 0 var(--r); }
  #liste table.liste td:last-child { border-radius: 0 var(--r) var(--r) 0; }
  #liste table.liste td.aktion-zelle { width: auto; padding: 12px 6px 12px 6px; vertical-align: top; }
  #liste table.liste td .klein { margin-top: 6px; line-height: 20px; }
  #liste table.liste .stat-unter { margin-top: 10px; line-height: 1; }
  /* Status als Marke unter dem Datum statt eigener Spalte */
  #liste table.liste .status-kopf, #liste table.liste .status-zelle { display: none; }
  /* Preise der Holzarten als Zahlen links, ohne Kästchen */
  #liste table.liste .tags { gap: 4px 16px; }
  #liste table.liste .etikett.holz { background: none; padding: 0; border-radius: 0; font-size: 15px; line-height: 24px; font-weight: 400; color: var(--tinte); }
  #liste table.liste .etikett.holz b { color: var(--gruen-dunkel); margin-right: 4px; }
  #liste table.liste td:nth-child(5) { white-space: nowrap; }
  #liste table.liste td:nth-child(6) .tags { flex-wrap: wrap; }
  #liste table.liste tr.alt td { color: var(--leise); }
  #liste table.liste tbody tr:hover td { background: #F7FAF8; }
  #liste table.liste .vs-datum { text-align: left; padding: 6px 0 0 6px; }
  #liste table.liste td.leer { padding: 32px 12px; text-align: left; }
  #liste table.liste .mini-aktionen { justify-content: flex-start; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #liste table.liste th:nth-child(3) { width: 14%; } #liste table.liste th:nth-child(4) { width: 10%; }
  #liste table.liste th:nth-child(5) { width: 148px; } #liste table.liste th:nth-child(6) { width: 146px; } #liste table.liste th:nth-child(7) { width: 88px; }
}

/* Handy: „verschickt …“ bündig unter den Symbolen, nicht am Rand */
#liste .karte .vs-datum { padding: 0 16px 10px 0; }

/* Kontrast der grauen Marke (abgelaufen, ohne Datum, verworfen) auf mindestens 4,5: #55605A auf #ECEEEC */
#liste .status.abgelaufen, #liste .status.offen, #liste .status.verworfen { color: #55605A; }