/* 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;
}
/* Seit v86 (Modul 12): die Farben folgen dem Kanal – geprüfte Palette, siehe
   app/modul_12_statistik/diagramm.py. */
.legende-ebay  { background: #43a047; }   /* seit v151 die Farben wie Billbee */
.legende-etsy  { background: #74ca49; }
.legende-woo   { background: #00acc1; }
.legende-summe { background: #039be5; }
.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: flex-start; gap: 5px; margin-bottom: 4px; }
.pos-anzahl { color: #55554f; flex-shrink: 0; }
/* Seit v56: Titel und darunter die SKU in einer Zeile, nicht umbrochen. */
.pos-text { display: flex; flex-direction: column; min-width: 0; }
.pos-sku { font-size: 11px; color: var(--grau-text); white-space: nowrap; letter-spacing: .02em; }
.pos-sku::before { content: "SKU "; color: #9a9a92; }
.position .produkt-link { flex-shrink: 0; }
.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"],
.einstellungszeile input[type="password"] {   /* Kennwortfelder seit v68 wie die übrigen */
  font: inherit; font-size: 13px; padding: 5px 7px;
  border: 1px solid #cfcfca; border-radius: 3px; background: #fff;
}
.einstellungszeile input[type="text"], .einstellungszeile textarea,
.einstellungszeile input[type="password"] { 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; }

/* --- Seit v40: Artikel-Detailseite – Bemerkungen, Dateien, Texte --- */
.extraliste { margin-top: 18px; border-top: 1px solid var(--grau-rand); padding-top: 12px; }
.extraliste-titel { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.extraformular { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.extraformular textarea { flex: 1 1 320px; min-height: 44px; font: inherit; font-size: 12px; }
.extraformular label { display: flex; flex-direction: column; font-size: 12px; gap: 3px; }
.extraformular input[type=text] { min-width: 220px; }
.detailtabelle td form { margin: 0; }
.detailtabelle td input[type=text] { width: 100%; box-sizing: border-box; font-size: 12px; }
.detailtabelle .spalte-datum { white-space: nowrap; width: 1%; }
.linkknopf { background: none; border: 0; padding: 0; color: var(--gruen-dunkel); font-size: 12px;
  text-decoration: underline; cursor: pointer; margin-bottom: 8px; }
.textleiste { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.zeichenzaehler { font-size: 11px; color: var(--grau-text); margin-top: 2px; }
.zeichenzaehler.zu-lang { color: #b3261e; }
input.gesperrt { background: #f3f3f0; color: #8a8a84; }
@media (max-width: 900px) {
  .extraformular input[type=text] { min-width: 0; width: 100%; }
  .extraformular label { flex: 1 1 100%; }
}

/* Seit v40: Zahl der gesetzten Filter am Knopf „Filter" */
.filterzahl { display: inline-block; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--gruen-dunkel); color: #fff; font-size: 10px; font-weight: 600;
  text-align: center; margin-left: 4px; box-sizing: border-box; }
.filterzahl.versteckt { display: none; }

/* Seit v40: Monatsachse der Jahresvergleichs-Grafik */
.jahresgrafik { margin-bottom: 14px; }
.monatsachse { position: relative; }
.monatsleiste { position: absolute; left: 12px; right: 12px; bottom: 8px; display: flex;
  justify-content: space-between; font-size: 11px; color: var(--grau-text);
  border-top: 1px solid var(--grau-rand); padding-top: 4px; }

/* Seit v40: Einstellungen suchen */
.einstellungssuche { position: relative; max-width: 520px; margin: 0 0 14px; }
.einstellungssuche input { width: 100%; box-sizing: border-box; height: 32px; padding: 0 10px; font-size: 13px; }
.suchtreffer { list-style: none; margin: 4px 0 0; padding: 4px 0; border: 1px solid var(--grau-rand);
  background: #fff; max-height: 360px; overflow-y: auto; }
.suchtreffer li a { display: block; padding: 5px 10px; text-decoration: none; color: inherit; font-size: 12px; }
.suchtreffer li a:hover { background: var(--gruen-hell); }
.suchtreffer .treffer-ort { color: var(--grau-text); margin-left: 6px; }
.suchtreffer .keine-treffer { padding: 5px 10px; color: var(--grau-text); font-size: 12px; }

/* Seit v40: Unterfeld eines besonderen Filters (Bestellliste) */
.unterfeld { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 4px 22px; font-size: 12px; }
.kurzzahl { width: 64px; }
.extraliste.ohne-linie { margin-top: 0; border-top: 0; padding-top: 0; }

/* Seit v41: Kopieren, Löschen, Papierkorb */
.verwaltkasten { position: relative; border: 1px solid var(--grau-rand); background: #fff;
  border-radius: 4px; padding: 12px 16px; margin: 10px 0; font-size: 13px; }
.verwaltkasten.warnkasten { border-color: #e2a199; background: #fff8f7; }
.verwaltkasten h3 { margin: 0 0 8px; font-size: 14px; }
.verwalt-zu { position: absolute; right: 8px; top: 6px; background: none; border: 0;
  font-size: 18px; cursor: pointer; color: var(--grau-text); }
.verwaltliste { margin: 4px 0 8px 18px; padding: 0; }
.verwaltliste li { margin: 2px 0; }
.warnliste { margin: 4px 0 8px 18px; padding: 0; color: #8a2a20; }
.wz-knopf.gefahr { background: #b3261e; border-color: #b3261e; color: #fff; }
.wz-knopf.gefahr:hover { background: #8f1d17; }
.bestaetigung { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.neu-menue .klappliste { min-width: 170px; }

/* Seit v41: Artikelimport und Import-Protokoll */
.importraster { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
.importspalte { background: #fff; border: 1px solid var(--grau-rand); border-radius: 4px; padding: 12px 16px; }
.importtitel { font-size: 13px; font-weight: 600; margin: 14px 0 8px; text-transform: uppercase;
  letter-spacing: .03em; color: #44443f; }
.importtitel:first-child { margin-top: 0; }
.importtitel .klein-link { text-transform: none; font-weight: normal; margin-left: 8px; }
.definitionswahl select { width: 100%; }
.definitionsliste { list-style: none; margin: 8px 0; padding: 0; font-size: 12px; }
.definitionsliste li { display: flex; gap: 6px; align-items: baseline; padding: 3px 0; }
.strategieliste { margin-top: 10px; font-size: 12px; }
.strategieliste summary { cursor: pointer; color: var(--gruen-dunkel); }
.quellwahl { display: block; font-size: 13px; margin: 6px 0 2px; }
.quellfeld { margin: 0 0 6px 22px; }
.schieber { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 8px; }
.schieber.gesperrt { color: #a0a09a; }
.schieberhinweis { margin-left: 22px; }
.importknoepfe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0; }
.definitionspeichern { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.importlauf { margin-top: 12px; }
.fortschritt { height: 10px; background: #efefec; border-radius: 5px; overflow: hidden; margin: 6px 0; }
.fortschritt-balken { height: 100%; background: var(--gruen-dunkel); transition: width .4s; }
.importbericht { background: #fafaf8; border: 1px solid var(--grau-rand); padding: 10px; font-size: 11px;
  max-height: 480px; overflow: auto; white-space: pre; }
.berichtszeile td { background: #fafaf8; }
@media (max-width: 900px) { .importraster { grid-template-columns: 1fr; } }
.werkzeugleiste a.wz-knopf { text-decoration: none; display: inline-flex; align-items: center; color: inherit; box-sizing: border-box; }

/* --- Stücklisten-Fenster, Lagerartikel, Herauslösen (Modul 1e, v42) --- */
.typ-stueckliste {
  cursor: pointer; color: var(--gruen-dunkel); border-radius: 3px; padding: 1px 4px;
  white-space: nowrap;
}
.typ-stueckliste:hover { background: var(--gruen-hell); }
.stl-symbol { font-size: 12px; margin-left: 2px; }
.stl-rand { margin: 0 16px 12px; }
.stl-suche { position: relative; padding: 0 16px 10px; }
.stl-suche .suchfeld { width: 100%; max-width: none; box-sizing: border-box; }
.stl-vorschlaege { position: relative; }
.stl-vorschlagliste {
  position: absolute; left: 0; right: 0; top: 2px; z-index: 5; background: #fff;
  border: 1px solid var(--grau-rand); border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); max-height: 320px; overflow-y: auto;
}
.stl-vorschlag {
  display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left;
  background: #fff; border: none; border-bottom: 1px solid #efefec;
  padding: 7px 10px; cursor: pointer; font-size: var(--schrift);
}
.stl-vorschlag:hover:not([disabled]) { background: var(--gruen-hell); }
.stl-vorschlag[disabled] { cursor: not-allowed; color: #a0a09a; }
.stl-keiner { display: block; padding: 8px 10px; }
.stl-sku { font-family: monospace; font-size: 12px; font-weight: 600; white-space: nowrap; }
.stl-titel { color: #444; flex: 1; overflow: hidden; text-overflow: ellipsis; }
.stl-vbestand { color: var(--grau-text); font-size: 12px; white-space: nowrap; }
.stl-tabelle { margin: 0 0 4px; }
.stl-tabelle td { vertical-align: middle; }
.stl-tabelle .stl-titel { display: block; font-size: 12px; }
.stl-griff { cursor: grab; color: #a0a09a; letter-spacing: -3px; user-select: none; }
.stl-zeile.stl-zieht { opacity: .45; }
.stl-menge {
  width: 72px; height: 26px; text-align: right; padding: 0 6px;
  border: 1px solid var(--grau-rand); border-radius: 3px;
}
.stl-menge:focus { outline: 2px solid var(--gruen); }
/* Konzept 3.0e-2: Reicht der Bestand nicht, wird die Zahl rot und die Zeile
   dezent rot hinterlegt. */
.stl-zeile.stl-reicht-nicht { background: #fdf0ef; }
.stl-zeile.stl-reicht-nicht .stl-bestand { color: #b3261e; font-weight: 600; }
.stl-zeile.stl-inaktiv .stl-sku { color: #9a7b00; }
.stl-sets { padding: 4px 16px 0; margin: 0 0 8px; }
.stl-sets .p-hinweis { margin-left: 8px; }
.stl-vorlagen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 16px 0; border-top: 1px dashed var(--grau-rand); margin-top: 6px;
}
.stl-label { color: var(--grau-text); font-size: 12px; }
.stl-trenner { flex: 0 0 12px; }
.stl-vorlagenname { width: 200px; }
.hinweiskasten.warnung div + div { margin-top: 3px; }
.vermerke { padding: 4px 16px 0; }
.vermerke h3, .lager-titel { font-size: 13px; margin: 10px 0 6px; }
.lager-titel { padding: 0 16px; }
.vermerke ul { margin: 0; padding-left: 18px; }
.vermerke li { margin-bottom: 4px; }
.lager-knopf { margin-left: auto; }
.lager-trefferliste { max-height: 260px; overflow-y: auto; margin-top: 6px; }
.lager-treffer { border: 1px solid #efefec; border-radius: 3px; margin-bottom: 6px; }
.lager-kopf {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: var(--grau-zeile); padding: 6px 10px;
}
.lager-zeile { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 22px; flex-wrap: wrap; }
.lager-optionen { display: flex; flex-direction: column; gap: 6px; padding: 6px 16px 0; }
.lager-optionen input { accent-color: var(--gruen); }
.lager-vorschau {
  margin: 10px 16px 0; padding: 4px 12px 8px; background: #f9fbfe;
  border: 1px solid #dbe6f3; border-radius: 3px;
}
.lager-vorschau .lager-titel { padding: 0; }
.lager-vorschau ul { margin: 0 0 6px; padding-left: 18px; }
@media (max-width: 900px) {
  .stl-vorlagenname { width: 100%; }
  .lager-knopf { margin-left: 0; }
}

/* --- Paket v43: Belege-Menü, Kurs, Reverse Charge, Lexoffice, Schreibsperre --- */
.euro-daneben { color: var(--grau-text); font-weight: 400; white-space: nowrap; }
.marke-rc {
  background: #fff3cd; border: 1px solid #e0c060; color: #6b5500; border-radius: 10px;
  padding: 1px 8px; font-size: 11px;
}
.belegmenue { position: relative; display: inline-block; }
.belegmenue > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
.belegmenue > summary::-webkit-details-marker { display: none; }
.belegmenue[open] > summary { background: var(--gruen-hell); border-color: var(--gruen); }
.belegmenue-liste {
  position: absolute; z-index: 30; top: 34px; left: 0; width: 460px; max-width: calc(100vw - 40px);
  background: #fff; border: 1px solid var(--grau-rand); border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 6px 0;
}
.belegmenue-gruppe {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 12px;
  border-bottom: 1px solid #efefec;
}
.belegmenue-gruppe:last-child { border-bottom: none; }
.belegmenue-titel { flex: 0 0 130px; font-weight: 600; }
.belegmenue-regel { flex: 1 0 100%; font-size: 11px; color: #55554f; padding-left: 136px; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.kursform .zahlfeld { width: 100px; height: 26px; text-align: right; padding: 0 6px;
  border: 1px solid var(--grau-rand); border-radius: 3px; }
.kleine-meldung { margin: 6px 0 0; padding: 5px 10px; font-size: 12px; }
.rc-warnung { color: #9a7b00; }
.unterueberschrift { font-size: 13px; margin: 16px 0 6px; }
.lexstatus { border-radius: 10px; padding: 1px 9px; font-size: 12px; border: 1px solid var(--grau-rand); }
.lexstatus-uebertragen { background: var(--gruen-hell); border-color: var(--gruen); color: #0b3d24; }
.lexstatus-fehler { background: #fdecec; border-color: #b3261e; color: #7d1b14; }
.lexstatus-wartet { background: #f6f6f4; color: #55554f; }
.zeitraumwahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.zeitraumwahl a.wz-knopf { text-decoration: none; display: inline-flex; align-items: center; color: inherit; }
.durchgang-kopf { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.sperrhinweis {
  background: #b3261e; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 12px;
  font-weight: 600; text-decoration: none; margin-right: 12px; white-space: nowrap;
}
.sperrhinweis:hover { background: #8f1d17; }
/* Seit v176: Wartungsfenster beim Einspielen (Zusatzkonzept Live-Betrieb v4, 5.2) */
.wartungshinweis {
  background: #c8821e; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 12px;
  font-weight: 600; margin-right: 12px; white-space: nowrap;
}
.kopf-rechts { display: flex; align-items: center; flex-wrap: nowrap; }
.sperrformular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.sperrgrund { width: 420px; max-width: 100%; }
.sperre-an div { margin-top: 4px; }
.sperrprotokoll { margin-top: 10px; max-width: 900px; }
@media (max-width: 900px) {
  .belegmenue-titel { flex-basis: 100%; }
  .belegmenue-regel { padding-left: 0; }
  .sperrhinweis, .wartungshinweis { margin-right: 4px; padding: 3px 6px; }
  .sperr-lang { display: none; }
}

/* --- Paket v44: Versandregeln, Auftragsliste --- */
.versandregeltabelle select { max-width: 380px; }
.versandregeltabelle .zahlfeld { width: 90px; }
.versandregeltabelle input.vr-land { width: 52px; max-width: 52px; margin: 4px 0 0; text-transform: uppercase; display: block; }
.versandregeltabelle input.vr-land[hidden] { display: none; }
.versandregeltabelle .zahlfeld { max-width: 110px; min-width: 84px; }
.versandregeltabelle .vr-nr { color: var(--grau-text); width: 24px; }
.versandregeltabelle .vr-knoepfe { white-space: nowrap; }
.versandregeltabelle tr.fehlerzeile { background: #fdf0ef; }
.bildgroesse { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.bildgroesse input { width: 70px; }
.bildzelle img { display: block; margin-bottom: 4px; object-fit: contain; }
@media print { .berichtsknoepfe, #speichermeldung { display: none; } }

/* --- Paket v44: Versandwege wie in Billbee (Kacheln, Seite je Weg) --- */
.vw-werkzeug { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; flex-wrap: wrap; }
.vw-suche { width: 260px; max-width: 100%; }
.vw-zahnrad { font-size: 20px; text-decoration: none; color: var(--blau-text); margin-left: auto; padding: 0 4px; }
.vw-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.vw-kachel { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: #fff;
  border: 1px solid var(--grau-rand); border-left: 4px solid var(--streifen-hell); border-radius: 4px;
  text-decoration: none; color: inherit; min-width: 0; }
.vw-kachel:hover { border-color: var(--streifen-dunkel); background: var(--eisblau-hell); }
.vw-kachel[hidden] { display: none; }
.vw-logo { align-self: flex-start; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px; }
.vw-logo-dhl { background: #ffcc00; color: #d40511; }
.vw-logo-post { background: #ffcc00; color: #1a1a1a; }
.vw-name { font-size: 14px; overflow-wrap: anywhere; }
.vw-anbieter { color: var(--grau-text); font-size: 12px; }
.vw-status { color: var(--grau-text); font-size: 11px; font-style: italic; }
.einstellungsabschnitt { font-size: 14px; margin: 16px 0 4px; padding-top: 10px; border-top: 1px solid var(--grau-rand); color: var(--blau-text); }
.tabellenknoepfe { display: flex; gap: 8px; margin: 8px 0 0; }

/* --- Paket v45: Sendungsnummer, Sprachfassungen, Zahlungserinnerung --- */
.sn-wahl { margin-left: 8px; }
.sn-wahl select { max-width: 220px; }
.sprachfassungen { max-width: 980px; }
.sprachchips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.sprachchip { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; border: 1px solid var(--grau-rand); }
.sprachchip.da { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen-dunkel); }
.sprachchip.fehlt { color: var(--grau-text); background: #fff; }
.sprachfassung { border: 1px solid var(--grau-rand); border-left: 4px solid var(--streifen-hell); border-radius: 4px;
  padding: 6px 10px; margin: 6px 0; background: #fff; }
.sprachfassung > summary { cursor: pointer; overflow-wrap: anywhere; }
.sprachfassung.neu { border-left-color: var(--gruen); }
.sprachhinweis { display: inline-block; margin-left: 8px; font-size: 11px; color: #8a5a00; background: #fff6e0; padding: 1px 6px; border-radius: 3px; }
.einstellungsliste.breit { max-width: none; }
.einstellungsliste.breit input[type="text"], .einstellungsliste.breit textarea { max-width: none; }
.vorschauformular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.vorschauformular .vs-nummer { width: 160px; }
.erinnerungstabelle { max-width: 640px; }
.erinnerungstabelle tr.ze-gesendet td { color: var(--gruen-dunkel); }
.erinnerungstabelle tr.ze-faellig td { font-weight: 600; }
.erinnerungstabelle tr.ze-verpasst td, .erinnerungstabelle tr.ze-entfaellt td { color: var(--grau-text); }

/* --- Paket v46: Layouts der Belege und Layout-Editor (Konzept 3.3d) --- */
.layouttabelle td { vertical-align: middle; }
.layoutknoepfe { white-space: nowrap; }
.layoutknoepfe .inline-form { display: inline; }
.standardmarke { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 3px;
  background: var(--gruen-hell); color: var(--gruen-dunkel); border: 1px solid var(--gruen); }
.neuformular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; }
.neuformular select, .neuformular input[type="text"] { height: 30px; border: 1px solid var(--grau-rand); border-radius: 3px; padding: 0 6px; }
.protokolltabelle tr.zurueckgenommen td { color: var(--grau-text); text-decoration: line-through; }
.protokolltabelle tr.zurueckgenommen td:last-child { text-decoration: none; }

.le { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; position: relative; padding-bottom: 8px; }
.le-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; }
.le-kopf .zurueck { font-size: 12px; color: var(--grau-text); text-decoration: none; }
.le-kopf .zurueck:hover { color: var(--gruen-dunkel); }
.le-name { height: 30px; font-size: 15px; font-weight: 600; border: 1px solid transparent; border-radius: 3px; padding: 0 6px; min-width: 180px; max-width: 320px; flex: 1 1 200px; }
.le-name:hover, .le-name:focus { border-color: var(--grau-rand); outline: none; }
.le-belegart { font-size: 12px; color: var(--blau-text); background: var(--eisblau-dunkel); padding: 3px 8px; border-radius: 3px; }
.le-dateiname, .le-vorschauwahl { font-size: 12px; color: var(--grau-text); display: inline-flex; align-items: center; gap: 4px; }
.le-dateiname input { width: 200px; height: 28px; border: 1px solid var(--grau-rand); border-radius: 3px; padding: 0 6px; }
.le-vorschauwahl select, .le-vorschauwahl input { height: 28px; border: 1px solid var(--grau-rand); border-radius: 3px; padding: 0 4px; max-width: 230px; }
.le-vorschauwahl input { width: 130px; }
.le-kopf .le-trenner { flex: 1; }
.le-kopf a.wz-knopf { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.le-kopf .wz-knopf:disabled { opacity: .45; cursor: default; }
#le_speichern { min-width: 110px; }
#le_speichern.le-ungespeichert { background: var(--gruen); border-color: var(--gruen); color: #fff; font-weight: 600; }
.le-meldungen { flex-shrink: 0; }
.le-meldungen .hinweiskasten, .le-meldungen .meldung-erfolg { margin: 0 0 4px; }
.le-meldungen .le-fehler { background: #fdecea; border-color: #e0a0a0; color: #8a1c1c; }

.le-rumpf { flex: 1; min-height: 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 310px; gap: 10px; }
.le-links, .le-rechts { min-height: 0; overflow-y: auto; }
.le-kasten { background: var(--eisblau-hell); border: 1px solid var(--grau-rand); border-left: 4px solid var(--streifen-hell); border-radius: 4px; padding: 8px 10px; margin-bottom: 10px; }
.le-kasten h3, .le-rechts h3 { margin: 0 0 6px; font-size: 13px; color: var(--blau-text); }
.le-klein { font-size: 11px; color: var(--grau-text); font-weight: 400; }
.le-palette { display: grid; grid-template-columns: 1fr; gap: 3px; }
.le-palknopf { display: flex; align-items: center; gap: 6px; text-align: left; background: #fff; border: 1px solid var(--grau-rand); border-radius: 3px;
  padding: 4px 6px; cursor: grab; font-size: 12px; }
.le-palknopf:hover { border-color: var(--gruen); background: var(--gruen-hell); }
.le-ebene-art { display: inline-block; min-width: 30px; font-size: 10px; font-weight: 700; text-align: center; color: var(--blau-text);
  background: var(--eisblau-dunkel); border-radius: 3px; padding: 1px 3px; }
.le-ebenen { list-style: none; margin: 0; padding: 0; max-height: 34vh; overflow-y: auto; }
.le-ebenen li { display: flex; align-items: center; gap: 4px; padding: 3px 4px; border: 1px solid transparent; border-radius: 3px; cursor: pointer; font-size: 12px; background: #fff; margin-bottom: 2px; }
.le-ebenen li:hover { border-color: var(--grau-rand); }
.le-ebenen li.gewaehlt { border-color: var(--gruen); background: var(--gruen-hell); }
.le-ebenen li.anderseite { opacity: .55; }
.le-ebenen li.ziel { border-top: 2px solid var(--gruen); }
.le-ebene-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-chip { font-size: 10px; padding: 0 4px; border-radius: 3px; background: #fff6e0; color: #8a5a00; white-space: nowrap; }
.le-mini { border: 1px solid var(--grau-rand); background: #fff; border-radius: 3px; font-size: 10px; line-height: 1; padding: 3px 4px; cursor: pointer; min-width: 20px; }
.le-mini:hover:not(:disabled) { border-color: var(--gruen); }
.le-mini:disabled { opacity: .35; cursor: default; }
.le-leer { color: var(--grau-text); font-style: italic; font-size: 12px; }

.le-mitte { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 6px; }
.le-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; flex-shrink: 0; }
.le-werkzeug select { height: 26px; border: 1px solid var(--grau-rand); border-radius: 3px; }
.le-schalter { display: inline-flex; align-items: center; gap: 3px; }
.le-ansicht { display: inline-flex; border: 1px solid var(--grau-rand); border-radius: 3px; overflow: hidden; }
.le-ansicht button { border: 0; border-right: 1px solid var(--grau-rand); background: #fff; padding: 4px 9px; font-size: 12px; cursor: pointer; }
.le-ansicht button:last-child { border-right: 0; }
.le-ansicht button.an { background: var(--gruen); color: #fff; }
.le-lage { margin-left: auto; color: var(--grau-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.le-flaechen { flex: 1; min-height: 0; display: flex; gap: 8px; }
.le-arbeitsflaeche { flex: 1.25 1 50%; min-width: 0; overflow: auto; background: #dfe3e8; border-radius: 4px; position: relative; }
.le-pdf { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; position: relative; background: #525659; border-radius: 4px; overflow: hidden; }
.le-pdf iframe { flex: 1; width: 100%; border: 0; background: #525659; }
.le-pdfstatus { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; background: rgba(255,255,255,.95); border-radius: 3px;
  padding: 4px 10px; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.25); max-width: 90%; }
.le-pdfstatus[hidden] { display: none; }
.le-pdfstatus.fehler { background: #fdecea; color: #8a1c1c; }
.le[data-ansicht="seite"] .le-pdf { display: none; }
.le[data-ansicht="pdf"] .le-arbeitsflaeche { display: none; }

.le-buehne { position: relative; display: inline-block; padding: 26px 16px 24px 26px; }
.le-lineal { position: absolute; background: #f4f5f6; overflow: hidden; font-size: 9px; color: #666; user-select: none; }
.le-lineal.oben { top: 6px; left: 26px; height: 18px; border-bottom: 1px solid #999; }
.le-lineal.links { left: 6px; top: 26px; width: 18px; border-right: 1px solid #999; }
.le-lineal i { position: absolute; background: #999; }
.le-lineal.oben i { bottom: 0; width: 1px; height: 4px; }
.le-lineal.oben i.lang { height: 8px; }
.le-lineal.links i { right: 0; height: 1px; width: 4px; }
.le-lineal.links i.lang { width: 8px; }
.le-lineal b { position: absolute; font-weight: 400; }
.le-lineal.oben b { top: 0; }
.le-lineal.links b { left: 1px; writing-mode: vertical-rl; transform: rotate(180deg); }
.le-lineal .le-markierung { position: absolute; background: rgba(0, 178, 104, .25); }
.le-lineal.oben .le-markierung { top: 0; bottom: 0; }
.le-lineal.links .le-markierung { left: 0; right: 0; }

.le-blatt { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); touch-action: none; user-select: none; overflow: hidden; }
.le-rand { position: absolute; border: 1px dashed rgba(16, 76, 152, .35); pointer-events: none; }
.le-marke { position: absolute; border-top: 1px solid #000; pointer-events: none; }
.le-briefpapier { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 11px; color: #8a5a00; pointer-events: none; }
.le-folgelinie { position: absolute; left: 0; right: 0; border-top: 1px dashed #c07000; pointer-events: none; }
.le-b { position: absolute; cursor: move; }
.le-b:hover { outline: 1px dashed rgba(0, 148, 87, .7); }
.le-b.gesperrt { cursor: default; }
.le-b.le-aus { opacity: .35; outline: 1px dashed #c07000; }
.le-b.le-ueberlauf { outline: 1px dashed #e08000; }
.le-b.le-umbruch::after { content: "\21B3 weiter auf der n\E4 chsten Seite"; position: absolute; right: 0; bottom: -14px; font-size: 10px; color: #c07000; white-space: nowrap; }
.le-inhalt { width: 100%; min-height: 100%; height: 100%; overflow: visible; overflow-wrap: break-word; }
.le-art-tabelle .le-inhalt { height: 100%; }
.le-b .le-inhalt * { pointer-events: none; }
.le-art-bild .le-inhalt img { width: 100%; height: 100%; object-fit: contain; display: block; }
.le-art-linie .le-inhalt { position: relative; }
.le-linie { position: absolute; }
.le-tab { border-collapse: collapse; table-layout: fixed; width: 100%; }
.le-tab th, .le-tab td { vertical-align: top; overflow: hidden; overflow-wrap: break-word; }
.le-eig { color: inherit; font-weight: 400; }
.le-mehr { font-size: 0.85em; color: #c07000; margin-top: 2px; }
.le-tabhinweis { font-size: 0.85em; color: #c07000; padding: 2px 0; font-family: "Segoe UI", Arial, sans-serif; }
.le-seitenhinweis { flex-shrink: 0; font-size: 12px; color: #8a5a00; background: #fff6e0; border: 1px solid #e0c060; border-radius: 3px; padding: 3px 8px; }
.le-seitenhinweis[hidden] { display: none; }
.le-info, .le-summen { border-collapse: collapse; width: 100%; font: inherit; color: inherit; }
.le-info td, .le-summen td { padding: 0 0 0.05em; vertical-align: top; }
.le-info td:first-child { padding-right: 2px; }
.le-absender { padding-bottom: 1px; }
.le-unbekannt { color: #c00000; background: #ffecec; }
.le-strich { width: 100%; background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 3px, #000 3px 4px, #fff 4px 7px, #000 7px 10px, #fff 10px 11px); }
.le-klartext { text-align: center; font-family: "LiberationSans", Arial, sans-serif; }
.le-qr { background: conic-gradient(#000 0 25%, #fff 0 50%, #000 0 75%, #fff 0) 0 0 / 22% 22%; outline: 2px solid #000; }
.le-anker, .le-wenn { position: absolute; top: -12px; font-size: 9px; line-height: 11px; padding: 0 3px; border-radius: 2px; background: #fff6e0; color: #8a5a00; pointer-events: none; }
.le-anker { left: 0; }
.le-wenn { right: 0; }
.le-rahmen { position: absolute; border: 1px solid var(--gruen); z-index: 10000; cursor: move; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.le-rahmen.gesperrt { border-color: #c07000; cursor: default; }
.le-griff { position: absolute; width: 9px; height: 9px; background: #fff; border: 1px solid var(--gruen-dunkel); border-radius: 1px; }
.g-nw { left: -5px; top: -5px; cursor: nwse-resize; } .g-n { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.g-ne { right: -5px; top: -5px; cursor: nesw-resize; } .g-e { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.g-se { right: -5px; bottom: -5px; cursor: nwse-resize; } .g-s { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.g-sw { left: -5px; bottom: -5px; cursor: nesw-resize; } .g-w { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.le-fuehrung { position: absolute; z-index: 10001; pointer-events: none; }
.le-fuehrung.senkrecht { top: 0; bottom: 0; border-left: 1px solid #ff2d8a; }
.le-fuehrung.waagerecht { left: 0; right: 0; border-top: 1px solid #ff2d8a; }
.le-auswahlrechteck { position: absolute; z-index: 10002; border: 1px solid var(--gruen); background: rgba(0, 178, 104, .08); pointer-events: none; }

.le-rechts { background: #fff; border: 1px solid var(--grau-rand); border-radius: 4px; padding: 8px 10px; }
.le-eigenkopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; }
.le-gruppe { border-top: 1px solid var(--grau-rand); padding: 6px 0 4px; }
.le-gruppe > summary { cursor: pointer; font-weight: 600; color: var(--blau-text); font-size: 12px; margin-bottom: 4px; }
.le-gruppe .le-gruppe { border-top: 1px dashed var(--grau-rand); }
.le-feld { margin: 0 0 6px; min-width: 0; }
.le-feldname { display: block; font-size: 11px; color: var(--grau-text); margin-bottom: 2px; }
.le-feldwert { display: flex; align-items: center; gap: 4px; min-width: 0; }
.le-feldwert > input[type="text"], .le-feldwert > input[type="number"], .le-feldwert > select, .le-textfeld input, .le-textfeld textarea,
.le-zeilenfelder input, .le-zeilenfelder select, .le-mit-knopf select, .le-mit-knopf input { width: 100%; min-width: 0; height: 26px; border: 1px solid var(--grau-rand); border-radius: 3px; padding: 0 5px; font-size: 12px; }
.le-textfeld { width: 100%; min-width: 0; }
.le-textfeld textarea { height: auto; padding: 4px 5px; font-family: Consolas, "Liberation Mono", monospace; font-size: 12px; resize: vertical; }
.le-textknoepfe { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.le-einheit { font-size: 11px; color: var(--grau-text); white-space: nowrap; }
.le-hinweis { font-size: 11px; color: var(--grau-text); margin: 2px 0 6px; }
.le-hinweis.le-warn { color: #a03000; }
.le-zweier { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8px; }
.le-knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0 8px; }
.le-knopfreihe .le-trenner { width: 6px; }
.le-umschalt.an { background: var(--gruen-hell); border-color: var(--gruen); }
.le-schalterzeile { display: flex; align-items: center; gap: 4px; font-size: 12px; margin: 3px 0; cursor: pointer; }
.le-farbe { display: flex; align-items: center; gap: 6px; }
.le-farbe input[type="color"] { width: 38px; height: 24px; padding: 0 2px; border: 1px solid var(--grau-rand); border-radius: 3px; background: #fff; }
.le-haken { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.le-zeilenliste { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.le-zeile { display: flex; gap: 4px; align-items: flex-start; border: 1px solid var(--grau-rand); border-radius: 3px; padding: 4px; background: var(--eisblau-hell); }
.le-zeilenfelder { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.le-zeilenknoepfe { display: flex; flex-direction: column; gap: 2px; }
.le-mit-knopf { display: flex; gap: 3px; align-items: center; min-width: 0; }
.le-spaltenmass { display: flex; gap: 4px; align-items: center; }
.le-spaltenmass input { width: 70px !important; }
.le-spaltenmass select { width: 60px !important; }
.le-tasten { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; font-size: 11px; margin: 0; }
.le-tasten dt { font-weight: 600; white-space: nowrap; }
.le-tasten dd { margin: 0; color: var(--grau-text); }
.le-liste { margin: 0; padding-left: 16px; font-size: 11px; color: var(--grau-text); }
.le-unten { border-top: 1px solid var(--grau-rand); padding-top: 8px; }

.le-platzhalter { position: fixed; z-index: 50; right: 18px; top: 110px; width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 140px);
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--grau-rand); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.25); }
.le-platzhalter[hidden] { display: none; }
.le-platzhalter-kopf { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--grau-rand); }
.le-platzhalter-kopf input { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--grau-rand); border-radius: 3px; padding: 0 6px; }
.le-platzhalter-liste { overflow-y: auto; padding: 6px 10px; flex: 1; min-height: 0; }
.le-platzhalter-fuss { border-top: 1px solid var(--grau-rand); padding: 6px 10px; font-size: 11px; color: var(--grau-text); max-height: 30vh; overflow-y: auto; }
.le-platzhalter-fuss ul { margin: 4px 0; padding-left: 16px; }
.le-phgruppe > summary { cursor: pointer; font-weight: 600; font-size: 12px; color: var(--blau-text); padding: 3px 0; }
.le-ph { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 3px; padding: 3px 4px; cursor: pointer; font-size: 12px; }
.le-ph > * { display: block; }
.le-ph:hover { background: var(--gruen-hell); }
.le-ph code { color: var(--gruen-dunkel); font-size: 11px; }
.le-ph-bed { color: #333; overflow-wrap: anywhere; }
.le-ph-bsp { color: var(--grau-text); font-size: 11px; overflow-wrap: anywhere; }
.le-ph code { overflow-wrap: anywhere; }

.le-schublade { position: fixed; z-index: 60; right: 0; top: 44px; bottom: 0; width: 560px; max-width: 100vw; background: #fff; border-left: 1px solid var(--grau-rand);
  box-shadow: -6px 0 24px rgba(0,0,0,.2); overflow-y: auto; padding: 10px 14px; }
.le-schublade[hidden] { display: none; }
.le-schublade-zu { float: right; }

@media (max-width: 1250px) {
  .le-rumpf { grid-template-columns: 200px minmax(0, 1fr); }
  .le-rechts { grid-column: 1 / -1; max-height: 40vh; }
}
@media (max-width: 900px) {
  .le { overflow-y: auto; }
  .le-rumpf { display: flex; flex-direction: column; flex: none; }
  .le-links, .le-rechts { overflow: visible; max-height: none; }
  .le-flaechen { height: 75vh; flex: none; flex-direction: column; }
  .le-mitte { order: 1; }
  .le-rechts { order: 2; }
  .le-links { order: 3; }
  .le-palette { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .le-name { max-width: none; }
}
.le-blatt .le-leer { font-size: 0.9em; }

/* --- Seit v47: Geschäftsbereiche (Konzept 3.3d) --- */
.dash-bereiche { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-bereiche label {
  border: 1px solid var(--grau-rand); border-radius: 4px; padding: 5px 12px;
  cursor: pointer; color: #444; background: #fff;
}
.dash-bereiche label.gewaehlt {
  background: var(--eisblau-dunkel); border-color: var(--streifen-hell);
  box-shadow: inset 3px 0 0 var(--streifen-dunkel); color: var(--blau-text);
}
.dash-bereiche input { accent-color: var(--gruen); margin-right: 5px; }
.bereichswahl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; }
.bereichstabelle tr.ausgeschaltet td { color: var(--grau-text); }
.bereichsseite .detailabschnitt { max-width: 900px; }
.bereichsseite .detailfeld { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2px 12px;
  align-items: start; margin: 6px 0; }
.bereichsseite .detailfeld > label { padding-top: 5px; font-weight: 600; }
.bereichsseite .detailfeld > :not(label) { grid-column: 2; }
.bereichsseite .detailfeld input[type="text"], .bereichsseite .detailfeld textarea { width: 100%; max-width: 560px; box-sizing: border-box; }
.bereichsseite .detailfeld input.zahlfeld { max-width: 90px; }
.bereichsseite .wahlzeile { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 8px; }
.bereichsseite .bereichsteil[hidden] { display: none; }
.bereichsseite .formularfuss { margin: 10px 0 18px; }
.einfache-liste { margin: 4px 0 8px 18px; padding: 0; }
@media (max-width: 900px) {
  .bereichsseite .detailfeld { grid-template-columns: minmax(0, 1fr); }
  .bereichsseite .detailfeld > :not(label) { grid-column: 1; }
}
.bereichsseite .detailfeld input[type="checkbox"], .bereichsseite .wahlzeile input { width: auto; margin: 0 6px 0 0; }
.bereichsseite .detailfeld label.haken { display: inline-flex; align-items: center; font-weight: 400; padding-top: 4px; }
/* Seit v47: Nummernkreise mit Jahr */
.nummernkreistabelle .nk-vorschau code { white-space: nowrap; }
.nummernkreistabelle td.nk-jaehrlich_neu select { min-width: 72px; }
.nk-verschieben { margin: 18px 0 8px; }
.nk-verschieben h3 { font-size: 14px; margin: 0 0 4px; }
.nk-verschieben-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 5px 0;
  border-bottom: 1px solid var(--grau-rand); }
.nk-verschieben-name { min-width: 170px; font-weight: 600; }
.nk-verschieben-zeile input.kurzzahl { width: 70px; }
.nk-abgleich { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.nk-abgleich .nk-neu { background: var(--gruen-hell); font-weight: 600; }

/* v47: Hinweise vor dem Entfernen einer Belegnummer – nur Hinweis, keine Sperre */
.nr-frage .nr-hinweise { margin: .3rem 0; padding-left: 1.1rem; color: #8a5a00; }
.nr-frage .nr-hinweise li { margin: .1rem 0; }

/* v49: globale Suche in der Kopfleiste */
.globale-suche { flex: 1 1 auto; max-width: 420px; margin: 0 16px; min-width: 120px; }
.globale-suche input { width: 100%; box-sizing: border-box; padding: 5px 10px; border-radius: 4px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.15); color: #fff; font-size: 14px; }
.globale-suche input::placeholder { color: rgba(255,255,255,.75); }
.globale-suche input:focus { background: #fff; color: #222; outline: none; }
.suchseite-form { display: flex; gap: 8px; max-width: 640px; margin: 8px 0; }
.suchseite-form input { flex: 1; padding: 6px 10px; font-size: 15px; }
.anzahl-marke { font-size: 13px; font-weight: normal; color: #666; margin-left: 6px; }
@media (max-width: 900px) { .globale-suche { max-width: 220px; margin: 0 8px; } }
/* v49: Sprachen der Kunden-Mails – „immer an" mittig wie die Schalter */
#reiter_mailsprachen td.sp-aktiv { text-align: center; }
#reiter_mailsprachen td.sp-aktiv .festeinstellung { display: inline-block; }
/* v50: Spalte „#" mit Briefumschlag (Nachricht des Käufers) */
.sp-nr { width: 44px; white-space: nowrap; color: var(--grau-text); }
.zeilennr { display: inline-block; min-width: 14px; }
.umschlag-zelle { display: inline-block; }
.umschlag { border: 0; background: none; padding: 0 0 0 4px; cursor: pointer; font-size: 15px;
  line-height: 1; position: relative; }
.umschlag.neu { color: var(--streifen-dunkel); }
.umschlag.gelesen { color: #a6a6a0; }
.umschlag:hover { color: var(--gruen-dunkel); }
.umschlag-haken { position: absolute; right: -7px; bottom: -3px; font-size: 10px; color: var(--gruen-dunkel); }
/* Der Kasten über der Liste */
.nachrichtkasten { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 96px); overflow-y: auto;
  background: #fff; border: 1px solid var(--grau-rand); border-top: 4px solid var(--streifen-dunkel);
  border-radius: 6px; box-shadow: 0 10px 32px rgba(0,0,0,.22); padding: 14px 18px 12px; box-sizing: border-box; }
.nk-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid var(--grau-rand); padding-bottom: 8px; margin-bottom: 10px; }
.nk-unter { color: var(--grau-text); font-size: 12px; margin-top: 3px; }
.nk-zu { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: #555; padding: 0 2px; }
.nk-zu:hover { color: #000; }
.nk-nachricht { border: 1px solid var(--grau-rand); border-radius: 4px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--eisblau-hell); }
.nk-meta { color: var(--grau-text); font-size: 12px; margin-bottom: 6px; }
.nk-beantwortet { color: var(--gruen-dunkel); }
.nk-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin-bottom: 10px; }
.nk-fuss { text-align: right; font-size: 12px; }
/* Seite „Antworten" */
.antwortseite .kundennachricht-oben { max-width: 900px; }
.antwortformular textarea { width: 100%; max-width: 900px; box-sizing: border-box; font-family: inherit; font-size: 14px; }
.antwortformular .antwortfeld textarea { border: 2px solid var(--gruen); }
.mailvorschau { border: 1px solid var(--grau-rand); border-radius: 4px; padding: 10px 14px; max-width: 900px; margin: 10px 0; background: #fff; }
.mv-zeile { font-size: 13px; margin-bottom: 4px; }
.mv-zeile span { display: inline-block; min-width: 70px; color: var(--grau-text); }
.mv-text { white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid var(--grau-rand); margin-top: 8px; padding-top: 8px; }
/* Kundennachrichten im Verlauf der Bestellung */
.nachrichtenliste { margin-bottom: 14px; }
.nachricht-eintragen { margin-top: 12px; max-width: 900px; }
.nachricht-eintragen textarea { width: 100%; box-sizing: border-box; }
.kopf-umschlag { color: var(--streifen-dunkel); text-decoration: none; }
.nk-nachricht a.wz-knopf, .antwortseite a.wz-knopf { text-decoration: none; display: inline-block; }
/* v53: WooCommerce verbinden */
.marke-ok, .marke-offen, .marke-fehler { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; }
.marke-ok { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.marke-offen { background: #f3f3ef; color: var(--grau-text); }
.marke-fehler { background: #fdecea; color: #a12a1f; }
.fehlertext { color: #a12a1f; overflow-wrap: anywhere; }
.anleitung { max-width: 900px; line-height: 1.6; }
.kanalseite .detailabschnitt form.inline-form { margin-top: 10px; }

/* Seit v67: Versand → USA über Transglobal (Konzept 3.6). */
#tg_tabelle td { vertical-align: top; }
#tg_tabelle .tg-nr, #tg_zuletzt td:nth-child(2) { white-space: nowrap; }
#tg_tabelle .tg-artikel { min-width: 180px; max-width: 320px; font-size: 12px; }
#tg_tabelle .tg-ref input { min-width: 110px; }
#tg_tabelle .tg-awb input { min-width: 240px; font-family: Consolas, "Liberation Mono", monospace; }
#tg_tabelle .tg-stand { min-width: 200px; max-width: 340px; overflow-wrap: anywhere; }
.tg-bereit { color: #1f7a3a; font-weight: 600; }
.tg-vorlauf { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 4px 0 6px; }
.tg-vorlauf input[name=vorlauf_nummer] { font-family: Consolas, "Liberation Mono", monospace; }
/* Seit v173: Fortschritt der offenen US-Bestellungen (Versand → USA über Transglobal) */
.tg-fortschritt { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 10px 0 12px; padding: 0; }
.tg-schritt { flex: 1 1 200px; border: 1px solid #cfd8d2; border-left-width: 5px; border-radius: 4px; padding: 6px 10px; background: #fafbfa; }
.tg-schritt-nr { font-size: 1.15em; margin-right: 4px; }
.tg-schritt-fertig { border-left-color: #1f7a3a; background: #f0f8f2; }
.tg-schritt-teil { border-left-color: #d08a12; background: #fdf7ec; }
.tg-schritt-offen { border-left-color: #b9c4bc; }
/* Seit v173: nach dem Prüfen rote und grüne Zeilen auf einen Blick */
.tg-zeile-rot td { background: #fdf0ee; }
.tg-zeile-gruen td { background: #f1f8f3; }
/* Seit v174: bereit, aber ohne Paket nach Frankfurt – orange, Eintragen nur mit Ankreuzen */
.tg-zeile-orange td { background: #fdf7ec; }
.tg-ohne { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid #e3c98f; border-radius: 4px; background: #fdf7ec; }
.tg-ohne.rc-warnung { border-color: #c0392b; }
.tg-ohne-hinweis { color: #8a5a00; font-size: 12px; }
.tg-ergebnisse { margin: 6px 0 12px 18px; padding: 0; }
.tg-ergebnisse li { margin: 2px 0; }
.tg-detail { margin: 10px 0; }

/* Seit v68: Merkmal der eBay-Variante unter der Quelle */
.q-merkmal { display: block; font-size: 0.85em; color: var(--grau-text); white-space: normal; }
/* Seit v68: die kleinen Tabellen der eBay-Seite ohne Leerraum, lange Listen scrollen im Rahmen */
.ebayseite .tabellenrahmen { min-height: 0; max-height: 420px; }
.ebayseite h3 { font-size: 1em; margin: 16px 0 6px; }
/* Seit v69: „Bei eBay anmelden“ ist ein Link im Knopf-Kleid */
.ebayseite a.wz-knopf { text-decoration: none; display: inline-flex; align-items: center; box-sizing: border-box; margin-top: 8px; }
.ebayseite a.wz-knopf.bereich-offen { color: #fff; }

/* Seit v71: Prüfbericht „Verknüpfungen je SKU“ */
.pb-reiter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.pb-reiterlink { padding: 5px 10px; border: 1px solid var(--grau-rand); border-radius: 3px; text-decoration: none; color: inherit; background: #fff; }
.pb-reiterlink.aktiv { border-color: var(--gruen); background: var(--gruen-hell); font-weight: 600; }
.pb-reiterlink.pb-warnung .pb-zahl { color: #b42318; font-weight: 600; }
.pb-zahl { color: var(--grau-text); margin-left: 4px; }
.pb-filter { margin-bottom: 8px; }
.pruefberichtseite .tabellenrahmen { min-height: 0; max-height: 640px; }
.pb-klein { font-size: 0.85em; color: var(--grau-text); }
.pb-sku { white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; }
.pb-seiten { margin-top: 8px; }

/* Seit v72: Suchknopf neben dem Suchfeld (Senol, 27.10.2026) */
.suchknopf { min-width: 34px; padding: 0 8px; }
.suchen-in { height: 30px; }
.globale-suche { display: flex; align-items: center; gap: 4px; }
.globale-suche input { flex: 1 1 auto; min-width: 0; }
.suchknopf-kopf { flex: 0 0 auto; height: 28px; width: 32px; border-radius: 4px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.15); color: #fff; font-size: 14px; }
.suchknopf-kopf:hover { background: rgba(255,255,255,.3); }

/* Seit v74: Aufträge im Hintergrund – Anzeige oben, Hinweise unten rechts */
.auftragsanzeige { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; padding: 2px 8px;
  border-radius: 4px; color: #fff; text-decoration: none; font-size: 15px; opacity: .55; }
.auftragsanzeige:hover { background: rgba(255,255,255,.2); opacity: 1; }
.auftragsanzeige.aktiv { opacity: 1; background: rgba(255,255,255,.22); }
.auftragszahl { font-size: 12px; font-weight: 600; }
.auftragszahl:empty { display: none; }
.auftragshinweise { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-direction: column;
  gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.auftragshinweis { background: #fff; border: 1px solid var(--grau-rand); border-left: 4px solid var(--gruen);
  border-radius: 4px; padding: 8px 12px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.15); cursor: pointer; }
.auftragshinweis.fehler { border-left-color: #c0392b; }
.laufmeldung:empty { display: none; }
.laufmeldung { margin: 6px 0 10px; }

/* --- Seit v86: Verlaufsdiagramm (Modul 12, Konzept 3.8) ------------------- */
.dash-flaeche.mit-verlauf { border: none; background: #fff; display: block; min-height: 0; }
.verlauf { position: relative; width: 100%; }
.verlauf-svg { display: block; width: 100%; height: auto; max-height: 360px; overflow: visible; }
.verlauf-stueck { max-height: 156px; }
.dash-flaeche.gross .verlauf-svg { max-height: none; }
.legende-eintrag { display: inline-flex; align-items: center; gap: 5px; }
.legende-strich { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.v-linie { stroke: #ececea; stroke-width: 1; }
.v-linie.v-null { stroke: #c9c9c3; }
.v-achse { font-size: calc(11px * var(--v-s, 1)); fill: #6b6a65; }
.v-name { font-size: calc(11.5px * var(--v-s, 1)); fill: #2b2b28; }
.v-faden { stroke: #9a9a93; stroke-width: 1; stroke-dasharray: 3 3; }
.v-feld { fill: transparent; cursor: crosshair; }
.v-balken { fill: rgba(3, 155, 229, .3); stroke: #039be5; stroke-width: 1; vector-effect: non-scaling-stroke; }
.v-balken:hover { fill: rgba(3, 155, 229, .55); }
/* Seit v151: Umsatz wie Billbee – Legende oben mit Kästchen, weiche Linien,
   Fläche, Punkte, schräges Datum; Striche bleiben auf dem Bildschirm gleich dick. */
.verlauf-legende { justify-content: center; flex-wrap: wrap; gap: 6px 18px; color: #666; margin: 4px 0 6px; }
.legende-kasten {
  display: inline-block; width: 34px; height: 10px; border: 3px solid; border-radius: 1px;
}
.v-strich { stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.v-punkt { stroke-width: 1; vector-effect: non-scaling-stroke; r: calc(3px * var(--v-s, 1)); }
.v-datum { fill: #666; }
.verlauf .v-achse { fill: #666; }
.verlauf-stueck-kopf { font-size: 12px; color: #55554f; margin: 10px 0 2px; }
.verlauf-tipp {
  position: absolute; z-index: 5; pointer-events: none; min-width: 170px;
  background: #fff; border: 1px solid #d8d8d2; border-radius: 4px; padding: 7px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); font-size: 12px; color: #2b2b28;
}
.tipp-kopf { font-weight: 600; margin-bottom: 4px; }
.tipp-zeile { display: flex; align-items: center; gap: 6px; line-height: 1.6; }
.tipp-wert { margin-left: auto; font-variant-numeric: tabular-nums; padding-left: 10px; }
.tipp-stueck { color: #55554f; border-top: 1px solid #eee; margin-top: 3px; padding-top: 3px; }
.dash-summe { font-size: 13px; color: #44443f; margin: 2px 0 8px; }
.verlauf-details { margin-top: 10px; font-size: 13px; }
.verlauf-details summary { cursor: pointer; color: #44443f; }
.verlauf-tabelle td.rechts, .verlauf-tabelle th.rechts { text-align: right; font-variant-numeric: tabular-nums; }
@media print { .verlauf-tipp { display: none; } .verlauf-details { display: block; } }
.berichtszahl { font-size: 13px; color: #44443f; margin: 10px 0 8px; }
.berichtsunterueberschrift { font-size: 13.5px; margin: 16px 0 6px; }
.nicht-gezaehlt td { color: #77766f; }
.anon-form { max-width: 420px; padding: 10px 12px; } .anon-form p { margin: 0 0 8px; font-size: 13px; }

/* Seit v93 (Modul 1d): Fortschrittsbalken und Stillstand im Abgleich-Protokoll. */
.ap-balken { display: inline-block; width: 80px; height: 6px; background: var(--rahmen, #ddd); border-radius: 3px; vertical-align: middle; margin-left: 6px; overflow: hidden; }
.ap-balken.breit { display: block; width: 100%; max-width: 420px; margin: 6px 0 0; }
.ap-balken > span { display: block; height: 100%; background: #2a78d6; }
tr.zeile-warnung td { background: rgba(220, 60, 40, .08); }
.ap-fehlerliste li { margin: 2px 0; }

/* Seit v94 (Modul 13): Umschalt-Liste. */
.us-tabelle td:last-child { white-space: nowrap; }

/* Seit v96: Bestellseite wie Billbees „Auftrag“ (Senol, 29.10.2026). */
.bb-raster { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 7px 12px; align-items: center; font-size: 13px; }
.bb-raster > label { text-align: right; color: var(--text, #222); }
.bb-raster > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.bb-raster.bb-einspaltig { grid-template-columns: 220px minmax(0, 640px); align-items: start; }
.bb-feld { width: 290px; max-width: 100%; padding: 5px 8px; border: 1px solid #cfd6dc; border-radius: 3px; font: inherit; background: #fff; }
.bb-feld[readonly] { background: #f1f3f5; color: #555; }
.bb-kurz { width: 150px; } .bb-zahl { width: 90px; text-align: right; } .bb-schmal { width: 78px; } .bb-lang { width: 100%; }
.bb-knopf { min-width: 30px; height: 30px; padding: 0 7px; border: 1px solid #cfd6dc; background: #fff; border-radius: 3px; cursor: pointer; text-decoration: none; color: #222; display: inline-flex; align-items: center; justify-content: center; }
.bb-knopf:hover { background: #eef2f5; }
.bb-text { font-size: 13px; }
.bb-zweispaltig { gap: 16px 30px; }
.bb-adressfeld { display: flex; gap: 4px; align-items: flex-start; }
/* Seit v97 wie Billbee: Adresskasten nur lesbar, grau, in der Größe ziehbar (Durchgang 06, 2.2) */
.bb-adresskasten { width: 290px; max-width: 100%; height: 130px; padding: 5px 8px; background: #eee; color: #333; border: 1px solid rgba(0,0,0,.12); border-radius: 0; font: inherit; line-height: 1.45; resize: both; overflow: auto; }
.bb-knoepfe { display: flex; gap: 4px; }
/* Seit v97: Fenster „… bearbeiten" und „Adresse auswählen" (Durchgang 06, 2.3/2.4) */
.bb-dialog { width: min(750px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: 4px; box-shadow: 0 5px 18px rgba(0,0,0,.45); color: #333; }
.bb-dialog::backdrop { background: rgba(0,0,0,.5); }
.bb-dialog-breit { width: min(900px, calc(100vw - 32px)); }
.bb-dialog-kopf { display: flex; justify-content: space-between; align-items: center; padding: 9px 15px; border-bottom: 1px solid #eee; }
.bb-dialog-kopf h3 { margin: 0; font-size: 18px; font-weight: 400; }
.bb-dialog-zu { background: none; border: 0; font-size: 26px; line-height: 1; color: #bbb; cursor: pointer; padding: 0 2px; }
.bb-dialog-zu:hover { color: #666; }
.bb-dialog-inhalt { padding: 15px; overflow: auto; }
.bb-adressraster { display: grid; grid-template-columns: 165px minmax(0, 352px); gap: 6px 12px; align-items: center; justify-content: center; }
.bb-adressraster > label { text-align: right; }
.bb-dfeld { width: 100%; height: 30px; padding: 4px 8px; border: 1px solid rgba(0,0,0,.12); border-radius: 0; font: inherit; background: #fff; box-sizing: border-box; }
.bb-dfeld:focus { outline: none; border-color: #66afe9; box-shadow: 0 0 0 2px rgba(102,175,233,.35); }
.bb-zwei { display: flex; gap: 4px; }
.bb-zwei .bb-strasse, .bb-zwei .bb-ort { flex: 1; min-width: 0; }
.bb-zwei .bb-hausnr { width: 68px; flex: none; } .bb-zwei .bb-plz { width: 108px; flex: none; }
.bb-dialog-fuss { display: flex; justify-content: flex-end; gap: 6px; padding: 14px 15px 15px; background: #f5f5f5; border-top: 1px solid #e5e5e5; }
.bb-dialog .bb-gruen { background: rgb(0,192,105); border-color: rgba(0,0,0,.12); border-radius: 0; padding: 8px 16px; }
.bb-dialog .bb-gruen:hover { background: rgb(0,170,93); }
.bb-weiss { background: #fff; color: #333; border: 1px solid rgba(0,0,0,.12); padding: 8px 16px; cursor: pointer; font: inherit; }
.bb-weiss:hover { background: #eef2f5; }
.bb-wahltabelle { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 10px; }
.bb-wahltabelle th { background: #f5f5f5; text-align: left; font-weight: 400; padding: 6px; }
.bb-wahltabelle td { border-top: 1px solid #e5e5e5; padding: 6px; vertical-align: middle; }
.bb-wahltabelle td:last-child, .bb-wahltabelle th:last-child { text-align: center; width: 60px; }
@media (max-width: 600px) { .bb-adressraster { grid-template-columns: 1fr; } .bb-adressraster > label { text-align: left; } }
.bb-positionen td { vertical-align: top; }
.bb-pos-bild img { width: 56px; height: 56px; object-fit: cover; border: 1px solid #ddd; }
.bb-pos-artikel .bb-feld { width: 100%; min-width: 280px; }
.bb-pos-knoepfe { display: flex; gap: 4px; margin-top: 4px; align-items: center; }
.bb-pos-details { display: grid; gap: 4px; margin-top: 4px; }
.bb-pos-details label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.bb-pos-aktionen { white-space: nowrap; }
.bb-pos-fuss { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-top: 10px; }
.bb-summen td { font-size: 17px; padding: 2px 6px; }
.bb-fussleiste { position: sticky; bottom: 0; display: flex; gap: 8px; justify-content: flex-end; align-items: center; padding: 10px 14px; background: #f4f6f8; border-top: 1px solid #dde3e8; margin-top: 18px; z-index: 5; }
.bb-gruppe { display: flex; position: relative; }
.bb-gruen { background: #2fbf63; color: #fff; border: 1px solid #27a856; padding: 8px 14px; border-radius: 3px; cursor: pointer; font: inherit; list-style: none; }
.bb-gruen:hover { background: #27a856; } .bb-gruen[disabled] { opacity: .5; cursor: not-allowed; }
.bb-gruppe > .bb-gruen { border-radius: 3px 0 0 3px; }
.bb-mehr > summary { border-radius: 0 3px 3px 0; border-left: 1px solid #1f9049; padding: 8px 10px; }
.bb-mehr > summary::-webkit-details-marker { display: none; }
.bb-mehr-liste { position: absolute; bottom: 100%; right: 0; background: #fff; border: 1px solid #cfd6dc; box-shadow: 0 4px 14px rgba(0,0,0,.12); display: flex; flex-direction: column; min-width: 320px; margin-bottom: 4px; }
.bb-mehr-liste button { text-align: left; background: #fff; border: 0; padding: 8px 12px; cursor: pointer; font: inherit; }
.bb-mehr-liste button:hover { background: #eef2f5; } .bb-mehr-liste button[disabled] { color: #999; cursor: not-allowed; }
.bb-abbrechen { background: #fff; border: 1px solid #cfd6dc; padding: 8px 14px; border-radius: 3px; cursor: pointer; font: inherit; }
@media (max-width: 900px) { .bb-raster { grid-template-columns: 1fr; } .bb-raster > label { text-align: left; } }
.bb-raster { align-content: start; }
.bb-pos-details[hidden] { display: none; }
.bb-raster > label.bb-oben { align-self: start; padding-top: 6px; }
.bb-nowrap { white-space: nowrap; }
.bb-positionen th:nth-child(1) { width: 40%; }
.bb-positionen .bb-zahl { width: 84px; } .bb-positionen .bb-schmal { width: 70px; }
.bb-positionen td.bb-nowrap { padding-right: 10px; }

/* Seit v101: Reiter Zahlungen und Versand wie Billbee (Durchgang 06, 5 und 6) */
.bb-dreispaltig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 14px; }
.bb-dreispaltig .bb-raster { grid-template-columns: 150px minmax(0, 1fr); }
@media (max-width: 1200px) { .bb-dreispaltig { grid-template-columns: 1fr; } }
.bb-zahlsummen { font-size: 16px; }
.bb-offen { color: #c62828; font-weight: 600; }
.bb-knopf.bb-gruen { background: rgb(0, 192, 105); color: #fff; border-color: rgb(0, 192, 105); }
.bb-neuzeile td { background: #f7f9fa; vertical-align: middle; }
.bb-neuzeile .bb-feld { width: 100%; }
.bb-neuzeile .bb-feld.bb-kurz { width: 120px; } .bb-neuzeile .bb-feld.bb-zahl { width: 90px; }
.bb-neutitel { display: block; font-size: 12px; color: #666; margin-bottom: 3px; }
tr.bb-neu td { background: #eefaf3; }

/* Seit v104: Knöpfe an gespeicherten Sendungen */
.bb-zeilenknoepfe { white-space: nowrap; }
.bb-zeilenknoepfe .bb-knopf { text-decoration: none; }
tr.bb-weg td { text-decoration: line-through; color: #999; background: #fbeaea; }
tr.bb-weg td.bb-zeilenknoepfe { text-decoration: none; }

/* Seit v106: Positionen Zeile für Zeile wie Billbee (Durchgang 06, 3) */
.bb-pos-zeile2 { display: flex; gap: 4px; margin-top: 4px; align-items: center; }
.bb-pos-zeile2 .bb-rtext { flex: 1; min-width: 0; }
.bb-pos-zeile2 .bb-feld.bb-rsku { flex: 0 0 120px; min-width: 0; }
.bb-pos-zeile2 .bb-feld[hidden] { display: none; }
.bb-eig-liste { display: grid; gap: 4px; margin-top: 4px; }
.bb-eig { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.bb-eig label { display: flex; gap: 4px; align-items: center; }
.bb-pos-artikel .bb-eig .bb-feld { min-width: 60px; width: 120px; }
.bb-positionen .bb-zahl.bb-ep { width: 100px; min-width: 88px; }
#reiter_positionen { overflow-x: auto; }
.bb-positionen .bb-standard { text-align: right; margin-top: 4px; }

/* Seit v123: Grenztest mit Zeilenfolge – gedruckte Zeilen der Muster-Etiketten */
.muster-zeilen { margin: 0; font: 12px/1.35 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.muster-reihenfolge td, .muster-gesendet-felder td { font-size: 12px; color: #444; }

/* Seit v139: Packlink-Angebote – Gewicht und Maße über der Tabelle */
.packlink-abfrage { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .4rem 0; }
.packlink-abfrage .zahlfeld { width: 4.5rem; }

/* Seit v147: Rückfrage der Bestellliste (Löschen, Zusammenfassen) */
.meldung-frage { padding: 10px 14px; border: 1px solid #c9a227; background: #fff8e1; border-radius: 3px; margin: 12px 16px; }
.meldung-frage ul { margin: 6px 0; padding-left: 18px; }
.meldung-frage .wz-knopf { margin-top: 6px; }
.exportform .formtabelle th { text-align: left; vertical-align: top; padding: 6px 12px 6px 0; white-space: nowrap; }
.exportform .formtabelle td { padding: 6px 0; }
.exportform .ex-status .haken { display: inline-block; min-width: 9em; }

/* Seit v148: Anmeldung & Sicherheit */
.qr-kasten { margin: 8px 0; }
.qr-kasten svg { width: 340px; height: 340px; max-width: 90vw; max-height: 90vw; background: #fff; display: block; }
ol.notfallcodes { columns: 2; max-width: 360px; font-size: 1.1em; }
.zeilenform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.schrittliste li { margin-bottom: 12px; }

/* Seit v155: die WooCommerce-SKU neben der WooCommerce-Nummer (Quellen-Spalte, Quellen-Fenster). */
.q-sku { margin-left: 6px; font-family: monospace; font-size: 12px; color: #2f5d8a; white-space: nowrap; }
.quellentabelle .q-sku { display: block; margin-left: 0; }
/* Seit v155: Artikeltyp neben der Suche. */
.typauswahl { height: 30px; border: 1px solid var(--grau-rand); border-radius: 3px; background: #fff; padding: 0 6px; font-size: var(--schrift); max-width: 230px; }
/* Seit v155: Transglobals Export einlesen. */
.tg-datei { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0; }
#tg_bericht .tg-awb-text { font-family: monospace; font-size: 12px; }
/* Seit v156: Hauptprodukt-Quellen (zwei Sorten) und endgültiges Löschen in der Testphase. */
.haupt-sorten { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.haupt-sorten .inline-form { display: inline; margin-left: 6px; }
.wz-knopf.knopf-gefahr { background: #b3261e; border-color: #b3261e; color: #fff; }
.loeschfrage table { margin: 8px 0; max-height: 360px; }
.loeschfrage #loeschwort, .testphaseseite #tp_wort { width: 140px; margin-left: 6px; }
.tp-uebersicht { width: auto; margin: 8px 0; }
/* Seit v157: Datenschutz in der Testphase. */
.tp-form { margin: 12px 0; padding-top: 8px; border-top: 1px solid var(--grau-rand); }
.tp-form #tp_sich_wort { width: 140px; margin: 0 6px; }
/* Seit v159: Testphase-Seite – nummerierte Kästen mit „Wofür?“. */
.testphaseseite .tp-kasten { border: 1px solid var(--grau-rand); border-radius: 4px; padding: 10px 14px; margin: 14px 0; background: #fff; }
.testphaseseite .tp-kasten h2 { margin: 0 0 6px; }
.testphaseseite .tp-wofuer { margin: 0 0 8px; }
.testphaseseite .tp-erledigt { color: #2e6b2e; margin: 6px 0 0; }
.testphaseseite .tp-kasten .tp-form { border-top: 0; margin: 6px 0 0; padding-top: 0; }
.testphaseseite .tp-wahl { border-top: 1px dashed var(--grau-rand); padding-top: 6px; margin-top: 8px; }
.testphaseseite #tp_sperre_wort { width: 140px; margin: 0 6px; }

/* Seit v161: „Etiketten erzeugen“ – Versandweg je Bestellung wählbar */
.etikettenwahl select.versandwahl { width: 400px; max-width: 100%; }
.etikettenwahl td .feldhinweis { margin: 2px 0 0; }
.etikettenwahl td { padding-top: 6px; padding-bottom: 6px; }
.etikettenwahl tr.zeile-hindernis td { background: #fff7f6; }
.etikettenwahl tr.zeile-extern td { background: #f6f8fb; }
.etikettenwahl td { vertical-align: top; }

/* Seit v162: Hindernisse auf der Versandseite beheben – Stift an der Adresse, Fenster
   „Lieferadresse bearbeiten“ mit Zeichenzahlen, Zollangaben in der Zeile. */
.adresszelle { white-space: nowrap; min-width: 200px; }
.adresszelle .adresskurz { display: inline-block; vertical-align: top; white-space: normal; max-width: 260px; }
.stiftknopf { background: none; border: 1px solid transparent; color: #8a8a84; cursor: pointer; font-size: 15px; line-height: 1;
              padding: 2px 4px; margin-right: 4px; vertical-align: top; border-radius: 3px; }
.stiftknopf:hover { color: var(--gruen-dunkel); border-color: #d6d6d0; }
.stiftknopf.stift-fehler { color: #a12a1f; border-color: #e8b4ae; background: #fdecea; }
.versand-adresse { width: min(860px, calc(100vw - 32px)); }
.versand-raster { grid-template-columns: 120px minmax(0, 360px) minmax(0, 260px); justify-content: start; }
.zeichenzahl { display: block; font-size: 12px; color: #77776f; line-height: 1.3; }
.zeichenzahl:empty { display: none; }
.zeichen-zuviel { color: #a12a1f; font-weight: 600; }
.adrpruef { margin-top: 12px; padding: 8px 10px; border: 1px solid #e5e5e5; background: #fafafa; }
.adrpruef ul { margin: 4px 0 0 18px; padding: 0; }
.adrpruef-fehler { color: #a12a1f; }
.adrmeldung:not(:empty) { margin-top: 8px; }
.adr-hinweis { margin: 0 0 10px; }
.zollfelder { margin-top: 6px; padding: 6px 8px; border: 1px dashed #e8b4ae; background: #fff; }
.zollzeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 6px; }
.zollzeile label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.zollartikel { font-weight: 600; min-width: 70px; }
.zoll-taric { width: 130px; }
.zoll-land { width: 210px; }
.zollmeldung:not(:empty) { display: inline-block; margin-left: 8px; }
.laufgrund { white-space: normal; }
.laufbeheben { margin-top: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.nowrap { white-space: nowrap; }

/* Seit v163: „Trotzdem drucken“ (Adresse gekürzt in Deutschland, Zahlung offen) */
.marke-warnung { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #fff1d6; color: #8a5a00; }
.etikettenwahl tr.zeile-achtung td { background: #fffaf0; }
.trotzdem { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.trotzdem label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; cursor: pointer; }

/* Seit v165: Transglobal – Felder je Sendung vor der Excel-Datei */
.tg-exporttabelle td { vertical-align: top; }
.tg-exporttabelle .tg-inhalt { width: 340px; max-width: 100%; }
.tg-exporttabelle .tg-hs { width: 120px; }
.tg-exporttabelle .tg-wert { width: 100px; text-align: right; }
.tg-exporttabelle tr.tg-angehaengt td { background: #f6f8fb; }
.tg-export-knoepfe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tg-links { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 12px; }
.tg-links a.wz-knopf, .tg-export-knoepfe a.wz-knopf { text-decoration: none; color: #333; display: inline-block; }
.tg-exporttabelle .tg-herkunft { width: 190px; }
.tg-exporttabelle input.tg-pflicht:placeholder-shown { border-color: #d9534f; box-shadow: 0 0 0 1px #d9534f; }

/* Seit v177: Systemprüfung (Modul 14, Zusatzkonzept Live-Betrieb v4, Abschnitt 3) */
.sp-marke { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; white-space: nowrap; }
.sp-gruen { background: var(--gruen-hell); color: var(--gruen-dunkel); }
.sp-gelb { background: #fff1d6; color: #8a5a00; }
.sp-rot { background: #fdecea; color: #a12a1f; font-weight: 600; }
.sp-grau { background: #f3f3ef; color: var(--grau-text); }
.sp-gesamt { font-size: 13px; font-weight: 600; margin-left: 10px; padding: 2px 10px; border-radius: 10px; vertical-align: middle; }
.sp-knoepfe { flex-wrap: wrap; align-items: center; }
.sp-knoepfe a.wz-knopf { text-decoration: none; color: #333; display: inline-flex; align-items: center; }
.sp-jetzt { display: inline; margin-left: 10px; vertical-align: middle; }
.sp-tabelle td { vertical-align: top; }
.sp-tabelle tr.sp-zeile-rot td { background: #fff7f6; }
.sp-tabelle tr.sp-zeile-gelb td { background: #fffaf0; }
.sp-einzel { margin-top: 4px; font-size: 12px; }
.sp-einzel summary { cursor: pointer; color: var(--grau-text); }
.sp-einzel ul { margin: 4px 0 0; padding-left: 18px; }
.sp-einzel pre { white-space: pre-wrap; word-break: break-word; font-size: 11px; background: #f7f7f4; padding: 6px 8px; max-height: 320px; overflow: auto; }
.sp-fremd summary { color: #8a5a00; }
.sp-bestaetigt { font-size: 11px; color: var(--grau-text); }
.sp-anhang { margin: -8px 0 12px; font-size: 12px; }
.sp-anhang summary { cursor: pointer; color: var(--grau-text); }
.sp-anhangform { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 6px; }
.sp-filter { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0 0 12px; }
.sp-filter a.wz-knopf { text-decoration: none; color: #333; display: inline-flex; align-items: center; }
.sp-anfragen code { font-size: 11px; word-break: break-all; }
.sp-berichte { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; }
.sp-berichtliste { flex: 0 0 300px; max-width: 100%; }
.sp-berichttext { flex: 1 1 500px; min-width: 0; }
.sp-berichttext pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; background: #f7f7f4; padding: 10px 12px; border: 1px solid var(--grau-rand); }
.sp-gewaehlt td { background: var(--gruen-hell); }
.sp-hinweis {
  background: #b3261e; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 12px;
  font-weight: 600; text-decoration: none; margin-right: 12px; white-space: nowrap;
}
.sp-hinweis:hover { background: #8f1d17; }

/* Seit v178: Testkopie auf Knopfdruck (Zusatzkonzept Live-Betrieb v4, Abschnitt 4) */
.tk-form { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tk-form label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.tk-angaben { margin: 6px 0 10px; }
.tk-kennwort code { font-size: 14px; letter-spacing: 1px; }
.testkopiehinweis {
  background: #8a5a00; color: #fff; border-radius: 3px; padding: 4px 10px; font-size: 12px;
  font-weight: 600; margin-right: 12px; white-space: nowrap; text-decoration: none;
}