/* Oberflaeche des Billbee-Ersatzes.
   Optik bewusst an Billbee angelehnt (Konzept 2a: nachbauen, nicht neu
   erfinden) - gruene Kopfleiste, helle Tabelle, gruene Hervorhebungen. */

:root {
  --gruen: #00b268;
  --gruen-dunkel: #009457;
  --gruen-hell: #e6f7ef;
  /* Flächenfarben seit v33 (Vorgabe Senol, 16.10.2026): Größere Hintergründe
     sind eisblau statt grün, mit Randstreifen links. Haken, Knöpfe, Chips und
     Markierungen bleiben grün. */
  --eisblau-dunkel: #eef4fb;   --streifen-dunkel: #104c98;
  --eisblau-hell: #f9fbfe;     --streifen-hell: #9db8dc;
  --blau-text: #0d3a73;
  --grau-zeile: #f6f6f4;   /* warmer Grauton fuer jede zweite Zeile */
  --grau-rand: #e2e2df;
  --grau-text: #6b6b66;
  --schrift: 13px;
}

* { box-sizing: border-box; }

/* Der Bildschirm wird von oben nach unten aufgeteilt: Kopfleiste,
   Werkzeugleiste, Filter, Tabelle, Blaetterleiste. Die Tabelle bekommt den
   Platz, der uebrig bleibt - sie rechnet ihn nicht aus.

   Vorher stand hier eine feste Rechnung (100vh minus 260 Pixel). Die stimmte
   nur, solange nichts aufgeklappt war: Sobald der Filterbereich offen war oder
   die Werkzeugleiste auf zwei Zeilen umbrach, schob die Tabelle die
   waagerechte Bildlaufleiste und die Blaetterleiste aus dem Bild. */
html, body { height: 100%; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--schrift);
  color: #23231f;
  background: #fff;
}

/* --- Kopfleiste --- */
.kopfleiste {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--gruen);
  color: #fff;
  padding: 0 18px;
  height: 44px;
}
.marke { font-weight: 600; font-size: 15px; }
.hauptnavigation { display: flex; gap: 20px; flex: 1; }
.hauptnavigation a {
  color: #fff; text-decoration: none; padding: 4px 2px;
  border-bottom: 2px solid transparent;
}
.hauptnavigation a.aktiv { border-bottom-color: #fff; font-weight: 600; }
.hauptnavigation a:hover { border-bottom-color: rgba(255,255,255,.5); }
/* Menuepunkte spaeterer Module: sichtbar, aber erkennbar noch nicht nutzbar */
.nav-spaeter { color: rgba(255,255,255,.55); cursor: not-allowed; }
.kopf-rechts { font-size: 12px; opacity: .9; }

main {
  padding: 12px 14px 0;
  flex: 1;              /* nimmt den Platz unter der Kopfleiste */
  display: flex;
  flex-direction: column;
  min-height: 0;        /* ohne dies waechst der Bereich ueber den Bildschirm */
  overflow: hidden;
}

/* Alles ausser der Tabelle behaelt seine eigene Hoehe. */
.werkzeugleiste, .filterchips, #massenbereich, #quellenbereich,
#verschmelzbereich { flex-shrink: 0; }

/* Filter- und Ansichtsbereich duerfen hoch werden, aber nicht den ganzen
   Bildschirm fuellen - sonst bliebe fuer die Tabelle nichts uebrig. */
.filterbereich { flex-shrink: 0; max-height: 42vh; overflow-y: auto; }

#tabellenbereich {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* --- Werkzeugleiste --- */
.werkzeugleiste {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px;
}
.bereichswahl, .suchmodus, .filtergruppe select {
  height: 30px; border: 1px solid var(--grau-rand); border-radius: 3px;
  background: #fff; padding: 0 6px; font-size: var(--schrift);
}
.bereichswahl { min-width: 190px; }
.suchmodus { max-width: 240px; }
.suchfeld {
  height: 30px; min-width: 240px; padding: 0 10px;
  border: 1px solid var(--grau-rand); border-radius: 3px;
  font-size: var(--schrift);
}
.suchfeld:focus, .bereichswahl:focus { outline: 2px solid var(--gruen); }

.wz-knopf {
  height: 30px; padding: 0 12px; border: 1px solid var(--grau-rand);
  background: #fff; border-radius: 3px; cursor: pointer;
  font-size: var(--schrift);
}
.wz-knopf:hover { background: var(--gruen-hell); border-color: var(--gruen); }
/* Knoepfe spaeterer Module - stehen an ihrem Platz, sind aber grau */
.wz-knopf.spaeter { color: #b0b0aa; cursor: not-allowed; background: #fafaf8; }
.wz-knopf.spaeter:hover { background: #fafaf8; border-color: var(--grau-rand); }

.trefferzahl { margin-left: auto; }
.treffer {
  background: var(--gruen-hell); color: #0b3d24;
  padding: 5px 12px; border-radius: 12px; font-weight: 600;
  white-space: nowrap;
}
.treffer-leer { background: #fdecec; color: #b3261e; }

.ladeanzeige { display: none; color: var(--grau-text); }
.htmx-request .ladeanzeige, .htmx-request.ladeanzeige { display: inline; }

/* --- Aktive Filter als Chips --- */
.filterchips {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 0 10px;
}
.chip-titel { color: var(--grau-text); }
.chip {
  background: var(--gruen-hell); border: 1px solid var(--gruen);
  color: var(--gruen-dunkel); border-radius: 11px; padding: 3px 10px;
  font-size: 12px;
}
.chip-loeschen { color: #b3261e; font-size: 12px; margin-left: 4px; }

/* --- Filterbereich --- */
.filterbereich {
  border: 1px solid var(--grau-rand); border-radius: 4px;
  background: #fcfcfb; padding: 12px; margin-bottom: 12px;
}
.filterbereich.versteckt { display: none; }
.filterspalten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.filtergruppe h3 {
  margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--grau-text);
}
.filtergruppe h3 small {
  display: block; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: #9a9a94; margin-top: 2px;
}
.filtergruppe label { display: block; margin-bottom: 8px; color: #444; }
.filtergruppe label select { display: block; width: 100%; margin-top: 3px; }
.filtergruppe-breit { grid-column: span 2; }

.bereichsfeld {
  display: flex; align-items: center; gap: 6px; margin-bottom: 7px;
  flex-wrap: wrap;
}
.bereichsfeld > span { min-width: 92px; color: #444; }
.bereichsfeld input {
  width: 88px; height: 28px; padding: 0 7px;
  border: 1px solid var(--grau-rand); border-radius: 3px;
}
.ohne-daten {
  font-size: 11px; color: #9a7b00; background: #fff8e1;
  padding: 1px 6px; border-radius: 8px; font-style: normal;
}
.tipp {
  display: block; font-size: 11px; color: var(--grau-text);
  font-style: normal; margin-left: 22px;
}

.qualitaetsliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px 16px;
}
.qualitaet { display: block; margin-bottom: 4px; cursor: pointer; }
.qualitaet input { margin-right: 6px; }

/* Gespeicherte Filter - mit sichtbarem Inhalt, anders als bei Billbee */
.gespeichert { list-style: none; margin: 0 0 10px; padding: 0; }
.gespeichert li {
  display: flex; align-items: baseline; gap: 8px; padding: 4px 0;
  border-bottom: 1px solid #f0f0ee;
}
.gespeichert-name { color: var(--gruen-dunkel); font-weight: 600; text-decoration: none; }
.gespeichert-name:hover { text-decoration: underline; }
.gespeichert-inhalt { color: var(--grau-text); font-size: 12px; flex: 1; }
.gespeichert-weg {
  border: none; background: none; color: #b3261e; cursor: pointer;
  font-size: 16px; line-height: 1;
}
.leerhinweis { color: var(--grau-text); margin: 0 0 10px; }
.speicherzeile { display: flex; gap: 6px; }
.speicherzeile input {
  flex: 1; height: 30px; padding: 0 8px;
  border: 1px solid var(--grau-rand); border-radius: 3px;
}

/* --- Tabelle --- */
.auswahlzeile { padding: 4px 2px 6px; color: #000; }

/* Der Tabellenrahmen scrollt IN SICH SELBST, waagerecht wie senkrecht.
   Vorher hing die waagerechte Bildlaufleiste am unteren Ende der Tabelle: Bei
   100 Zeilen musste man erst ganz nach unten scrollen, um die Tabelle
   ueberhaupt nach rechts schieben zu koennen. Durch die feste Hoehe sitzt die
   Leiste jetzt immer am unteren Rand des sichtbaren Bereichs.

   Die Hoehe richtet sich nach dem Fenster: alles ausser Kopfleiste,
   Werkzeugleiste, Filterchips und Blaetterleiste. */
.tabellenrahmen {
  overflow: auto;
  flex: 1;              /* bekommt den Rest - keine feste Hoehe mehr */
  min-height: 120px;
  border: 1px solid var(--grau-rand);
  overscroll-behavior: contain;
}
/* Die Bildlaufleisten deutlich sichtbar machen - die duennen Standardleisten
   sind bei einer so breiten Tabelle leicht zu uebersehen. */
.tabellenrahmen::-webkit-scrollbar { height: 14px; width: 14px; }
.tabellenrahmen::-webkit-scrollbar-track { background: #eeeeec; }
.tabellenrahmen::-webkit-scrollbar-thumb {
  background: #9a9a94; border-radius: 7px; border: 2px solid #eeeeec;
}
.tabellenrahmen::-webkit-scrollbar-thumb:hover { background: var(--gruen); }
.tabellenrahmen { scrollbar-color: #9a9a94 #eeeeec; scrollbar-width: auto; }
.artikeltabelle { border-collapse: collapse; width: 100%; white-space: nowrap; }

.artikeltabelle thead th {
  /* Kopfzeile bleibt beim Scrollen stehen. Bei Billbee scrollt sie weg -
     nach ein paar Zeilen weiss man dann nicht mehr, welche Spalte welche ist. */
  position: sticky; top: 0; z-index: 2;
  background: #fff; border-bottom: 2px solid var(--grau-rand);
  padding: 8px 9px; text-align: left; font-weight: 600; font-size: 12px;
  color: #55554f;
}
.artikeltabelle th.aus-rechts, .artikeltabelle td.aus-rechts { text-align: right; }
.artikeltabelle th.aus-mitte, .artikeltabelle td.aus-mitte { text-align: center; }
.artikeltabelle th.sortierbar { cursor: pointer; user-select: none; }
.artikeltabelle th.sortierbar:hover { color: var(--gruen-dunkel); }
.sortpfeil { color: var(--gruen); margin-left: 3px; }

.artikeltabelle td { padding: 6px 9px; border-bottom: 1px solid #efefec; }
/* Abwechselnd hell und etwas dunkler in einem warmen Grauton (Konzept 3.0a) */
.artikeltabelle tbody tr:nth-child(even) { background: var(--grau-zeile); }
.artikeltabelle tbody tr:hover { background: var(--gruen-hell); }
/* Nicht gelistete Varianten - Folge der 250er-Rotation bei eBay */
.artikeltabelle tbody tr.nicht-gelistet { background: #fff4e5; }
.artikeltabelle tbody tr.nicht-gelistet:hover { background: #ffe9cc; }

.sp-wahl, .sp-stift, .sp-pfeile { width: 30px; text-align: center; }
/* Auswahlkaestchen: im angeklickten Zustand leuchtend gruen (Konzept 3.0a) */
.zeilenwahl, .sp-wahl input { accent-color: var(--gruen); width: 15px; height: 15px; }

.stift { color: #8a8a84; cursor: pointer; }
a.stift { text-decoration: none; }
a.stift:hover { color: var(--gruen-dunkel); }
.stift-aus { color: #c4c4be; cursor: not-allowed; }
.pfeile { font-size: 15px; }
.pfeile-an { color: var(--gruen); }
.pfeile-aus { color: #c4c4be; }

.quellenliste { white-space: normal; min-width: 230px; }
.quelle { display: flex; gap: 5px; align-items: baseline; line-height: 1.5; }
.q-pfeil { font-size: 13px; }
.q-kanal { color: #55554f; }
.q-id { color: var(--grau-text); font-size: 12px; }

.vorschaubild {
  width: 30px; height: 30px; object-fit: cover; border-radius: 3px;
  vertical-align: middle;
}
.bild-platzhalter {
  display: inline-block; width: 30px; height: 30px; border-radius: 3px;
  background: repeating-linear-gradient(45deg, #f2f2f0, #f2f2f0 4px, #e9e9e6 4px, #e9e9e6 8px);
}
.leer { color: #c0c0ba; }
.keine-treffer td { padding: 28px; text-align: center; color: var(--grau-text); }

/* --- Blaetterleiste --- */
/* Blaetterleiste bleibt beim Scrollen immer am unteren Rand sichtbar.
   Vorher rutschte sie bei 100 Zeilen aus dem Bild - man musste ans Ende
   scrollen, um ueberhaupt blaettern zu koennen. */
.blaetterleiste {
  flex-shrink: 0;       /* rutscht nie aus dem Bild */
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px; padding: 10px 12px;
  background: #fff; border-top: 2px solid var(--grau-rand);
  box-shadow: 0 -2px 6px rgba(0,0,0,.06);
  margin: 0 -14px;   /* bis an den Rand des Inhaltsbereichs */
}
.seitengroesse, .seitenwahl { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
/* Schrift bewusst schwarz statt grau - die grauen Ziffern waren schlecht
   lesbar. */
.blaetterknopf {
  min-width: 32px; height: 30px; padding: 0 10px;
  border: 1px solid #9a9a94; background: #fff; color: #000;
  border-radius: 3px; cursor: pointer; font-size: 13px; font-weight: 500;
}
.blaetterknopf:disabled {
  color: #b0b0aa; border-color: var(--grau-rand); cursor: default;
}
.blaetterknopf.pfeil { font-size: 11px; }
.sprungknopf { background: var(--gruen-hell); border-color: var(--gruen); }
.blaetterknopf:hover { border-color: var(--gruen); }
/* Die aktuelle Seite ist gruen markiert (Konzept 3.0a) */
.blaetterknopf.aktiv {
  background: var(--gruen); border-color: var(--gruen);
  color: #fff; font-weight: 600;
}
.seitenangabe { color: #000; font-weight: 500; margin-right: 10px; }
.auslassung { color: #000; padding: 0 3px; }
.direktsprung { display: flex; gap: 5px; align-items: center; margin-left: 14px; }
.direktsprung label { color: #000; }
.sprungeingabe {
  width: 86px; height: 30px; padding: 0 7px; color: #000;
  border: 1px solid #9a9a94; border-radius: 3px;
}
/* Sichtbare Rueckmeldung bei einer Seitenzahl ausserhalb des Bereichs */
.sprungeingabe.fehleingabe {
  border-color: #b3261e; background: #fdecec;
}

/* --- Kanalschalter mit drei Stellungen --- */
.kanaltabelle { border-collapse: collapse; margin-bottom: 8px; }
.kanaltabelle th {
  font-weight: 400; font-size: 11px; color: var(--grau-text);
  padding: 0 10px 3px; text-align: center;
}
.kanaltabelle td { padding: 2px 10px; text-align: center; }
.kanaltabelle td.kanalname { text-align: left; padding-left: 0; min-width: 110px; }
.kanaltabelle input[type=radio] { accent-color: var(--gruen); }
.kanalmodus { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kanalmodus > span { color: var(--grau-text); }
.kanalmodus label { display: inline; margin: 0; cursor: pointer; }
.tipp-inline {
  display: block; width: 100%; font-size: 11px; color: var(--grau-text);
  font-style: normal; margin-top: 2px;
}

/* --- Ansicht: Spalten ein- und ausblenden (v14) --- */
.ansichtkopf {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 10px; margin-bottom: 10px;
}
.ansichtkopf h3 {
  margin: 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--grau-text);
}
.ansichtkopf h3 small {
  display: block; text-transform: none; letter-spacing: 0;
  font-weight: 400; color: #9a9a94; margin-top: 2px;
}
.ansicht-schnellwahl { display: flex; gap: 6px; }
.ansicht-anwenden {
  background: var(--gruen); border-color: var(--gruen);
  color: #fff; font-weight: 600;
}
.ansicht-anwenden:hover { background: var(--gruen-dunkel); }
.spaltenliste {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 3px 16px;
}
.spaltenwahl { display: block; cursor: pointer; color: #000; }
.spaltenwahl input { accent-color: var(--gruen); margin-right: 6px; }

/* --- Filter zuruecksetzen, dauerhaft sichtbar --- */
.zuruecksetzen {
  text-decoration: none; color: #000; margin-left: auto;
  display: inline-flex; align-items: center; height: 26px;
}
.filterchips { min-height: 34px; }

/* --- Rueckmeldung beim Speichern und Loeschen von Filtern --- */
.filtermeldung {
  background: var(--gruen-hell); border: 1px solid var(--gruen);
  color: #0b3d24; padding: 5px 10px; border-radius: 3px; margin: 0 0 8px;
}

/* --- Import-Einstellungen (v15) --- */
.seitentitel { font-size: 19px; margin: 4px 0 8px; }
.einleitung { color: #444; max-width: 70ch; margin: 0 0 14px; }
.warnkasten {
  border: 2px solid #b3261e; background: #fdecec; border-radius: 4px;
  padding: 12px 14px; margin-bottom: 18px; max-width: 80ch;
}
.warnkasten h3 { margin: 0 0 6px; font-size: 14px; color: #b3261e; }
.warnkasten p { margin: 0 0 8px; }
.warnkasten p:last-child { margin-bottom: 0; }
.schnellwahl {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.schnellwahl > span { color: var(--grau-text); }
.feldgruppe { margin-bottom: 18px; }
.feldgruppe h3 {
  margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--grau-text);
}
.strategietabelle { border-collapse: collapse; width: 100%; max-width: 900px; }
.strategietabelle th {
  font-size: 11px; font-weight: 600; color: #55554f; padding: 4px 8px;
  border-bottom: 2px solid var(--grau-rand); text-align: center;
}
.strategietabelle th.sp-feld { text-align: left; width: 45%; }
.strategietabelle td { padding: 5px 8px; border-bottom: 1px solid #efefec; text-align: center; }
.strategietabelle td.sp-feld { text-align: left; }
.strategietabelle tbody tr:nth-child(even) { background: var(--grau-zeile); }
.strategietabelle tr.gesperrt { background: #fafaf8; color: #8a8a84; }
.strategietabelle input[type=radio] { accent-color: var(--gruen); }
.feldhinweis {
  display: block; font-size: 11px; color: var(--grau-text); font-style: normal;
}
.knopfzeile { display: flex; gap: 8px; margin: 18px 0; }
.speichern { background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 600; }
.speichern:hover { background: var(--gruen-dunkel); }
.fusshinweis { color: #444; max-width: 80ch; font-size: 12px; }

/* --- Direktbearbeitung in der Tabelle (Modul 1e, v16) --- */
.zellfeld {
  width: 100%; min-width: 70px; max-width: 260px;
  border: 1px solid transparent; background: transparent;
  padding: 2px 4px; font: inherit; color: inherit; border-radius: 2px;
}
.zellfeld:hover { border-color: var(--grau-rand); background: #fff; }
.zellfeld:focus {
  outline: none; border-color: var(--gruen); background: #fff;
  box-shadow: 0 0 0 2px var(--gruen-hell);
}
/* Kurze gruene Bestaetigung nach dem Speichern. */
.zellfeld.gespeichert { animation: gespeichert 1.2s ease-out; }
@keyframes gespeichert {
  0%   { background: var(--gruen); color: #fff; }
  100% { background: transparent; color: inherit; }
}
.zellfeld.fehlerhaft { border-color: #b3261e; background: #fdecec; }
.zellfehler {
  display: block; color: #b3261e; font-size: 11px; margin-bottom: 2px;
}

.bearbeitenknopf { background: var(--gruen-hell); border-color: var(--gruen); }
.auswahlzeile { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }

/* --- Fenster der Massenbearbeitung --- */
.fensterhintergrund {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 200; overflow: auto;
}
.fenster {
  background: #fff; border-radius: 5px; width: 100%; max-width: 820px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3); padding: 0 0 14px;
}
.fensterkopf {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--gruen); color: #fff; padding: 10px 16px;
  border-radius: 5px 5px 0 0;
}
.fensterkopf h2 { margin: 0; font-size: 16px; }
.fenster-zu {
  background: none; border: none; color: #fff; font-size: 22px;
  cursor: pointer; line-height: 1;
}
.fensterhinweis { padding: 12px 16px 0; margin: 0 0 10px; color: #444; }
.reiterleiste {
  display: flex; gap: 2px; padding: 0 16px; border-bottom: 2px solid var(--grau-rand);
  flex-wrap: wrap;
}
.reiter {
  border: none; background: none; padding: 7px 12px; cursor: pointer;
  border-bottom: 3px solid transparent; font-size: 13px; color: #55554f;
}
.reiter.aktiv { border-bottom-color: var(--gruen); color: #000; font-weight: 600; }
.reiterinhalt { padding: 12px 16px; }
.reiterinhalt.versteckt { display: none; }
.massentabelle { width: 100%; border-collapse: collapse; }
.massentabelle td { padding: 6px 6px; border-bottom: 1px solid #efefec; vertical-align: top; }
.massentabelle td.sp-an { width: 26px; }
.massentabelle td.sp-name { width: 42%; }
.massentabelle input[type=checkbox] { accent-color: var(--gruen); }
.massentabelle input[type=text], .massentabelle select {
  width: 100%; max-width: 260px; height: 28px; padding: 0 7px;
  border: 1px solid var(--grau-rand); border-radius: 3px;
}
.massentabelle input:disabled, .massentabelle select:disabled {
  background: #f4f4f2; color: #a0a09a;
}
.prozentwahl {
  display: block; font-size: 11px; color: var(--grau-text); margin-top: 3px;
}
.fensterfuss {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px 0; border-top: 1px solid var(--grau-rand); margin-top: 8px;
}
.meldung-erfolg {
  background: var(--gruen-hell); border: 1px solid var(--gruen);
  color: #0b3d24; padding: 10px 14px; border-radius: 3px; margin: 12px 16px;
}
.meldung-fehler {
  background: #fdecec; border: 1px solid #b3261e; color: #7d1b14;
  padding: 10px 14px; border-radius: 3px; margin: 12px 16px;
}
.meldung-fehler ul { margin: 6px 0 0; padding-left: 18px; }
.zuruecknehmen { margin-top: 8px; }

/* --- Änderungsprotokoll --- */
/* Das Aenderungsprotokoll teilt sich den Platz mit der Tabelle, statt
   unterhalb des Bildschirmrands zu verschwinden. Beim Oeffnen wird die
   Tabelle entsprechend kuerzer - sichtbar statt unauffindbar. */
.protokollbereich {
  flex-shrink: 0;
  max-height: 34vh;
  overflow-y: auto;
  border: 1px solid var(--grau-rand); border-radius: 4px;
  padding: 12px; margin: 10px 0 0; background: #fcfcfb;
}
.protokollbereich.versteckt { display: none; }
.protokolltabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.protokolltabelle th {
  text-align: left; padding: 4px 8px; border-bottom: 2px solid var(--grau-rand);
  font-size: 11px; color: #55554f;
}
.protokolltabelle td { padding: 4px 8px; border-bottom: 1px solid #efefec; }
.protokolltabelle tr.zurueckgenommen { color: #a0a09a; text-decoration: line-through; }
.p-alt { color: #b3261e; }
.p-neu { color: var(--gruen-dunkel); font-weight: 600; }
.p-hinweis { color: #a0a09a; font-size: 11px; }
.wz-knopf.klein { height: 22px; padding: 0 8px; font-size: 11px; }
.p-fuss { color: var(--grau-text); font-size: 12px; margin: 8px 0 0; }

/* --- Spaltenbreiten ziehen (Modul 1e, v18) --- */
.artikeltabelle thead th { position: sticky; top: 0; }
.ziehgriff {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; user-select: none;
}
.ziehgriff:hover { background: var(--gruen); opacity: .5; }
.artikeltabelle thead th { position: relative; }
/* Waehrend des Ziehens keinen Text markieren - sonst wird beim Ziehen die
   halbe Tabelle blau hinterlegt. */
body.zieht-breite { user-select: none; cursor: col-resize; }
body.zieht-breite .zellfeld { pointer-events: none; }
/* Feste Breiten wirken nur, wenn die Tabelle sie nicht selbst verteilt. */
.artikeltabelle { table-layout: auto; }
.artikeltabelle th[style*="width"] { overflow: hidden; text-overflow: ellipsis; }

/* --- Quellen-Fenster (Modul 1e, v19) --- */
.quellenliste.anklickbar { cursor: pointer; border-radius: 3px; padding: 2px; }
.quellenliste.anklickbar:hover { background: var(--gruen-hell); }
.quellen-hinweis {
  display: block; font-size: 11px; color: var(--gruen-dunkel); margin-top: 2px;
  opacity: 0; transition: opacity .1s;
}
.quellenliste.anklickbar:hover .quellen-hinweis { opacity: 1; }
.fenster-breit { max-width: 940px; }
.quellen-werkzeug {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 0 16px 10px;
}
.alle-waehlen { display: flex; align-items: center; gap: 5px; color: #444; }
.alle-waehlen input { accent-color: var(--gruen); }
.loeschknopf { border-color: #b3261e; color: #b3261e; }
.loeschknopf:hover { background: #fdecec; border-color: #b3261e; }
.quellentabelle { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.quellentabelle th {
  text-align: left; padding: 6px 10px; font-size: 11px; color: #55554f;
  border-bottom: 2px solid var(--grau-rand); vertical-align: bottom;
}
.quellentabelle td { padding: 7px 10px; border-bottom: 1px solid #efefec; }
.quellentabelle th.q-mitte, .quellentabelle td.q-mitte { text-align: center; }
.quellentabelle th.q-rechts, .quellentabelle td.q-rechts { text-align: right; }
.quellentabelle td.q-wahl, .quellentabelle th.q-wahl { width: 30px; text-align: center; }
.quellenwahl { accent-color: var(--gruen); width: 15px; height: 15px; }
.q-id { font-family: monospace; font-size: 12px; color: #55554f; }
.q-plattform { font-weight: 600; }
/* Mehrfach auf demselben Kanal - genau die Karteileichen aus der
   250er-Rotation, die dieses Fenster beseitigen soll. */
.quellentabelle tr.mehrfach { background: #fff8e1; }
.q-warnung {
  display: block; font-size: 11px; color: #9a7b00; font-style: normal;
  font-weight: 400;
}
.hinweiskasten {
  background: #fff8e1; border: 1px solid #e0c060; border-radius: 3px;
  padding: 8px 12px; margin: 0 16px 12px; font-size: 12px; color: #6b5500;
}

/* --- Auswahlumschalter im Massenbearbeitungs-Fenster (v20) --- */
.auswahlumschalter {
  display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 16px 0;
}
.auswahlumschalter label {
  flex: 1; min-width: 220px; border: 1px solid var(--grau-rand);
  border-radius: 4px; padding: 8px 12px; cursor: pointer; color: #444;
}
.auswahlumschalter label.gewaehlt {
  border-color: var(--gruen); background: var(--gruen-hell); color: #0b3d24;
}
.auswahlumschalter input { accent-color: var(--gruen); margin-right: 6px; }
.warnzahl { color: #b3261e; font-size: 15px; }

/* --- Verschmelzen-Fenster (Modul 1e, v21) --- */
.verschmelztabelle { width: 100%; border-collapse: collapse; margin: 0 0 4px; }
.verschmelztabelle th {
  text-align: left; padding: 6px 10px; font-size: 11px; color: #55554f;
  border-bottom: 2px solid var(--grau-rand);
}
.verschmelztabelle td { padding: 8px 10px; border-bottom: 1px solid #efefec; }
.verschmelztabelle tbody tr { cursor: pointer; }
.verschmelztabelle tbody tr:hover { background: var(--grau-zeile); }
/* Der gewaehlte Hauptartikel ist deutlich hervorgehoben - seine Eigenschaften
   bleiben, das muss auf einen Blick erkennbar sein. */
.verschmelztabelle tbody tr.gewaehlt {
  background: var(--gruen-hell); box-shadow: inset 3px 0 0 var(--gruen);
}
.verschmelztabelle th.v-wahl, .verschmelztabelle td.v-wahl {
  width: 70px; text-align: center;
}
.verschmelztabelle th.v-rechts, .verschmelztabelle td.v-rechts { text-align: right; }
.verschmelztabelle input[type=radio] { accent-color: var(--gruen); width: 16px; height: 16px; }
.v-titel { max-width: 320px; }
.v-summe { padding: 0 16px; color: #444; margin: 6px 0 0; }
.dublettenliste { margin: 6px 0 0; font-size: 12px; }
.hinweiszeile { margin: 6px 0 0; font-size: 12px; color: #0b3d24; }

/* --- Stücklisten-Warnung beim Verschmelzen (v21) --- */
.stuecklistenwarnung { width: 100%; border-collapse: collapse; margin: 8px 0; }
.stuecklistenwarnung th {
  text-align: left; font-size: 11px; padding: 4px 8px;
  border-bottom: 1px solid #e0a0a0;
}
.stuecklistenwarnung td { padding: 4px 8px; border-bottom: 1px solid #f0d0d0; }
.zustimmung {
  display: flex; align-items: center; gap: 8px; margin-top: 8px;
  font-weight: 600; cursor: pointer;
}
.zustimmung input { accent-color: #b3261e; width: 16px; height: 16px; }
.wz-knopf.speichern:disabled {
  background: #c8c8c4; border-color: #c8c8c4; cursor: not-allowed;
}

/* --- Welcher Bereich ist offen? (v24) --- */
/* Ohne diese Markierung sieht man nicht, ob gerade der Filter- oder der
   Ansichtsbereich aufgeklappt ist. */
.wz-knopf.bereich-offen {
  background: var(--gruen);
  border-color: var(--gruen);
  color: #fff;
  font-weight: 600;
}
.wz-knopf.bereich-offen:hover { background: var(--gruen-dunkel); }

/* --- Zellen: Text statt Eingabefeld (v24) --- */
/* Die Zelle zeigt schlichten Text. Erst ein Klick macht daraus ein
   Eingabefeld. Vorher stand dort dauerhaft ein Kaestchen - bei langen Titeln
   passte der Text nicht hinein, und die Spaltenbreite half nicht. */
.zellwert {
  display: block;
  min-height: 18px;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zellwert:hover { border-color: var(--grau-rand); background: #fff; }
.zellwert.gespeichert { animation: gespeichert 1.2s ease-out; }
.zellwert.fehlerhaft { border-color: #b3261e; background: #fdecec; }

/* --- Bestandsampel (v24) --- */
/* Ganze Zelle einfaerben: unter 5 hellorange, unter 2 dunkelorange,
   0 oder darunter rot (festgelegt 04.09.2026). */
.artikeltabelle td.bestand-hell   { background: #ffe9c7 !important; }
.artikeltabelle td.bestand-dunkel { background: #ffcf8a !important; }
.artikeltabelle td.bestand-rot    { background: #ffbdb8 !important; }
.artikeltabelle tbody tr:hover td.bestand-hell   { background: #ffdfb0 !important; }
.artikeltabelle tbody tr:hover td.bestand-dunkel { background: #ffc372 !important; }
.artikeltabelle tbody tr:hover td.bestand-rot    { background: #ffaba5 !important; }

/* ==================================================================
   SEITENLEISTE UND GRUNDGERUEST (Konzept 3.0j, Paket v25)
   Nachgebaut nach Billbee: schmale Symbolleiste links, ein- und
   ausklappbar, Einstellungen unten abgesetzt.
   ================================================================== */

.rumpf {
  flex: 1;
  display: flex;
  min-height: 0;          /* sonst waechst der Bereich ueber den Bildschirm */
  overflow: hidden;
}

.seitenleiste {
  flex-shrink: 0;
  width: 190px;
  background: #fff;
  border-right: 1px solid var(--grau-rand);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: width .12s;
  overflow: hidden;
}
/* Eingeklappt: nur die Symbole. */
body.leiste-zu .seitenleiste { width: 48px; }
body.leiste-zu .leiste-name { display: none; }

.leiste-eintrag {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  color: #333;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  border-left: 3px solid transparent;
}
.leiste-eintrag:hover { background: var(--grau-zeile); }
.leiste-eintrag.aktiv {
  background: var(--gruen-hell);
  border-left-color: var(--gruen);
  color: #0b3d24;
  font-weight: 600;
}
/* Bereiche, die es noch nicht gibt. */
.leiste-eintrag.spaeter { color: #b0b0aa; cursor: default; }
.leiste-eintrag.spaeter:hover { background: none; }
.leiste-symbol { font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; }
.leiste-unten { border-top: 1px solid var(--grau-rand); padding-bottom: 4px; }
.leiste-klapp { color: var(--grau-text); font-size: 12px; }

/* --- Kopfleiste: Schalter und Benutzermenue --- */
.leiste-schalter {
  background: none; border: none; color: #fff; font-size: 17px;
  cursor: pointer; padding: 0 12px 0 0;
}
.leiste-schalter:hover { opacity: .8; }
.benutzermenue { position: relative; }
.benutzer-knopf {
  background: none; border: none; color: #fff; cursor: pointer;
  font: inherit; display: flex; align-items: center; gap: 7px; padding: 4px 6px;
  border-radius: 3px;
}
.benutzer-knopf:hover { background: rgba(255,255,255,.14); }
.benutzer-symbol { font-size: 15px; }
.pfeil-runter { font-size: 10px; opacity: .8; }
.benutzer-liste {
  position: absolute; right: 0; top: 100%; margin-top: 5px;
  background: #fff; border: 1px solid var(--grau-rand); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16); min-width: 170px; z-index: 300;
  overflow: hidden;
}
.benutzer-liste.versteckt { display: none; }
.benutzer-liste a {
  display: block; padding: 9px 14px; color: #333; text-decoration: none;
}
.benutzer-liste a:hover { background: var(--grau-zeile); }

/* --- Rahmenseite eines noch nicht gebauten Bereichs --- */
.rahmenkasten {
  border: 1px solid var(--grau-rand); border-radius: 4px;
  background: #fcfcfb; padding: 16px 20px; max-width: 70ch;
}
.rahmen-stand {
  background: var(--gruen-hell); border: 1px solid var(--gruen);
  border-radius: 3px; padding: 8px 12px; margin: 0 0 14px; color: #0b3d24;
}
.rahmenkasten h3 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--grau-text); margin: 0 0 8px;
}
.rahmen-liste { margin: 0 0 12px; padding-left: 20px; color: #333; }
.rahmen-liste li { margin-bottom: 5px; }
.rahmen-hinweis {
  color: var(--grau-text); font-size: 12px; margin: 0;
  border-top: 1px solid var(--grau-rand); padding-top: 10px;
}

/* --- Lagezeile ueber der Tabelle (Konzept 3.0j, Paket v25) --- */
/* Sie zeigt, welcher Bereich offen ist. Vorher stand dort immer derselbe
   Satz ueber Filter - auch wenn der Ansichtsbereich offen war. */
.lage { display: none; }
.lage-filter-zu { display: inline; }
body.filter-auf .lage-filter-zu,
body.ansicht-auf .lage-filter-zu { display: none; }
body.filter-auf .lage-filter-auf { display: inline; }
body.ansicht-auf .lage-ansicht-auf { display: inline; }
/* Beide offen kann nicht vorkommen - bereichUmschalten schliesst den anderen. */
.lagezeile-knoepfe { margin-left: auto; display: flex; gap: 6px; align-items: center; }
#lage_ansicht { display: none; }
body.ansicht-auf #lage_ansicht { display: inline-flex; }
body.ansicht-auf #lage_filter { display: none; }

/* ==================================================================
   UNTERMENUES, DASHBOARD, KACHELN (Konzept 3.0j, Paket v26)
   ================================================================== */

/* --- Untermenues in der Seitenleiste --- */
.leiste-gruppe { position: relative; }
.leiste-pfeil { margin-left: auto; font-size: 10px; opacity: .55; }
/* Unterpunkte erscheinen nur beim aktiven Bereich - sonst waere die Leiste
   bei sieben Bereichen mit Unterpunkten unuebersichtlich lang. */
.leiste-unterliste { display: none; padding: 2px 0 6px; background: #fafaf8; }
.leiste-gruppe.offen .leiste-unterliste { display: block; }
.leiste-unter {
  display: block; padding: 6px 14px 6px 44px; color: #55554f;
  text-decoration: none; font-size: 12.5px; white-space: nowrap;
  border-left: 3px solid transparent;
}
.leiste-unter:hover { background: var(--grau-zeile); color: #000; }
.leiste-unter.aktiv {
  color: #0b3d24; font-weight: 600; border-left-color: var(--gruen);
  background: var(--gruen-hell);
}
/* Eingeklappte Leiste zeigt keine Unterpunkte. */
body.leiste-zu .leiste-unterliste,
body.leiste-zu .leiste-pfeil { display: none; }

/* --- Dashboard --- */
.dash-kopf {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; flex-shrink: 0;
}
.dash-schalter { display: flex; gap: 6px; }
.dash-schalter label {
  border: 1px solid var(--grau-rand); border-radius: 4px; padding: 5px 14px;
  cursor: pointer; color: #444; background: #fff;
}
.dash-schalter label.gewaehlt {
  border-color: var(--gruen); background: var(--gruen-hell); color: #0b3d24;
  font-weight: 600;
}
.dash-schalter input { accent-color: var(--gruen); margin-right: 5px; }
.dash-karte {
  border: 1px solid var(--grau-rand); border-radius: 5px; background: #fff;
  padding: 14px 18px; margin-bottom: 14px; flex-shrink: 0;
}
.dash-kartenkopf {
  display: flex; align-items: center; justify-content: space-between;
}
.dash-karte h2 { font-size: 15px; margin: 0 0 4px; }
.dash-gross {
  background: none; border: 1px solid var(--grau-rand); border-radius: 3px;
  cursor: pointer; font-size: 15px; padding: 2px 8px; color: #55554f;
}
.dash-gross:hover { border-color: var(--gruen); color: var(--gruen-dunkel); }
.dash-legende {
  display: flex; gap: 16px; align-items: center; font-size: 12px;
  color: #55554f; margin: 8px 0 10px;
}
.legende-punkt {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  margin-right: 4px; vertical-align: -1px;
}
.legende-ebay  { background: #2f7d4f; }
.legende-etsy  { background: #8fce9e; }
.legende-woo   { background: #7fc4e8; }
.legende-summe { background: #2196c9; }
.dash-flaeche {
  border: 1px dashed var(--grau-rand); border-radius: 4px; background: #fbfbf9;
  min-height: 220px; display: flex; align-items: center; justify-content: center;
  transition: min-height .15s;
}
.dash-flaeche.gross { min-height: 520px; }
.dash-leer { color: var(--grau-text); text-align: center; margin: 0; padding: 20px; }

/* --- Kacheln der Einstellungen --- */
.kachelgruppe {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--grau-text); margin: 18px 0 8px;
}
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.kachel {
  border: 1px solid var(--grau-rand); border-radius: 5px; background: #fff;
  padding: 14px 10px; text-align: center; display: flex; flex-direction: column;
  align-items: center; gap: 5px;
}
.kachel-symbol { font-size: 22px; color: #55554f; }
.kachel-name { font-weight: 600; font-size: 13px; }
.kachel-hinweis { font-size: 11px; color: var(--grau-text); }
.kachel.gestrichen { background: #f6f6f4; color: #b0b0aa; border-style: dashed; }
.kachel.gestrichen .kachel-symbol { color: #c8c8c2; }
.kachel-weg { font-size: 11px; color: #b3261e; font-style: italic; }

/* Der Rumpf darf scrollen, wenn eine Seite laenger ist als der Bildschirm.
   Die Artikeluebersicht regelt ihre Hoehe selbst (siehe oben). */
main { overflow-y: auto; }

/* --- Anmeldeseite (Paket v28, Konzept 3.0k) ------------------------------
   Eigene Seite statt der Passwortabfrage des Browsers. Bewusst schlicht:
   Sie hat genau eine Aufgabe. */
body.anmeldeseite {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grau-zeile, #f4f5f4);
  margin: 0;
}
.anmeldekasten {
  background: #fff;
  border: 1px solid #d5ddd7;
  border-radius: 6px;
  padding: 28px 32px 32px;
  width: 22em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.anmeldekasten h1 { font-size: 1.15rem; margin: 0 0 18px; }
.anmeldekasten label {
  display: block;
  margin: 12px 0 4px;
  font-size: .86rem;
  color: #46504a;
}
.anmeldekasten input[type="text"],
.anmeldekasten input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid #c4d0c8;
  border-radius: 3px;
  font-size: .95rem;
}
.anmeldekasten button,
.anmeldekasten .wz-knopf { margin-top: 18px; width: 100%; text-align: center; }
.anmeldekasten .meldung-fehler { margin: 0 0 4px; }

/* Kanalreiter der Massenbearbeitung (Paket v28, Konzept 3.0f-2).
   Optisch abgesetzt, weil sie nicht den Artikel aendern, sondern seine
   Verknuepfung zum Kanal - ein anderer Gegenstand. */
.reiter.reiter-kanal { border-left: 2px solid #d5ddd7; font-style: italic; }
.reiter.reiter-kanal.aktiv { font-style: normal; }

/* Streichliste unter Einstellungen (Paket v30).
   Nach Bereichen gegliedert - ohne das waere eine Liste mit ueber dreissig
   Zeilen nicht mehr lesbar. */
.streich-zahl {
  font-weight: normal; font-size: .8rem; color: #5d6b62;
  margin-left: 8px;
}
.streich-bereich {
  font-size: .9rem; margin: 16px 0 4px; color: #14532d;
  border-bottom: 1px solid #e0e6e2; padding-bottom: 3px;
}
.streich-bereich:first-of-type { margin-top: 10px; }

/* --- Artikel-Detailseite (Paket v31, Konzept 3.0l) ----------------------
   Reiter wie bei Billbee: eine Leiste, darunter je Reiter eine Fläche.
   Bearbeitbare Reiter zeigen Beschriftung über dem Feld, zwei bis drei
   Felder nebeneinander. */
.detailseite { flex: 0 0 auto; max-width: 1200px; padding-bottom: 24px; }
.detailkopf { margin-bottom: 10px; }
.detailkopf .zurueck { font-size: 12px; color: var(--grau-text); text-decoration: none; }
.detailkopf .zurueck:hover { color: var(--gruen-dunkel); }
.detailkopf .seitentitel { margin: 4px 0 6px; }
.kopfangaben { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: #55554f; align-items: center; }
.marke-aktiv, .marke-inaktiv { padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.marke-aktiv { background: var(--gruen-hell); color: var(--gruen-dunkel); border: 1px solid var(--gruen); }
.marke-inaktiv { background: #f3f3f1; color: #8a8a84; border: 1px solid var(--grau-rand); }

.reiterleiste {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 2px solid var(--grau-rand); margin-bottom: 14px;
}
.reiterknopf {
  background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; padding: 8px 14px; font: inherit; font-size: 13px;
  color: #44443f; cursor: pointer;
}
.reiterknopf:hover:not(:disabled) { color: var(--gruen-dunkel); }
.reiterknopf.aktiv { border-bottom-color: var(--gruen); color: var(--gruen-dunkel); font-weight: 600; }
.reiterknopf:disabled { color: #c4c4be; cursor: not-allowed; }
/* Ungespeicherte Eingaben in diesem Reiter */
.reiterknopf.ungespeichert::after { content: " \25CF"; color: #d08a00; font-size: 10px; }

.reiterflaeche[hidden] { display: none; }
.reiterflaeche .meldung-erfolg, .reiterflaeche .meldung-fehler,
.reiterflaeche .hinweiskasten { margin: 0 0 12px; }
.reiterhinweis { font-size: 12px; color: var(--grau-text); margin: 0 0 12px; }

.detailraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px 20px;
}
.detailraster.einspaltig { grid-template-columns: 1fr; max-width: 800px; }
.detailfeld label { display: block; font-size: 12px; color: #55554f; margin-bottom: 3px; }
.detailfeld input, .detailfeld select, .detailfeld textarea {
  width: 100%; font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid #cfcfca; border-radius: 3px; background: #fff;
}
.detailfeld textarea { resize: vertical; }
.detailfeld input:focus, .detailfeld select:focus, .detailfeld textarea:focus {
  outline: none; border-color: var(--gruen); box-shadow: 0 0 0 2px var(--gruen-hell);
}
.detailfeld .zahlfeld { text-align: right; max-width: 160px; }
.detailfeld .fehlerhaft { border-color: #b3261e; background: #fdf6f6; }
.feldfehler { color: #b3261e; font-size: 11px; margin-top: 3px; }
.feldhinweis { color: var(--grau-text); font-size: 11px; margin-top: 3px; }
.festwert { font-size: 18px; font-weight: 600; padding: 2px 0; }
.html-quelle { font-family: monospace; font-size: 12px !important; }
.html-vorschau { margin-top: 4px; font-size: 12px; }
.html-vorschau summary { cursor: pointer; color: var(--gruen-dunkel); }
.html-vorschau iframe { width: 100%; height: 220px; border: 1px solid var(--grau-rand); background: #fff; margin-top: 4px; }

/* Texte: Feldname links, Deutsch und Englisch nebeneinander */
.textraster {
  display: grid; grid-template-columns: 170px 1fr 1fr; gap: 10px 16px; align-items: start;
}
.textraster-kopf { font-weight: 600; font-size: 12px; color: #44443f; border-bottom: 1px solid var(--grau-rand); padding-bottom: 4px; }
.textraster-titel { font-size: 12px; color: #55554f; padding-top: 6px; }

.reiterfuss {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
  padding-top: 12px; border-top: 1px solid var(--grau-rand);
}
.reiterfuss-hinweis { font-size: 11px; color: var(--grau-text); }

.detailtabelle { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
.detailtabelle th {
  text-align: left; padding: 5px 8px; font-size: 11px; color: #55554f;
  border-bottom: 2px solid var(--grau-rand);
}
.detailtabelle td { padding: 5px 8px; border-bottom: 1px solid #efefec; }
.detailtabelle .rechts { text-align: right; }
.detailtabelle .mitte { text-align: center; }
.detailtabelle tr.zurueckgenommen { color: #a0a09a; text-decoration: line-through; }
.detailbild { max-width: 320px; max-height: 320px; border: 1px solid var(--grau-rand); border-radius: 3px; }

.detailabschnitt { margin-top: 28px; }
.detailabschnitt h2 { font-size: 15px; margin: 0 0 8px; }
.detailabschnitt .meldung-fehler { margin: 0 0 8px; }

@media (max-width: 700px) {
  .textraster { grid-template-columns: 1fr; }
  .textraster-kopf:first-child { display: none; }
}
/* Preise: netto und brutto paarweise nebeneinander, Steuer darüber */
.detailraster.preisraster { grid-template-columns: repeat(2, minmax(200px, 280px)); }
.preisraster .detailfeld-steuer { grid-column: 1 / -1; max-width: 280px; }

/* ===== Bestellliste und Bestell-Detailseite (Modul 4, Vorbau Paket v32) ===== */

/* Zeilenfarbe je Kanal (Konzept 3.3a). Als Variable, damit das Überfahren
   mit der Maus die Zeile weiterhin hervorhebt. */
.bestelltabelle tbody tr.gefaerbt { background: var(--zeilenfarbe); }
.bestelltabelle tbody tr.gefaerbt:hover { background: var(--gruen-hell); }
.bestelltabelle td { vertical-align: top; }

/* Klappmenüs ("Mehr", Auswahlmenü) als <details> - ohne Skript. */
.klappmenue { position: relative; display: inline-block; }
.klappmenue > summary { list-style: none; cursor: pointer; }
.klappmenue > summary::-webkit-details-marker { display: none; }
.klappmenue > summary.wz-knopf { display: inline-flex; align-items: center; box-sizing: border-box; }
/* Die gespeicherten Filter haben lange Namen - die Auswahl soll die
   Werkzeugleiste nicht sprengen. */
#filterwahl { width: 200px; min-width: 0; }
.klappliste {
  position: absolute; left: 0; top: 100%; margin-top: 3px; z-index: 300;
  background: #fff; border: 1px solid var(--grau-rand); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0,0,0,.16); min-width: 230px; padding: 4px 0;
  white-space: normal; text-align: left; font-weight: normal;
}
.klapp-eintrag {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 7px 14px; font: inherit; font-size: 13px; color: #333; cursor: pointer;
}
.klapp-eintrag:hover:not(:disabled) { background: var(--gruen-hell); }
.klapp-eintrag.spaeter { color: #b0b0aa; cursor: not-allowed; }
.klapp-hinweis {
  font-size: 11px; color: var(--grau-text); padding: 6px 14px 4px;
  border-top: 1px solid var(--grau-rand); margin-top: 4px;
}
.auswahlmenue > summary { font-size: 13px; color: #55554f; padding: 0 2px; }

/* Links zu den Kanälen (Vorgabe 16.10.2026) */
.kanal-link { color: var(--gruen-dunkel); text-decoration: none; }
.kanal-link:hover { text-decoration: underline; }
.produkt-link { color: var(--gruen-dunkel); text-decoration: none; margin-left: 4px; opacity: .75; }
.produkt-link:hover { opacity: 1; }

/* Spalte Artikel */
.positionsliste { white-space: normal; min-width: 220px; max-width: 420px; }
.position { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.pos-anzahl { color: #55554f; flex-shrink: 0; }
.pos-sku { font-size: 11px; color: var(--grau-text); background: #f1f1ee; padding: 0 5px; border-radius: 3px; }
.pos-mehr { font-size: 11px; color: var(--grau-text); }
.pos-eigenschaft { font-size: 11px; color: #55554f; white-space: normal; }
.vorschaubild.klein, .bild-platzhalter.klein { width: 26px; height: 26px; }

.status {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  background: #f1f1ee; border: 1px solid var(--grau-rand); color: #44443f;
}
.status-bezahlt { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen-dunkel); }
.status-versendet, .status-abgeschlossen { background: #e9f1fb; border-color: #9bb8de; color: #23466f; }
.status-storniert, .status-geloescht, .status-reklamation { background: #fdecec; border-color: #e4a29d; color: #8c1d16; }
.tag {
  display: inline-block; font-size: 11px; padding: 0 6px; margin: 0 3px 2px 0;
  border-radius: 3px; background: #f1f1ee; border: 1px solid var(--grau-rand);
}
.verlauf-zahl { font-size: 11px; color: var(--grau-text); }

/* Filterbereich der Bestellliste */
.haken-liste { display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 2px 12px; margin-bottom: 10px; }
.filtergruppe label.haken, label.haken { display: block; margin-bottom: 3px; cursor: pointer; }
.haken input { margin-right: 5px; accent-color: var(--gruen); }
.bereichsfeld input[type="date"] { width: 140px; }
.land-zeitraum { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: flex-end; }
.land-zeitraum label select { min-width: 220px; }
.gespeichert-herkunft {
  font-size: 10px; text-transform: uppercase; letter-spacing: .3px; color: var(--grau-text);
  border: 1px solid var(--grau-rand); border-radius: 3px; padding: 0 4px;
}

/* Ansicht der Bestellliste */
.ansicht-optionen { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 12px; }
.ansicht-optionen select { margin-left: 6px; }
.kanalfarben { display: inline-flex; gap: 12px; }
.kanalfarbe { display: inline-flex; align-items: center; gap: 4px; }
.kanalfarbe input { width: 34px; height: 22px; padding: 0; border: 1px solid var(--grau-rand); }

/* Detailseite */
.kanalkennung { font-size: 12px; font-weight: normal; color: var(--grau-text); margin-left: 8px; }
.aktionsleiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.zweispaltig { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 16px 40px; }
.angaben { display: grid; grid-template-columns: 170px 1fr; gap: 5px 14px; margin: 0 0 14px; font-size: 13px; }
.angaben dt { color: #55554f; font-size: 12px; padding-top: 1px; }
.angaben dd { margin: 0; }
.angaben.einspaltig { grid-template-columns: 1fr; }
.angaben.einspaltig dd { margin-bottom: 10px; }
.angaben .offen, .detailtabelle .offen { color: #a0a09a; font-style: italic; }
.mehrzeilig { white-space: pre-wrap; }
.adressen { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; font-size: 13px; }
.adressen h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--grau-text); margin: 0 0 6px; }
.summenblock { margin: 8px 0 10px auto; border-collapse: collapse; font-size: 13px; min-width: 280px; }
.summenblock td { padding: 3px 8px; }
.summenblock tr.gesamt td { font-weight: 600; border-top: 1px solid var(--grau-rand); }
.summenblock .rechts { text-align: right; }
.marke-intern { font-size: 10px; color: #8a5a00; background: #fff4e0; border-radius: 3px; padding: 0 4px; }
.neue-bemerkung { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.neue-bemerkung textarea { flex: 1 1 100%; max-width: 700px; font-family: inherit; }
.offen-kasten { margin-top: 18px; }
@media (max-width: 800px) {
  .zweispaltig, .adressen { grid-template-columns: 1fr; }
}

/* --- Einstellungen I: Auftragsdokumente und Steuer (Paket v33) ---
   Gebaute Kacheln sind Verweise; die übrigen nennen ihr Paket. Die
   Einstellungsseiten nutzen Reiter, Felder und Protokoll der
   Artikel-Detailseite. */
a.kachel { text-decoration: none; color: inherit; }
.kachel.kachel-gebaut { border-color: var(--gruen); }
.kachel.kachel-gebaut:hover { background: var(--gruen-hell); }
.kachel-paket { font-size: 10px; color: #a0a09a; font-style: italic; }
.reiterknopf.reiter-gestrichen { text-decoration: line-through; }
.einstellungsliste { display: flex; flex-direction: column; gap: 14px; max-width: 760px; }
.einstellungszeile .einstellungstitel { display: block; font-size: 12px; color: #55554f; margin-bottom: 3px; }
.einstellungszeile input[type="text"], .einstellungszeile textarea, .einstellungszeile input[type="date"] {
  font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid #cfcfca; border-radius: 3px; background: #fff;
}
.einstellungszeile input[type="text"], .einstellungszeile textarea { width: 100%; max-width: 560px; }
.einstellungszeile textarea { max-width: 760px; }
.einstellungszeile textarea { resize: vertical; }
.einstellungszeile input.zahlfeld { width: 110px; text-align: right; }
.einstellungszeile .datumfeld { width: 150px; }
.einstellungszeile input.ustidfeld { width: 220px; }
.einstellungszeile .fehlerhaft { border-color: #b3261e; background: #fdf6f6; }
.einstellungszeile input:focus, .einstellungszeile textarea:focus {
  outline: none; border-color: var(--gruen); box-shadow: 0 0 0 2px var(--gruen-hell);
}
.schalter { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.schalter input { accent-color: var(--gruen); width: 16px; height: 16px; margin: 0; }
.festeinstellung { font-size: 13px; font-weight: 600; padding: 3px 0; }
.startwert { color: #8a5a00; }
.hinweiskasten.warnung { margin: 0 0 12px; }
.begriffstabelle { max-width: 760px; }
.begriffstabelle td { vertical-align: top; }
.begriffstabelle tr.abweichend td:first-child { font-weight: 600; }
.begriffstabelle .detailfeld input { max-width: 380px; }
.nummernkreistabelle td { vertical-align: top; }
.nummernkreistabelle .detailfeld input { min-width: 70px; }
.nummernkreistabelle .nk-name input { min-width: 300px; }
.einstellungsseite { max-width: 1300px; }
.einstellungsseite .reiterknopf { padding: 8px 11px; }
.nummernkreistabelle .nk-naechste_nummer input { width: 110px; }
.nummernkreistabelle .nk-stellen input { width: 56px; }
.nummernkreistabelle .nk-praefix input, .nummernkreistabelle .nk-suffix input { width: 90px; }
.nummernkreistabelle .nk-kommentar input { min-width: 120px; }
.nk-vorschau code { font-size: 13px; background: #f3f3f1; padding: 2px 6px; border-radius: 3px; }
.logokasten { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-bottom: 10px; }
.belegelogo { max-width: 380px; border: 1px solid var(--grau-rand); border-radius: 3px; background: #fff; padding: 8px; }
.logodaten { display: grid; grid-template-columns: 110px 1fr; gap: 5px 12px; font-size: 13px; margin: 0; }
.logodaten dt { color: #55554f; font-size: 12px; }
.logodaten dd { margin: 0; }
.klein-link { text-decoration: none; color: var(--grau-text); margin-left: 4px; }
.klein-link:hover { color: var(--gruen-dunkel); }

/* --- Flächenfarben eisblau statt grün (Paket v33, Vorgabe vom 16.10.2026) ---
   Zwei Stufen, je mit Randstreifen links:
     Eisblau dunkel #eef4fb, Streifen #104c98 - gewählt, aktiv, unter der Maus
     Eisblau hell   #f9fbfe, Streifen #9db8dc - Hinweis- und Meldungskästen,
                                                Filter- und Rahmenflächen
   Die Kopfleiste und die Köpfe der Fenster sind dunkelblau #104c98.
   Kleine Bedienelemente bleiben grün: Haken, Knöpfe, Chips, Trefferzahl,
   Statusmarken, Fokusrahmen. Die Regeln stehen hier gesammelt und
   überschreiben die älteren weiter oben - so bleibt der Wechsel an einer
   Stelle nachvollziehbar und lässt sich mit einem Block zurücknehmen. */

/* Kopfleiste und Fensterköpfe dunkelblau (bestätigt 16.10.2026) */
.kopfleiste, .fensterkopf { background: var(--streifen-dunkel); }

/* Gewählt und aktiv */
.leiste-eintrag.aktiv, .leiste-unter.aktiv {
  background: var(--eisblau-dunkel); border-left-color: var(--streifen-dunkel);
  color: var(--blau-text);
}
/* Der Streifen sitzt an der ersten Zelle: Einen Schatten an der Tabellenzeile
   selbst zeichnen nicht alle Browser. */
.verschmelztabelle tbody tr.gewaehlt { background: var(--eisblau-dunkel); box-shadow: none; }
.verschmelztabelle tbody tr.gewaehlt > td:first-child { box-shadow: inset 3px 0 0 var(--streifen-dunkel); }
.auswahlumschalter label.gewaehlt, .dash-schalter label.gewaehlt {
  background: var(--eisblau-dunkel); border-color: var(--streifen-hell);
  box-shadow: inset 3px 0 0 var(--streifen-dunkel); color: var(--blau-text);
}

/* Unter der Maus */
.artikeltabelle tbody tr:hover, .bestelltabelle tbody tr.gefaerbt:hover,
.quellenliste.anklickbar:hover { background: var(--eisblau-dunkel); }
.artikeltabelle tbody tr:hover > td:first-child,
.bestelltabelle tbody tr.gefaerbt:hover > td:first-child {
  box-shadow: inset 3px 0 0 var(--streifen-hell);
}
.klapp-eintrag:hover:not(:disabled), .kachel.kachel-gebaut:hover {
  background: var(--eisblau-dunkel);
}

/* Hinweis- und Meldungskästen */
.meldung-erfolg, .filtermeldung, .rahmen-stand {
  background: var(--eisblau-hell); border: 1px solid var(--streifen-hell);
  border-left: 3px solid var(--streifen-dunkel); color: var(--blau-text);
}

/* Flächen */
.filterbereich, .rahmenkasten {
  background: var(--eisblau-hell); border-color: #dfe7f2;
  border-left: 3px solid var(--streifen-hell);
}

/* --- Einstellungen II (Paket v34) ------------------------------------------ */

/* Breite Tabellen in eigenem Rahmen mit waagerechter Bildlaufleiste. In einem
   schmalen Fenster wurde die Nummernkreis-Tabelle rechts abgeschnitten
   (Sichtprüfung 16.10.2026, Browserfenster der App, 800 px). */
.tabellenrahmen { overflow-x: auto; max-width: 100%; margin-bottom: 8px; }
.tabellenrahmen > table { margin-bottom: 0; }

.einstellungstabelle td { vertical-align: top; }
.einstellungstabelle .zeilentitel { white-space: nowrap; }
/* Feste Breiten: In einer Tabelle mit automatischer Spaltenbreite schrumpft
   ein Feld mit width:100% sonst auf wenige Zeichen. Der Rahmen darum scrollt. */
.einstellungstabelle td.detailfeld input[type="text"] { width: 150px; }
.einstellungstabelle td.detailfeld input.zahlfeld { width: 80px; }
.einstellungstabelle td.sp-name input[type="text"] { width: 240px; }
.einstellungstabelle td.sp-tracking input[type="text"] { width: 400px; }
.einstellungstabelle td.sp-server input[type="text"],
.einstellungstabelle td.sp-absender input[type="text"],
.einstellungstabelle td.sp-konto input[type="text"] { width: 250px; }
.einstellungstabelle td.sp-produkte { min-width: 220px; }
.einstellungstabelle td.sp-anbieter { min-width: 150px; }
.einstellungstabelle .festeinstellung { font-weight: 400; min-width: 140px; }
.einstellungstabelle .fehlerhaft { border-color: #b3261e; background: #fdf6f6; }
.einstellungstabelle .feldhinweis { max-width: 320px; }
.leerzelle { color: #a0a09a; }

/* "offen": noch nicht belegt oder kommt mit einem späteren Modul. */
.offeneinstellung { font-weight: 400; font-style: italic; color: #7a7a72; }

.einstellungszeile select, .einstellungstabelle select {
  font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #cfcfc8;
  border-radius: 3px; background: #fff;
}
.einstellungszeile input.langfeld { max-width: 560px; }

/* --- Automatisierung (Modul-11-Vorbau, Paket v35) --------------------------
   Regelliste nach Auslöser gruppiert wie in Billbee, Vorlagen mit
   "benutzt von", Formulare für Regel und Vorlage. */
.keine-ausfuehrung { max-width: 900px; }
.regelleiste { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.regelleiste a.wz-knopf { text-decoration: none; display: inline-flex; align-items: center; }
.regeltabelle td, .vorlagentabelle td, .benachrichtigungstabelle td { vertical-align: top; }
.regeltabelle .gruppenzeile td {
  background: var(--eisblau-dunkel); box-shadow: inset 3px 0 0 var(--streifen-dunkel);
  color: var(--blau-text); font-weight: 600; font-size: 12px; padding: 6px 8px;
}
.gruppenzahl { font-weight: 400; color: var(--grau-text); margin-left: 8px; }
.regeltabelle tr.regel-aus td.r-name a { color: #8a8a84; }
.r-pfeile { white-space: nowrap; width: 54px; }
.pfeilknopf {
  font-size: 10px; line-height: 1; padding: 3px 5px; border: 1px solid var(--grau-rand);
  background: #fff; border-radius: 3px; cursor: pointer; color: #44443f;
}
.pfeilknopf:hover:not(:disabled) { border-color: var(--gruen); color: var(--gruen-dunkel); }
.pfeilknopf:disabled { color: #d0d0ca; cursor: default; }
.r-nr { white-space: nowrap; }
.billbee-nr { font-size: 10px; color: var(--grau-text); }
.r-name { min-width: 170px; }
.r-name a, .r-aktion a, .v-nutzer a { color: var(--blau-text); }
.r-wann { min-width: 100px; }
.r-bed { min-width: 160px; }
.r-bed div + div { margin-top: 2px; }
.r-aktion { min-width: 160px; }
.r-bemerkung { min-width: 170px; max-width: 260px; }
.r-hinweis { font-style: italic; }
.stiftlink { text-decoration: none; color: var(--grau-text); font-size: 14px; }
.stiftlink:hover { color: var(--gruen-dunkel); }
.v-betreff { min-width: 220px; }
.v-text { min-width: 200px; max-width: 320px; color: #55554f; }
.unbenutzt { color: #8a5a00; font-style: italic; }
.v-nutzer { white-space: nowrap; }
.benachrichtigungstabelle { max-width: 760px; }
.benachrichtigungstabelle tr.muss-sichtbar td { background: #fff8ea; }

.formularabschnitt { font-size: 14px; margin: 20px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--grau-rand); max-width: 760px; }
.formularabschnitt:first-of-type { margin-top: 6px; }
.formularzusatz { font-size: 11px; font-weight: 400; color: var(--grau-text); margin-left: 8px; }
.hakenliste { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.einstellungszeile input.laenderfeld { max-width: 260px; }
.einstellungszeile select { min-width: 260px; }
.loeschbereich { margin-top: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.loeschknopf:hover { border-color: #b3261e; color: #b3261e; background: #fdf6f6; }
.vorlagennutzer { font-size: 12px; margin: 0 0 12px; }
.vorlagennutzer a { color: var(--blau-text); }

.vorlagenraster { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.vorlagenraster .einstellungsliste { max-width: none; }
.vorlagenraster .einstellungszeile input[type="text"], .vorlagenraster .einstellungszeile textarea { max-width: none; }
.einstellungszeile textarea.mailtext { max-width: none; min-height: 320px; font-size: 13px; }
.platzhalterkasten {
  background: var(--eisblau-hell); border: 1px solid #dfe7f2; border-left: 3px solid var(--streifen-hell);
  padding: 10px 12px; font-size: 12px;
}
.platzhalterkasten h3 { font-size: 13px; margin: 0 0 4px; }
.platzhalterliste { margin: 8px 0; }
.platzhalterliste dt code { font-size: 11px; background: #fff; padding: 1px 4px; border-radius: 3px; }
.platzhalterliste dt.benutzt code { font-weight: 700; color: var(--blau-text); }
.platzhalterliste dt { margin-top: 6px; }
.platzhalterliste dd { margin: 1px 0 0 10px; color: #55554f; }
.mailvorschau { margin-top: 16px; max-width: 900px; }
.mailvorschau iframe { height: 520px; }
.vorschaubetreff { font-size: 12px; margin: 6px 0; }
.textvorschau {
  white-space: pre-wrap; font-family: inherit; font-size: 13px; background: #fff;
  border: 1px solid var(--grau-rand); padding: 10px; margin: 4px 0 0;
}
@media (max-width: 900px) {
  .vorlagenraster { grid-template-columns: 1fr; }
}
.einstellungsseite .hinweiskasten { margin: 0 0 12px; }
.verbindung-aus { color: #b3261e; }

/* --- Dashboard, Versand, Zahlungsabgleich, Berichte (Paket v36) -----------
   Alle Berichte haben oben ein GET-Formular mit Billbees Steuerelementen
   (Shops, Datum nach, Von/Bis), darunter das Ergebnis. Beim Drucken fällt
   das Formular weg. */
.berichtsseite { max-width: 1300px; padding-bottom: 24px; }
.berichtsformular {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-start;
  background: var(--eisblau-hell); border: 1px solid #dfe7f2;
  border-left: 3px solid var(--streifen-hell); padding: 10px 12px; margin: 0 0 14px;
}
.berichtsfeld { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; max-width: 520px; }
.berichtsfeld legend { font-size: 11px; color: #55554f; font-weight: 600; padding: 0; margin-bottom: 4px; width: 100%; }
.berichtsfeld input[type="date"], .berichtsfeld select {
  font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #cfcfc8; border-radius: 3px; background: #fff;
}
.berichtsbeschriftung { font-size: 12px; color: #55554f; }
.berichtsfeld .schalter.gesperrt { color: #a0a09a; cursor: not-allowed; }
.berichtsknoepfe { display: flex; gap: 8px; align-items: flex-end; align-self: flex-end; }
.berichtshinweis { margin: 0 0 12px; }
.berichtsueberschrift { font-size: 15px; margin: 18px 0 8px; }
.berichtsueberschrift .trefferzahl { font-size: 12px; font-weight: 400; color: var(--grau-text); margin-left: 8px; }
.berichtstabelle td { vertical-align: top; }
.berichtstabelle .rechts { text-align: right; white-space: nowrap; }
.adresszelle { min-width: 180px; }
.positionszelle { min-width: 260px; }
.kontentabelle { max-width: 760px; }
.gruppenkacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0 0 8px; }
.gruppenkachel {
  border: 1px solid var(--grau-rand); border-radius: 4px; padding: 10px 12px; background: #fff;
  display: flex; flex-direction: column; gap: 4px;
}
.gruppenkopf { font-weight: 600; font-size: 13px; }
.gruppenkachel .wz-knopf { margin-top: 6px; align-self: flex-start; }
.berichtskacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 14px; }
.berichtskachel { text-align: left; align-items: flex-start; }
.dash-zeitraum { font-size: 12px; color: #55554f; display: inline-flex; gap: 6px; align-items: center; }
.dash-zeitraum select { font: inherit; font-size: 13px; padding: 3px 6px; border: 1px solid #cfcfc8; border-radius: 3px; }

@media print {
  .seitenleiste, .kopfleiste, .nicht-drucken, .berichtshinweis { display: none !important; }
  body { overflow: visible; display: block; }
  .tabellenrahmen { overflow: visible; }
}

/* --- Paket v37: Bestell-Detailseite, Nachtrag aus Durchgang 04 --- */
.lagerhaken { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 10px 0 4px; }
.lagerhaken label.haken { margin: 0; cursor: default; }

/* Selbstprüfung v36 (17.10.2026): Auf den Berichtsseiten ist der Tabellenrahmen
   nur so hoch wie seine Tabelle - die Mindesthöhe der Listen ließ unter kurzen
   Tabellen ein leeres Band stehen. Beschriftung und Datumsfeld bleiben beisammen. */
.berichtsseite .tabellenrahmen { flex: none; min-height: 0; }
.berichtsseite .kontentabelle, .berichtsseite .benachrichtigungstabelle { max-width: none; }
.feldpaar { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* --- Paket v38: Reiter „Weitere Bestellungen" - Rahmen nur so hoch wie die Tabelle --- */
.tabellenrahmen.kurzrahmen { flex: none; min-height: 0; }