/* ==========================================================================
   HappyProduction — Design 1 „Warm & Klar"
   Primär Orange #EE7B00 · Marine #002266 · hell, klar, modern (2026)
   ========================================================================== */

:root {
  --orange: #EE7B00;
  --orange-hover: #d96e00;
  --orange-soft: #fff1e3;
  --orange-ink: #a04e00;   /* dunkles Orange als Textfarbe auf --orange-soft */
  --navy: #002266;
  --ink: #1a2233;
  --bg: #f5f6f9;
  /* Seitenhintergrund (body). WICHTIG: zwei Bindestriche - als "-bg-body"
     ist die Zeile ungueltiges CSS, die Variable existiert dann nicht und
     body { background-color: var(--bg-body) } faellt auf den Browser-
     Standard (weiss) zurueck. */
  --bg-body: #c1d9ee;
  --card: #ffffff;
  --border: #e7e9ef;
  --muted: #6b7280;
  --ok: #10b981;
  --crit: #dc2626;
  --violet: #7c3aed;   /* LIMS: "nicht TAB-konform" (Altwert #ff05f7) */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 12px rgba(16,24,40,.05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background-color: var(--bg-body);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================== Schriften ===================== */
/* EAN-13-Barcode-Schrift. Die Datei liegt im Webroot unter font/ean-13.ttf
   und wird vom Webserver ausgeliefert, damit die Barcodes auch auf Rechnern
   funktionieren, auf denen die Schrift nicht lokal installiert ist.
   local() steht zuerst: ist die Schrift installiert, wird sie verwendet,
   sonst laedt der Browser die TTF vom Server. */
@font-face {
  font-family: "ean-13";
  src: local("ean-13"),
       local("EanBwrP36Tt"),
       url("font/ean-13.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "ean-13";
  src: url("font/ean-13.ttf") format("truetype");
  font-weight: bold;
  font-display: swap;
}

/* Alte <font face="…">-Tags neutralisieren → moderne Systemschrift */
font { font-family: inherit; }

/* Ausnahme: Barcode-Schrift. Die Templates setzen FACE="ean-13"; ohne diese
   Regel wuerde die Neutralisierung oben greifen und die EAN als Riesenzahl
   in der Systemschrift erscheinen. Attributselektor ist spezifischer als
   font{...} und gewinnt daher. */
font[face="ean-13"] { font-family: "ean-13", monospace; }

/* ===================== Links ===================== */
a { color: var(--navy); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--orange); }

#bg a, #cat a, #title a, #no a { color: var(--navy); text-decoration: none; }
#bg a:hover, #cat a:hover { color: var(--orange); }
#title a:hover { color: var(--orange); background-color: var(--orange-soft); border-radius: 4px; }
a.white { color: #ffffff; font-style: normal; }

/* ===================== Formulare ===================== */
input, select, textarea, .input, .wdsearch {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background-color: #ffffff;
  padding: 9px 12px;
  border: 1px solid #d5d9e0;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus, .wdsearch:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(238, 123, 0, 0.15);
}
.wdsearch { border: 2px solid #d5d9e0; }

/* ===================== Buttons ===================== */
.button, a.button, .button_over, .button_grey, .button_green {
  display: inline-block;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  padding: 9px 16px;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.button, a.button {
  background-color: var(--orange);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(238, 123, 0, 0.3);
}
.button:hover, a.button:hover, .button_over {
  background-color: var(--orange-hover);
  color: #ffffff;
}
.button_grey { background-color: #e5e7eb; color: #374151; }
.button_grey:hover { background-color: #d1d5db; }
.button_green { background-color: var(--ok); color: #ffffff; }
.button_green:hover { background-color: #0d9d6c; }

/* Einheitlicher Abstand fuer ALLE Buttons zum naechsten Element.
   Greift auch fuer Buttons ohne class="button" (Typ reset wird nur
   mit Abstand versehen, seine Optik bleibt unveraendert). */
.button, a.button, .button_over, .button_grey, .button_green,
input[type="submit"], input[type="button"], input[type="reset"], button {
  margin: 0 6px 8px 0;
}

input[type="submit"], input[type="button"], button {
  font-family: var(--font);
  background-color: var(--orange);
  color: #ffffff;
  border: none;
  border-radius: 9px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover {
  background-color: var(--orange-hover);
}

/* ===================== Tabellen ===================== */
table { border-collapse: separate; border-spacing: 0; }

table.out, table.head, table.mode, table.norm {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}

table.out { background-color: var(--card); border: 1px solid var(--border); }

/* Karten im Seitenlayout: linkes Menue + rechte Login-/User-Box.
   Gleiche Rundung/Schatten wie Header- und Inhalts-Cards. */
table.card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background-color: var(--card);
}

table.head { background-color: var(--orange); border: none; }
td.head {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--orange);
  padding: 12px 16px;
}

table.mode { background-color: var(--card); border: 1px solid var(--border); }
td.mode { font-size: 13px; font-weight: 600; padding: 10px 14px; background-color: var(--card); }

table.norm { background-color: var(--card); border: 1px solid var(--border); }
td.norm, td.norm_form {
  font-size: 13.5px;
  padding: 11px 14px;
  background-color: #ffffff;
  border-bottom: 1px solid #f0f1f5;
}
tr:nth-child(even) td.norm { background-color: #fafbfd; }

td.normover {
  font-size: 13.5px;
  padding: 11px 14px;
  background-color: var(--orange-soft);
  border-bottom: 1px solid #f0f1f5;
  cursor: pointer;
  transition: background-color .15s ease;
}

td.ueb, tr.ueb, td.ueb_small, td.ueb_list {
  font-weight: 650;
  color: var(--navy);
  background-color: #eef0f4;
  padding: 11px 14px;
}

td.kat { font-size: 13px; font-weight: 650; background-color: #fafbfd; padding: 10px 14px; }
td.white { background-color: #ffffff; border: 1px solid var(--border); font-size: 13.5px; padding: 10px 14px; }
td.newline { border-top: 1px solid #d5d9e0; }

/* ===================== Status-Pills / farbige Zellen ===================== */
.errormsg { font-size: 14px; color: var(--crit); font-weight: 600; }

.orange, .lkorange { background-color: var(--orange); color: #ffffff; font-weight: 600; }
.lkorange { background-color: var(--orange); color: #ffffff; }
.green { background-color: var(--ok); color: #ffffff; font-weight: 600; }
.grau  { background-color: #e5e7eb; color: #374151; font-weight: 600; }
.blau  { background-color: var(--navy); color: #ffffff; font-weight: 600; }

/* ===================== Menü ===================== */
.menunorm, .menuover, .menuactive, .menustyle {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 14px;
  border-radius: 9px;
  transition: all .15s ease;
}
.menunorm { color: var(--navy); background-color: #f7f8fb; }
.menuover, .menunorm:hover { color: var(--orange-ink); background-color: var(--orange-soft); border-color: var(--orange); cursor: pointer; }
.menuactive { color: #ffffff; background-color: var(--orange); border: 1px solid var(--orange); box-shadow: 0 1px 2px rgba(15,23,42,.14); }
.menuactive:hover { color: #ffffff; background-color: var(--orange); border-color: var(--orange); }
.menustyle { color: #ffffff; background-color: #6b7280; border: 1px solid #6b7280; }

/* ===================== Quermenu (horizontale Kategorie-/Untermenue-Leiste) =====================
   Vorher: nackte 675px-Tabelle, die Button-Zellen (.menunorm aus menu_list_ekg_quer.htm)
   hatten background:transparent und #3a4352-Schrift -> keine Card, zu blass.
   Jetzt: die Leiste ist eine Card (.catbar), jeder Button eine Kachel mit Rand/Hover.
   Die Zellen tragen inline width:220px (3 pro Zeile), Hoehe/Padding kommt aus CSS. */
.catbar {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin: 0 0 12px 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.catbar > table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 6px 4px; }
.catbar td.menunorm, .catbar td.menuover, .catbar td.menuactive {
  width: 33.33% !important;
  height: auto !important;
  text-align: left;
  white-space: nowrap;
}
.catbar td.menunorm b, .catbar td.menuactive b { font-weight: 600; }
/* Jump-Variante des Quermenus (ekg_menu_view_kat_quer_jump.htm, <div id='qmenu'><ul>..) */
#qmenu {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  margin: 0 0 12px 0;
}
#qmenu ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
#qmenu li { margin: 0; padding: 0; }
#qmenu li a {
  display: inline-block;
  padding: 9px 14px;
  border-radius: 9px;
  border: 1px solid var(--border);
  background-color: #f7f8fb;
  color: var(--navy);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: all .15s ease;
}
#qmenu li a:hover { background-color: var(--orange-soft); color: var(--orange-ink); border-color: var(--orange); }

/* Alte Menüklasse (menu_list.htm) */
.blaumenu { background-color: var(--navy); color: #ffffff; font-weight: 600; }

/* ===================== Brand / Logo ===================== */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1;
}
.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--orange), #ff9a3d);
  color: #ffffff;
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
}
.logo-accent { color: var(--orange); }

/* ===================== Detail-/Journalansicht ===================== */
/* tbl_mainview_small.htm laeuft ohne Header/Menue. Die Info-Box
   (Produktdaten) wird im Design 1 gezeigt: weisse Card mit runden Ecken,
   feinen Trennlinien, Orange als Akzent. Die Altfarben aus den Templates
   (bgcolor-Attribute aus der style-Tabelle, blauer Inline-Rahmen,
   Cornsilk-Hover) werden hier ueberschrieben - HTML-Attribute haben
   niedrigere Prioritaet als CSS-Regeln. */
.journalview > table.journalcard {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background-color: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.journalview > table.journalcard td {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f1f5;
}
.journalview > table.journalcard td.orange {
  background-color: var(--orange);
  color: #ffffff;
  border-bottom: 0;
}
.journalview > table.journalcard td[width="30%"] { color: var(--muted); font-weight: 600; }
.journalview > table.journalcard td[width="70%"] { color: var(--navy); font-weight: 700; }
.journalview > table.journalcard tr:last-child td { border-bottom: 0; }

/* ===================== Seitenrahmen (tbl_mainview*.htm) ===================== */
/* tbl_mainview.htm (width="1100") und tbl_mainview_small.htm (width="600") sind
   fixe Tabellen. Die Listentabellen im Inhaltsbereich tragen aber WIDTH-Werte
   von 1000 bis 1800 (aus den tbl_*_header.htm). Ein 1200px-Kind in der
   automatisch breiten Layoutzelle zwingt td#title auf ~1204px und damit den
   Rahmen auf ~1418px: unter einer Fensterbreite von ~1418px laeuft die Seite
   horizontal ueber, die letzte Spalte wird angeschnitten. Der Rahmen wird
   deshalb viewport-relativ (Deckel wie indexview.htm) - er darf durch seinen
   Inhalt nicht mehr aufgeblaeht werden.
   Die Selektoren sind bewusst eng: cellspacing/cellpadding grenzen die beiden
   Rahmen von gleich breiten Fremd-Tabellen ab (z. B. der Fehlerkasten in
   templates/db_error.htm, body > table[width="600"] cellspacing="1"). */
body > table[width="1100"],
body > table[width="600"][cellspacing="2"] {
  width: 100%;
  max-width: 1500px;
}

/* ===================== Listentabellen im Inhaltsbereich ===================== */
/* Alle von ptable()/atable() erzeugten Such- und Ergebnislisten. Die Tabellen
   tragen die id ProduktTabelle/Analysentabelle/Tabelle bzw. sind daran
   erkennbar, dass sie generierte Datenzeilen enthalten (onmouseover mit
   Cornsilk aus den tbl_*_row.htm-Templates). Die alten Farben ($rowcolor =
   bgcolor-Attribut) und der Cornsilk-Hover werden ueberschrieben; der Hover
   kommt jetzt aus CSS. */
table#ProduktTabelle,
table#Analysentabelle,
table#Tabelle,
table:has(> tbody > tr[onmouseover*="Cornsilk"]) {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background-color: var(--card);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  /* Das WIDTH-Attribut der Header-Templates (1000..1800px) darf den Rahmen
     nicht sprengen (der Rahmen selbst ist per body > table-Regel auf 1500px
     gedeckelt). Die Liste fuellt deshalb die Inhaltsspalte voll aus - der
     frueher hier stehende Deckel max-width:1200px machte die Haupttabelle
     schmaler als das Kopfband (Kopf 1496px, Liste 1200px). */
  width: 100%;
  max-width: 100%;
}

/* Zebra ohne :nth-child - zwischen den Datenzeilen stehen foster-parented
   <input>-Elemente, die nth-child verfaelschen. */
tr[onmouseover*="Cornsilk"] { background-color: #ffffff; }
tr[onmouseover*="Cornsilk"]:nth-of-type(odd) { background-color: #fafbfd; }

/* Rechnungsstatus in der Zahlungsuebersicht (cat=payments). Die Farbe steht
   unveraendert als $rowcolor/bgcolor am <TR> und wird in class_customer.php
   (list_payments, Z. 626-633) aus Rechnungssumme vs. Zahlungseingang gesetzt -
   sie war nur von der Zebra-Regel oben ueberdeckt, deshalb sahen alle Zeilen
   hellgrau aus. Hier wieder sichtbar, im jeweils gleichen Farbton, aber in der
   entsaettigten Design-1-Palette wie die uebrigen Statusfarben.
   Reihenfolge ist wichtig: gleiche Spezifitaet wie Zebra und :hover, deshalb
   muss dieser Block NACH dem Zebra und VOR dem :hover stehen (Hover gewinnt).
   Absichtlich ohne !important - sonst koennte der Hover die Zeile nicht mehr
   aufhellen (der Zell-Hover laeuft teils noch ueber this.bgColor). */
tr[onmouseover*="Cornsilk"][bgcolor="#b0f5c3" i] { background-color: #dcf5e4; }  /* bezahlt */
tr[onmouseover*="Cornsilk"][bgcolor="#f6a303" i] { background-color: #ffe9cf; }  /* teilweise bezahlt */
tr[onmouseover*="Cornsilk"][bgcolor="#ffaaaa" i] { background-color: #fbdcdc; }  /* nichts bezahlt */
tr[onmouseover*="Cornsilk"][bgcolor="#ff0000" i] { background-color: #f4b8b8; }  /* negativ und nichts bezahlt */
tr[onmouseover*="Cornsilk"][bgcolor="#aaccff" i] { background-color: #e0e6fb; }  /* Gutschrift (Summe negativ) */
tr[onmouseover*="Cornsilk"][bgcolor="#bdd6de" i] { background-color: #e6ebf3; }  /* Rechnung 0,00 */
tr[onmouseover*="Cornsilk"][bgcolor="#6666ff" i] { background-color: #ded9fb; }  /* storniert / abgeschlossen */

tr[onmouseover*="Cornsilk"]:hover { background-color: var(--orange-soft); }
tr[onmouseover*="Cornsilk"] > td { border-bottom: 1px solid #f0f1f5; }

/* Kategorie-/Statusfarben der Zeilen ($typecolor aus den tbl_*_row.htm-
   Templates, als Inline-Style) auf eine ruhige Design-1-Palette abbilden:
   gleicher Farbton, deutlich entsaettigt. Nur in generierten Listenzeilen -
   Druckseiten, Etiketten und Import-Skripte bleiben unberuehrt.
   !important ist noetig, weil Inline-Styles sonst gewinnen. */
tr[onmouseover*="Cornsilk"] td[style*="#aaffaa"] { background-color: #dcf5e4 !important; }
tr[onmouseover*="Cornsilk"] td[style*="#aaaaff"] { background-color: #e0e6fb !important; }
tr[onmouseover*="Cornsilk"] td[style*="#FFB644"] { background-color: #ffe9cf !important; }
tr[onmouseover*="Cornsilk"] td[style*="#B96AC1"] { background-color: #f0e2f4 !important; }
tr[onmouseover*="Cornsilk"] td[style*="#A5B7D1"] { background-color: #e6ebf3 !important; }
tr[onmouseover*="Cornsilk"] td[style*="#cccccc"] { background-color: #f1f2f6 !important; }

/* Beim Hover die farbigen Zellen mitziehen, damit die Zeile einheitlich wirkt */
tr[onmouseover*="Cornsilk"]:hover > td[style*="background-color"] { background-color: var(--orange-soft) !important; }

/* Kopfzeile der Listen abgrenzen (Konvention: class="ueb_list") */
table > tbody > tr:first-child > td.ueb_list { border-bottom: 1px solid var(--border); }

/* Diff-/Statusfarben aus den Templates ($typecolor/$row[fcol] aus ptable())
   auf die Design-Tokens abbilden - absichtlich NUR innerhalb der generierten
   Listentabellen (IDs ProduktTabelle/Analysentabelle/Tabelle bzw. Datenzeilen
   mit Cornsilk-Hover). Ausserhalb dieser Tabellen bleiben die Originalfarben
   der Templates unberuehrt: rote Warnungen/Hinweise (index.php "Gef&auml;&szlig;
   ausbuchen!", "Es wurden N Produkte gefunden", DROPSHIPPING-Marker), gruene
   Texte in Formularen (LIMS-Qualitaetsauswahl #00cc00, Pack-Assistent #007700).
   Begruendung und Messwerte: /opt/data/outbox/fontfarben.md */
table#ProduktTabelle font[color="#ff0000"], table#ProduktTabelle font[color="#FF0000"],
table#Analysentabelle font[color="#ff0000"], table#Analysentabelle font[color="#FF0000"],
table#Tabelle font[color="#ff0000"], table#Tabelle font[color="#FF0000"],
tr[onmouseover*="Cornsilk"] font[color="#ff0000"], tr[onmouseover*="Cornsilk"] font[color="#FF0000"] {
  color: var(--crit);
}
table#ProduktTabelle font[color="#00aa00"], table#ProduktTabelle font[color="#00cc00"], table#ProduktTabelle font[color="#007700"],
table#Analysentabelle font[color="#00aa00"], table#Analysentabelle font[color="#00cc00"], table#Analysentabelle font[color="#007700"],
table#Tabelle font[color="#00aa00"], table#Tabelle font[color="#00cc00"], table#Tabelle font[color="#007700"],
tr[onmouseover*="Cornsilk"] font[color="#00aa00"], tr[onmouseover*="Cornsilk"] font[color="#00cc00"], tr[onmouseover*="Cornsilk"] font[color="#007700"] {
  color: var(--ok);
}

/* Statusfarben des Bestandsjournals (class_stock.php, get_journal*):
   '#ffff00' = der Alt-Bestand weicht vom vorherigen Neubestand ab
   ("Wert wurde geaendert"). Reines Gelb ist auf Weiss praktisch unlesbar,
   daher als kleine Orange-Markierung mit dunkler Schrift.
   '#0000ff' = Alt-Bestand war 0 (Bestand wurde neu aufgebaut). */
table#ProduktTabelle font[color="#ffff00"], table#ProduktTabelle font[color="#FFFF00"],
table#Analysentabelle font[color="#ffff00"], table#Analysentabelle font[color="#FFFF00"],
table#Tabelle font[color="#ffff00"], table#Tabelle font[color="#FFFF00"],
tr[onmouseover*="Cornsilk"] font[color="#ffff00"], tr[onmouseover*="Cornsilk"] font[color="#FFFF00"] {
  color: var(--orange-ink);
  background-color: var(--orange-soft);
  padding: 0 3px;
  border-radius: 3px;
  font-weight: 700;
}
table#ProduktTabelle font[color="#0000ff"], table#ProduktTabelle font[color="#0000FF"],
table#Analysentabelle font[color="#0000ff"], table#Analysentabelle font[color="#0000FF"],
table#Tabelle font[color="#0000ff"], table#Tabelle font[color="#0000FF"],
tr[onmouseover*="Cornsilk"] font[color="#0000ff"], tr[onmouseover*="Cornsilk"] font[color="#0000FF"] {
  color: var(--navy);
  font-weight: 700;
}

/* ===================== Landingpage: Suchmaske + "Aktuelle Meldungen" ===================== */
/* Diese beiden Bloecke der Startseite (index.php) waren die letzten eckigen Kaesten:
   die Suchmaske aus templates/frm_booking.htm und die Meldungslisten aus
   check_outstanding() (function.php). Sie werden wie die uebrigen Cards gerundet.
   Der alte blaue Inline-Rahmen (#5F71A2 in frm_booking.htm, #99BDDF in den
   tbl_outstanding_*_header.htm) wurde aus den Templates entfernt - Inline-Styles
   schlagen CSS, sonst blieben die Ecken eckig. Der Wrapper .outstandingblk steht
   in templates/indexview.htm um $outstanding. */

/* Suchmaske: Titelleiste "- Eingabe -" + Eingabefeld + Willkommenszeile als eine Card.
   Die alte Titelleiste war grau (rgb(120,120,120)) und der Willkommenstext hellblau
   (rgb(174,189,253)); beides sind keine Design-1-Farben und werden auf die Tokens
   abgebildet: Kopfzeile = Orange wie table.head/td.head, Meldungszeile = Orange-Soft. */
/* Suchmaske: EINE zentrierte Tabelle, Breite wie die alte Titelzeile (1000px), mit
   umlaufendem Rahmen - die Tabelle selbst ist die Card. Vorher waren es zwei Tabellen
   (1000px Titelzeile ueber 100%-Eingabezeile), dadurch lief der Kopf schmaler als der
   Eingabebereich und die Maske sass nicht auf einer Achse. */
form.bookmask {
  margin-bottom: 16px;
  text-align: center;                 /* zentriert die Tabelle im Inhaltsbereich */
}
form.bookmask > table.bookmask-tbl {
  /* Volle Breite der Inhaltsspalte - genau wie die Meldungslisten darunter, damit
     Maske und Kopfband rechts buendig abschliessen (vorher 1000px = schmaler
     als der Header). Der Inhalt der Maske bleibt zentriert (align="center"). */
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background-color: var(--card);
}
/* Kopfzeile: statt des massiven vollbreiten Orange-Balkens eine leichte Zeile in
   Design-1-Farben - neutraler Grund (#f7f8fb wie td.limsform-label), Navy-Schrift,
   Orange nur noch als schmaler linksseitiger Akzent (die Tabellenrundung schneidet
   ihn sauber mit). */
form.bookmask td.bookmask-head {
  background-color: #f7f8fb;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f1f5;
  border-left: 3px solid var(--orange);
  text-align: center;
}
/* Eingabezeile: grosszuegiger weisser Bereich, das Feld ist das Hauptelement und
   sitzt mittig (vorher hellgrau mit 25px/250px-Inline-Feld). */
form.bookmask td.bookmask-field {
  background-color: var(--card);
  padding: 18px 16px;
  text-align: center;
}
/* Groesse des Suchfelds - der Inline-Style des Templates ist entfernt, sonst
   haette er diese Regeln ueberstimmt. Optik (weiss, 1px #d5d9e0, Fokusring
   Orange) kommt aus den globalen input-Regeln. */
form.bookmask input.bookmask-input {
  height: 40px;
  width: 420px;
  max-width: 100%;
  padding: 0 14px;
  font-size: 15px;
}
/* td.bookmask-msg ("Willkommen ...") wurde auf Wunsch entfernt - die Suchmaske
   hat nur noch Kopf und Eingabezeile. */

/* Meldungslisten "Aktuelle Meldungen - <Typ>" und der Knopf ">>> Es sind N neue ...".
   Jede Meldung ist eine eigene Tabelle (tbl_outstanding_*_header.htm oeffnet sie,
   die Zeilen folgen, tbl_outstanding_footer.htm schliesst die letzte). Ohne
   margin-bottom kleben die Cards aneinander; overflow:hidden ist wie bei den
   uebrigen Cards noetig, damit die orangen Kopfzeilen nicht aus den Ecken laufen. */
.outstandingblk > table,
table.outstandingbtn {          /* der Knopf ">>> Es sind N neue ..." erscheint auch
                                   ausserhalb der Startseite (check_orders() in
                                   exe_ppp.php) und braucht die Karte dort ebenfalls */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background-color: var(--card);
  margin-bottom: 14px;
}
.outstandingblk > table:last-child { margin-bottom: 0; }

/* Die Rundung der Bloecke zusaetzlich an den Eckzellen setzen: Browser, die
   overflow:hidden auf <table> nicht anwenden (oder eine noch gecachte style.css
   ohne die Regel oben), zeigen sonst trotz border-radius eckige Kanten. */
.outstandingblk > table > tbody > tr:first-child > td:first-child,
table.outstandingbtn > tbody > tr:first-child > td:first-child { border-top-left-radius: var(--radius); }
.outstandingblk > table > tbody > tr:first-child > td:last-child,
table.outstandingbtn > tbody > tr:first-child > td:last-child { border-top-right-radius: var(--radius); }
.outstandingblk > table > tbody > tr:last-child > td:first-child,
table.outstandingbtn > tbody > tr:last-child > td:first-child { border-bottom-left-radius: var(--radius); }
.outstandingblk > table > tbody > tr:last-child > td:last-child,
table.outstandingbtn > tbody > tr:last-child > td:last-child { border-bottom-right-radius: var(--radius); }

/* ===================== Header: Druckerauswahl + Profilmenue ===================== */
/* Das Kopf-Band ist eine table.out-Card, und die hat aus style.css overflow:hidden
   (fuer die runden Ecken). Ein aufklappendes Profilmenue wuerde davon abgeschnitten,
   deshalb hier overflow:visible - die Rundung bleibt, weil der Tabellenhintergrund
   weiter am Border-Radius beschnitten wird und die Kopfzellen keinen eigenen
   Hintergrund haben. */
table.out.headerbar { overflow: visible; }

.headerrighttbl { border-collapse: separate; }
.headerprinters { white-space: nowrap; }
.headerprinters img { vertical-align: middle; }
/* Profilmenue: 5px Abstand bis zum rechten Rand des Kopfbandes (vorher klebte es
   an der Innenkante). 4px Padding + 1px Rahmen der Kopfband-Card = 5px sichtbarer
   Abstand. padding-left 14px bleibt der Abstand zu den Drucker-Icons. */
.headerprofilecell { padding-left: 14px; padding-right: 4px; }

/* Der Knopf ">>> Es sind N neue Liquid-Bestellungen eingegangen <<<" sitzt jetzt
   mittig im Kopfband (templates/header_index.htm, $header_orders aus
   check_orders()). Anders als auf der Startseite bleibt er hier kompakt: das
   width="100%" des Templates wird per CSS uebersteuert (Attribute sind
   presentational hints, CSS gewinnt), damit er als kleine Pille in der Mitte
   des Bandes steht statt ueber die ganze Zelle zu laufen.
   Liegt keine neue Bestellung vor, liefert check_orders() "" - dann ist die
   Zelle leer und es bleibt kein leerer Kasten stehen. */
td.headerorderscell { text-align: center; }
td.headerorderscell table.outstandingbtn {
  width: auto;
  display: inline-table;
  margin: 0;
  border: none;
  box-shadow: none;
  background-color: transparent;
  overflow: visible;
  vertical-align: middle;
}
td.headerorderscell table.outstandingbtn > tbody > tr > td.button_over {
  display: table-cell;
  border-radius: 9px;
  /* Umlaufend gleicher Abstand: die Beschriftung soll denselben Abstand zum
     Knopfrand haben oben = unten = links = rechts (vorher 7px oben/unten
     gegen 14px links/rechts aus der alten Tabellen-Optik). */
  padding: 10px;
  vertical-align: middle;
}
td.headerorderscell table.outstandingbtn span {
  font-size: 15px !important;   /* !important noetig: font-size steht inline am <span> */
  line-height: 1.2;
  white-space: nowrap;
  display: inline-block;
}
/* die leere 1px-Spacer-Zeile des Templates im Kopf ausblenden */
td.headerorderscell table.outstandingbtn > tbody > tr:last-child { display: none; }

#profilemenu { position: relative; display: inline-block; vertical-align: middle; list-style: none; margin: 0; padding: 0; }
#profilemenu > li { list-style: none; margin: 0; padding: 0; }
a.profilemenu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background-color: var(--card);
  color: var(--navy);
  font-weight: 650;
  font-size: 13.5px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
a.profilemenu-trigger:hover { background-color: var(--orange-soft); border-color: var(--orange); color: var(--orange-ink); }
.profilemenu-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profilemenu-caret { font-size: 10px; color: var(--muted); }

/* Untermenue: dropit vergibt die Klasse .dropit-submenu erst per JavaScript. Damit
   das Kopfmenue auch ohne (oder mit veralteter, gecachter) javascript.js bedienbar
   bleibt, werden beide Varianten gestylt: das rohe verschachtelte <ul> und die
   dropit-Variante. dropit.css wird in headinclude.htm NACH style.css geladen ->
   die Overrides brauchen deshalb die ID (hoehere Spezifitaet). */
#profilemenu > li { position: relative; }
#profilemenu > li > ul,
#profilemenu .dropit-submenu {
  position: absolute;
  top: 100%;
  left: auto;
  right: 0;
  min-width: 230px;
  /* KEIN Abstand zum Trigger: eine Luecke zwischen Trigger und Untermenue ist
     eine tote Zone fuer den Zeiger - beim Uebergang verliert #profilemenu das
     :hover, das Menue klappt zu und die Eintraege sind nicht erreichbar.
     Die optische Luft im Kasten kommt aus padding: 6px 0. */
  margin: 0;
  padding: 6px 0;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
#profilemenu > li > ul a,
#profilemenu .dropit-submenu a { display: block; padding: 9px 16px; color: var(--ink); font-size: 13.5px; line-height: 1.4; text-decoration: none; }
#profilemenu > li > ul a:hover,
#profilemenu .dropit-submenu a:hover { background-color: var(--orange-soft); color: var(--orange-ink); text-decoration: none; }
#profilemenu > li > ul .profilemenu-info,
#profilemenu .dropit-submenu .profilemenu-info { padding: 7px 16px; color: var(--muted); font-size: 12px; }

/* Oeffnen: mit dropit per Klick, zusaetzlich immer per Hover (!important noetig,
   weil dropit.css das <ul> per display:none versteckt). So funktioniert das Menue
   auch dann, wenn im Browser noch die alte javascript.js liegt. */
#profilemenu:hover > li > ul { display: block !important; }
#profilemenu:hover .dropit-submenu { display: block !important; }

/* ===================== LIMS: Formulare + Analysenliste ===================== */
/* exe_lims.php mode=analysis_new / analysis_save (templates/frm_analysis_new*.htm)
   waren zwei Tabellen mit rohem blauem Inline-Rahmen (#5F71A2) und blaugrauen
   bgcolor-Zellen aus der DB-Style-Tabelle. Sie sind jetzt eine Card wie die
   Suchmaske: orange Kopfzeile, Label-Spalte hell, Werte weiss, Meldungszeile
   als Orange-Soft-Fuss. Die Formularfelder selbst sind unveraendert. */
table.limsform {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  background-color: var(--card);
  margin-bottom: 16px;
}
table.limsform td.limsform-head {
  background-color: var(--orange);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 16px;
}
table.limsform td.limsform-label {
  background-color: #f7f8fb;
  color: var(--navy);
  font-weight: 650;
  font-size: 13.5px;
  padding: 11px 16px;
  border-bottom: 1px solid #f0f1f5;
  vertical-align: middle;
}
table.limsform td.limsform-value {
  background-color: #ffffff;
  padding: 11px 16px;
  border-bottom: 1px solid #f0f1f5;
  vertical-align: middle;
}
table.limsform tr:last-child td { border-bottom: 0; }
table.limsform td.limsform-msg {
  background-color: var(--orange-soft);
  color: var(--orange-ink);
  font-weight: 650;
  font-size: 13px;
  padding: 8px 16px;
}
/* Zusatzzeilen der Lager-Formulare (templates/frm_stock_*_raw.htm):
   Produktname, Lieferant/Beschreibung und EAN-Barcode oberhalb der Feldzeilen. */
table.limsform td.limsform-name {
  background-color: #ffffff;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 16px 2px 16px;
}
table.limsform td.limsform-info {
  background-color: #ffffff;
  color: var(--muted);
  font-size: 13px;
  padding: 2px 16px 6px 16px;
}
table.limsform td.limsform-info-last { padding-bottom: 12px; border-bottom: 1px solid #f0f1f5; }
/* Warn-Kopfzeile (Steuermarken-Retoure, frm_stock_retoure_tax.htm): im Original
   bgcolor="#ff4444" - bleibt als rote Kopfzeile erhalten, damit die Warnung sichtbar
   ist, aber als Design-Token statt Rohfarbe. */
table.limsform td.limsform-head-crit { background-color: var(--crit); }
/* Aktionszeile am Card-Ende (Speichern-Button, frm_stock_raw_new.htm) */
table.limsform td.limsform-submit { background-color: #ffffff; text-align: right; padding: 12px 16px; }
table.limsform td.limsform-actions {
  background-color: #ffffff;
  text-align: right;
  white-space: nowrap;
  padding: 10px 16px 2px 16px;
}
/* Bewertungsfarben der Analysenliste (tbl_analysis_row.htm, $tpd_color aus
   class_lims.php check_tpd_conformity/check_tab_conformity): #000000 = normal,
   #ff0000 = nicht TPD-konform, #ff05f7 = nicht TAB-konform. Die Farbe steht als
   Inline-Style am <td>, deshalb !important - und nur innerhalb der Analysenliste,
   die beiden Hexwerte kommen auch anderswo vor. */
table#ProduktTabelle td[style*="#ff0000"],
table#ProduktTabelle td[style*="#FF0000"] { color: var(--crit) !important; }
table#ProduktTabelle td[style*="#ff05f7"],
table#ProduktTabelle td[style*="#FF05F7"] { color: var(--violet) !important; font-weight: 600; }


/* ===================== Mouseover-Hilfe-Divs (#help / #help2 / #help_width) =====================
   Diese Divs stehen in templates/headinclude.htm absichtlich ausserhalb des sichtbaren
   Bereichs (top:-200px) und werden nur per javascript/mouse.js eingeblendet:
   help() / help2() beim Mouseover, nohelp() / nohelp2() beim Mouseout.
   Sie waren die letzten eckigen Kaesten der App - hier auf den Design-1-Radius
   gebracht. Der Inline-Rahmen (3px #000066) und das weisse Feld bleiben unveraendert;
   border-radius steht nicht inline, deshalb gewinnt diese Regel ohne !important.
   #help_width ist der dritte Zwilling derselben Familie (Aufruf u. a. in
   templates/info_additional_med.htm) und wird mitgezogen, sonst waere er als
   einziger eckig. Das off-screen liegende #notification (Breite 700px, 10px-Rahmen)
   und die #login-Box gehoeren nicht zu dieser Familie und bleiben unveraendert. */
#help,
#help2,
#help_width {
  border-radius: var(--radius);
}

/* ===================== Meldungen: Toast + Dialog (wd-ui.js) =====================
   Ersetzt die Browser-Dialoge alert()/confirm() aus action.js (Stufe 1).
   Alle Werte kommen aus dem Design-1-Tokensatz oben, damit die Meldungen
   dieselbe Optik tragen wie Kopfband, Cards und Buttons:
   - Toast: weisse Card, 1px --border, 3px Farbkante links (wie der Akzent der
     Suchmaske), --radius, Schatten, 14px, unten rechts gestapelt.
   - Dialog: Backdrop rgba(16,24,40,.45), Kopfzeile #f7f8fb mit 3px Farbkante,
     Fusszeile #fcfcfd, Buttons Orange (--orange) bzw. Rot (--crit).
   wdui-ok/warn/crit steuert die Farbe (Kante + Punkt). Laedt eine Seite
   style.css nicht (Popup-/Druck-/Mailvorlagen), injiziert wd-ui.js selbst
   einen kompakten Ersatz - die Regeln hier bleiben die fuehrende Fassung. */

#wdui-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}

.wdui-toast {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 240px;
  max-width: 440px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(16, 24, 40, .14);
  padding: 12px 30px 12px 14px;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.45;
  animation: wdui-in .18s ease-out;
}
.wdui-toast.wdui-ok { border-left-color: var(--ok); }
.wdui-toast.wdui-warn { border-left-color: var(--orange); }
.wdui-toast.wdui-crit { border-left-color: var(--crit); }

.wdui-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.wdui-ok .wdui-dot { background: var(--ok); }
.wdui-warn .wdui-dot { background: var(--orange); }
.wdui-crit .wdui-dot { background: var(--crit); }

.wdui-toast-body { flex: 1 1 auto; min-width: 0; }
.wdui-toast-body ul,
.wdui-dialog-body ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.wdui-toast-body li,
.wdui-dialog-body li { margin: 2px 0; }

.wdui-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.wdui-x:hover { color: var(--ink); background: #f1f2f6; }

@keyframes wdui-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wdui-fade { from { opacity: 0; } to { opacity: 1; } }

#wdui-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  background: rgba(16, 24, 40, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: wdui-fade .15s ease-out;
}

.wdui-dialog {
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  overflow: auto;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(16, 24, 40, .28);
  font-family: var(--font);
  font-size: 14px;
  animation: wdui-in .18s ease-out;
}
.wdui-dialog-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: #f7f8fb;
  border-bottom: 1px solid var(--border);
  border-left: 3px solid var(--orange);
  border-radius: var(--radius) var(--radius) 0 0;
}
.wdui-dialog.wdui-ok .wdui-dialog-head { border-left-color: var(--ok); }
.wdui-dialog.wdui-crit .wdui-dialog-head { border-left-color: var(--crit); }
.wdui-dialog-head .wdui-dot { margin-top: 0; }
.wdui-dialog-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--navy);
}
.wdui-dialog-body { padding: 18px; color: var(--ink); line-height: 1.5; }
.wdui-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  background: #fcfcfd;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Buttons im Dialog: eigene Klassen, damit sie unabhaengig von der
   Button-Konvention der App funktionieren (auch ohne style.css). */
.wdui-btn,
.wdui-btn-grey {
  margin: 0;
  min-width: 96px;
  text-align: center;
  border: 0;
  border-radius: 9px;
  padding: 9px 16px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.wdui-btn { background-color: var(--orange); color: #ffffff; box-shadow: 0 2px 6px rgba(238, 123, 0, .3); }
.wdui-btn:hover { background-color: var(--orange-hover); }
.wdui-btn-grey { background-color: #e5e7eb; color: #374151; }
.wdui-btn-grey:hover { background-color: #d1d5db; }
.wdui-btn-crit { background-color: var(--crit) !important; color: #ffffff !important; box-shadow: none; }
.wdui-btn-crit:hover { background-color: #b91c1c !important; }

/* ---- Inline-Feldmeldung (Stufe 2: Validierung ohne alert()) --------------
   wdFieldError() haengt den Hinweis direkt unter das beanstandete Feld und
   markiert es. Wichtig: die Markierung braucht !important, weil einige alte
   Codepfade dasselbe Feld per element.style.background='#ff0000' faerben -
   Inline-Styles schlagen CSS, !important im Stylesheet schlaegt Inline. */
.wdui-fieldmsg {
  margin: 4px 0 0;
  max-width: 420px;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--crit);
}
.wdui-fieldmsg::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.wdui-fieldmsg.wdui-warn { color: var(--orange-ink); }
.wdui-fieldmsg.wdui-ok { color: #0d9d6c; }

input.wdui-invalid,
select.wdui-invalid,
textarea.wdui-invalid {
  border-color: var(--crit) !important;
  background-color: #fff5f5 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12) !important;
}

/* ---- Eingabe-Dialog (Stufe 3: ersetzt prompt()) -------------------------
   Felder im Dialog erben die globalen input-Regeln (Rahmen #d5d9e0,
   Fokusring orange) und werden hier nur auf Dialogbreite/Abstand gebracht. */
.wdui-form { margin: 0; }
.wdui-form-text { margin: 0 0 12px; }
.wdui-form-row { margin: 0 0 12px; }
.wdui-form-row:last-child { margin-bottom: 0; }
.wdui-form-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
}
.wdui-form-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 6px 10px;
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: #ffffff;
  border: 2px solid #d5d9e0;
  border-radius: 8px;
}
.wdui-form-hint { display: block; margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.wdui-info .wdui-dot { background: var(--navy); }

/* ===================== CRM-Zeilen (Termine) =====================
   Die Terminlisten setzen ihre Statusklasse als Zeilenklasse (\$class aus
   class_customer.php: list_events/list_all_events/list_my_events):
   "ueb_list" = Termin in der Zukunft, "button_over" = vergangen/offen,
   "button_green" = heute, "button_grey" = erledigt.
   Die drei button_*-Namen sind aber die Namen der App-Buttons: die Zelle bekam
   dadurch Button-Optik (Pille, 9px Radius, schrumpfende Breite) statt einer
   Listenzeile - die Tabelle war nur so breit wie ihr Inhalt, die Icon-Spalte
   blieb bei 80px und die drei Icons brachen untereinander um.
   In Zeilen mit class="crmrow" (templates/tbl_events_row.htm,
   tbl_my_events_row.htm) bekommen die Zellen daher die Listenzeilen-Optik
   zurueck; die Statusfarbe bleibt als gedaempfter Design-1-Ton erhalten. */
tr.crmrow > td.button_over,
tr.crmrow > td.button_grey,
tr.crmrow > td.button_green {
  display: table-cell;
  margin: 0;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid #f0f1f5;
  border-radius: 0;
  box-shadow: none;
  text-align: left;
  font-size: 13.5px;
  font-weight: 400;
  cursor: default;
}
/* Die Statuszelle der Zeile ist 120px breit (width-Attribut der Templates).
   Die Nachbarzelle ist "greedy" (width=100%), damit die Spalte ihre 120px
   behaelt und die Icons rechts buendig in einer Zeile liegen. */
tr.crmrow > td[width="120"] { min-width: 120px; }

tr.crmrow > td.button_over  { background-color: #ffe9cf; color: var(--orange-ink); }
tr.crmrow > td.button_green { background-color: #dcf5e4; color: #0b7a52; }
tr.crmrow > td.button_grey  { background-color: #f1f2f6; color: #6b7280; }
tr.crmrow:hover > td.button_over  { background-color: #ffdfb8; }
tr.crmrow:hover > td.button_green { background-color: #cdf0da; }
tr.crmrow:hover > td.button_grey  { background-color: #e7e9ee; }

/* CKEditor-Hervorhebung (Werkzeugleiste "Hintergrundfarbe"/Marker) in Notizen,
   Texten und Terminen: CKEditor speichert <span class="marker">. Die Regel
   stand bisher nur in ckeditor/contents.css (Editor-Iframe) und inline in
   templates/tbl_mail_events_header.htm - in den Notiz-Listen (Kundennotizen,
   alle Notizen, Suche) fehlte sie, das Gelb war dort unsichtbar.
   Farbwert wie in tbl_mail_events_header.htm (#FFFD00). */
.marker {
  background-color: #FFFD00;
  padding: 0 2px;
  border-radius: 3px;
}