:root {
  --farbe-text: #22303f;
  --farbe-hintergrund: #f5f7f9;
  --farbe-flaeche: #ffffff;
  --farbe-rand: #d7dee4;
  --farbe-akzent: #2f6f4f;
  --farbe-akzent-hell: #e7f2ec;
  --farbe-fehler: #a3312a;
  --farbe-fehler-hell: #fbeceb;
  --farbe-warnung: #9a6b17;
  --farbe-warnung-hell: #fbf1de;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
}

.kopf {
  background: var(--farbe-flaeche);
  border-bottom: 1px solid var(--farbe-rand);
  padding: 1rem 2rem 0 2rem;
}

.kopf h1 {
  margin: 0 0 0.75rem 0;
  font-size: 1.3rem;
}

.kopf-zeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.kopf-aktionen {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.beenden-formular {
  margin: 0;
  display: flex; /* sonst sitzt der Button auf der Text-Grundlinie des Formulars und rutscht aus der Linie */
}

/* mit .kopf-aktionen davor, damit die allgemeine .knopf-Regel weiter unten
   (grössere Schrift/Abstände) die Link-Buttons hier nicht überschreibt */
.kopf-aktionen .beenden-knopf {
  margin-top: 0;
  padding: 0.45rem 1rem;
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.4;
}

/* Hauptmenü 1-9 als umrandete Buttons, das aktive Menü grün gefüllt */
nav {
  display: flex;
  flex-wrap: wrap; /* bei schmalem Fenster in eine zweite Zeile umbrechen statt rechts abgeschnitten */
  gap: 0.5rem;
  padding: 0.25rem 0 1rem 0;
}

nav a {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 6px;
  font-size: 0.95rem;
  white-space: nowrap; /* "2. Ein-/Ausbuchen" nie mitten im Menüpunkt umbrechen */
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

nav a:hover {
  background: var(--farbe-akzent-hell);
  border-color: var(--farbe-akzent);
  color: var(--farbe-akzent);
}

nav a.aktiv {
  background: var(--farbe-akzent);
  border-color: var(--farbe-akzent);
  color: #fff;
  font-weight: 600;
}

nav a:focus-visible {
  outline: 2px solid var(--farbe-akzent);
  outline-offset: 2px;
}

main {
  max-width: 1200px;
  margin: 1.5rem auto;
  padding: 0 1.5rem 3rem 1.5rem;
}

h2 { margin-top: 0; }

.suchfeld {
  max-width: 380px;
  margin: 1rem 0;
}

/* Reihe aus Suchfeld + Gruppen-Filter (Stammdaten/Bestand) */
.filter-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
}

.filter-reihe .suchfeld {
  margin: 0;
  flex: 1;
  min-width: 220px;
}

.filter-reihe select {
  width: auto;
  max-width: 260px;
  margin: 0;
}

.karte {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--farbe-flaeche);
}

/* Aufklappbare Artikel-Liste (Stammdaten) */
.artikel-liste {
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 8px;
  overflow: hidden;
}

.artikel-kopf,
.artikel-zeile summary,
.artikel-zeile-einfach {
  display: grid;
  grid-template-columns: 1.2rem 90px minmax(220px, 2.2fr) 120px 110px 130px 130px;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.artikel-name {
  overflow-wrap: anywhere;
}

.artikel-kopf {
  font-size: 0.85rem;
  font-weight: 600;
  color: #55636f;
  border-bottom: 1px solid var(--farbe-rand);
}

.artikel-zeile,
.artikel-zeile-einfach {
  border-bottom: 1px solid var(--farbe-rand);
}

.artikel-liste > *:last-child { border-bottom: none; }

.artikel-zeile summary {
  cursor: pointer;
  list-style: none;
}

.artikel-zeile summary::-webkit-details-marker { display: none; }

.pfeil {
  display: inline-block;
  color: #8a97a2;
  transition: transform 0.15s ease;
}

.artikel-zeile[open] > summary > .pfeil {
  transform: rotate(90deg);
}

.artikel-details {
  padding: 0.9rem 1.2rem 1.2rem 2.2rem;
  background: var(--farbe-hintergrund);
  border-top: 1px solid var(--farbe-rand);
}

.artikel-details h4 { margin: 0 0 0.5rem 0; font-size: 0.95rem; }

.artikel-foto {
  display: block;
  max-width: 240px;
  max-height: 240px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--farbe-rand);
  margin-bottom: 0.9rem;
}

/* Bestandsübersicht: eigenes Spaltenraster (eigene Klassen, damit sich
   nichts mit den Stammdaten-Spalten in die Quere kommt) */
.bestand-kopf,
.bestand-zeile > summary {
  display: grid;
  grid-template-columns: 1.2rem 90px minmax(220px, 2.2fr) 160px 140px 120px;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.bestand-kopf {
  font-size: 0.85rem;
  font-weight: 600;
  color: #55636f;
  border-bottom: 1px solid var(--farbe-rand);
}

.bestand-zeile {
  border-bottom: 1px solid var(--farbe-rand);
}

.bestand-zeile > summary {
  cursor: pointer;
  list-style: none;
}

.bestand-zeile > summary::-webkit-details-marker { display: none; }

.bestand-zeile[open] > summary > .pfeil {
  transform: rotate(90deg);
}

/* Lieferanten-Liste: eigenes Spaltenraster (Name, Ansprechpartner,
   Telefon, E-Mail, Aktion) */
.lieferanten-kopf,
.lieferanten-zeile {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(160px, 1.4fr) 140px 200px 110px;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.lieferanten-kopf {
  font-size: 0.85rem;
  font-weight: 600;
  color: #55636f;
  border-bottom: 1px solid var(--farbe-rand);
}

.lieferanten-zeile {
  border-bottom: 1px solid var(--farbe-rand);
}

.artikel-liste > *:last-child.lieferanten-zeile { border-bottom: none; }

/* Artikelgruppen-Liste: eigenes Spaltenraster (Name, Notiz, Anzahl Artikel, Aktion) */
.gruppen-kopf,
.gruppen-zeile {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) 90px 110px;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.gruppen-kopf {
  font-size: 0.85rem;
  font-weight: 600;
  color: #55636f;
  border-bottom: 1px solid var(--farbe-rand);
}

.gruppen-zeile {
  border-bottom: 1px solid var(--farbe-rand);
}

.artikel-liste > *:last-child.gruppen-zeile { border-bottom: none; }

/* Lagerplätze-Liste: eigenes Spaltenraster (Name, Notiz, Anzahl Artikel, Aktion) */
.lagerplaetze-kopf,
.lagerplaetze-zeile {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(220px, 2fr) 90px 110px;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.lagerplaetze-kopf {
  font-size: 0.85rem;
  font-weight: 600;
  color: #55636f;
  border-bottom: 1px solid var(--farbe-rand);
}

.lagerplaetze-zeile {
  border-bottom: 1px solid var(--farbe-rand);
}

.artikel-liste > *:last-child.lagerplaetze-zeile { border-bottom: none; }

/* Rüstscheine-Liste: eigenes Spaltenraster (Nr., Datum, Kunde, Auftrag,
   Positionen, Status, Aktion) */
.ruestscheine-kopf,
.ruestscheine-zeile {
  display: grid;
  grid-template-columns: 60px 130px minmax(140px, 1.4fr) minmax(140px, 1.4fr) 110px 150px 150px;
  gap: 1.2rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}

.ruestscheine-reiter {
  display: flex;
  gap: 0.25rem;
  margin: 1rem 0 0.75rem 0;
  border-bottom: 1px solid var(--farbe-rand);
}

.ruestscheine-reiter a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  color: var(--farbe-text);
  border-bottom: 3px solid transparent;
  font-size: 0.9rem;
}

.ruestscheine-reiter a.aktiv {
  border-bottom-color: var(--farbe-akzent);
  font-weight: 600;
}

.aktionen form { display: inline; margin: 0; }

.aktionen button.klein,
.knopf.klein {
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
}

.ruestscheine-kopf {
  font-size: 0.85rem;
  font-weight: 600;
  color: #55636f;
  border-bottom: 1px solid var(--farbe-rand);
}

.ruestscheine-zeile {
  border-bottom: 1px solid var(--farbe-rand);
}

.artikel-liste > *:last-child.ruestscheine-zeile { border-bottom: none; }

/* Verschachtelte zweite Aufklapp-Ebene: Buchungshistorie innerhalb der
   Artikel-Details, damit beim Öffnen eines Artikels nicht gleich alles
   auf einmal erscheint. */
.verlauf {
  margin-top: 0.4rem;
}

.verlauf-titel {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--farbe-akzent);
  padding: 0.3rem 0;
}

.verlauf-titel::-webkit-details-marker { display: none; }

.verlauf[open] > .verlauf-titel .pfeil {
  transform: rotate(90deg);
}

.verlauf-inhalt {
  padding: 0.5rem 0 0.75rem 1.6rem;
}

/* "Unterordner": eigener aufklappbarer Bereich, z.B. für Fertigartikel/Einzelartikel in Stammdaten */
.unterordner {
  margin-top: 1.25rem;
}

.unterordner-titel {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  padding: 0.5rem 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.unterordner-titel::-webkit-details-marker { display: none; }

.unterordner-titel::before {
  content: "\25B8";
  display: inline-block;
  width: 0.9em;
  color: #8a97a2;
  transition: transform 0.15s ease;
}

.unterordner[open] > .unterordner-titel::before {
  transform: rotate(90deg);
}

.unterordner .anzahl {
  font-weight: 400;
  color: #8a97a2;
}

.unterordner .artikel-liste {
  margin-top: 0.4rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--farbe-rand);
  font-size: 0.95rem;
}

th { color: #55636f; font-weight: 600; }

tr:last-child td { border-bottom: none; }

.zahl { text-align: right; font-variant-numeric: tabular-nums; }

.tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 0.1rem 0.5rem;
  border-radius: 10px;
  background: var(--farbe-akzent-hell);
  color: var(--farbe-akzent);
}

.artikel-name .tag {
  margin-left: 0.4rem;
  vertical-align: middle;
}

.tag-warnung {
  background: var(--farbe-warnung-hell);
  color: var(--farbe-warnung);
}

/* Eigene, dezente Farbe für den Lagerplatz-Tag, damit er sich neben dem
   (grünen) Artikelgruppe-Tag optisch unterscheidet */
.tag-lagerplatz {
  background: #eef2f6;
  color: #45525d;
}

form.formular label {
  display: block;
  margin: 0.7rem 0 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 600;
}

input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--farbe-rand);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

.reihe { display: flex; gap: 1rem; }
.reihe > div { flex: 1; }

button, .knopf {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.55rem 1.2rem;
  background: var(--farbe-akzent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

button.sekundaer, .knopf.sekundaer {
  background: transparent;
  color: var(--farbe-text);
  border: 1px solid var(--farbe-rand);
}

button.gefahr,
button.gefahr.sekundaer {
  background: transparent;
  color: var(--farbe-fehler);
  border: 2px solid #000;
}

.aktionen { display: flex; gap: 0.6rem; align-items: center; }

.meldungen { margin-bottom: 1.25rem; }

.meldung {
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.meldung-erfolg { background: var(--farbe-akzent-hell); color: var(--farbe-akzent); }
.meldung-fehler { background: var(--farbe-fehler-hell); color: var(--farbe-fehler); }
.meldung-info { background: #eef2f6; color: #45525d; }

.hinweis { color: #6b7885; font-size: 0.85rem; }

.stueckliste-tabelle { margin-top: 0.5rem; }

/* Verhindert, dass eine breite Tabelle mit vielen Spalten (z.B. Positionen
   oder Rüstliste in der Beschaffung) rechts über die Karte hinausragt -
   scrollt bei Bedarf stattdessen sauber innerhalb der Karte horizontal. */
.tabelle-scroll {
  overflow-x: auto;
  max-width: 100%;
  margin-top: 0.5rem;
}

.tabelle-scroll .stueckliste-tabelle { margin-top: 0; }

/* Kompaktere Darstellung für Tabellen mit besonders vielen Spalten
   (Positionen/Rüstliste in der Beschaffung) - kleinere Abstände/Schrift,
   damit möglichst alles ohne horizontales Scrollen sichtbar ist. */
.tabelle-kompakt th,
.tabelle-kompakt td {
  padding: 0.4rem 0.3rem;
  font-size: 0.87rem;
}

.tabelle-kompakt .aktionen {
  gap: 0.3rem;
}

.tabelle-kompakt button {
  margin-top: 0;
  padding: 0.3rem 0.45rem;
  font-size: 0.8rem;
}

.leer { color: #8a97a2; font-style: italic; padding: 0.5rem 0; }

/* Artikel-Combobox (vierundzwanzigstes Update): durchsuchbares
   Auswahlfeld mit max. ~20 Vorschlägen statt eines langen nativen
   Dropdowns mit allen Artikeln auf einmal. Das eigentliche <select> bleibt
   im Formular bestehen (unverändert, inkl. aller data-*-Attribute an den
   <option>s) und wird nur visuell versteckt - siehe
   artikelComboboxEinrichten() in app.js. display:none genügt und ist
   bewusst einfacher als eine nur-optisch-versteckende Lösung: ein
   verstecktes Formularfeld wird trotzdem ganz normal mit abgeschickt, und
   die Pflichtfeld-Prüfung übernimmt bei Bedarf die JS-Funktion selbst. */
.artikel-select-versteckt {
  display: none;
}

.artikel-combobox {
  position: relative;
}

.artikel-combobox-eingabe.ungueltig {
  border-color: var(--farbe-fehler);
}

.artikel-combobox-liste {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand);
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(34, 48, 63, 0.15);
  max-height: 320px;
  overflow-y: auto;
}

.artikel-combobox-eintrag {
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  font-size: 0.95rem;
}

.artikel-combobox-eintrag.aktiv {
  background: var(--farbe-akzent-hell);
}

.artikel-combobox-eintrag.deaktiviert {
  cursor: default;
  color: #8a97a2;
  font-style: italic;
  font-size: 0.85rem;
  padding: 0.45rem 0.7rem;
}

.artikel-combobox-fehler {
  color: var(--farbe-fehler);
  font-size: 0.82rem;
  margin: 0.3rem 0 0 0;
  display: none;
}

.artikel-combobox-fehler.sichtbar {
  display: block;
}

/* ------------------------------------------------------------------
   Handy-Ansicht (schmale Bildschirme). Desktop bleibt unverändert.
   Bisher abgedeckt: Kopfzeile/Menü (alle Seiten), Formulare allgemein,
   Stammdaten-Übersicht und Artikel bearbeiten.
   ------------------------------------------------------------------ */
@media (max-width: 700px) {
  .kopf { padding: 0.75rem 0.75rem 0 0.75rem; }
  .kopf h1 { margin-bottom: 0.5rem; }
  .kopf-zeile { gap: 0.5rem; }
  .kopf-aktionen { gap: 0.4rem; }
  .kopf-aktionen .hinweis { flex-basis: 100%; }
  .kopf-aktionen .beenden-knopf { padding: 0.35rem 0.7rem; font-size: 0.82rem; }

  nav { gap: 0.4rem; padding-bottom: 0.75rem; }
  nav a { padding: 0.4rem 0.65rem; font-size: 0.88rem; }

  main { margin-top: 1rem; padding: 0 0.75rem 2rem 0.75rem; }
  .karte { padding: 1rem; }

  /* Formularfelder untereinander statt nebeneinander */
  .reihe { flex-direction: column; gap: 0; }
  /* 16px verhindert, dass iPhones beim Antippen eines Feldes hineinzoomen */
  input, select, textarea { font-size: 16px; }

  /* Suche + Filter: jedes Feld über die volle Breite */
  .filter-reihe .suchfeld { min-width: 0; flex-basis: 100%; }
  .filter-reihe select { max-width: none; flex: 1 1 100%; }

  /* Stammdaten-Liste: statt 7 Spalten eine Karte pro Artikel.
       Zeile 1:  Pfeil  Bezeichnung (volle Breite)
       Zeile 2:         LVS-Nr.   Ext. Nr.     [Bearbeiten]
       Zeile 3:         Bestand + Einheit      [          ]
     Der Knopf steht rechts über Zeile 2+3 (vertikal zentriert). Bestand
     hat fast die ganze Breite - auch lange Zahlen drücken nichts zusammen.
     Die Einheit kommt per data-einheit direkt an die Zahl (eigene
     Einheit-Spalte ausgeblendet), damit die Spalte von Zeile 2 nicht von
     der Zahlenlänge abhängt. */
  .artikel-kopf { display: none; }
  .artikel-zeile summary,
  .artikel-zeile-einfach {
    grid-template-columns: 0.8rem auto minmax(0, 1fr) auto;
    grid-template-areas:
      "pfeil name    name    name"
      ".     lvs     ext     aktion"
      ".     bestand bestand aktion";
    gap: 0.15rem 0.6rem;
    padding: 0.7rem 0.8rem;
  }
  .artikel-zeile summary > :nth-child(1),
  .artikel-zeile-einfach > :nth-child(1) { grid-area: pfeil; }
  .artikel-zeile summary > :nth-child(2),
  .artikel-zeile-einfach > :nth-child(2) { grid-area: lvs; }
  .artikel-zeile summary > :nth-child(3),
  .artikel-zeile-einfach > :nth-child(3) { grid-area: name; font-weight: 600; margin-bottom: 0.2rem; }
  .artikel-zeile summary > :nth-child(4),
  .artikel-zeile-einfach > :nth-child(4) { grid-area: ext; }
  .artikel-zeile summary > :nth-child(5),
  .artikel-zeile-einfach > :nth-child(5) { display: none; }
  .artikel-zeile summary > .zahl::after,
  .artikel-zeile-einfach > .zahl::after { content: " " attr(data-einheit); font-weight: 400; }
  .artikel-zeile summary > :nth-child(6),
  .artikel-zeile-einfach > :nth-child(6) { grid-area: bestand; font-weight: 600; text-align: left; overflow-wrap: anywhere; }
  .artikel-zeile summary > :nth-child(7),
  .artikel-zeile-einfach > :nth-child(7) { grid-area: aktion; margin-left: 0.5rem; }
  .artikel-zeile summary > :nth-child(2)::before,
  .artikel-zeile-einfach > :nth-child(2)::before { content: "LVS "; }
  .artikel-zeile summary > :nth-child(4)::before,
  .artikel-zeile-einfach > :nth-child(4)::before { content: "Ext. "; }
  .artikel-zeile summary > :nth-child(2),
  .artikel-zeile summary > :nth-child(4),
  .artikel-zeile-einfach > :nth-child(2),
  .artikel-zeile-einfach > :nth-child(4) { font-size: 0.85rem; color: #6b7885; overflow-wrap: anywhere; }

  .artikel-details { padding: 0.8rem; }
  .artikel-foto { max-width: 100%; }

  /* Knopf-Reihen (z.B. PDF / Archivieren / Löschen auf Detailseiten)
     umbrechen statt über den Rand hinaus */
  .aktionen { flex-wrap: wrap; }
  .tabelle-scroll { -webkit-overflow-scrolling: touch; }

  /* Übrige Listen: Spaltenköpfe ausblenden, jede Zeile als Karte */
  .bestand-kopf,
  .lieferanten-kopf,
  .gruppen-kopf,
  .lagerplaetze-kopf,
  .ruestscheine-kopf { display: none; }

  /* Bestandsübersicht:
       Pfeil  Bezeichnung (volle Breite)
              LVS-Nr.        Bestand Einheit
              Art            Bestand Einheit */
  .bestand-zeile > summary {
    grid-template-columns: 0.8rem minmax(0, 1fr) auto auto;
    grid-template-areas:
      "pfeil name name    name"
      ".     lvs  bestand einheit"
      ".     art  bestand einheit";
    gap: 0.15rem 0.35rem;
    padding: 0.7rem 0.8rem;
  }
  .bestand-zeile > summary > :nth-child(1) { grid-area: pfeil; }
  .bestand-zeile > summary > :nth-child(2) { grid-area: lvs; font-size: 0.85rem; color: #6b7885; }
  .bestand-zeile > summary > :nth-child(2)::before { content: "LVS "; }
  .bestand-zeile > summary > :nth-child(3) { grid-area: name; font-weight: 600; margin-bottom: 0.2rem; }
  .bestand-zeile > summary > :nth-child(4) { grid-area: art; font-size: 0.85rem; }
  .bestand-zeile > summary > :nth-child(5) { grid-area: bestand; font-weight: 600; font-size: 1.05rem; }
  .bestand-zeile > summary > :nth-child(6) { grid-area: einheit; }

  /* Lieferanten:
       Name            [Bearbeiten]
       Ansprechpartner [          ]
       Telefon · E-Mail */
  .lieferanten-zeile {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name kontakt"
      "ansp kontakt"
      "tel  tel"
      "mail mail";
    gap: 0.15rem 0.6rem;
    padding: 0.7rem 0.8rem;
  }
  .lieferanten-zeile > :nth-child(1) { grid-area: name; font-weight: 600; }
  .lieferanten-zeile > :nth-child(2) { grid-area: ansp; }
  .lieferanten-zeile > :nth-child(3) { grid-area: tel; }
  .lieferanten-zeile > :nth-child(4) { grid-area: mail; overflow-wrap: anywhere; }
  .lieferanten-zeile > :nth-child(5) { grid-area: kontakt; }
  .lieferanten-zeile > :nth-child(2),
  .lieferanten-zeile > :nth-child(3),
  .lieferanten-zeile > :nth-child(4) { font-size: 0.85rem; color: #6b7885; }

  /* Artikelgruppen / Lagerplätze:
       Name   12 Artikel  [Bearbeiten]
       Notiz (volle Breite) */
  .gruppen-zeile,
  .lagerplaetze-zeile {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "name  anzahl aktion"
      "notiz notiz  aktion";
    gap: 0.15rem 0.6rem;
    padding: 0.7rem 0.8rem;
  }
  .gruppen-zeile > :nth-child(1),
  .lagerplaetze-zeile > :nth-child(1) { grid-area: name; font-weight: 600; }
  .gruppen-zeile > :nth-child(2),
  .lagerplaetze-zeile > :nth-child(2) { grid-area: notiz; font-size: 0.85rem; color: #6b7885; }
  .gruppen-zeile > :nth-child(3),
  .lagerplaetze-zeile > :nth-child(3) { grid-area: anzahl; font-size: 0.85rem; color: #6b7885; }
  .gruppen-zeile > :nth-child(3)::after,
  .lagerplaetze-zeile > :nth-child(3)::after { content: " Artikel"; }
  .gruppen-zeile > :nth-child(4),
  .lagerplaetze-zeile > :nth-child(4) { grid-area: aktion; }

  /* Rüstscheine und Bestellungen (gleiches Raster):
       Kunde/Lieferant (volle Breite)          Status
       Nr. 12   Datum                      Pos. 1 / 3
       Auftrag (volle Breite)
       [Öffnen] [Archivieren] */
  .ruestscheine-zeile {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "kunde   kunde   status"
      "nr      datum   pos"
      "auftrag auftrag auftrag"
      "aktion  aktion  aktion";
    gap: 0.15rem 0.7rem;
    padding: 0.7rem 0.8rem;
  }
  .ruestscheine-zeile > :nth-child(1) { grid-area: nr; font-size: 0.85rem; font-weight: 600; }
  .ruestscheine-zeile > :nth-child(1)::before { content: "Nr. "; }
  .ruestscheine-zeile > :nth-child(2) { grid-area: datum; font-size: 0.85rem; color: #6b7885; }
  .ruestscheine-zeile > :nth-child(3) { grid-area: kunde; font-weight: 600; overflow-wrap: anywhere; }
  .ruestscheine-zeile > :nth-child(4) { grid-area: auftrag; font-size: 0.85rem; color: #6b7885; overflow-wrap: anywhere; }
  .ruestscheine-zeile > :nth-child(5) { grid-area: pos; font-size: 0.85rem; color: #6b7885; }
  .ruestscheine-zeile > :nth-child(5)::before { content: "Pos. "; }
  .ruestscheine-zeile > :nth-child(6) { grid-area: status; text-align: right; }
  .ruestscheine-zeile > :nth-child(7) { grid-area: aktion; margin-top: 0.4rem; }

  /* Leere Felder ("–") in Karten ganz weglassen statt als eigene Zeile */
  .leer-feld { display: none; }

  /* Positions-Tabellen (Rüstschein, Bestellung, Bestellvorschlag): jede
     Zeile als Karte, jede Zelle als "Beschriftung ....... Wert". Die
     Beschriftung kommt aus data-label am <td>, die Zelle mit
     class="karten-titel" wird fett als Überschrift der Karte gezeigt.
     So bleiben Verbuchen-/Entfernen-Knöpfe und Mengenfelder sichtbar,
     ohne dass man seitlich wischen muss. */
  .karten-tabelle thead { display: none; }
  .karten-tabelle,
  .karten-tabelle tbody,
  .karten-tabelle tr,
  .karten-tabelle td { display: block; width: 100%; }
  .karten-tabelle { background: transparent; }
  .karten-tabelle tr {
    display: flex;
    flex-direction: column;
    background: var(--farbe-flaeche);
    border: 1px solid var(--farbe-rand);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.6rem;
  }
  .karten-tabelle td,
  .tabelle-kompakt.karten-tabelle td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.2rem 0;
    border: none;
    text-align: right;
    font-size: 0.92rem;
  }
  .karten-tabelle td[data-label]::before {
    content: attr(data-label);
    color: #6b7885;
    font-size: 0.85rem;
    text-align: left;
    flex-shrink: 0;
    max-width: 50%;
  }
  .karten-tabelle td.karten-titel {
    order: -1; /* Bezeichnung immer zuoberst, auch wenn sie in der Tabelle nicht die erste Spalte ist */
    font-weight: 600;
    text-align: left;
    justify-content: flex-start;
    padding-bottom: 0.35rem;
  }
  /* Zelle mit Knöpfen (ohne Beschriftung): Knöpfe links, mit Abstand oben */
  .karten-tabelle td.aktionen { justify-content: flex-start; flex-wrap: wrap; padding-top: 0.5rem; }
  .karten-tabelle td.aktionen:empty { display: none; }
  .karten-tabelle td input { margin: 0; }
  /* Notizfeld (Bestellung) nutzt die verfügbare Breite statt fixer 5rem */
  .karten-tabelle td[data-label] form { flex: 1; min-width: 0; justify-content: flex-end; }
  .karten-tabelle td input[type="text"] { width: auto !important; flex: 1; min-width: 0; }
  .karten-tabelle td button { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
  /* Tabellen-Karten brauchen keinen seitlichen Scroll-Rahmen */
  .tabelle-scroll:has(> .karten-tabelle) { overflow: visible; }
}