/* Q7Fakt – gemeinsames Stylesheet.
   Gestaltung angelehnt an das frühere Webprojekt (Bootstrap-Vorlage „Materio“): Inter, Violett #8c57ff, hellgraue Fläche,
   weiße Karten mit weichem Schatten, Seitenleiste mit Verlaufs-Hervorhebung, abgesetzte Kopfleiste, Toasts, Modals, Tabs,
   Benutzermenü, Hell/Dunkel-Schema. Keine externen Ressourcen (CSP); Schriften unter assets/fonts (siehe fonts/HERKUNFT.md). */

/* ------------------------------------------------------------------ Schriften */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-v13-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-v13-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-v13-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-v13-latin-700.woff2") format("woff2"); }
@font-face { font-family: "remixicon"; font-style: normal; font-weight: 400; font-display: block; src: url("fonts/remixicon.woff2") format("woff2"); }

/* ------------------------------------------------------------------ Farben und Maße (hell) */
:root {
  --primary: #8c57ff; --primary-hover: #7e4ee6; --primary-soft: #f2ebff; --primary-line: #c9b0ff; --on-primary: #fff;
  --primary-grad: #c5aaff; --primary-shadow: rgba(140, 87, 255, .3);   /* Verlauf/Schatten der Akzentfarbe (Darstellung: eigene Farben) */
  --bg: #f4f5fa; --card: #fff; --surface-2: #faf9fc; --head: #f6f7fb; --hover: rgba(46, 38, 61, .06); --row-hover: #faf9fc;
  --text: #433c50; --body: #5c5667; --muted: #8a8694; --line: #e6e5e8; --input: #cfcdd4; --input-hover: #aeaab6; --field: #fff; --field-off: #f6f6f8;
  --success: #56ca00; --success-text: #2e6d00; --success-soft: #e7f7da;
  --danger: #ff4c51; --danger-text: #b3171d; --danger-soft: #ffe7e8;
  --warning: #ffb400; --warning-text: #7a5200; --warning-soft: #fff4d6;
  --info: #16b1ff; --info-text: #075e8a; --info-soft: #dcf3ff;
  --shadow: 0 .25rem .625rem rgba(46, 38, 61, .14); --shadow-sm: 0 .125rem .375rem rgba(46, 38, 61, .1); --shadow-lg: 0 .5rem 1.5rem rgba(46, 38, 61, .2);
  --overlay: rgba(46, 38, 61, .5); --topbar: rgba(255, 255, 255, .95);
  --radius: .375rem; --radius-lg: .625rem; --side: 260px;
  /* frühere Namen (Designer, Vorlagen) */
  --accent: var(--primary); --accent-2: var(--primary-hover); --ok: var(--success-text); --warn: var(--warning-text);
  color-scheme: light; font-size: 15px;
}
/* ------------------------------------------------------------------ dunkles Schema (Materio „dark“) */
:root[data-theme=dark] {
  --primary-soft: rgba(140, 87, 255, .18); --primary-line: rgba(140, 87, 255, .5);
  --bg: #28243d; --card: #312d4b; --surface-2: #2c2843; --head: #3a3555; --hover: rgba(231, 227, 252, .08); --row-hover: #36314f;
  --text: #e7e3fc; --body: #cfcbe4; --muted: #a39fb9; --line: #464160; --input: #5a5575; --input-hover: #7a7596; --field: #2c2843; --field-off: #36324f;
  --success-text: #9be35f; --success-soft: rgba(86, 202, 0, .16);
  --danger-text: #ff8a8d; --danger-soft: rgba(255, 76, 81, .16);
  --warning-text: #ffcf5c; --warning-soft: rgba(255, 180, 0, .16);
  --info-text: #7fd3ff; --info-soft: rgba(22, 177, 255, .16);
  --shadow: 0 .25rem .75rem rgba(19, 17, 32, .45); --shadow-sm: 0 .125rem .375rem rgba(19, 17, 32, .35); --shadow-lg: 0 .5rem 1.5rem rgba(19, 17, 32, .6);
  --overlay: rgba(19, 17, 32, .65); --topbar: rgba(49, 45, 75, .95);
  color-scheme: dark;
}
/* ------------------------------------------------------------------ hoher Kontrast (barrierearm, WCAG AAA: Text ≥ 7:1)
   Schwarz auf Weiß, klare Rahmen statt Schatten, Bedeutungsfarben (Ampel) in dunklen Tönen – Werte nachgerechnet */
:root[data-theme=contrast] {
  --primary: #3b1a8c; --primary-hover: #26105e; --primary-soft: #ece6ff; --primary-line: #3b1a8c; --on-primary: #fff;
  --bg: #fff; --card: #fff; --surface-2: #fff; --head: #ebebeb; --hover: rgba(0, 0, 0, .08); --row-hover: #ebebeb;
  --text: #000; --body: #000; --muted: #3d3d3d; --line: #000; --input: #000; --input-hover: #000; --field: #fff; --field-off: #e6e6e6;
  --success: #0a5c00; --success-text: #0a5c00; --success-soft: #e2f4d9;
  --danger: #9e0000; --danger-text: #9e0000; --danger-soft: #fde4e4;
  --warning: #6b4400; --warning-text: #6b4400; --warning-soft: #fff1cc;
  --info: #00457a; --info-text: #00457a; --info-soft: #dcefff;
  --shadow: none; --shadow-sm: none; --shadow-lg: none;
  --overlay: rgba(0, 0, 0, .75); --topbar: #fff;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Scrollleisten im Materio-Lila (Seite und alle scrollbaren Bereiche; hell/dunkel über die Farb-Tokens).
   Standard: scrollbar-color (Firefox, Chrome/Edge ab 121); ::-webkit-scrollbar für Safari und ältere Browser. */
* { scrollbar-color: var(--primary-line) transparent; }
html { scrollbar-color: var(--primary) var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary-line); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html::-webkit-scrollbar-thumb { background-color: var(--primary); }
::-webkit-scrollbar-thumb:hover { background-color: var(--primary-hover); }
body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg); color: var(--body); line-height: 1.47; font-size: .9375rem; }
a { color: var(--primary-text, var(--primary)); text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }
h1, h2, h3 { color: var(--text); font-weight: 500; }
h1 { font-size: 1.375rem; margin: 0 0 1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; line-height: 1.3; }
h2 { font-size: 1.0625rem; margin: 0 0 .8rem; }
h3 { font-size: .9375rem; margin: 1rem 0 .4rem; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------------------------------ Symbole (Remix Icon, nur benötigte Zeichen) */
.ic { font-family: "remixicon" !important; font-style: normal; font-weight: 400; line-height: 1; display: inline-block; -webkit-font-smoothing: antialiased; }
.ic-home::before { content: "\ee2f"; } .ic-beleg::before { content: "\ecef"; } .ic-einkauf::before { content: "\f11e"; }
.ic-kunde::before { content: "\f256"; } .ic-lieferant::before { content: "\f231"; } .ic-produkt::before { content: "\ea48"; }
.ic-bar::before { content: "\ef69"; } .ic-kasse::before { content: "\ead3"; } .ic-offen::before { content: "\f20f"; }
.ic-chart::before { content: "\ea96"; } .ic-brief::before { content: "\eefc"; } .ic-prozent::before { content: "\efe6"; } .ic-rechner::before { content: "\eb1f"; }
/* Kalkulator: Summen (Menge als Faktor) nebeneinander */
.modal-feld.kalk-summen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.modal-feld.kalk-summen[hidden] { display: none; }
#kalkulator .modal { width: min(580px, 100%); }
.ic-aufgabe::before { content: "\f1e8"; } .ic-projekt::before { content: "\ed52"; } .ic-ticket::before { content: "\ec0c"; }
.ic-miete::before { content: "\ee6f"; } .ic-daten::before { content: "\ec16"; } .ic-vorlage::before { content: "\ee83"; }
.ic-einstellung::before { content: "\f0e6"; } .ic-module::before { content: "\f452"; } .ic-team::before { content: "\f1ee"; } .ic-pruefung::before { content: "\f100"; }
.ic-menu::before { content: "\ef3e"; } .ic-passwort::before { content: "\eed0"; } .ic-abmelden::before { content: "\eeda"; }
.ic-schliessen::before { content: "\eb99"; } .ic-auge::before { content: "\ecb5"; } .ic-auge-aus::before { content: "\ecb7"; }
.ic-hell::before { content: "\f1bf"; } .ic-dunkel::before { content: "\ef6f"; } .ic-system::before { content: "\ebca"; }
.ic-pfeil-unten::before { content: "\ea4e"; } .ic-pfeil-oben::before { content: "\ea78"; } .ic-person::before { content: "\f264"; } .ic-mail::before { content: "\eef6"; }
.ic-kalender::before { content: "\eb27"; } .ic-pfeil-links::before { content: "\ea64"; } .ic-pfeil-rechts::before { content: "\ea6e"; }
.ic-telefon::before { content: "\efec"; } .ic-mehr::before { content: "\ef77"; } .ic-entsperrt::before { content: "\eed2"; } .ic-bank::before { content: "\ea94"; } .ic-ansprechpartner::before { content: "\f27a"; } .ic-ort::before { content: "\ef14"; } .ic-kontakte::before { content: "\ebce"; }
.ic-datei::before { content: "\ed0f"; } .ic-rabatt::before { content: "\f475"; } .ic-ordner::before { content: "\ed70"; }
/* Preisverhandlung (exchange-funds-fill) und Provision (refund-line), Vorgabe Anwender 31.10.2026 */
.ic-verhandlung::before { content: "\ecab"; } .ic-provision::before { content: "\f068"; }
.ic-verlauf::before { content: "\ee17"; } .ic-karte::before { content: "\ea92"; } .ic-speichern::before { content: "\f0b3"; }
.ic-frage::before { content: "\f045"; } .ic-loeschen::before { content: "\ec2a"; } .ic-plus::before { content: "\ea13"; }
.ic-drucken::before { content: "\f029"; } .ic-senden::before { content: "\f0da"; } .ic-bearbeiten::before { content: "\ec86"; }
.ic-posteingang::before { content: "\ee4f"; } .ic-entwurf::before { content: "\ec5c"; } .ic-archiv::before { content: "\ea48"; } .ic-spam::before { content: "\f169"; }
.ic-stern::before { content: "\f18b"; } .ic-stern-voll::before { content: "\f186"; } .ic-mail-offen::before { content: "\eefa"; } .ic-mail-ungelesen::before { content: "\ef02"; }
.ic-verschieben::before { content: "\ed7e"; } .ic-anlage::before { content: "\ea84"; } .ic-aktualisieren::before { content: "\f064"; } .ic-wichtig::before { content: "\eca1"; } .ic-antworten::before { content: "\f07a"; }
.ic-paket::before { content: "\f231"; } .ic-ok::before { content: "\eb81"; } .ic-fehler::before { content: "\eca1"; } .ic-info::before { content: "\ee59"; } .ic-warnung::before { content: "\ea21"; }

/* ------------------------------------------------------------------ Grundlayout: Seitenleiste + Inhalt */
.layout { display: flex; min-height: 100vh; }
.side { width: var(--side); flex: none; background: var(--menue, var(--bg)); padding: 0 0 2rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.25rem 1rem; color: var(--menue-text, var(--text)); font-weight: 600; font-size: 1.25rem; letter-spacing: .01em; }
.brand:hover { text-decoration: none; color: var(--menue-text, var(--text)); }
/* Wortmarke als eingebettetes SVG (templates/_logo.php): der Schriftzug nimmt die Menüfarbe an, das Zeichen bleibt farbig */
.brand-bild { display: block; height: 2.1rem; width: auto; max-width: 100%; object-fit: contain; }   /* object-fit: in der schmalen Seitenleiste nicht verzerren */
.nav-klein .brand-bild { height: 1.7rem; }
/* Wortmarke je Farbschema (templates/_logo.php): hell und Kontrast zeigen die schwarze, dunkel die weiße Datei */
.brand-bild-dunkel { display: none; }
:root[data-theme=dark] .brand-bild-hell { display: none; }
:root[data-theme=dark] .brand-bild-dunkel { display: block; }
.brand-logo { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; font-size: .8rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #c5aaff 0%, #8c57ff 100%); box-shadow: 0 2px 6px rgba(140, 87, 255, .35); }   /* Marke Q7: immer Lila, auch mit eigenen Farben */
.menu-header { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 .35rem; padding: 0 1.25rem; font-size: .75rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--menue-muted, var(--muted)); white-space: nowrap; }
.menu-header::after { content: ""; flex: 1; height: 1px; background: var(--menue-line, var(--line)); }
.side a:not(.brand) { display: flex; align-items: center; gap: .65rem; margin: .1rem 1rem .1rem 0; padding: .5rem 1rem .5rem 1.4rem; border-radius: 0 50rem 50rem 0;
  color: var(--menue-text, var(--text)); font-size: .9375rem; }
.side a:not(.brand) .ic { font-size: 1.3rem; color: var(--menue-muted, var(--muted)); width: 1.4rem; text-align: center; }
.side a:not(.brand):hover { background: var(--menue-hover, var(--hover)); text-decoration: none; }
.side a.active, .side a.active:hover { background: linear-gradient(270deg, var(--primary) 0%, var(--primary-grad) 100%); color: var(--on-primary); box-shadow: 0 2px 6px var(--primary-shadow); }
.side a.active .ic { color: var(--on-primary); }
.nav-backdrop { display: none; }
.page { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 1085; display: flex; align-items: center; gap: .75rem; margin: 0 1.25rem; padding: .5rem 1rem;
  background: var(--topbar); color: var(--kopf-text, var(--text)); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: var(--shadow-sm); min-height: 3.5rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.top-title { display: none; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navtoggle { display: none; background: none; border: 0; box-shadow: none; padding: .3rem; font-size: 1.45rem; color: var(--text); cursor: pointer; }
.navtoggle:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.top-right { margin-left: auto; display: flex; gap: .25rem; align-items: center; }
.icon-btn { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--text);
  font-size: 1.35rem; box-shadow: none; }
.icon-btn:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.avatar { position: relative; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text, var(--primary));
  font-weight: 600; flex: none; }
.avatar.online::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: .6rem; height: .6rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px var(--card); }
.avatar.gross { width: 4.5rem; height: 4.5rem; font-size: 1.6rem; border-radius: var(--radius-lg); }
main { flex: 1; padding: 1.5rem 1.25rem 3rem; min-width: 0; }

/* ------------------------------------------------------------------ Dropdown (Benutzermenü) */
.dropdown { position: relative; }
/* Direkt drucken mit Standarddrucker: geteilter Knopf – links drucken, rechts ▾ für die anderen Drucker */
.direktdruck-wahl.mit-standard { display: inline-flex; }
.direktdruck-wahl.mit-standard > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.direktdruck-wahl.mit-standard > .dropdown-toggle { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: .5rem; padding-right: .5rem; }
.dropdown-toggle { display: inline-flex; align-items: center; gap: .5rem; padding: .15rem .2rem .15rem .15rem; border: 0; background: transparent; border-radius: 50rem; box-shadow: none; color: var(--text); }
.dropdown-toggle:hover { background: var(--hover); color: var(--text); border-color: transparent; }
.dropdown-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60; min-width: 15rem; padding: .5rem 0; margin: 0; list-style: none; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-.35rem); transition: opacity .15s, transform .15s, visibility .15s; }
.dropdown.open .dropdown-menu { opacity: 1; visibility: visible; transform: none; }
.dropdown-menu li > a, .dropdown-menu li > button, .dropdown-menu li > form > button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem 1.2rem; border: 0; border-radius: 0;
  background: none; color: var(--text); font-size: .9rem; font-weight: 400; box-shadow: none; text-align: left; justify-content: flex-start; }
.dropdown-menu li > a:hover, .dropdown-menu li > button:hover, .dropdown-menu li > form > button:hover { background: var(--hover); color: var(--text); text-decoration: none; }
.dropdown-menu li .ic { font-size: 1.2rem; color: var(--muted); }
/* Dateisymbole nach Endung (dateiIcon) vor Dateinamen */
svg.ic-datei { display: inline-block; flex: none; width: 1.3em; height: 1.3em; vertical-align: -.3em; margin-right: .35em; }
.datei-link { white-space: normal; }
/* Datei nicht gefunden (Dokumentlisten): Symbol mit Warnzeichen, Name grau statt Link */
.datei-fehlt { color: var(--muted); cursor: help; }
.datei-fehlt-hinweis { color: var(--muted); margin: .4rem 0 0; }
/* Markenzeichen (Telegram, WhatsApp) als SVG in Originalfarben – Größe wie die Schriftsymbole */
.ic-marke { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.dropdown-menu li .ic-marke { width: 1.2rem; height: 1.2rem; }
.card-titel .ic-marke { width: 1.3rem; height: 1.3rem; }
.dropdown-menu .dropdown-kopf { display: flex; align-items: center; gap: .7rem; padding: .4rem 1.2rem .6rem; }
.dropdown-menu .dropdown-kopf strong { display: block; color: var(--text); font-weight: 500; }
.dropdown-menu .trenner { height: 1px; background: var(--line); margin: .4rem 0; }
.dropdown-menu .auswahl { display: flex; gap: .25rem; padding: .3rem 1rem .4rem; min-width: 16.5rem; }   /* schmaler wurde „Kontrast“ gekürzt (Prüfung 01.11.2026) */
.dropdown-menu .auswahl button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .4rem .2rem; font-size: .75rem; border: 1px solid var(--line);
  background: var(--card); color: var(--body); box-shadow: none; }
.dropdown-menu .auswahl button .ic { font-size: 1.15rem; }
.dropdown-menu .auswahl button[aria-pressed=true] { border-color: var(--primary); color: var(--primary-text, var(--primary)); background: var(--primary-soft); }
.dropdown-menu .auswahl button[aria-pressed=true] .ic { color: var(--primary-text, var(--primary)); }
.dropdown-menu form.inline { display: block; }

/* ------------------------------------------------------------------ Karten und Aufteilung */
.head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem 1rem; flex-wrap: wrap; margin-bottom: .2rem; }
.head h1, .head h2 { margin-bottom: .8rem; }
/* Beleg: Kunde/Lieferant unter der Überschrift */
.head-titel { min-width: 0; }
.head-titel h1 { margin-bottom: .15rem; }
.head-unter { margin: 0 0 .8rem; display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; color: var(--text); font-weight: 500; }
.head-unter .ic { color: var(--muted); }
/* Warnstufe der Adresse (VB6 WarningLevel): Ampel Rot/Orange/Grün, aktive Stufe leuchtet; Klick setzt die Stufe */
.warnstufe { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); vertical-align: middle; }
.warnstufe form { display: inline-flex; margin: 0; }
.ampel { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; border: 0; padding: 0; opacity: .22; background: #9ca3af; }
.ampel-2 { background: #dc2626; } .ampel-1 { background: #f59e0b; } .ampel-0 { background: #16a34a; }
.ampel.an { opacity: 1; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px currentColor; }
.ampel-2.an { color: #dc2626; } .ampel-1.an { color: #f59e0b; } .ampel-0.an { color: #16a34a; }
button.ampel { cursor: pointer; } button.ampel:hover, button.ampel:focus-visible { opacity: .75; }
.warnstufe-zeile { display: inline-flex; align-items: center; gap: .4rem; }
.actions { display: flex; gap: .45rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.card { background: var(--card); border: 0; border-radius: var(--radius); padding: 1.25rem; margin: 0 0 1.5rem; box-shadow: var(--shadow); min-width: 0; }
.card > h2:first-child { margin-top: 0; }
.card .head .actions, .card .head h2 { margin-bottom: .6rem; }
.card-titel { display: flex; align-items: center; gap: .5rem; }
.card-titel .ic { color: var(--primary-text, var(--primary)); font-size: 1.25rem; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .9rem .8rem; margin: 0; min-width: 0; }
fieldset.card { border: 0; padding: 1.25rem; }
legend { font-weight: 500; color: var(--text); padding: 0 .35rem; font-size: .9rem; }
/* Überschrift einer Formularkarte wie eine Kartenüberschrift innerhalb der Karte darstellen */
fieldset.card > legend { float: left; width: 100%; padding: 0; margin: 0 0 .9rem; font-size: 1.0625rem; }
fieldset.card > legend + * { clear: both; }
.formgrid .card > legend { grid-column: 1 / -1; margin-bottom: .2rem; }
details > summary { cursor: pointer; font-weight: 500; color: var(--text); margin-bottom: .4rem; }
details > summary:hover { color: var(--primary-text, var(--primary)); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 0 1.5rem; }
.cols > .card { margin-bottom: 1.5rem; }
/* Produkt → Preise: Mengenrabatt und Mengenstaffeln. Nebeneinander (`.cols.mengen-spalten`) beide oben bündig –
   sonst zieht die längere Staffelliste die Rabattfelder auf ihre Höhe; unter 340 px Spaltenbreite stapelt `.cols`
   von selbst. Ist nur eine der beiden Funktionen eingeschaltet, steht sie allein in `.mengen-einzeln` und nutzt die
   volle Breite. Der obere Abstand trennt beides von der Karte „Preise“ darüber und entsteht nur, wenn der
   Abschnitt überhaupt gerendert wird (sind beide Funktionen aus, gibt es den Container nicht). */
.mengen-spalten, .mengen-einzeln { margin-top: 1.5rem; }
.mengen-spalten { align-items: start; }
.mengen-einzeln > .card, .mengen-einzeln > .formgrid > .card { margin-bottom: 1.5rem; }

/* ------------------------------------------------------------------ Profilkopf (z. B. Adresse) */
.profil { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.profil-text { flex: 1 1 260px; min-width: 0; }
.profil-text h1 { margin: 0 0 .3rem; }
.profil-meta { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; color: var(--muted); font-size: .875rem; }
.profil-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.profil-meta .ic { font-size: 1.05rem; }
.profil + .actions { margin-top: 1rem; margin-bottom: 0; padding-top: 1rem; border-top: 1px solid var(--line); }
/* Drei-Punkte-Menü (Materio „ri-more-2-line“) für seltene Funktionen */
.mehr-knopf { width: 2.25rem; height: 2.25rem; padding: 0; justify-content: center; color: var(--muted); }
.mehr-knopf .ic { font-size: 1.5rem; }
.profil.mit-mehr { position: relative; padding-right: 2.75rem; }
.profil-mehr { position: absolute; top: -.25rem; right: -.25rem; }
.beleg-profil .profil-meta a { color: inherit; }
/* Kopfkarte aller Seiten (seitenKopf() in src/helpers.php): ohne Knöpfe keine leere Leiste */
.seiten-kopf > .actions:not(:has(*)) { display: none; }
.seiten-kopf .profil-text h1 .tag { vertical-align: .2rem; font-size: .75rem; }
.seiten-kopf .profil-text h1 .muted { font-size: 1rem; font-weight: 400; }
.seiten-kopf .profil > .tiles { margin: 0; }
.seiten-kopf .trenner-senkrecht { width: 1px; align-self: stretch; background: var(--line); margin: 0 .2rem; }
.seiten-kopf .btn.aktiv-auswahl { border-color: var(--primary); color: var(--primary-text, var(--primary)); background: var(--primary-soft); }
@media print { .seiten-kopf { display: none; } }
/* Reiterleisten brechen um statt waagerecht zu scrollen (alle Seiten; die Seitenleisten-Reiter im Beleg haben ein eigenes Raster) */
.tab-leiste:not(.seitentabs .tab-leiste) { flex-wrap: wrap; overflow: visible; row-gap: 0; }
.tab-leiste:not(.seitentabs .tab-leiste) > :is(button, a) { padding: .75rem .75rem .7rem; }

/* ------------------------------------------------------------------ Tabs (Materio „nav-tabs“) */
.tabs { margin: 0 0 1.5rem; }
.tab-leiste { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: thin; background: var(--card); border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow); padding: 0 .5rem; border-bottom: 1px solid var(--line); position: relative; z-index: 1; }
.tab-leiste button { display: inline-flex; align-items: center; gap: .45rem; padding: .85rem 1rem .8rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  color: var(--body); font-weight: 500; white-space: nowrap; box-shadow: none; flex: none; }
.tab-leiste button .ic { font-size: 1.2rem; }
.tab-leiste button:hover { color: var(--primary-text, var(--primary)); background: none; border-color: transparent; border-bottom-color: var(--primary-line); }
.tab-leiste button[aria-selected=true] { color: var(--primary-text, var(--primary)); border-bottom-color: var(--primary); }
.tab-inhalt { background: var(--card); border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); padding: 1.25rem; }
.tab-panel[hidden] { display: none; }
.tab-panel > .card, .tab-panel .cols > .card, .tab-panel .formgrid .card { box-shadow: none; border: 1px solid var(--line); }
.tab-panel > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ Schaltflächen */
.btn, button { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; border: 1px solid var(--input);
  background: var(--card); color: var(--text); padding: .45rem 1rem; border-radius: var(--radius); cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500;
  line-height: 1.35; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; text-align: center; }
.btn:hover, button:hover { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-text, var(--primary)); text-decoration: none; }
.btn.primary, button.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: 0 2px 6px var(--primary-shadow); }
.btn.primary:hover, button.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); box-shadow: 0 4px 10px var(--primary-shadow); }
.btn.danger, button.danger { color: var(--danger-text); border-color: rgba(255, 76, 81, .55); background: var(--card); }
.btn.danger:hover, button.danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger.voll, button.danger.voll { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: 0 2px 6px rgba(255, 76, 81, .3); }
.btn.danger.voll:hover, button.danger.voll:hover { background: #e64449; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text); }
.btn.ghost:hover { background: var(--hover); border-color: transparent; color: var(--text); }
.btn.small, button.small { padding: .2rem .6rem; font-size: .8125rem; min-height: 1.5rem; }   /* Text- und Symbolknöpfe gleich hoch */
.btn.small:has(> .ic:only-child), button.small:has(> .ic:only-child) { min-width: 1.85rem; padding-inline: .45rem; justify-content: center; }
.btn.block { display: flex; width: 100%; margin: .35rem 0; }
.btn[disabled], button[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; color: var(--primary-text, var(--primary)); box-shadow: none; }
.linkbtn:hover { background: none; }
form.inline { display: inline; }
/* Formular nur als Träger eines Knopfes (z. B. „Beleg drucken“, „ZUGFeRD-PDF“ – der Druck schreibt und läuft deshalb über POST):
   es soll das Aussehen des Knopfes nicht verändern */
form.knopfform { display: contents; }
.btnrow { display: flex; flex-wrap: wrap; gap: .35rem; }
/* Wellen-Effekt beim Klick (Materio „waves“) */
.welle { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .25; pointer-events: none; animation: welle .55s ease-out; }
@keyframes welle { to { transform: scale(2.6); opacity: 0; } }

/* ------------------------------------------------------------------ Badges */
.badge { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .4rem; border-radius: 50rem; background: var(--primary-soft); color: var(--primary-text, var(--primary));
  font-size: .72rem; font-weight: 600; line-height: 1; }
.tag { display: inline-block; font-size: .75rem; padding: .12rem .55rem; border-radius: 50rem; background: var(--hover); color: var(--text); font-weight: 500; vertical-align: middle; line-height: 1.4; }
.tag.green { background: var(--success-soft); color: var(--success-text); }
.tag.red { background: var(--danger-soft); color: var(--danger-text); }
.tag.orange { background: var(--warning-soft); color: var(--warning-text); }
.tag.lila { background: var(--primary-soft); color: var(--primary-text, var(--primary)); }

/* ------------------------------------------------------------------ Formulare */
input, select, textarea { font: inherit; font-size: .9375rem; color: var(--text); padding: .55rem .8rem; border: 1px solid var(--input); border-radius: var(--radius);
  background: var(--field); width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--input-hover); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; padding: 0; margin: 0; accent-color: var(--primary); flex: none; box-shadow: none; }
input[type=file] { overflow: hidden; cursor: pointer; line-height: 1.25; }   /* gleiche Polsterung wie die übrigen Felder → gleiche Höhe */
input[type=file]::file-selector-button { font: inherit; color: var(--text); background: var(--field-off); border: 0; border-inline-end: 1px solid var(--input);
  border-radius: 0; padding: .55rem .8rem; margin: -.55rem .8rem -.55rem -.8rem; cursor: pointer; transition: background .15s; }
input[type=file]:hover::file-selector-button { background: var(--hover); }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + input[type=file]) > input[type=file]::file-selector-button {
  padding-top: .7rem; padding-bottom: .6rem; margin-top: -.7rem; margin-bottom: -.6rem; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--field-off); color: var(--muted); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--danger); }
textarea { resize: vertical; }
/* Auswahlfelder ohne Betriebssystem-Aussehen: Safari ignoriert sonst Innenabstand und Höhe (Feld zu niedrig); Pfeil selbst gezeichnet */
/* gleiche feste Zeilenhöhe für Eingabe- und Auswahlfelder: gleich hoch in allen Browsern (Safari, Edge, Firefox) */
input:not([type=checkbox]):not([type=radio]):not([type=file]), select { line-height: 1.25; }
select { padding-right: 2.2rem; }
select:not([multiple]):not([size]) { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a8694' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: .75rem; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .8125rem; font-weight: 500; color: var(--text); }
label > span { font-size: .8125rem; }
label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; font-size: .9rem; color: var(--body); cursor: pointer; }
/* Umrandete Felder wie Materio „form-floating-outline“: Beschriftung sitzt auf der oberen Rahmenlinie. Gilt für Felder der Form
   <label><span>Text</span><Eingabe></label> in Formularrastern, Seitenleisten-Formularen und Dialogen; die Beschriftung verdeckt
   die Linie nur in der unteren Hälfte (Feldfarbe), oben bleibt der Hintergrund des Behälters sichtbar. */
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett, .stueckliste-neu) label:not(.check):not(.schalter):has(> span:first-child + :is(input, select, textarea, .lookup, .eingabe-gruppe, .eingabe-einheit, .feld-auswahl, .eingabe-mit-knopf)) {
  --notch: var(--field); position: relative; gap: 0; padding-top: .55rem; }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett, .stueckliste-neu) label:not(.check):not(.schalter):has(> span:first-child + :is(input, select, textarea, .lookup, .eingabe-gruppe, .eingabe-einheit, .feld-auswahl, .eingabe-mit-knopf)) > span:first-child {
  position: absolute; top: 0; left: .6rem; z-index: 2; max-width: calc(100% - 1.2rem); padding: 0 .3rem; font-size: .75rem; line-height: 1.1rem;
  font-weight: 500; color: var(--muted); white-space: nowrap; background: linear-gradient(to bottom, transparent 0 calc(.55rem - 3px), var(--notch) calc(.55rem - 3px)); border-radius: .2rem;
  pointer-events: none; transition: color .15s; overflow: hidden; text-overflow: ellipsis; }   /* zu lange Beschriftung: „…“ statt über den Rand; Abdeckung ab 3px über der Rahmenlinie (.55rem), damit auch der Fokusring (1px außen) die Schrift nie durchstreicht */
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + :is(input, select, textarea, .lookup, .eingabe-gruppe, .eingabe-einheit, .feld-auswahl, .eingabe-mit-knopf)) > span:first-child .hinweis { pointer-events: auto; }
/* Tooltip des ⓘ in der Beschriftung: die Beschriftung kürzt überlangen Text mit overflow: hidden – solange der Hinweis offen ist, darf die
   Blase hinausragen (sonst bleibt sie unsichtbar, Meldung Anwender 27.10.2026) */
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett, .stueckliste-neu) label > span:first-child:has(.hinweis:is(:hover, :focus-visible, .offen)) { overflow: visible !important; z-index: 5 !important; }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:not(.check):not(.schalter):has(> span:first-child + :is(input, select, textarea, .lookup, .eingabe-gruppe, .eingabe-einheit, .feld-auswahl, .eingabe-mit-knopf)):focus-within > span:first-child { color: var(--primary-text, var(--primary)); }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + :is(input[readonly], input:disabled, select:disabled, textarea:disabled)) { --notch: var(--field-off); }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + .eingabe-einheit > :is(input[readonly], input:disabled)) { --notch: var(--field-off); }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + .eingabe-einheit) > .eingabe-einheit > input { padding-top: .7rem; padding-bottom: .6rem; }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform) label:has(> span:first-child + .lookup) > .lookup input { padding-top: .7rem; padding-bottom: .6rem; }
/* Feld mit Knopf daneben (Suche, Öffnen): Beschriftung auf der Rahmenlinie wie bei den übrigen Feldern; Knopf so hoch wie das Feld */
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + .eingabe-mit-knopf) > .eingabe-mit-knopf :is(input, select) { padding-top: .7rem; padding-bottom: .6rem; }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + .eingabe-mit-knopf > :is(input[readonly], input:disabled)) { --notch: var(--field-off); }
/* Einheit rechts im Feld (Materio „input-group-merge“): Form::einheit() */
.eingabe-einheit { position: relative; display: flex; align-items: center; min-width: 0; }
.eingabe-einheit > input { padding-right: 2.6rem; }
.eingabe-einheit.einheit-mittel > input { padding-right: 3.4rem; }
.eingabe-einheit.einheit-lang > input { padding-right: 4.4rem; }
.eingabe-einheit > .einheit { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .875rem; pointer-events: none; }
.eingabe-einheit > input:focus + .einheit { color: var(--primary-text, var(--primary)); }
.eingabe-einheit:has(> input:is([inputmode=decimal], [inputmode=numeric], [type=number])) > input { text-align: right; }
/* Ein/Aus-Kontrollkästchen als Schalter (Materio „form-switch“) */
label.check > input[type=checkbox] { appearance: none; -webkit-appearance: none; position: relative; width: 2.1rem; height: 1.2rem; border-radius: 50rem; border: 0;
  background: var(--input); cursor: pointer; transition: background .15s; }
label.check > input[type=checkbox]::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: .8rem; height: .8rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
label.check > input[type=checkbox]:checked { background: var(--primary); }
label.check > input[type=checkbox]:checked::after { transform: translateX(.9rem); }
label.check > input[type=checkbox]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
label.check > input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett, .stueckliste-neu) label:has(> span:first-child + :is(input, select, textarea)) > :is(input, select, textarea) { padding-top: .7rem; padding-bottom: .6rem; }
/* Eingabegruppe mit Symbol-Schaltfläche (z. B. Passwort anzeigen) */
.eingabe-gruppe { position: relative; display: flex; }
.eingabe-gruppe input { padding-right: 2.8rem; }
.eingabe-gruppe .icon-btn { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; font-size: 1.2rem; color: var(--muted); border-radius: var(--radius); }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem 1.1rem; }
.formgrid.tight { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.formgrid .card { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem 1rem; align-content: start; }
.formgrid .wide, .formgrid > p, .formgrid > fieldset { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: .7rem; margin: .5rem 0; }
.rowform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: .6rem 0; }
.rowform > label { flex: 1 1 150px; min-width: 0; }
.rowform > label.check { flex: 0 0 auto; align-self: center; }
.rowform input { width: auto; flex: 1 1 120px; }
/* Felder in einer Beschriftung (Spalte): keine Grundbreite als Höhe, volle Breite der Beschriftung */
.rowform label > :is(input, select, textarea) { flex: 0 0 auto; width: 100%; }
.rowform > input[type=checkbox] { flex: none; }
.rowform select { width: auto; flex: 0 1 auto; max-width: 100%; }   /* lange Einträge (z. B. Lieferantennamen) nicht breiter als die Zeile */
.rowform .short, input.short { flex: 0 0 90px; width: 90px; }
.rowforms { display: flex; flex-direction: column; gap: .25rem; }
.filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; align-items: center; }
.filter input, .filter select { width: auto; }
.filter input[type=search] { flex: 1 1 240px; }
.filter > label:has(> input[type=search]) { flex: 1 1 240px; }   /* beschriftetes Suchfeld: Breite am Label, sonst wird das Feld 240px hoch */
.filter > label > input[type=search] { flex: none; }
/* Aufgaben/Termine: Liste ohne seitliches Scrollen */
table.grid.termine-liste th, table.grid.termine-liste td { overflow-wrap: anywhere; padding-left: .5rem; padding-right: .5rem; }
table.grid.termine-liste td.nowrap { overflow-wrap: normal; width: 1%; }
table.grid.termine-liste td.nowrap form.inline { display: block; margin-bottom: .25rem; }
/* Filterleiste Aufgaben/Termine */
.termine-filter select { min-width: 9rem; }
.kurz { width: 7em; }
input[type=month], input[type=date] { max-height: 2.6rem; }
/* Speichern-Leiste am Fuß eines Formulars (bleibt beim Scrollen sichtbar) */
.speicherleiste { position: sticky; bottom: 0; z-index: 5; display: flex; gap: .6rem; align-items: center; justify-content: flex-end; margin: 1.25rem 0 0; padding: .8rem 1rem;
  background: var(--card); border-top: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 -.25rem .6rem rgba(46, 38, 61, .06); }
.speicherleiste .muted { margin-right: auto; }

/* ------------------------------------------------------------------ Tabellen */
/* Die Tabelle selbst ist der Scrollbereich (breite Tabellen verbreitern nie Karte oder Seite); der Inhalt füllt die Breite */
table.grid { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-collapse: separate; border-spacing: 0;
  background: var(--card); font-size: .875rem; border: 1px solid var(--line); border-radius: var(--radius); }
table.grid > thead, table.grid > tbody, table.grid > tfoot { display: table; width: 100%; border-collapse: separate; border-spacing: 0; }
table.grid th, table.grid td { border-bottom: 1px solid var(--line); padding: .6rem .65rem; text-align: left; vertical-align: top; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid th { background: var(--head); color: var(--text); font-weight: 500; font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; vertical-align: middle; }
table.grid tr:first-child th:first-child { border-top-left-radius: var(--radius); }
table.grid tr:first-child th:last-child { border-top-right-radius: var(--radius); }
table.grid tr:hover td { background: var(--row-hover); }
table.grid td > input, table.grid td > select, table.grid td > .auswahl-select > select { padding: .35rem .55rem; }
table.grid.small th, table.grid.small td { padding: .4rem .6rem; font-size: .84rem; }
.card > table.grid, .card > .scroll > table.grid { margin: .4rem 0; }
main > table.grid, main > form > table.grid { border: 0; box-shadow: var(--shadow); margin-bottom: 1rem; }
td.leer { text-align: center; color: var(--muted); padding: 1.3rem .5rem; }
/* Umsatzsteuer-Kategorien (Einstellungen → E-Rechnung): feste Spalten, damit Kopf und Zeilen gleich breit sind */
table.grid.steuerkat > thead, table.grid.steuerkat > tbody { table-layout: fixed; }
table.grid.steuerkat th:first-child, table.grid.steuerkat td:first-child { width: 5rem; }
table.grid.steuerkat th:nth-child(2), table.grid.steuerkat td:nth-child(2) { width: 26rem; }
table.grid.steuerkat th:last-child, table.grid.steuerkat td:last-child { width: 7rem; text-align: center; }
table.grid.steuerkat td:last-child .check { justify-content: center; }
.r { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
tr.sum td, tr.sum th { font-weight: 600; background: var(--head); color: var(--text); }
tr.late td { color: var(--danger-text); }
tr.nocalc td { color: var(--muted); font-style: italic; }
tr.typZW td { font-weight: 600; background: var(--surface-2); }
tr.typNS td { border-top: 2px dashed var(--input); }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ Meldungen im Seiteninhalt */
.flash { position: relative; padding: .8rem 1rem .8rem 2.8rem; border-radius: var(--radius); margin: 0 0 1.25rem; border: 0; border-left: 4px solid; font-weight: 500; line-height: 1.45; }
.flash::before { font-family: "remixicon"; font-weight: 400; position: absolute; left: .9rem; top: .7rem; font-size: 1.25rem; line-height: 1; }
.flash.ok { background: var(--success-soft); border-color: var(--success); color: var(--success-text); }
.flash.ok::before { content: "\eb81"; }
.flash.error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-text); }
/* ganzer Hinweis als Link (z. B. „N überfällige Aufgaben“ in der Übersicht) */
a.flash-link { display: block; text-decoration: none; }
a.flash-link:hover, a.flash-link:focus-visible { text-decoration: underline; filter: brightness(.97); }
.flash.error::before { content: "\eca1"; }
.flash.warn { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); }
.flash.warn::before { content: "\ea21"; }
.flash.info { background: var(--info-soft); border-color: var(--info); color: var(--info-text); }
.flash.info::before { content: "\ee59"; }

/* ------------------------------------------------------------------ Toasts (Materio „bs-toast“) */
.toast-stapel { position: fixed; top: 4.6rem; right: 1.25rem; z-index: 1080; display: flex; flex-direction: column; gap: .6rem; width: min(360px, calc(100vw - 1.5rem)); pointer-events: none; }
.toast { pointer-events: auto; background: var(--card); color: var(--body); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; border-top: 3px solid var(--primary);
  animation: toast-ein .28s ease-out; }
.toast.weg { animation: toast-aus .25s ease-in forwards; }
.toast-kopf { display: flex; align-items: center; gap: .55rem; padding: .5rem .5rem .45rem .9rem; border-bottom: 1px solid var(--line); }
.toast-kopf > .ic { font-size: 1.2rem; }
.toast-kopf strong { flex: 1; color: var(--text); font-weight: 500; font-size: .9rem; }
.toast-kopf small { color: var(--muted); font-size: .75rem; }
.toast-kopf .icon-btn { width: 1.8rem; height: 1.8rem; font-size: 1.05rem; color: var(--muted); }
.toast-text { padding: .65rem .9rem .75rem; font-size: .9rem; line-height: 1.45; overflow-wrap: anywhere; }
.toast-balken { height: 3px; background: currentColor; opacity: .35; transform-origin: left; }
.toast.ok { border-top-color: var(--success); } .toast.ok .toast-kopf > .ic, .toast.ok .toast-balken { color: var(--success); }
.toast.error { border-top-color: var(--danger); } .toast.error .toast-kopf > .ic { color: var(--danger); } .toast.error .toast-text { color: var(--danger-text); font-weight: 500; }
.toast.warn { border-top-color: var(--warning); } .toast.warn .toast-kopf > .ic, .toast.warn .toast-balken { color: var(--warning); }
.toast.info { border-top-color: var(--info); } .toast.info .toast-kopf > .ic, .toast.info .toast-balken { color: var(--info); }
@keyframes toast-ein { from { opacity: 0; transform: translateX(1.5rem); } to { opacity: 1; transform: none; } }
@keyframes toast-aus { to { opacity: 0; transform: translateX(1.5rem); } }
@keyframes toast-zeit { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------------------------------------------ Modal (Bestätigung) */
.modal-hintergrund { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; padding: 1rem; background: var(--overlay); animation: einblenden .15s ease-out; }
.modal { width: min(460px, 100%); background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: modal-ein .2s ease-out; }
.modal-kopf { display: flex; align-items: center; gap: .8rem; padding: 1.3rem 1.4rem .3rem; }
.modal-symbol { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-size: 1.35rem; flex: none; }
.modal.gefahr .modal-symbol { background: var(--danger-soft); color: var(--danger); }
.modal-kopf h2 { margin: 0; font-size: 1.125rem; }
.modal-text { padding: .4rem 1.4rem 1rem 4.8rem; color: var(--body); line-height: 1.5; white-space: pre-line; }
.modal-fuss { display: flex; justify-content: flex-end; gap: .6rem; padding: .8rem 1.4rem 1.3rem; }
@keyframes einblenden { from { opacity: 0; } }
@keyframes modal-ein { from { opacity: 0; transform: translateY(-1rem) scale(.98); } }
body.modal-offen { overflow: hidden; }

/* ------------------------------------------------------------------ Kacheln (Übersicht) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.tile { position: relative; background: var(--card); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; color: var(--text);
  box-shadow: var(--shadow); border-bottom: 2px solid var(--primary-line); transition: border-width .15s, transform .15s, box-shadow .15s; }
.tile:hover { text-decoration: none; color: var(--text); border-bottom-width: 3px; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.tile:nth-child(4n+1) { border-bottom-color: #8ad8ff; } .tile:nth-child(4n+2) { border-bottom-color: #a7e37a; }
.tile:nth-child(4n+3) { border-bottom-color: #ffd580; } .tile:nth-child(4n) { border-bottom-color: var(--primary-line); }
.tile .lbl { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tile .val { font-size: 1.5rem; font-weight: 600; color: var(--text); }
.tile .sub { font-size: .82rem; color: var(--muted); }
.tile.action .val { color: var(--primary-text, var(--primary)); }
/* Übersicht: Kennzahlen in einer Reihe (umbrechend) */
/* Zuletzt per Vorschau (Auge) angesehene Zeile einer Liste */
tr.angesehen > td { background: var(--primary-soft); }
tr.angesehen > td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
/* Übersicht: Bausteine je Benutzer (Domain\Dashboard) in zwei Spalten – „ganz“ über beide, „halb“ nebeneinander */
.dash-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; align-items: start; }
.dash-block.ganz { grid-column: 1 / -1; }
.dash-block > .card, .dash-block > .tiles, .dash-block > .ticket-reihe { margin-bottom: 1.5rem; }
@media (max-width: 900px) { .dash-raster { grid-template-columns: minmax(0, 1fr); } }
.dash-block { min-width: 0; }   /* sonst zieht ein breiter Inhalt (Tabelle, Diagramm) das Raster über den Bildschirm – Prüfung 01.11.2026 */
.schnell-liste { display: flex; flex-wrap: wrap; gap: .75rem; }
.schnell-kachel { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .9rem .55rem .55rem; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); text-decoration: none; font-weight: 500; background: var(--card); }
.schnell-kachel:hover { border-color: var(--primary); color: var(--primary-text, var(--primary)); }
.schnell-kachel .symbolfeld { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .5rem; background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-size: 1.15rem; }
.dash-zeilen { list-style: none; margin: .5rem 0 1rem; padding: 0; border-top: 1px solid var(--line); }
.dash-zeile { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr auto auto; gap: .5rem 1rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.dash-zeile .dash-breite { margin: 0; min-width: 10rem; }
.dash-pfeile { display: inline-flex; gap: .3rem; }
@media (max-width: 700px) { .dash-zeile { grid-template-columns: 1fr auto; } .dash-zeile > .muted { grid-column: 1 / -1; } }
.tiles.dash { grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1.1rem; }
.tiles.dash .tile { padding: 1rem 1.05rem 1.1rem; }
.tiles.dash .val { font-size: 1.3rem; white-space: nowrap; }
/* Übersicht im Stil Materio „Logistics“: Symbolfeld in Akzentfarbe, Wert daneben, Bezeichnung darunter, farbige Unterkante */
.tiles.dash .tile { --k: var(--primary); --k-soft: var(--primary-soft); --k-text: var(--primary-text, var(--primary)); border-bottom-color: var(--k); gap: .1rem; }
.tiles.dash .tile.karte-warning { --k: var(--warning); --k-soft: var(--warning-soft); --k-text: var(--warning-text); }
.tiles.dash .tile.karte-info { --k: var(--info); --k-soft: var(--info-soft); --k-text: var(--info-text); }
.tiles.dash .tile.karte-success { --k: var(--success); --k-soft: var(--success-soft); --k-text: var(--success-text); }
.tiles.dash .tile.karte-danger { --k: var(--danger); --k-soft: var(--danger-soft); --k-text: var(--danger-text); }
.tiles.dash { display: flex; flex-wrap: wrap; }
.tiles.dash .tile { flex: 1 1 175px; min-width: 0; }
.tiles.dash .tile.breit { flex: 1.4 1 240px; }   /* Beträge (Offene Posten) brauchen mehr Platz */
.tiles.dash .kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: .45rem; min-width: 0; }
.tiles.dash .kopf .val { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tiles.dash .symbolfeld { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--k-soft); color: var(--k-text); transition: background .15s, color .15s; }
.tiles.dash .symbolfeld .ic { font-size: 1.5rem; }
.tiles.dash .tile:hover .symbolfeld { background: var(--k); color: #fff; }
.tiles.dash .lbl { font-size: .95rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); }
.tiles.dash .sub { font-size: .82rem; }
/* Übersicht: eigene Reihe für Tickets – zwei Kennzahlen links, „Meine offenen Tickets“ rechts; schmal untereinander */
.ticket-reihe.mit-kacheln { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.1rem; margin-bottom: 1.5rem; align-items: start; }
.ticket-reihe .ticket-kacheln { margin: 0; align-items: flex-start; }
.ticket-reihe .ticket-kacheln .tile { flex: 1 1 175px; }
.ticket-reihe.mit-kacheln .meine-tickets { margin: 0; }
.ticket-reihe .meine-tickets h2 { margin-top: 0; }
@media (max-width: 1000px) { .ticket-reihe.mit-kacheln { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Navigation innerhalb von Seiten */
.pager { display: flex; gap: .8rem; align-items: center; margin: 1rem 0; color: var(--muted); font-size: .9rem; flex-wrap: wrap; }
.subnav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.25rem; }
.subnav a { padding: .35rem .85rem; border-radius: var(--radius); background: var(--card); font-size: .875rem; color: var(--text); box-shadow: var(--shadow-sm); }
.subnav a:hover { text-decoration: none; color: var(--primary-text, var(--primary)); background: var(--primary-soft); }
.subnav a.active { background: var(--primary); color: var(--on-primary); box-shadow: 0 2px 6px var(--primary-shadow); }

/* ------------------------------------------------------------------ Belege */
.belegcols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
.belegside .card { margin-bottom: 1.25rem; }
.belegcols > *, .cols > *, .formgrid > * { min-width: 0; }
.totals table { width: 100%; border-collapse: collapse; }
.totals td { padding: .3rem 0; border-bottom: 1px solid var(--line); }
.totals tr.strong td { font-weight: 600; font-size: 1.05rem; color: var(--text); border-bottom: 0; }
.posgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem .7rem; margin-bottom: .6rem; }
.posgrid .span2 { grid-column: span 2; }
.posgrid .span4 { grid-column: 1 / -1; }
.posgrid > label.check { align-self: end; min-height: 2.6rem; white-space: nowrap; }   /* auf Höhe der Eingabefelder, einzeilig */
.posgrid > .pos-schalter { display: flex; flex-wrap: wrap; align-items: center; align-self: end; gap: .3rem 1.4rem; min-height: 2.6rem; }   /* Schalter der Position nebeneinander, bei wenig Platz umbrechend statt überlappend */
.posgrid > .pos-schalter > label.check { white-space: nowrap; }
.posform { background: var(--surface-2); padding: .8rem; border-radius: var(--radius); border: 1px solid var(--line); }
.addpos { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .6rem; }

/* ------------------------------------------------------------------ Suche mit Vorschlägen */
.lookup { position: relative; flex: 1 1 280px; display: block; }
.stack > .lookup { flex: none; }   /* in senkrechten Formularen sonst 280px hoch */
.lookup-list { position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 20; list-style: none; margin: 0; padding: .3rem 0; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 300px; overflow: auto; }
.lookup-list:empty { display: none; }
.lookup-list li { padding: .45rem .8rem; cursor: pointer; font-size: .9rem; color: var(--text); }
.lookup-list li:hover, .lookup-list li.sel { background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.lookup-list small { color: var(--muted); }

/* ------------------------------------------------------------------ Verschiedenes */
.neg { color: var(--danger-text); }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.strong { font-weight: 600; }
.hidden { display: none !important; }
code { background: var(--primary-soft); color: var(--primary-text, var(--primary)); padding: .05rem .3rem; border-radius: .25rem; font-size: .85em;
  overflow-wrap: anywhere; }   /* lange Pfade, Adressen und Schlüssel brechen um, statt die Seite zu verbreitern (Prüfung 01.11.2026) */
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem .8rem; }
/* Benutzerverwaltung: Rechte nach Bereichen gruppiert */
.benutzer-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.benutzer-form .card.einspaltig { grid-template-columns: 1fr; }
.rechte-kopf { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .7rem; margin: .4rem 0 .6rem; }
.rechte-kopf h2 { margin: 0; }
.rechte-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 2rem) / 3)), 1fr)); gap: 1rem; }
.formgrid .rechte-karten .card { display: block; }
.rechte-gruppe h3 { margin: 0 0 .7rem; font-size: 1rem; }
.rechte-gruppe .checks { grid-template-columns: 1fr; gap: .45rem; }
dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; margin: 0; font-size: .875rem; }
dt { color: var(--muted); }
dd { margin: 0; color: var(--text); }
ul.plain { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
ul.plain li { padding: .25rem 0; border-bottom: 1px dashed var(--line); }
ul.plain li:last-child { border-bottom: 0; }
.narrow { max-width: 440px; }
.etikett { gap: .5rem; align-items: flex-end; margin: 0; }
/* Etiketten: Anzahl und Startposition als schmale umrandete Felder, Position füllt den Rest */
.etikett > label.etikett-zahl { flex: 0 0 7.4rem; }   /* schmaler wurde die Beschriftung „ab Etikett“ gekürzt (Prüfung 01.11.2026) */
.etikett > label.etikett-zahl > input { width: 100%; flex: none; text-align: right; }
.etikett > label.etikett-position { flex: 1 1 100%; }
.etikett > label.etikett-position > select, .etikett > label.etikett-position > .auswahl-select { width: 100%; }
.etikett > .btn { flex: 1 1 auto; }
.stueckliste-neu { align-items: flex-end; }
.rowform.stueckliste-neu > label.etikett-zahl { flex: 0 0 6rem; }
.rowform.stueckliste-neu > label.etikett-zahl > input { flex: none; width: 100%; text-align: right; }
/* in Knopfleisten (Kopf von Adresse/Produkt): Felder auf Knopfhöhe */
.actions .etikett > label.etikett-zahl > input { padding-top: .45rem; padding-bottom: .4rem; }
.actions .etikett > .btn { flex: none; }
.actions .etikett { align-items: center; }
.actions form.rowform.etikett > label.etikett-zahl.etikett-zahl { padding-top: 0; }
.actions form.rowform.etikett > label.etikett-zahl.etikett-zahl > span:first-child { top: -.55rem; }
.rowform.etikett + .rowform.etikett { margin-top: .75rem; }
.etikett input.kurz, .etikett select { width: 4.2rem; flex: none; padding: .35rem .5rem; font-size: .875rem; }
.etikett select { width: auto; max-width: 18rem; min-width: 0; text-overflow: ellipsis; }
.bilder { display: flex; flex-wrap: wrap; gap: .8rem; }
.bilder figure { margin: 0; width: 160px; position: relative; }
.bilder img { width: 160px; height: 120px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
/* Bild als Knopf: Klick öffnet die Großansicht */
.bilder .bild-vorschau { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius); }
.bilder .bild-vorschau:hover img, .bilder .bild-vorschau:focus-visible img { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.modal.bild-modal { width: min(1100px, calc(100vw - 2rem)); max-width: none; }
.bild-modal .modal-kopf { align-items: center; gap: .8rem; }
.bild-modal .modal-kopf h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bild-modal-zaehler { white-space: nowrap; }
.bild-modal .bild-modal-zu { margin-left: auto; flex: none; }
.bild-modal-buehne { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 1.4rem; }
.bild-modal-buehne img { max-width: 100%; max-height: calc(100vh - 12rem); object-fit: contain; background: var(--surface-2); border-radius: var(--radius); }
.bild-modal-pfeil { position: absolute; top: 50%; transform: translateY(-50%); padding: .5rem; border-radius: 50%; opacity: .9; }
.bild-modal-pfeil.zurueck { left: 1.6rem; } .bild-modal-pfeil.vor { right: 1.6rem; }
.bild-modal-pfeil[hidden] { display: none; }
.bild-modal-fuss { justify-content: flex-start; }
/* Löschen über der rechten oberen Ecke des Bildes statt neben dem Dateinamen: Lange Namen ohne Leerzeichen
   umflossen den Knopf sonst und schoben ihn mitten in den Text (Fehlermeldung Anwender 02.11.2026, Firefox). */
.bilder figure > form { position: absolute; top: .3rem; right: .3rem; line-height: 0; }
.bilder figure > form .btn { background: var(--card); box-shadow: var(--shadow-sm); }
.bilder figcaption { font-size: .8rem; margin-top: .25rem; overflow-wrap: anywhere; }
.platzhalter summary { cursor: pointer; }
.platzhalter .knoepfe { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 12rem; overflow: auto; padding: .2rem 0; }
.platzhalter .knoepfe .btn { padding: .15rem .5rem; font-size: .8rem; }
svg.chart { display: block; max-width: 100%; height: auto; margin: .5rem 0 1rem; }
:root[data-theme=dark] svg.chart text { fill: var(--body); }
svg.dashchart text { fill: var(--muted); }
svg.dashchart .gitter { stroke: var(--line); stroke-width: 1; }
svg.dashchart .achse { stroke: var(--muted); stroke-width: 1; }
svg.dashchart rect.verkauf { fill: var(--primary); }
svg.dashchart rect.einkauf { fill: #ffb400; }
/* Monatsverlauf (Kunde, Lieferant, Artikel) */
.verlauf-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; }
.verlauf-summen { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; }
.verlauf-summen > div { display: grid; grid-template-columns: auto 1fr; column-gap: .45rem; align-items: center; }
.verlauf-summen strong { grid-column: 2; font-size: 1.15rem; color: var(--text); }
.verlauf .punkt { width: .7rem; height: .7rem; border-radius: 50%; display: inline-block; }
.knopfgruppe { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.verlauf-chart .raster { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.verlauf-chart .nulllinie { stroke: var(--input-hover); stroke-width: 1; }
.verlauf-chart .achse { font-size: 11px; fill: var(--muted); }
.verlauf .reihe-1 { fill: var(--primary); background: var(--primary); }
.verlauf .reihe-2 { fill: var(--primary-line); background: var(--primary-line); }
.verlauf .reihe-zu { fill: var(--success); background: var(--success); }
.verlauf .reihe-ab { fill: var(--warning); background: var(--warning); }
.verlauf-chart rect:hover { opacity: .8; }

/* ------------------------------------------------------------------ Anmeldung */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 1rem;
  background: radial-gradient(circle at 15% 20%, rgba(140, 87, 255, .14) 0, transparent 40%), radial-gradient(circle at 85% 85%, rgba(22, 177, 255, .12) 0, transparent 40%), var(--bg); }
.loginbox { background: var(--card); border-radius: var(--radius-lg); padding: 2rem 2rem 1.8rem; width: min(420px, 100%); box-shadow: var(--shadow-lg); }
.login-brand { justify-content: center; padding: 0 0 .6rem; font-size: 1.5rem; }
.login-brand .brand-bild { height: 2.6rem; }
.login-hint { text-align: center; color: var(--muted); margin: 0 0 1.3rem; }
.loginbox form { display: flex; flex-direction: column; gap: 1rem; }
.loginbox button[type=submit] { width: 100%; padding: .65rem 1rem; }
.loginbox h1 { justify-content: center; }
/* Anmeldung mit Microsoft 365 (Modul): Schaltfläche über dem Formular, Trenner „oder …“ */
.ms-anmelden { width: 100%; gap: .6rem; padding: .65rem 1rem; }
.ms-logo { width: 1.1rem; height: 1.1rem; flex: none; }
.login-oder { display: flex; align-items: center; gap: .6rem; color: var(--muted); font-size: .8rem; margin: .2rem 0 1rem; }
.login-oder::before, .login-oder::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ------------------------------------------------------------------ Kleinere Bildschirme */
@media (max-width: 1200px) { .belegcols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1000px) {
  .navtoggle { display: inline-flex; }
  .top-title { display: block; flex: 1; min-width: 0; }
  .side { position: fixed; top: 0; left: 0; bottom: 0; z-index: 1088; background: var(--card); transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); }
  .side.open { transform: none; }
  .side.open + .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 1087; background: var(--overlay); }
  .top { margin: 0 .75rem; }
  main { padding: 1rem .75rem 2.5rem; }
  .toast-stapel { top: 4.2rem; right: .75rem; }
}
@media (max-width: 760px) {
  .cols { grid-template-columns: 1fr; }
  .hide-sm, .speicherleiste .muted { display: none; }
  .speicherleiste { justify-content: stretch; }
  .speicherleiste .btn { flex: 1; }
  table.grid td { min-width: 5.5rem; }
  table.grid td > a:only-child, table.grid td > a:first-child { white-space: nowrap; }
  .card, .tab-inhalt { padding: 1rem; }
  h1 { font-size: 1.2rem; }
  .tiles { gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .formgrid, .formgrid.tight { grid-template-columns: 1fr 1fr; }
  .modal-text { padding-left: 1.4rem; }
}
@media (max-width: 480px) {
  .formgrid, .formgrid.tight, .formgrid .card { grid-template-columns: 1fr; }
  .posgrid .span2 { grid-column: 1 / -1; }
  .loginbox { padding: 1.5rem 1.2rem; }
}
/* ------------------------------------------------------------------ Belegkopf als Tabs */
.belegkopf { margin-bottom: 1rem; }
.anschrift-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; margin: 0 0 .25rem; color: var(--text); }
.anschrift-kopf a { display: inline-flex; align-items: center; gap: .25rem; }
.belegkopf .tab-panel > label.wide, .belegkopf .tab-panel > label { width: 100%; }
/* Gesperrte Belege (VB6: erledigt/bezahlt/ausgeliefert) */
.kopf-felder { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Gesperrter Beleg: Schloss vor dem Titel (Hintergrund unverändert); entsperrt (Mastermodus) rot */
.beleg-profil.entsperrt { background: var(--danger-soft); border: 1px solid rgba(255, 76, 81, .35); }
.beleg-profil .sperr-symbol { margin-right: .4rem; font-size: 1.35rem; vertical-align: -.15rem; }
.beleg-profil.gesperrt .sperr-symbol { color: var(--warning-text); }
.beleg-profil.entsperrt .sperr-symbol { color: var(--danger-text); }
.beleg-profil.entsperrt .profil + .actions { border-top-color: rgba(0, 0, 0, .08); }
.kopf-felder:disabled input, .kopf-felder:disabled select, .kopf-felder:disabled textarea { cursor: not-allowed; }

/* Seitenleiste des Belegs: Eigenschaften, Intervall, Wandlungen */
.intervallform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; margin: .25rem 0 .5rem; }
.intervallform > label { flex: 1 1 9rem; min-width: 0; margin: 0; }
.intervallform select, .intervallform input { min-width: 0; width: 100%; }
.intervallform > .muted { flex-basis: 100%; }
.intervallform .btn { flex: none; white-space: nowrap; }
.belegside h3, .card.small h3 { font-size: .9rem; margin: 1rem 0 .4rem; color: var(--text); }
.card.small table.grid, .seitentabs .tab-panel table.grid { margin: 0; }
/* Tabs der Seitenleiste (Etiketten, E-Rechnung, Aktionen, Eigenschaften): kompakt, bei Bedarf waagerecht scrollbar */
/* als Raster: in der schmalen Seitenleiste 2 × 2, bei genug Breite in einer Zeile – nichts wird weggescrollt */
.seitentabs .tab-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0; overflow: visible; }
.seitentabs [role=tab] { flex-direction: column; justify-content: center; padding: .5rem .25rem .45rem; font-size: .75rem; gap: .15rem; line-height: 1.2; border-bottom: 2px solid var(--line); }
.seitentabs [role=tab][aria-selected=true] { background: var(--primary-soft); border-bottom-color: var(--primary); }
.seitentabs [role=tab] .ic { font-size: 1rem; }
.seitentabs .tab-inhalt { padding: 1rem; }
.seitentabs .tab-panel h3:first-of-type { margin-top: .25rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wandlungen td { vertical-align: middle; }
.wandlungen .beleg-art { display: block; font-size: .75rem; line-height: 1.2; }
table.grid.wandlungen th, table.grid.wandlungen td { padding: .4rem .45rem; }
table.grid.wandlungen td:first-child { font-size: .8rem; }
table.grid.vorgang-belege td:first-child { font-size: inherit; }
table.grid.vorgang-belege tr.aktuell td { background: var(--primary-soft); }

/* ------------------------------------------------------------------ Hinweise zu Eingabefeldern (ⓘ mit Tooltip) */
.hinweis { position: relative; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-left: .1rem; vertical-align: -.15em;
  border-radius: 50%; color: var(--info); cursor: help; font-weight: 400; text-transform: none; letter-spacing: 0; }
.hinweis .ic { font-size: .95rem; line-height: 1; }
.hinweis:hover, .hinweis:focus-visible, .hinweis.offen { color: var(--primary-text, var(--primary)); outline: none; }
.hinweis:focus-visible { box-shadow: 0 0 0 2px var(--primary-line); }
.hinweis::after { content: attr(data-tipp); position: absolute; left: calc(-.45rem + var(--hinweis-x, 0px)); bottom: calc(100% + .45rem); z-index: 1070; box-sizing: border-box; width: max-content; max-width: var(--hinweis-breite, min(18rem, 80vw));
  padding: .45rem .65rem; border-radius: .375rem; background: #2e263d; color: #fff; font-size: .78rem; font-weight: 400; line-height: 1.4; text-align: left;
  white-space: normal; text-transform: none; letter-spacing: 0; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(2px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s; pointer-events: none; }
:root[data-theme=dark] .hinweis::after { background: #e7e3fc; color: #28243d; }
.hinweis.rechts::after { left: auto; right: -.45rem; }
.hinweis.unten::after { bottom: auto; top: calc(100% + .45rem); }   /* app.js: zu wenig Platz oberhalb (z. B. oben im Dialog) */
/* Dialog „Bestellung erstellen“: „+ anderer Lieferant …“ – Lieferant, EK und Bestellnummer nebeneinander */
.bestellung-neu { display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(4rem, 1fr) minmax(5rem, 1fr); gap: .6rem .5rem; margin-top: .6rem; }
.bestellung-neu[hidden] { display: none; }
.bestellung-neu > .small { grid-column: 1 / -1; }
.bestellung-neu { max-width: 26rem; } .bestellung-neu input { min-width: 0; width: 100%; } .bestellung-neu > .small { white-space: normal; }
table .hinweis::after { bottom: auto; top: calc(100% + .45rem); }
/* verborgen ohne Breite: die unsichtbare Blase darf die Seite am rechten Rand nicht verbreitern (Handy) */
.hinweis:not(:hover):not(:focus-visible):not(.offen)::after { max-width: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
.hinweis:hover::after, .hinweis:focus-visible::after, .hinweis.offen::after { opacity: 1; visibility: visible; transform: none; }
@media (pointer: coarse) { .hinweis { width: 1.6rem; height: 1.6rem; margin: -.2rem 0; } .hinweis .ic { font-size: 1.05rem; } }
/* ------------------------------------------------------------------ Suche in der Kopfleiste */
.ic-suche::before { content: "\f0d1"; }
.top-suche { position: relative; flex: 1 1 20rem; max-width: 34rem; min-width: 0; display: flex; align-items: center; gap: .4rem; margin: 0; }
.top-suche .ic-suche { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 1.1rem; pointer-events: none; }
.top-suche input[type=search] { flex: 1; min-width: 0; height: 2.4rem; padding: .4rem .9rem .4rem 2.4rem; border-radius: 50rem; background: var(--field-off); border-color: transparent; }
.top-suche input[type=search]:hover { border-color: var(--input); }
.top-suche input[type=search]:focus { background: var(--field); border-color: var(--primary); }
.top .top-suche .btn { border-radius: 50rem; flex: none; min-height: 2.4rem; padding: 0 1.1rem; }
@media (pointer: coarse) { .top .top-suche .btn { min-height: 2.75rem; } }
@media (max-width: 760px) {
  .top { flex-wrap: wrap; row-gap: .5rem; }
  .top-suche { order: 10; flex-basis: 100%; max-width: none; }
}
/* ------------------------------------------------------------------ Installierte Web-App, Safe Areas, Touch */
.ic-zurueck::before { content: "\ea60"; } .ic-offline::before { content: "\f2c2"; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Zurück-Knopf nur im App-Fenster (dort fehlen Browser-Knöpfe) */
.nur-app { display: none !important; }
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) { .nur-app { display: inline-grid !important; } }
/* Aussparungen (Notch, Home-Indikator, abgerundete Ecken) bei viewport-fit=cover */
.top { padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); }
.page { padding-right: env(safe-area-inset-right, 0px); }
main { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
.toast-stapel { top: calc(4.6rem + env(safe-area-inset-top, 0px)); right: calc(1.25rem + env(safe-area-inset-right, 0px)); }
.loginbox { margin-bottom: env(safe-area-inset-bottom, 0px); }
@media (min-width: 1001px) { .layout { padding-left: env(safe-area-inset-left, 0px); } }
@media (max-width: 1000px) {
  .page { padding-left: env(safe-area-inset-left, 0px); }
  .side { padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
  .toast-stapel { top: calc(4.2rem + env(safe-area-inset-top, 0px)); right: calc(.75rem + env(safe-area-inset-right, 0px)); }
  main { padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
}
a, button, .btn, label, select, summary, [role=tab] { touch-action: manipulation; -webkit-tap-highlight-color: rgba(140, 87, 255, .15); }
/* Touch-Bedienung: Schaltflächen und Felder mindestens ca. 44 px hoch, Schrift in Feldern 16 px (verhindert Zoom in Safari) */
@media (pointer: coarse) {
  .btn, button { min-height: 2.75rem; }
  .btn.small, button.small { min-height: 2.25rem; padding: .3rem .75rem; }
  .icon-btn, .navtoggle { min-width: 2.75rem; min-height: 2.75rem; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px; min-height: 2.75rem; }
  input[type=checkbox], input[type=radio] { width: 1.35rem; height: 1.35rem; }
  .side a:not(.brand) { padding-top: .7rem; padding-bottom: .7rem; }
  [role=tab] { min-height: 2.75rem; }
  .dropdown-menu a, .dropdown-menu button { min-height: 2.75rem; }
  table.grid td, table.grid th { padding-top: .7rem; padding-bottom: .7rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media print {
  .side, .top, .nav-backdrop, .actions, form, .addpos, .toast-stapel, .tab-leiste, .fusszeile { display: none !important; }
  .tab-panel[hidden] { display: block !important; }
  body { background: #fff; } main { padding: 0; } .card, .tab-inhalt { box-shadow: none; border: 1px solid #ddd; }
}

/* Produktbild als Avatar im Profilkopf */
img.avatar.bild { object-fit: cover; background: var(--surface-2); border: 1px solid var(--line); }
.avatar.gross .ic { font-size: 2rem; }

/* ------------------------------------------------------------------ Schalter (Materio „form-switch“) */
label.schalter { flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 400; color: var(--body); cursor: pointer; }
label.schalter strong { display: block; color: var(--text); font-weight: 500; font-size: .9rem; }
label.schalter small { color: var(--muted); font-size: .8rem; }
label.schalter input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 2.6rem; height: 1.4rem; border-radius: 50rem; border: 0; margin: 0;
  background: var(--input); position: relative; cursor: pointer; transition: background-color .2s; }
label.schalter input[type=checkbox]::after { content: ""; position: absolute; top: .2rem; left: .2rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(46, 38, 61, .3); transition: transform .2s; }
label.schalter input[type=checkbox]:checked { background: var(--primary); }
label.schalter input[type=checkbox]:checked::after { transform: translateX(1.2rem); }
label.schalter input[type=checkbox]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.schalter-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .8rem; }
/* Kacheln (z. B. Module): Titel und Schalter oben in einer Zeile, Beschreibung darunter über die ganze Breite, oben ausgerichtet; eingeschaltet mit farbiger Kante */
.schalter-liste > label.schalter { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: start; column-gap: 1rem; row-gap: .4rem;
  padding: 1rem 1.1rem; background: var(--card); transition: border-color .15s, box-shadow .15s; }
.schalter-liste > label.schalter > span { display: contents; }
.schalter-liste > label.schalter strong { grid-column: 1; grid-row: 1; align-self: center; font-size: .95rem; }
.schalter-liste > label.schalter input[type=checkbox] { grid-column: 2; grid-row: 1; align-self: center; }
.schalter-liste > label.schalter small { grid-column: 1 / -1; grid-row: 2; line-height: 1.5; }
.schalter-liste > label.schalter:hover { border-color: var(--primary-line); }
.schalter-liste > label.schalter:has(input:checked) { border-color: var(--primary-line); box-shadow: inset 3px 0 0 var(--primary); }
/* Module: kurze Beschreibung mit Tooltip (ⓘ), darunter der Weg zur Einrichtung, sobald das Modul eingeschaltet ist */
.schalter-liste.module > label.schalter { grid-template-rows: auto 1fr auto; }
.schalter-liste.module > label.schalter small .hinweis { margin-left: .25rem; }
.schalter-liste.module > label.schalter .modul-link { grid-column: 1 / -1; grid-row: 3; justify-self: start; display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .15rem; font-size: .82rem; font-weight: 500; }
.schalter-liste.module > label.schalter .modul-link .ic { font-size: 1rem; }
/* Einrichtung eines Moduls unter den Kacheln (z. B. E-Mail-Ablage) */
.modul-einrichtung { margin-top: 1rem; }
.modul-einrichtung h4 { margin: 0 0 .4rem; font-size: .9rem; }
/* Seiten-Umschalter über mehreren zusammengehörenden Seiten (z. B. Einstellungen) */
.seiten-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.seiten-tabs a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border-radius: var(--radius); background: var(--card); color: var(--text); font-weight: 500;
  box-shadow: var(--shadow-sm); font-size: .9rem; }
.seiten-tabs a:hover { text-decoration: none; background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.seiten-tabs a.active { background: var(--primary); color: var(--on-primary); box-shadow: 0 2px 6px var(--primary-shadow); }
.seiten-tabs .ic { font-size: 1.1rem; }

/* Rückfrage Stückliste übernehmen (VB6 Stücklisten_Übernehmen) */
.sl-frage { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; padding: .6rem .8rem; border: 1px solid var(--primary-line); border-radius: 8px; background: var(--primary-soft); }
.sl-frage > span { flex: 1 1 16rem; }
.sl-frage form { margin: 0; }

/* Mehrbenutzer: Anwesenheit und Konflikt */
.bearbeitung-hinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .55rem .8rem; border: 1px solid var(--info); border-radius: 8px; background: var(--info-soft); color: var(--info-text); }
.bearbeitung-hinweis[hidden] { display: none; }
.bearbeitung-hinweis.geaendert { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-text); }
.bearbeitung-hinweis .bearbeitung-text { flex: 1 1 18rem; }
.bearbeitung-hinweis a { font-weight: 600; }
.konflikt { border: 1px solid var(--danger); }
.konflikt h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; color: var(--danger-text); }
.konflikt .actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* Belegkopf: Optionen (Checkboxen) in eigener Zeile */
.checkreihe { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--line, rgba(0,0,0,.08)); }
.checkreihe > label { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: .45rem; margin: 0; }
.checkreihe > label > span { margin: 0; }
.lookup-list li.mit-stueckliste { font-weight: 600; }
.lookup-list li .tag { font-size: .7rem; padding: 0 .4rem; vertical-align: middle; }

/* Neuer Beleg */
.neubeleg .adressfelder { margin: 1.25rem 0 0; padding: 1rem 1rem .5rem; border: 1px solid var(--line); border-radius: 10px; }
.neubeleg .adressfelder legend { padding: 0 .4rem; font-weight: 600; }
.neubeleg .adressfelder[data-gewaehlt] input { background: var(--field-off); }
.neubeleg .formfuss { margin-top: 1.5rem; display: flex; gap: .5rem; flex-wrap: wrap; }
.neubeleg .lookup { position: relative; }

/* Beleg-Entwurf (noch nicht gespeichert) */
.entwurfhinweis { display: flex; align-items: flex-start; gap: .5rem; margin: 0 0 1rem; padding: .6rem .8rem; border: 1px solid var(--warning); border-radius: 8px; background: var(--warning-soft); color: var(--warning-text); }

/* Barverkauf: Belegdaten (nur Anzeige) */
.bar-kopf { margin-bottom: 1rem; }
.bar-kopf input[readonly] { background: var(--field-off); }

/* Barverkauf: Kopfaktionen in einer Zeile */
.bar-aktionen { align-items: center; }
.bar-aktionen form.bar-neu { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.head .actions .bar-staffel { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; margin: 0; white-space: nowrap; }
.head .actions .bar-staffel select { margin: 0; }
.bar-staffel span { color: var(--muted); font-size: .85rem; }
.bar-staffel select { width: auto; min-width: 5.5rem; }

/* Grunddaten: Tabellen ohne seitliches Scrollen (Überschriften umbrechen, Aktionsspalte schmal) */
.grunddaten-tabs table.grid th { white-space: normal; letter-spacing: 0; line-height: 1.25; }
.grunddaten-tabs table.grid th, .grunddaten-tabs table.grid td { padding-left: .5rem; padding-right: .5rem; overflow-wrap: anywhere; }
.grunddaten-tabs table.grid td.nowrap { overflow-wrap: normal; width: 1%; }
.grunddaten-tabs table.grid td.nowrap form.inline { display: inline; }

/* Grunddaten: Reiter als Links (Seiten), Untermenü, Bearbeitung rechts */
.grunddaten-tabs .tab-leiste a { display: inline-flex; align-items: center; gap: .45rem; padding: .85rem 1rem .8rem; border-bottom: 2px solid transparent;
  color: var(--body); font-weight: 500; white-space: nowrap; text-decoration: none; }
.grunddaten-tabs .tab-leiste a .ic { font-size: 1.2rem; }
.grunddaten-tabs .tab-leiste a:hover { color: var(--primary-text, var(--primary)); border-bottom-color: var(--primary-line); }
.grunddaten-tabs .tab-leiste a.aktiv { color: var(--primary-text, var(--primary)); border-bottom-color: var(--primary); }
.grunddaten-tabs .subnav { margin-bottom: 1rem; }
.grunddaten-tabs .subnav a { box-shadow: none; border: 1px solid var(--line); }
.grunddaten-titel { font-size: 1.05rem; margin: 0 0 .75rem; }
.grunddaten-form { box-shadow: none; border: 1px solid var(--line); }
.grunddaten-form h3 { margin-top: 0; }

/* Blättern: Auswahl „Einträge je Seite“ rechts */
.pager { flex-wrap: wrap; }
.pager-groesse { margin: 0 0 0 auto; display: inline-flex; }
.pager-groesse label { flex-direction: row; align-items: center; gap: .4rem; margin: 0; }
.pager-groesse label > span { color: var(--muted); font-weight: 400; }
.pager-groesse select { width: auto; padding-top: .3rem; padding-bottom: .3rem; }

/* Zwei-Faktor-Anmeldung: QR-Code (immer auf weißem Grund, auch im Dunkelmodus), Schlüssel und Wiederherstellungscodes */
.login-titel { font-size: 1.1rem; margin: 0 0 .8rem; text-align: center; }
.zweifaktor-schritte { padding-left: 1.2rem; margin: 0 0 1rem; }
.zweifaktor-schritte li { margin-bottom: .3rem; }
.zweifaktor-qr { display: flex; justify-content: center; margin: .5rem 0 1rem; }
.zweifaktor-qr svg.qr { max-width: 100%; height: auto; border-radius: var(--radius); background: #fff; }
.zweifaktor-schluessel { display: inline-block; font-size: 1rem; letter-spacing: .06em; word-break: break-all; user-select: all; padding: .3rem .5rem; margin-top: .3rem; }
.zweifaktor-codes { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem .8rem; }
.zweifaktor-codes code { font-size: 1rem; letter-spacing: .05em; user-select: all; }
.loginbox .zweifaktor-qr + p, .loginbox form + p { margin-top: .8rem; }
form.card.narrow > .btn, form.card.narrow > button { margin-top: .75rem; }

/* Sortierbare Spalten (Klick auf die Überschrift) */
.ic-sort::before { content: "\ea74"; } .ic-sort-auf::before { content: "\ea77"; } .ic-sort-ab::before { content: "\ea4d"; }
.ic-erste::before { content: "\f2e3"; } .ic-letzte::before { content: "\f2e5"; } .ic-zurueck-s::before { content: "\ea64"; } .ic-weiter-s::before { content: "\ea6e"; }
th a.sortierbar { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
th a.sortierbar .ic { font-size: .95em; opacity: .35; transition: opacity .15s; }
th a.sortierbar:hover .ic, th a.sortierbar:focus-visible .ic, th a.sortierbar.aktiv .ic { opacity: 1; }
th a.sortierbar.aktiv { color: var(--primary-text, var(--primary)); }
th.r a.sortierbar { flex-direction: row-reverse; }

/* Blättern: « ‹ [Seite ▾] › » */
.pager-info { white-space: nowrap; }
.pager-nav { display: inline-flex; align-items: center; gap: .35rem; }
.pager-nav .btn { padding: .3rem .55rem; min-width: 2.1rem; justify-content: center; }
.pager-nav .btn.gesperrt { opacity: .4; pointer-events: none; }
.pager-seite { display: inline-flex; margin: 0; }
.pager-seite select { width: auto; padding-top: .3rem; padding-bottom: .3rem; }
/* Seitenwahl mit Auswahlknopf: kompakter Knopf, auf schmalen Bildschirmen schrumpft die Auswahl statt umzubrechen */
.pager-nav { max-width: 100%; }
.pager-seite, .pager-seite .auswahl-select, .pager-seite select { min-width: 0; }
.pager-seite { flex: 0 1 auto; }
.pager-seite select { text-overflow: ellipsis; }
:is(.pager-seite, .pager-groesse) .feldknopf { padding: 0 .45rem; }
.modal-hintergrund[hidden] { display: none; }
.modal-feld { padding: 0 1.4rem .4rem 4.8rem; }
.modal-feld label { display: flex; flex-direction: column; gap: .35rem; }
.modal-feld label.check { flex-direction: row; align-items: center; gap: .5rem; }   /* Schalter im Dialog: neben dem Text, nicht darüber */
@media (max-width: 575.98px) { .modal-feld { padding-left: 1.4rem; } }

/* Kennzeichen einer Feldgruppe in einer Zeile (z. B. Artikel „Sonstiges“) */
.checks-zeile { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; }
.checks-zeile label.check { margin: 0; }

/* Checkbox im Formularraster: unten auf Höhe der Eingabefelder, Häkchen vor dem Text */
.formgrid .card > label.check { align-self: end; min-height: 2.6rem; }
.formgrid .card > label.check > span { font-weight: 400; }

/* Knopf im Stil eines Links (z. B. Entfernung berechnen) */
.link-btn { background: none; border: 0; padding: 0; color: var(--primary-text, var(--primary)); cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:disabled { color: var(--muted); cursor: default; text-decoration: none; }

/* Ansprechpartner/Lieferadressen: Formular unter der Tabelle, bearbeitete Zeile hervorgehoben */
.kontakt-form-titel { font-size: 1rem; margin: 1.2rem 0 .6rem; }
.kontaktform { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .7rem 1rem; }
.kontaktform > label.check { align-self: end; min-height: 2.6rem; }
.kontakt-aktionen { display: flex; gap: .5rem; margin: 0; }
table.grid tr.aktiv > td { background: var(--primary-soft); }
.kontaktform > .wide { grid-column: 1 / -1; }
.kontaktform .lookup { flex: none; }   /* im Label (Spalte) sonst 280px hoch */
.kontaktform .lp-lieferant .lookup { max-width: 32rem; }

/* Kennzahlen als Kacheln (Kunden, Lieferanten, Produkte) – wie Dashboard, Zahlen rechtsbündig, ohne Link-Effekt */
.kennzahlen .tile .val { text-align: right; font-variant-numeric: tabular-nums; }
.kennzahlen .tile .sub { text-align: right; }
.kennzahlen .tile:hover { transform: none; border-bottom-width: 2px; box-shadow: var(--shadow); }
.tile .val.neg { color: var(--danger); }

/* Kennzahlen-Kacheln im Kopf (Kunden, Lieferanten, Produkte): klein, an der Stelle der früheren Profilzahlen */
.profil .kennzahlen.kompakt { display: grid; grid-template-columns: repeat(3, minmax(120px, auto)); gap: .6rem; margin: 0 0 0 auto; }
.kennzahlen.kompakt .tile { padding: .45rem .8rem .5rem; gap: 0; box-shadow: none; background: var(--surface-2); }
.kennzahlen.kompakt .tile .lbl { font-size: .66rem; }
.kennzahlen.kompakt .tile .val { font-size: 1.05rem; }
.kennzahlen.kompakt .tile .sub { font-size: .7rem; }
.kennzahlen.kompakt .tile:hover { box-shadow: none; }
@media (max-width: 767.98px) { .profil .kennzahlen.kompakt { width: 100%; margin: .4rem 0 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; } .kennzahlen.kompakt .tile { padding: .4rem .55rem; } }
/* Kennzahlen in einer Reihe, rechtsbündig – beliebig viele Kacheln (Ticketliste); umgebrochene Kacheln bleiben rechts */
.profil .kennzahlen.kompakt.reihe { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.profil .kennzahlen.kompakt.reihe .tile { flex: 0 1 auto; min-width: 110px; }
@media (max-width: 767.98px) { .profil .kennzahlen.kompakt.reihe .tile { flex: 1 1 40%; min-width: 0; } }
/* Speicherleiste auf dem Smartphone schlanker (nimmt weniger vom Formular ein) */
@media (max-width: 575.98px) { .speicherleiste { padding: .4rem .55rem; margin-top: .8rem; } .speicherleiste .btn { padding-top: .45rem; padding-bottom: .45rem; } }

/* Vermietung: Belegungsplan (Gantt) – Tabelle mit Tagesspalten, Balken als zusammenhängende Zellen */
.gantt-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 12rem)); gap: .6rem; margin: 0 0 1rem; }
.gantt-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; margin: 0 0 .6rem; }
.gantt-nav, .gantt-ansicht { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.gantt-nav strong { margin-left: .5rem; }
.gantt-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: .5rem; background: var(--card); }
table.gantt { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: .8rem; }
table.gantt th, table.gantt td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; height: 1.75rem; text-align: center; }
table.gantt thead th { background: var(--head); font-weight: 600; color: var(--text); position: sticky; top: 0; z-index: 2; }
table.gantt thead tr.gantt-wt th { font-weight: 400; color: var(--muted); font-size: .7rem; height: 1.3rem; }
table.gantt .gantt-artikel { width: 17rem; text-align: left; padding: .2rem .6rem; position: sticky; left: 0; z-index: 3; background: var(--card); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
table.gantt thead .gantt-artikel { background: var(--head); z-index: 4; font-weight: 600; }
table.gantt .gantt-artikel.komponente { padding-left: 1.6rem; }
table.gantt .gantt-artikel.komponente::before { content: "↳"; color: var(--muted); margin-right: .3rem; }
table.gantt .gantt-artikel small { display: block; overflow: hidden; text-overflow: ellipsis; }
table.gantt.gantt-2w { min-width: 50rem; }
table.gantt.gantt-monat { min-width: 70rem; }
table.gantt.gantt-quartal { min-width: 110rem; }
table.gantt .we { background: var(--surface-2); }
table.gantt thead .we { background: var(--hover); }
table.gantt .heute { box-shadow: inset 2px 0 0 var(--primary), inset -2px 0 0 var(--primary); }
table.gantt thead th.heute { color: var(--primary-text, var(--primary)); }
table.gantt .mstart { border-left: 2px solid var(--input); }
table.gantt tr.gantt-neu > * { border-top: 1px solid var(--input); }
table.gantt td.gantt-balken { padding: .2rem 0; background: transparent; }
/* freier Tag: Klick startet eine Vermietung (nur mit Recht gesetzt) */
table.gantt td.frei-waehlbar { cursor: pointer; }
table.gantt td.frei-waehlbar:hover { background: var(--primary); opacity: .35; }
table.gantt td.miete-markiert { background: var(--primary); opacity: .55; }   /* mit der Maus gezogener Zeitraum */
.balken { display: block; margin: 0 1px; padding: .1rem .4rem; border-radius: .35rem; font-size: .72rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left; text-decoration: none; color: #fff; border: 1px solid transparent; }
a.balken:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.balken.laufend { background: var(--warning); color: #3d2a00; }
.balken.ueberfaellig { background: var(--danger); }
.balken.geplant { background: var(--primary-soft); color: var(--primary-text, var(--primary)); border: 1px dashed var(--primary-line); }
.balken.beendet { background: var(--success); color: #173800; }
.balken.unbekannt { background: var(--hover); color: var(--muted); border-color: var(--line); }
a.balken.laufend:hover { color: #3d2a00; } a.balken.geplant:hover { color: var(--primary-text, var(--primary)); } a.balken.beendet:hover { color: #173800; } a.balken.unbekannt:hover { color: var(--muted); }
.balken.ab-links { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.balken.offen-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.balken.offen-rechts::after { content: " ▸"; }
.punkt { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; vertical-align: middle; margin-right: .25rem; }
.punkt.gruen { background: var(--success); } .punkt.rot { background: var(--danger); }
.gantt-legende { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; margin-top: .7rem; }
.gantt-legende .balken { display: inline-block; }
@media (max-width: 767.98px) {
  .gantt-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.gantt .gantt-artikel { width: 9rem; }
}
table.gantt thead th.gantt-monat { text-align: left; padding-left: .4rem; }
table.gantt.gantt-quartal { min-width: 80rem; }
table.gantt.gantt-quartal thead tr.gantt-wt th { color: var(--text); font-size: .68rem; overflow: visible; text-align: left; }

/* Nachrichten zwischen Benutzern: Symbol im Kopf mit Zähler, Seite mit Gesprächsliste und Verlauf */
.ic-nachricht::before { content: "\eb51"; } .ic-senden::before { content: "\f0d8"; }
.nachrichten-btn { position: relative; text-decoration: none; }
.nachrichten-btn .zaehler { position: absolute; top: -.2rem; right: -.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 50rem;
  background: var(--danger); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.1rem; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.nachrichten-btn .zaehler[hidden] { display: none; }
/* Update verfügbar (nur SysOP): rotes Ausrufezeichen in der Kopfleiste */
.update-hinweis[hidden] { display: none; }
.update-hinweis .ausruf { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--danger); color: #fff; font-weight: 700; font-size: .9rem; line-height: 1; }
/* Chat zwischen Benutzern (angelehnt an Materio app-chat): Kontakte links, Verlauf rechts, Sprechblasen, Eingabezeile */
.chat { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; padding: 0; overflow: hidden; height: calc(100vh - 11.5rem); min-height: 26rem; }
.chat-kontakte { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.chat-kontakte-kopf { display: flex; gap: .75rem; align-items: center; padding: 1rem 1.1rem; border-bottom: 1px solid var(--line); }
.chat-suche { flex: 1 1 auto; position: relative; display: block; margin: 0; }
.chat-suche .ic { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.chat-suche input { width: 100%; padding-left: 2.2rem; border-radius: 50rem; }
.chat-kontakte-liste { flex: 1 1 auto; overflow-y: auto; padding: .4rem .6rem 1rem; overscroll-behavior: contain; }
.chat-abschnitt { margin: .9rem .6rem .4rem; font-size: 1.05rem; font-weight: 500; color: var(--primary-text, var(--primary)); }
.chat-liste { list-style: none; margin: 0; padding: 0; }
.chat-kontakt { display: flex; gap: .75rem; align-items: center; padding: .55rem .6rem; border-radius: var(--radius); color: var(--body); text-decoration: none; }
.chat-kontakt:hover, .chat-kontakt:focus-visible { background: var(--row-hover); text-decoration: none; }
.chat-kontakt.aktiv { background: var(--primary); color: var(--on-primary); box-shadow: 0 .2rem .5rem rgba(140, 87, 255, .35); }
.chat-kontakt.aktiv .muted, .chat-kontakt.aktiv strong { color: var(--on-primary); }
.chat-kontakt.aktiv .avatar { box-shadow: 0 0 0 2px var(--on-primary); }
.chat-kontakt.ungelesen strong { color: var(--text); font-weight: 700; }
.chat-kontakt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.chat-kontakt-zeile { display: flex; gap: .5rem; align-items: center; justify-content: space-between; min-width: 0; }
.chat-kontakt-zeile strong { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-kontakt-zeile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-kontakt-zeile .badge { flex: none; }
.chat-leer { padding: .5rem .6rem; font-size: .875rem; }
.avatar.av1 { background: var(--success-soft); color: var(--success-text); }
.avatar.av2 { background: var(--info-soft); color: var(--info-text); }
.avatar.av3 { background: var(--warning-soft); color: var(--warning-text); }
.avatar.av4 { background: var(--danger-soft); color: var(--danger-text); }
.avatar.av5 { background: var(--surface-2); color: var(--body); }
.avatar.klein { width: 2rem; height: 2rem; font-size: .85rem; }
.chat-verlauf { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--surface-2); }
.chat-start { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--muted); padding: 2rem; text-align: center; }
.chat-start-symbol { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-sm); color: var(--primary); font-size: 2.6rem; }
.chat-kopf { display: flex; gap: .8rem; align-items: center; padding: .85rem 1.2rem; background: var(--card); border-bottom: 1px solid var(--line); }
.chat-kopf-text { display: flex; flex-direction: column; min-width: 0; }
.chat-kopf-text strong { font-weight: 500; color: var(--text); }
.chat-nachrichten { flex: 1 1 auto; list-style: none; margin: 0; padding: 1.2rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; gap: .2rem; overscroll-behavior: contain; }
.chat-tag { align-self: center; margin: .8rem 0 .5rem; }
.chat-tag span { display: inline-block; padding: .15rem .7rem; border-radius: 50rem; background: var(--card); color: var(--muted); font-size: .75rem; box-shadow: var(--shadow-sm); }
.chat-msg { display: flex; gap: .7rem; align-items: flex-start; max-width: min(42rem, 85%); margin-top: .6rem; }
.chat-msg.folge { margin-top: .1rem; }
.chat-msg.du { align-self: flex-start; }
.chat-msg.ich { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.folge.du { padding-left: 2.7rem; }
.chat-msg.folge.ich { padding-right: 2.7rem; }
.chat-msg-inhalt { display: flex; flex-direction: column; min-width: 0; }
.chat-msg.ich .chat-msg-inhalt { align-items: flex-end; }
.chat-msg-text { padding: .55rem .95rem; border-radius: var(--radius); line-height: 1.5; overflow-wrap: anywhere; box-shadow: var(--shadow-sm); }
.chat-msg.du .chat-msg-text { background: var(--card); color: var(--text); }
.chat-msg.ich .chat-msg-text { background: var(--primary); color: var(--on-primary); }
.chat-msg.du:not(.folge) .chat-msg-text { border-top-left-radius: 0; }
.chat-msg.ich:not(.folge) .chat-msg-text { border-top-right-radius: 0; }
.chat-msg-fuss { display: flex; gap: .35rem; align-items: center; margin-top: .2rem; color: var(--muted); font-size: .72rem; }
.chat-haken { letter-spacing: -.15em; font-size: .8rem; }
.chat-haken.gelesen { color: var(--success); }
.chat-weg { opacity: 0; transition: opacity .15s; }
.chat-msg:hover .chat-weg, .chat-weg:focus-within { opacity: 1; }
.chat-weg .link-btn { color: var(--muted); padding: 0; }
.chat-weg .link-btn:hover { color: var(--danger); }
.chat-eingabe { display: flex; gap: .6rem; align-items: flex-end; margin: .8rem 1.2rem 0; padding: .45rem .5rem .45rem 1rem; background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.chat-eingabe textarea { flex: 1 1 auto; border: 0; box-shadow: none; background: transparent; resize: none; min-height: 2.4rem; max-height: 10rem; padding: .5rem 0; line-height: 1.4; }
.chat-eingabe textarea:focus { outline: none; box-shadow: none; }
.chat-hinweis { margin: .35rem 1.3rem .8rem; font-size: .75rem; }
.chat-eingabe { position: relative; }
.chat-emoji { position: static; flex: none; align-self: flex-end; }
.chat-emoji-knopf { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: none; }
.chat-emoji-knopf:hover, .chat-emoji-knopf[aria-expanded="true"] { background: var(--primary-soft); }
.chat-emoji-auswahl { position: absolute; left: 0; bottom: calc(100% + .5rem); z-index: 30; width: min(22rem, calc(100vw - 2rem)); padding: .5rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.chat-emoji-auswahl[hidden] { display: none; }
.chat-emoji-reiter { display: flex; gap: .2rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); }
.chat-emoji-tab { flex: 1 1 0; padding: .3rem 0; border: 0; border-radius: var(--radius); background: transparent; font-size: 1.15rem; line-height: 1.2; cursor: pointer; box-shadow: none; }
.chat-emoji-tab:hover { background: var(--surface-2); }
.chat-emoji-tab.aktiv { background: var(--primary-soft); }
.chat-emoji-titel { margin: .4rem .2rem .2rem; font-size: .75rem; color: var(--muted); }
.chat-emoji-raster { display: grid; grid-template-columns: repeat(8, 1fr); gap: .1rem; max-height: 13rem; overflow-y: auto; }
.chat-emoji-zeichen { aspect-ratio: 1; padding: 0; border: 0; border-radius: var(--radius); background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer; box-shadow: none; }
.chat-emoji-zeichen:hover, .chat-emoji-zeichen:focus-visible { background: var(--surface-2); }
@media (max-width: 767.98px) {
  .chat { grid-template-columns: 1fr; height: calc(100vh - 9rem); }
  .chat.mit-verlauf .chat-kontakte { display: none; }
  .chat:not(.mit-verlauf) .chat-verlauf { display: none; }
  .chat-kontakte { border-right: 0; }
  .chat-msg { max-width: 92%; }
  .chat-nachrichten { padding: .8rem; }
  .chat-eingabe { margin: .6rem .6rem 0; }
  .nur-breit { display: none; }
}
.nur-mobil { display: none; }
@media (max-width: 767.98px) {
  .nur-mobil { display: inline-grid; }
}
.toast-zitat { margin-top: .3rem; padding-left: .5rem; border-left: 2px solid var(--line); color: var(--muted); font-size: .85em; white-space: pre-line; max-height: 4.5em; overflow: hidden; }
.toast-link { display: inline-block; margin-top: .35rem; font-weight: 600; }
.verlauf-kopf { justify-content: flex-start; }
.verlauf-kopf > * { margin: 0; }
.verlauf-kopf strong { flex: 1 1 auto; text-align: left; }

/* Produkt: Hinweis VK 2–9 und Einstellungen → Optionen */
.vk-staffel p { margin: 0 0 .3rem; }
.vk-staffel.hervorheben { background: var(--warning-soft); border-radius: var(--radius); padding: .35rem .6rem; }
.optionen .option { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.optionen .option label.check { align-items: flex-start; }
.optionen .option label.check input { margin-top: .2rem; }

/* Adresse: Reiter „Bemerkung“ (VB6) */
.ic-notiz::before { content: "\f19b"; }
label.bemerkung { display: block; }
label.bemerkung textarea { width: 100%; min-height: 18rem; resize: vertical; line-height: 1.5; }
.punkt-hinweis { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--warning); margin-left: .35rem; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Aktivitäten: gekürzter Text in der Liste, vollständiger Text im Dialog */
.akt-kurz { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 60rem;
  padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.akt-kurz:hover { color: var(--primary-text, var(--primary)); }
.akt-aktionen { margin-top: .2rem; }
.modal.modal-breit { width: min(760px, 100%); }
.modal-breit .modal-kopf h2 { overflow-wrap: anywhere; }
.modal-breit .modal-kopf p { margin: .15rem 0 0; }
.modal-inhalt { margin: .4rem 1.4rem 0; padding: .8rem 1rem; max-height: 60vh; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); line-height: 1.55; overflow-wrap: anywhere; }
.modal-breit .modal-fuss { justify-content: space-between; align-items: center; flex-wrap: wrap; }
.modal-breit .modal-fuss > :only-child { margin-left: auto; }   /* einzelner Knopf (Schließen) rechts wie in den übrigen Dialogen */
.modal-aktionen { font-size: .875rem; }
.aktivitaeten .tag { white-space: nowrap; }
.akt-filter input[type=search] { flex: 1 1 260px; }
.akt-seite { padding: 0 .6rem; white-space: nowrap; }

/* Feldgruppen-Überschriften mit Symbol wie .card-titel */
fieldset.card > legend { display: flex; align-items: center; gap: .5rem; }
fieldset.card > legend .ic { color: var(--primary-text, var(--primary)); font-size: 1.25rem; }

/* Update-Seite */
dl.kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: .35rem 1rem; margin: 0 0 .8rem; }
@media (max-width: 860px) { dl.kv { grid-template-columns: minmax(0, 1fr); gap: .1rem .8rem; } dl.kv dt { margin-top: .35rem; } }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; }
.changelog { font-size: .9rem; border-left: 3px solid var(--primary-line); padding: .2rem 0 .2rem .8rem; margin: .5rem 0 1rem; }
.changelog h3 { font-size: .95rem; margin: .4rem 0; }
/* vorformatierte Texte (Befehle, Cron-Zeilen) nie breiter als ihr Behälter – sonst waagerechtes Scrollen der ganzen Seite */
main pre { max-width: 100%; overflow-x: auto; }
pre.befehl { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; overflow-x: auto; }

/* Installations-Assistent */
body.install { background: var(--bg); }
.install-rahmen { max-width: 760px; margin: 2rem auto; padding: 0 1rem; }
.install-kopf { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; margin-bottom: 1rem; }
.install-kopf .logo-q7 { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: .6rem; background: var(--primary); color: #fff; font-weight: 700; font-size: 1rem; }
/* Ticket-System: Board nach Status (Spalten nebeneinander, auf schmalen Bildschirmen waagerecht wischbar) */
.ticket-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: .8rem; overflow-x: auto; padding-bottom: .5rem; align-items: start; }
.ticket-spalte { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; min-width: 0; }
.ticket-spalte h2 { font-size: .9rem; margin: 0 0 .6rem; display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.ticket-karte { display: flex; flex-direction: column; gap: .2rem; padding: .6rem .7rem; margin-bottom: .5rem; background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.ticket-karte:hover { box-shadow: var(--shadow, 0 2px 8px rgba(0, 0, 0, .12)); text-decoration: none; }
.ticket-karte.prio-3 { border-left-color: var(--warning, #ffb400); }
.ticket-karte.prio-4 { border-left-color: var(--danger, #ff4c51); }
.ticket-karte strong { font-weight: 600; overflow-wrap: anywhere; }
.ticket-karte-kopf, .ticket-karte-fuss { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.ticket-karte-fuss { justify-content: space-between; margin-top: .2rem; }
.ticket-uhr h2 { font-size: 1rem; margin: 0 0 .6rem; }
.ticket-ablauf { margin: .8rem 0 0 1.2rem; padding: 0; }
.ticket-ablauf li.strong { color: var(--text); font-weight: 600; }
.ticket-mail { padding: .8rem 0; border-top: 1px solid var(--line); }
.ticket-mail header { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; margin-bottom: .4rem; overflow-wrap: anywhere; }
.ticket-mail details p { margin: .4rem 0; overflow-wrap: anywhere; }
.ticket-mail .knopfzeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.ticket-mail .knopfzeile .rowform { margin: 0; flex: 0 1 auto; align-items: center; }
.ticket-mail .knopfzeile .rowform label { flex: 0 0 8rem; }
/* Einstellungen → Firmendaten: Logo für den Druck */
.logo-karte { margin-top: 1.25rem; }
.logo-karte h2 { font-size: 1rem; margin: 0 0 .8rem; }
.logo-zeile { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
/* Vorschau mit fester Höhe: das Bild bleibt im Rahmen (in einem Grid griff max-height: 100 % nicht – große Logos liefen über den Text) */
.logo-vorschau { display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; width: 14rem; max-width: 100%; height: 6rem;
  padding: .5rem; overflow: hidden; border: 1px dashed var(--line); border-radius: var(--radius); background: #fff; }
.logo-vorschau img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* Knöpfe „Logo ersetzen“ und „Logo löschen“ auf einer Linie (unten bündig mit dem Dateifeld) */
.logo-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; flex: 1 1 18rem; min-width: 0; }
.logo-aktionen > form { margin: 0; }
.logo-aktionen .rowform { flex: 1 1 18rem; min-width: 0; margin: 0; align-items: flex-end; }
.logo-aktionen .rowform > label { flex: 1 1 12rem; min-width: 0; }
.install-schritte { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .8rem; color: var(--muted); }
.install-schritte li { display: flex; align-items: center; gap: .35rem; }
.install-schritte li span { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--card); }
.install-schritte li.aktiv { color: var(--primary-text, var(--primary)); font-weight: 600; }
.install-schritte li.aktiv span { background: var(--primary); color: #fff; border-color: var(--primary); }
.install-schritte li.erledigt span { background: var(--success-soft); color: var(--success-text); border-color: var(--success); }
.install-karte { padding: 1.5rem; }
.install-karte h1 { font-size: 1.35rem; margin: 0 0 .8rem; }
.install-form { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0; }
.install-form label { display: flex; flex-direction: column; gap: .25rem; }
.install-form label.check { flex-direction: row; }
.install-form .btn { align-self: flex-start; }
.install-zeile { display: flex; gap: .8rem; }
.install-zeile label { flex: 1 1 auto; }
.install-zeile label.kurz { flex: 0 0 8rem; }
.install-pruefung td:first-child { width: 5rem; }
.install-code { width: 100%; font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.install-fuss { text-align: center; }

/* ------------------------------------------------------------------ hoher Kontrast: Ergänzungen zu den Farbvariablen */
:root[data-theme=contrast] main a:not(.btn):not(.tile):not(.balken) { text-decoration: underline; text-underline-offset: 2px; }
:root[data-theme=contrast] :focus-visible { outline: 3px solid #000; outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
:root[data-theme=contrast] input:focus, :root[data-theme=contrast] select:focus, :root[data-theme=contrast] textarea:focus { box-shadow: 0 0 0 2px #000; }
:root[data-theme=contrast] .card, :root[data-theme=contrast] .tile, :root[data-theme=contrast] .tab-inhalt, :root[data-theme=contrast] .dropdown-menu,
:root[data-theme=contrast] .toast, :root[data-theme=contrast] .modal, :root[data-theme=contrast] header.top, :root[data-theme=contrast] .subnav a,
:root[data-theme=contrast] .seiten-tabs a { border: 1px solid #000; box-shadow: none; }
:root[data-theme=contrast] .side { border-right: 1px solid #000; }
:root[data-theme=contrast] .btn, :root[data-theme=contrast] button:not(.icon-btn):not(.hinweis) { border-width: 2px; border-color: currentColor; box-shadow: none; }
:root[data-theme=contrast] .btn.primary, :root[data-theme=contrast] button.primary { border-color: var(--primary); }
:root[data-theme=contrast] .side a.active, :root[data-theme=contrast] .side a.active:hover,
:root[data-theme=contrast] .subnav a.active, :root[data-theme=contrast] .seiten-tabs a.active { background: var(--primary); box-shadow: none; }
:root[data-theme=contrast] .brand-logo { background: var(--primary); box-shadow: none; }
:root[data-theme=contrast] .tile, :root[data-theme=contrast] .tile:nth-child(n) { border-bottom: 3px solid #000; }
:root[data-theme=contrast] .hinweis::after { background: #000; color: #fff; }
:root[data-theme=contrast] .balken.laufend, :root[data-theme=contrast] a.balken.laufend:hover,
:root[data-theme=contrast] .balken.beendet, :root[data-theme=contrast] a.balken.beendet:hover { color: #fff; }
:root[data-theme=contrast] svg.dashchart rect.einkauf { fill: #8a4b00; }
:root[data-theme=contrast] svg.dashchart text, :root[data-theme=contrast] svg.chart text { fill: #000; }
:root[data-theme=contrast] .muted, :root[data-theme=contrast] .small.muted { color: var(--muted); }
:root[data-theme=contrast], :root[data-theme=contrast] * { scrollbar-color: #000 #fff; }
:root[data-theme=contrast] ::-webkit-scrollbar-thumb, :root[data-theme=contrast] html::-webkit-scrollbar-thumb { background-color: #000; }
:root[data-theme=contrast] ::placeholder { color: #595959; opacity: 1; }
/* gesperrte Felder: grauer Hintergrund zeigt „gesperrt“, der Wert bleibt schwarz lesbar */
:root[data-theme=contrast] :is(input, select, textarea):is(:disabled, [readonly]) { color: #000; -webkit-text-fill-color: #000; opacity: 1; }
:root[data-theme=contrast] input[type=checkbox], :root[data-theme=contrast] input[type=radio] { accent-color: #000; }
:root[data-theme=contrast] label:not(.schalter) > input[type=checkbox]:disabled { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem;
  margin: 0; border: 2px solid #000; border-radius: 3px; background: #e6e6e6; opacity: 1; vertical-align: middle; }
:root[data-theme=contrast] label:not(.schalter) > input[type=checkbox]:disabled:checked { background: #000; box-shadow: inset 0 0 0 2px #e6e6e6; }
:root[data-theme=contrast] label:has(> input:disabled) { color: #000; opacity: 1; }
/* Windows-Kontrastdesigns (erzwungene Farben): Rahmen sichtbar lassen, Farben kommen vom System */
@media (forced-colors: active) {
  .card, .tile, .btn, button, input, select, textarea, .dropdown-menu, .toast { border: 1px solid CanvasText; }
  .side a.active { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* Lizenz: Knopf über die volle Breite der Anmeldebox, Angaben auf der Lizenzseite */
.loginbox .btn.breit { display: flex; justify-content: center; width: 100%; }
.lizenz-daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 1rem 0 1.25rem; }
.lizenz-daten dt { color: var(--muted); } .lizenz-daten dd { margin: 0; overflow-wrap: anywhere; }

/* Seitenhilfe (Schaltfläche „?“ in der Kopfleiste) */
.modal.hilfe .modal-kopf p { margin: .2rem 0 0; }
.modal.hilfe .modal-inhalt h3 { margin: .9rem 0 .35rem; font-size: 1rem; }
.modal.hilfe .modal-inhalt h3:first-child { margin-top: 0; }
.modal.hilfe .modal-inhalt ul { margin: 0; padding-left: 1.2rem; }
.modal.hilfe .modal-inhalt li { margin: .25rem 0; }
.hilfe-allgemein { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.hilfe-allgemein summary { cursor: pointer; font-weight: 600; }
.hilfe-allgemein ul { margin-top: .4rem !important; }

/* Neue Position: Art-Nr mit Suche und Suchfenster */
.addpos-titel { margin: 0 0 .5rem; font-size: 1rem; }
.addpos > form.neupos + details { margin-top: 1.1rem; }   /* Abstand „Position hinzufügen“ → „Sonderpositionen“ */
.eingabe-mit-knopf { display: flex; gap: .35rem; align-items: stretch; }
.eingabe-mit-knopf .lookup { flex: 1 1 auto; min-width: 0; }
.eingabe-mit-knopf .lookup input { width: 100%; }
.btn.feldknopf { flex: none; padding: 0 .7rem; font-size: 1.05rem; }
/* Auswahlknopf an Feldern mit Vorschlagsliste (data-auswahl): alle Einträge, unter dem Feld, scrollbar */
.feld-auswahl .dropdown-menu { left: 0; right: auto; top: calc(100% + .25rem); width: max(100%, 22rem); max-width: min(32rem, 90vw); max-height: 18rem; overflow-y: auto; min-width: 0; }
/* geschlossen ganz ausblenden (sonst verbreitert die unsichtbare Liste am rechten Rand die Seite); nahe am rechten Rand nach links öffnen */
.feld-auswahl:not(.open) .dropdown-menu { display: none; }
.feld-auswahl.nach-links .dropdown-menu { left: auto; right: 0; }
/* eigener Knopf statt des Browser-Pfeils der Vorschlagsliste (Chrome/Edge) */
.feld-auswahl > input::-webkit-calendar-picker-indicator { display: none !important; }
:is(.formgrid, .stack, .modal-feld, .modal, .filter, .posgrid, .rowforms, .rowform, .etikett) label:has(> span:first-child + .feld-auswahl > :is(input[readonly], input:disabled)) { --notch: var(--field-off); }
/* Beleg: Zahlungsbedingung breiter (lange Texte wie „Zahlbar bis … abzgl. … Skonto“) */
.formgrid > label.feld-breit { grid-column: span 2; }
/* Grunddaten Zahlungsbedingungen: Platzhalter (VB6 frmZahlungbedingungen) */
.platzhalter-liste { list-style: none; padding: 0; margin: .3rem 0 0; display: grid; gap: .35rem; }
.platzhalter-liste .btn { padding: .1rem .45rem; font-family: var(--mono, monospace); font-size: .78rem; }
@media (max-width: 40rem) { .formgrid > label.feld-breit { grid-column: 1 / -1; } }
.feld-auswahl .dropdown-menu li > button { white-space: normal; }
.feld-auswahl > .btn.dropdown-toggle { padding: 0 .7rem; border: 1px solid var(--input); background: var(--card); border-radius: var(--radius); color: var(--text); }
.feld-auswahl > .btn.dropdown-toggle:hover { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-text, var(--primary)); }
.hinweiszeile { margin: 0 0 .6rem; padding: .45rem .7rem; border-radius: var(--radius); background: var(--primary-soft); color: var(--body); font-size: .875rem; }
.such-leiste { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .2rem 1.4rem .6rem; }
.such-leiste input[type=search] { flex: 1 1 16rem; }
.such-inhalt { padding: 0; }
.such-inhalt table { margin: 0; }
.such-inhalt tr:not(:first-child) { cursor: pointer; }
/* Beleg: Werkzeugleiste für markierte Positionen */
.pos-werkzeuge { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .6rem; }
.pos-werkzeuge .pos-preis, .pos-werkzeuge .pos-ablage { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.pos-werkzeuge input:not([type=checkbox]), .pos-werkzeuge select { width: auto; min-height: 0; height: 2rem; padding: .2rem .5rem; font-size: .85rem; }
.pos-werkzeuge .pos-preis input { width: 4.5rem; }
.pos-werkzeuge .pos-ablage { padding: .2rem .5rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.pos-werkzeuge .pos-weitere { margin-left: auto; }
.pos-werkzeuge .pos-weitere .dropdown-menu { min-width: 14rem; }
table.grid.pos .pos-wahl { width: 2rem; text-align: center; }
.belegkopf .uebernahme select { background: var(--primary-soft); }
.dubletten-liste { max-height: 50vh; overflow: auto; margin-top: .75rem; }
.dubletten-liste table.grid { font-size: .875rem; }
table.grid.pos tr.markiert td { background: var(--primary-soft); }
/* Artikel → Lager buchen: „nach“ und Beschriftung „von“ nur beim Umbuchen, „Mit Stückliste“ nur bei ins/aus */
.lagerbuchung .nur-umbuchen { display: none; }
.lagerbuchung:has(input[name=art][value=um]:checked) span.nur-umbuchen { display: inline; }
.lagerbuchung:has(input[name=art][value=um]:checked) label.nur-umbuchen { display: flex; }
.lagerbuchung:has(input[name=art][value=um]:checked) .nur-buchen { display: none; }
.lagerbuchung .buchungsart { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; border: 0; padding: 0; margin: 0; }
.lagerbuchung .buchungsart legend { font-size: .8rem; color: var(--muted); margin-bottom: .2rem; }
/* Suchfenster: sortierbare Spaltenüberschriften (Knopf statt Link, sonst wie th a.sortierbar) */
th button.sortierbar { background: none; border: 0; padding: 0; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer;
  color: inherit; display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
th button.sortierbar .ic { font-size: .95em; opacity: .35; transition: opacity .15s; }
th button.sortierbar:hover .ic, th button.sortierbar:focus-visible .ic, th button.sortierbar.aktiv .ic { opacity: 1; }
th button.sortierbar.aktiv { color: var(--primary-text, var(--primary)); }
th.r button.sortierbar { flex-direction: row-reverse; }
.such-inhalt table.grid tr.sel td, .such-inhalt table.grid tr.sel:hover td { background: var(--primary-soft); color: var(--text); }
.such-inhalt table.grid tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.such-inhalt [data-such-status]:empty { display: none; }
.such-inhalt [data-such-status] { padding: .6rem 1rem; margin: 0; }
.such-blaettern { display: inline-flex; gap: .5rem; align-items: center; }
.such-knoepfe { display: inline-flex; gap: .6rem; }
.modal.such-dialog { max-width: 100%; min-width: 0; }
.such-inhalt { overflow-x: auto; }
.such-leiste input[type=search] { min-width: 0; }
@media (max-width: 40rem) {
  /* schmal: Einheit und Bestand ausblenden, Liste bleibt im Fenster */
  #artikel-suche-dialog .such-inhalt th:nth-child(3), #artikel-suche-dialog .such-inhalt td:nth-child(3),
  #artikel-suche-dialog .such-inhalt th:nth-child(5), #artikel-suche-dialog .such-inhalt td:nth-child(5) { display: none; }
  .such-leiste { padding: .2rem 1rem .6rem; }
  .such-leiste input[type=search] { flex-basis: 100%; }
}
.posgrid .einzeilig { white-space: nowrap; }
.posgrid input.pos-gesamt { text-align: right; font-weight: 600; color: var(--text); }
.eingabe-mit-knopf > input, .eingabe-mit-knopf > select { flex: 1 1 auto; min-width: 0; }
.eingabe-mit-knopf > .eingabe-einheit { flex: 1 1 auto; min-width: 0; }
/* <select> mit Auswahlknopf (app.js auswahlMitKnopf): Pfeil im Feld entfällt, der Knopf daneben öffnet die Liste */
.auswahl-select > select:not([multiple]):not([size]) { background-image: none; padding-right: .8rem; }
/* auch in Zeilen mit Text (Filterleisten, „Einträge je Seite“): nur so breit wie nötig; in Formularspalten gestreckt (Flex-Element) */
.auswahl-select { display: inline-flex; vertical-align: middle; max-width: 100%; }
.feld-auswahl .dropdown-menu li > button.aktiv { background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-weight: 500; }
.feld-auswahl .dropdown-menu li > button:disabled { opacity: .5; cursor: not-allowed; }
/* Persönliche Merkliste (data-auswahl-entfernen): Eintrag und „ד in einer Zeile */
.feld-auswahl .dropdown-menu li.mit-entfernen { display: flex; align-items: stretch; }
.feld-auswahl .dropdown-menu li.mit-entfernen > button:first-child { flex: 1; min-width: 0; }
.feld-auswahl .dropdown-menu li.mit-entfernen > button.auswahl-entfernen { width: auto; flex: none; padding: 0 .9rem; justify-content: center; }
.feld-auswahl .dropdown-menu li.mit-entfernen > button.auswahl-entfernen .ic { font-size: 1rem; }
.feld-auswahl .dropdown-menu li.mit-entfernen > button.auswahl-entfernen:hover .ic, .feld-auswahl .dropdown-menu li.mit-entfernen > button.auswahl-entfernen:focus-visible .ic { color: var(--danger-text); }
/* Einträge mit Beschriftung (<option label>): Name, darunter der Wert klein (z. B. E-Mail-Adresse) */
.feld-auswahl .dropdown-menu li > button:has(> .auswahl-titel) { display: flex; flex-direction: column; align-items: flex-start; gap: .05rem; line-height: 1.3; }
.feld-auswahl .auswahl-titel { font-weight: 500; color: var(--text); }
.feld-auswahl li > button.aktiv .auswahl-titel { color: inherit; }
.feld-auswahl .auswahl-zusatz { font-size: .8125rem; color: var(--muted); overflow-wrap: anywhere; }
.feld-auswahl .dropdown-menu .dropdown-kopf { padding: .45rem 1.2rem .2rem; }
.modal.modal-sehr-breit { width: min(1100px, 100%); }
@media (max-width: 40rem) {
  /* Adresssuche schmal: nur Nummer, Name, PLZ/Ort */
  .modal-sehr-breit .such-inhalt th:nth-child(2), .modal-sehr-breit .such-inhalt td:nth-child(2),
  .modal-sehr-breit .such-inhalt th:nth-child(4), .modal-sehr-breit .such-inhalt td:nth-child(4),
  .modal-sehr-breit .such-inhalt th:nth-child(6), .modal-sehr-breit .such-inhalt td:nth-child(6),
  .modal-sehr-breit .such-inhalt th:nth-child(7), .modal-sehr-breit .such-inhalt td:nth-child(7) { display: none; }
}

/* Versandweg einrichten */
.einrichtung .card > form.stack > .rowform { flex-wrap: wrap; }
/* nur ein Feld direkt in der Zeile – im Label mit schwebender Beschriftung (senkrechte Flex-Box) würde 14rem zur Höhe */
.einrichtung .rowform > input[type=email] { flex: 1 1 14rem; min-width: 0; }
ol.assistent { margin: .4rem 0 0; padding-left: 1.4rem; }
ol.assistent > li { margin: 0 0 .6rem; }
ol.assistent summary { cursor: pointer; font-weight: 600; }
ol.assistent details > p, ol.assistent details > form { margin: .5rem 0 .3rem; }
pre.code { margin: .4rem 0; padding: .6rem .8rem; overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  font: .8rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre; }

/* Seitenleiste verkleinert: nur Symbole (ab 1001 px; auf schmalen Bildschirmen bleibt das ausklappbare Menü).
   Knopf „‹“ rechts neben der Marke, verkleinert „›“ unter dem Logo. */
.brand-zeile { display: flex; align-items: center; }
.brand-zeile .brand { flex: 1; min-width: 0; }
.nav-klein-knopf { display: none; place-items: center; flex: none; width: 2rem; height: 2rem; margin-right: .9rem; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.nav-klein-knopf .ic { font-size: 1.35rem; line-height: 1; }
.nav-klein-knopf:hover { background: var(--hover); color: var(--text); }
@media (min-width: 1001px) {
  .nav-klein-knopf { display: inline-grid; }
  :root[data-nav=klein] { --side: 4.6rem; }
  :root[data-nav=klein] .side { overflow-x: hidden; }
  :root[data-nav=klein] .brand-zeile { flex-direction: column; gap: .15rem; padding-bottom: .3rem; }
  :root[data-nav=klein] .side .brand { justify-content: center; padding: 1.1rem 0 .2rem; }
  :root[data-nav=klein] .nav-klein-knopf { margin: 0; }
  :root[data-nav=klein] .side .brand > span:not(.brand-logo),
  :root[data-nav=klein] .side a:not(.brand) > span { display: none; }
  :root[data-nav=klein] .menu-header { font-size: 0; padding: 0 .9rem; margin: .8rem 0 .3rem; }
  :root[data-nav=klein] .side a:not(.brand) { justify-content: center; margin: .1rem .55rem; padding: .55rem 0; border-radius: var(--radius); }
}

.icon-btn[hidden] { display: none; }
.pflicht { color: var(--danger); font-weight: 600; }

/* Fehler melden (Kopfleiste) */
.ic-bug::before { content: "\eb07"; } .ic-bild::before { content: "\f0c5"; }
.fehlerbericht .angaben { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .8rem; margin: 0; font-size: .8125rem; }
.fehlerbericht .angaben dt { color: var(--muted); }
.fehlerbericht .angaben dd { margin: 0; overflow-wrap: anywhere; }
.fehlerbericht .fb-aufnahme, .fehlerbericht .fb-hinweis { margin: 0; }
.fehlerbericht .fb-aufnahme:has(> [hidden]) { display: none; }
.fehlerbericht .bilder-liste:empty { display: none; }
.fehlerbericht .bilder-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.fehlerbericht .bilder-liste li { display: flex; flex-direction: column; align-items: center; gap: .2rem; max-width: 9rem; font-size: .75rem; color: var(--muted); }
.fehlerbericht .bilder-liste img { max-width: 9rem; max-height: 6rem; border: 1px solid var(--border); border-radius: var(--radius); object-fit: contain; background: var(--hover); }
.fehlerbericht .bilder-liste span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Fußzeile (Seitenende, nicht fixiert) */
.fusszeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1.5rem; margin: 0 1.25rem; padding: .9rem 0 1.1rem;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.5; }
.fusszeile a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 2px; }
.fusszeile a:hover { color: var(--primary-text, var(--primary)); text-decoration-color: currentColor; }
.fusszeile .fuss-rechts { margin-left: auto; text-align: right; }
.fusszeile .herz { font-size: .7rem; }
main + .fusszeile { margin-top: -1.5rem; }
body.login { grid-template-rows: 1fr auto; }
body.login .fusszeile { justify-content: center; border-top: 0; margin: 0; padding: .5rem 0 0; text-align: center; }
body.login .fusszeile .fuss-rechts { margin-left: 0; text-align: center; }
@media (max-width: 640px) {
  .fusszeile { flex-direction: column; margin: 0 1rem; }
  .fusszeile .fuss-rechts { margin-left: 0; text-align: left; }
}

/* Knopfpaar „Neu“ + „Suchen/Zuordnen“ (Projekt) */
.btn-paar { display: inline-flex; }
.btn-paar > .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-paar > .btn + .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding-left: .6rem; padding-right: .6rem; }
.btn-paar > .btn.primary + .btn { border-left-color: rgba(255, 255, 255, .45); }
.such-leiste select { width: auto; }
/* Optionspaket EWJ: Hauptwarengruppe/Warengruppe als eigene Zeile nebeneinander (VB6 frmSuchenNeu) */
.such-gruppen { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 100%; }
.such-leiste .such-gruppen select { flex: 1 1 12rem; width: auto; min-width: 0; }

.knopfzeile { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 .5rem; }
label.check.check-mehrzeilig { align-items: flex-start; }
label.check.check-mehrzeilig > input { margin-top: .2rem; }
.check-mehrzeilig > span > .small { display: block; }

/* Meine E-Mails (Microsoft 365) */
.mail-antwort summary { cursor: pointer; font-weight: 500; color: var(--muted); display: flex; align-items: center; gap: .5rem; list-style: none; }
.mail-antwort summary::-webkit-details-marker { display: none; }
.mail-antwort summary .ic { font-size: 1.25rem; color: var(--primary-text, var(--primary)); }
.mail-antwort[open] summary { margin-bottom: .8rem; color: var(--text); }

/* ------------------------------------------------------------------ Meine E-Mails (Aufbau nach Materio app-email) */
.mail-app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.mail-seite { padding: 1.1rem .75rem; position: sticky; top: 5.5rem; }
.mail-neu-knopf { width: 100%; justify-content: center; margin-bottom: 1rem; }
.mail-ordner { display: flex; flex-direction: column; gap: .1rem; }
.mail-ordner a { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; border-radius: 50rem;
  color: var(--text); text-decoration: none; font-weight: 500; }
.mail-ordner a > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-ordner a .ic { font-size: 1.25rem; color: var(--muted); }
.mail-ordner a:hover { background: var(--hover); }
.mail-ordner a.aktiv { background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.mail-ordner a.aktiv .ic { color: var(--primary-text, var(--primary)); }
.mail-zahl { min-width: 1.6rem; padding: .05rem .45rem; border-radius: 50rem; background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-size: .78rem; font-weight: 600; text-align: center; }
.mail-ordner a.aktiv .mail-zahl { background: var(--primary); color: var(--on-primary); }

.mail-liste { padding: 0; overflow: visible; }
.mail-suche { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); }
.mail-suche > .ic { font-size: 1.25rem; color: var(--muted); }
.mail-suche input[type=search] { flex: 1 1 auto; min-width: 6rem; border: 0; background: transparent; box-shadow: none; padding: .4rem 0; }
.mail-suche input[type=search]:focus { outline: none; box-shadow: none; }
.mail-suche label.check { white-space: nowrap; font-size: .85rem; color: var(--muted); }
.mail-ordner-wahl { display: none; }
.mail-symbol { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: var(--muted); font-size: 1.3rem; box-shadow: none; cursor: pointer; text-decoration: none; flex: none; }
.mail-symbol:hover:not(:disabled) { background: var(--hover); color: var(--text); border-color: transparent; }
.mail-symbol:disabled { opacity: .45; cursor: default; }
.mail-symbol.an, .mail-stern.an { color: var(--warning); }

.mail-werkzeuge { display: flex; align-items: center; gap: .35rem; padding: .35rem 1.1rem; border-bottom: 1px solid var(--line); min-height: 3rem; }
.mail-alle { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; cursor: pointer; }
.mail-mehrfach { display: inline-flex; align-items: center; gap: .1rem; }
.mail-info { margin-left: auto; text-align: right; }
.mail-ziel { min-width: 14rem; max-width: calc(100vw - 2.5rem); max-height: 60vh; overflow: auto; left: 0; right: auto; }
.dropdown:not(.open) > .mail-ziel { display: none; }
.mail-ordner a.ebene-1 { padding-left: 1.75rem; } .mail-ordner a.ebene-2 { padding-left: 2.75rem; }
.mail-ziel button.ebene-1 { padding-left: 2.2rem !important; } .mail-ziel button.ebene-2 { padding-left: 3.2rem !important; }

.mail-eintraege { list-style: none; margin: 0; padding: 0; }
.mail-eintrag { position: relative; display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); background: var(--card); }
.mail-eintrag:hover { box-shadow: var(--shadow-sm); z-index: 1; background: var(--row-hover); }
.mail-eintrag:not(.ungelesen) { background: color-mix(in srgb, var(--surface-2) 55%, var(--card)); }
.mail-eintrag:not(.ungelesen):hover { background: var(--row-hover); }
.mail-eintrag > input[type=checkbox] { flex: none; }
.mail-stern { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; background: transparent; color: var(--muted);
  font-size: 1.3rem; box-shadow: none; cursor: pointer; flex: none; }
.mail-stern:hover { color: var(--warning); background: transparent; }
.mail-avatar { width: 2.1rem; height: 2.1rem; font-size: .8rem; letter-spacing: .02em;
  background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.mail-avatar.farbe-1 { background: var(--success-soft); color: var(--success-text); } .mail-avatar.farbe-2 { background: var(--info-soft); color: var(--info-text); }
.mail-avatar.farbe-3 { background: var(--warning-soft); color: var(--warning-text); } .mail-avatar.farbe-4 { background: var(--danger-soft); color: var(--danger-text); }
.mail-avatar.farbe-5 { background: var(--surface-2); color: var(--text); }
.mail-ansicht .mail-avatar { width: 2.6rem; height: 2.6rem; font-size: .95rem; }
.mail-inhalt-link { display: flex; align-items: center; gap: .75rem; flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; }
.mail-inhalt-link:hover { color: var(--text); }
.mail-name { flex: 0 0 11rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mail-text { display: flex; align-items: center; gap: .45rem; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; }
.mail-betreff { flex: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
.mail-vorschau { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.mail-eintrag.ungelesen .mail-name, .mail-eintrag.ungelesen .mail-betreff { font-weight: 700; }
.mail-label { flex: none; width: .6rem; height: .6rem; border-radius: 50%; }
.mail-label.kunde { background: var(--success); }
.mail-label.lieferant { background: var(--info); }
.mail-wichtig { color: var(--danger); font-size: 1.05rem; }
.mail-meta { display: flex; align-items: center; gap: .45rem; flex: none; color: var(--muted); font-size: .85rem; }
.mail-meta > .ic { font-size: 1.15rem; }
.mail-zeit { white-space: nowrap; min-width: 3.2rem; text-align: right; }
.mail-zeilen-aktionen { display: none; align-items: center; gap: .1rem; }
.mail-eintrag:hover .mail-zeilen-aktionen, .mail-eintrag:focus-within .mail-zeilen-aktionen { display: inline-flex; }
.mail-eintrag:hover .mail-meta .mail-zeit, .mail-eintrag:focus-within .mail-meta .mail-zeit { display: none; }
.mail-leer { padding: 3rem 1rem; text-align: center; color: var(--muted); }
.mail-liste > .pager, .mail-liste > nav { padding: .6rem 1.1rem; }

/* Outlook-Kontakte (Aufbau wie Meine E-Mails) */
.kontakt-filter { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; padding: .55rem 1.1rem; border-bottom: 1px solid var(--line); }
.kontakt-filter a { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 50rem; color: var(--text); text-decoration: none; font-weight: 500; }
.kontakt-filter a:hover { background: var(--hover); }
.kontakt-filter a.aktiv { background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.kontakt-filter a.aktiv .mail-zahl { background: var(--primary); color: var(--on-primary); }
.kontakt-eintrag, .mail-eintrag.kontakt-eintrag:not(.ungelesen) { gap: .85rem; background: var(--card); }
.mail-eintrag.kontakt-eintrag:hover { background: var(--row-hover); }
.kontakt-name { display: flex; flex-direction: column; flex: 0 0 15rem; min-width: 0; }
.kontakt-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kontakt-daten { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.1rem; flex: 1 1 auto; min-width: 0; color: var(--muted); }
.kontakt-daten a, .kontakt-daten span { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.kontakt-daten a:hover { color: var(--primary-text, var(--primary)); }
.kontakt-daten .ic { font-size: 1.05rem; flex: none; }
.kontakt-aktion { display: flex; align-items: center; gap: .4rem; flex: none; }
.kontakt-aktion .tag { display: inline-flex; align-items: center; gap: .3rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .kontakt-eintrag { flex-wrap: wrap; }
  .kontakt-name { flex: 1 1 calc(100% - 3.5rem); }
  .kontakt-daten { flex-basis: 100%; padding-left: 2.95rem; }
  .kontakt-aktion { padding-left: 2.95rem; flex-wrap: wrap; }
}

/* Einzelne E-Mail */
.mail-ansicht { display: flex; flex-direction: column; gap: 1rem; max-width: 70rem; }
.mail-ansicht-kopf { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .8rem 1.1rem; }
.mail-ansicht-titel { display: flex; align-items: center; gap: .5rem; flex: 1 1 20rem; min-width: 0; }
.mail-ansicht-titel h1 { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.mail-ansicht-werkzeuge { display: flex; align-items: center; gap: .15rem; margin: 0; }
.mail-ansicht-werkzeuge .dropdown-menu { right: 0; left: auto; }
.mail-absender { display: flex; align-items: flex-start; gap: .85rem; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.mail-absender-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mail-absender-name { font-weight: 600; color: var(--text); }
.mail-nachricht .mail-inhalt iframe { display: block; width: 100%; height: 65vh; min-height: 20rem; border: 0; border-radius: var(--radius); background: #fff; }
.mail-anlagen-kacheln { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.mail-anlagen-kacheln > .small { flex-basis: 100%; }
.mail-anlage-kachel { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); text-decoration: none; max-width: 18rem; }
.mail-anlage-kachel:hover { border-color: var(--primary); color: var(--text); }
.mail-anlage-kachel .ic { font-size: 1.5rem; color: var(--primary-text, var(--primary)); }
.mail-anlage-kachel span { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-anlage-kachel small { font-size: .75rem; }

/* Neue E-Mail */
.modal.mail-verfassen { width: min(46rem, 100%); padding: 0; }
.mail-verfassen-form { display: flex; flex-direction: column; }
.mail-verfassen .modal-kopf { padding: 1rem 1.25rem; margin: 0; border-bottom: 1px solid var(--line); align-items: center; }
.mail-verfassen .mail-schliessen { margin-left: auto; }
.mail-feldzeile { display: flex; align-items: center; gap: .6rem; padding: .25rem 1.25rem; border-bottom: 1px solid var(--line); }
.mail-feldzeile > label { flex: none; min-width: 3.6rem; color: var(--muted); }
.mail-feldzeile input, .mail-empfaenger input { flex: 1; width: 100%; border: 0; background: transparent; box-shadow: none; padding: .55rem 0; }
.mail-feldzeile input:focus { outline: none; box-shadow: none; }
.mail-empfaenger { position: relative; flex: 1; min-width: 0; }
.mail-feldzeile[hidden] { display: none; }
.mail-cc-schalter { flex: none; color: var(--muted); }
button.link { border: 0; background: transparent; box-shadow: none; padding: 0; color: var(--text); cursor: pointer; font: inherit; }
button.link:hover { color: var(--primary-text, var(--primary)); background: transparent; }
.mail-verfassen textarea { border: 0; border-radius: 0; box-shadow: none; padding: 1rem 1.25rem; resize: vertical; min-height: 12rem; background: transparent; }
.mail-verfassen textarea:focus { outline: none; box-shadow: none; }
.mail-verfassen-fuss { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.25rem; border-top: 1px solid var(--line); }
.mail-verfassen-fuss > .mail-symbol:last-child { margin-left: auto; }
.mail-anlage-wahl { display: inline-flex; flex-direction: row; align-items: center; gap: .35rem; cursor: pointer; color: var(--muted); margin: 0; white-space: nowrap; }
.mail-anlage-wahl:hover { color: var(--text); }
.mail-anlage-wahl .ic { font-size: 1.25rem; }
.mail-anlage-wahl input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mail-anlage-wahl:focus-within { outline: 2px solid var(--primary-line); border-radius: var(--radius); }
.mail-anlage-namen { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-verfassen-hinweis { padding: 0 1.25rem 1rem; margin: 0; }
.mail-vorschlaege { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; margin: .2rem 0 0; padding: .35rem 0; list-style: none; background: var(--card);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 16rem; overflow: auto; }
.mail-vorschlaege li { display: flex; flex-direction: column; padding: .4rem .9rem; cursor: pointer; }
.mail-vorschlaege li[aria-selected=true], .mail-vorschlaege li:hover { background: var(--hover); }
.mail-vorschlaege small { color: var(--muted); }

@media (max-width: 900px) {
  .mail-app { grid-template-columns: minmax(0, 1fr); }
  .mail-seite { position: static; padding: .75rem; }
  .mail-seite .mail-ordner { display: none; }
  .mail-neu-knopf { margin-bottom: 0; }
  .mail-ordner-wahl { display: block; max-width: 11rem; }
  .mail-name { flex-basis: 7.5rem; }
  .mail-inhalt-link { flex-wrap: wrap; row-gap: .1rem; }
  .mail-text { flex-basis: 100%; }
}
@media (max-width: 560px) {
  .mail-suche { flex-wrap: wrap; }
  .mail-suche input[type=search] { flex-basis: 8rem; }
  .mail-stern, .mail-avatar { display: none; }
  .kontakt-eintrag .mail-avatar { display: inline-grid; }
  .mail-info { display: none; }
}

/* Ladeanzeige beim Seitenwechsel */
.lade-balken { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 3000; pointer-events: none; opacity: 0; overflow: hidden;
  transition: opacity .15s; }
.lade-balken.aktiv { opacity: 1; transition-delay: .12s; }
.lade-balken::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: var(--primary);
  box-shadow: 0 0 8px var(--primary); animation: lade-lauf 1.1s ease-in-out infinite; }
@keyframes lade-lauf { 0% { left: -40%; } 100% { left: 100%; } }
.lade-hinweis { position: fixed; top: 1rem; left: 50%; transform: translate(-50%, -.5rem); z-index: 3000; pointer-events: none; opacity: 0;
  padding: .45rem 1rem .45rem 2.3rem; border-radius: 50rem; background: var(--card); color: var(--text); box-shadow: var(--shadow-lg, 0 .5rem 1.5rem rgba(0,0,0,.2));
  font-size: .875rem; transition: opacity .2s, transform .2s; }
.lade-hinweis::before { content: ""; position: absolute; left: .85rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--primary); animation: lade-dreh .8s linear infinite; }
@keyframes lade-dreh { to { transform: rotate(360deg); } }
/* Knopf, dessen Aktion läuft (Speichern, Hintergrundauftrag): Spinner vor der Beschriftung, kein zweiter Klick */
.btn-laeuft, button[data-laeuft] { pointer-events: none; cursor: progress; }
.btn-laeuft::before, button[data-laeuft]::before { content: ""; flex: none; width: .95em; height: .95em; box-sizing: border-box;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: lade-dreh .7s linear infinite; }
.btn-laeuft > .ic, button[data-laeuft] > .ic { display: none; }
.laeuft-hinweis { display: none; margin-left: .6rem; }
form[data-sendet] .laeuft-hinweis { display: inline; }   /* Hinweis neben dem Knopf, solange die Abfrage läuft */   /* Spinner an der Stelle des Symbols */
.lade-hinweis.aktiv { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .lade-balken::before { animation: none; left: 0; width: 100%; opacity: .6; }
  .lade-hinweis::before { animation-duration: 2.5s; }
}
@media print { .lade-balken, .lade-hinweis { display: none !important; } }
/* Testzeile: Empfängerfeld über die ganze Breite, darunter die Knöpfe gleich hoch nebeneinander */
.rowform.test-zeile { align-items: stretch; }
.rowform.test-zeile > input, .rowform.test-zeile > label, .einrichtung .rowform.test-zeile > input[type=email] { order: -1; flex: 1 1 100%; }
.rowform.test-zeile > .btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; }

/* KI-Assistent */
.ic-ki::before { content: "\f36d"; }
.ki-gespraech { display: flex; flex-direction: column; gap: .9rem; min-height: 12rem; }
.ki-leer ul { margin: .3rem 0 .8rem; padding-left: 1.2rem; }
.ki-leer li { margin: .25rem 0; color: var(--text); }
.ki-zeile { display: flex; gap: .6rem; align-items: flex-start; }
.ki-zeile.ich { justify-content: flex-end; }
.ki-blase { max-width: min(52rem, 100%); min-width: 0; padding: .65rem .9rem; border-radius: var(--radius); background: var(--hover); color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.ki-zeile.ich .ki-blase { background: var(--primary); color: var(--on-primary, #fff); }
.ki-zeile.ki .ki-blase { background: var(--card); border: 1px solid var(--line); flex: 1 1 auto; }
.ki-avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.ki-vorschlag { margin-top: .7rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ki-vorschlag-kopf { padding: .55rem .8rem; background: var(--hover); }
.ki-vorschlag table.grid { margin: 0; border: 0; box-shadow: none; }
/* Adresse → Kundenpreise: Löschen und ⋮ (Rabatt übertragen) nebeneinander */
.kundenpreis-mehr { display: inline-block; vertical-align: middle; margin-left: .25rem; }
.ki-vorschlag-fuss .knoepfe, .ki-vorschlag-fuss .knoepfe form { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ki-vorschlag-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .8rem; border-top: 1px solid var(--line); }
.ki-eingabe { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.ki-eingabe textarea { width: 100%; resize: vertical; }
.ki-vorlagen { display: flex; flex-wrap: wrap; gap: .4rem; }
.ki-vorlage-hinweis { margin: 0; }
.ki-eingabe-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }

/* KI-Einrichtung: Knopf „Modelle abrufen“ mit Erklärung daneben; die Auswahl der gefundenen Modelle erscheint erst danach */
.ki-modelle-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
/* Belegliste: Schalter „Mahnungen“/„Inkasso“ – nur bei Belegarten mit offenen Posten sichtbar
   (die Schalter bleiben direkte Kinder der Filterleiste, damit deren Abstände und Höhen greifen) */
.filter > label.check[hidden] { display: none !important; }

/* Aufgabe als eigene Seite: Zwischenüberschrift in der Karte „Eckdaten“ */
.card-untertitel { margin: .9rem 0 .5rem; font-size: .95rem; color: var(--muted); font-weight: 600; }
.formgrid label[data-ki-modellwahl-feld][hidden] { display: none !important; }   /* label ist flex – das Attribut allein genügt nicht */

/* KI-Assistent: Bilder (Foto mit der Kamera, Bild aus der Galerie bzw. vom Rechner) */
.ki-bild { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.ki-bild [hidden] { display: none !important; }   /* .btn und .check setzen display und würden das Attribut übergehen */
.ki-bild-knopf { cursor: pointer; }
.ki-bild-knopf input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ki-bild-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.ki-bild-liste li { display: flex; align-items: center; gap: .4rem; padding: .25rem .4rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--field); }
.ki-bild-liste img { width: 2.6rem; height: 2.6rem; object-fit: cover; border-radius: .35rem; }
.ki-bild-liste .ki-bild-weg { border: 0; background: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: .1rem .2rem; }
.ki-bild-liste .ki-bild-weg:hover { color: var(--danger); }
.ki-kontakt .formgrid { padding: .6rem .8rem; }
.ki-kontakt-titel { margin: .2rem .8rem .4rem; font-size: .95rem; }
.ki-kontakt .flash { margin: 0 .8rem .4rem; }

/* KI-Assistent: Punkt am Symbol, solange ein Auftrag läuft */
.ki-knopf { position: relative; }
.ki-arbeitet { position: absolute; top: .3rem; right: .3rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary); animation: ki-puls 1.4s ease-out infinite; }
@keyframes ki-puls { 0% { box-shadow: 0 0 0 0 rgba(140, 87, 255, .6); } 100% { box-shadow: 0 0 0 .5rem rgba(140, 87, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .ki-arbeitet { animation: none; } }

/* ausgeblendete Knöpfe/Kacheln (z. B. „Neuer Beleg“ bei NoSave ohne passendes Recht) */
a[hidden], button[hidden] { display: none !important; }

/* Paketversand: Fenster „Sendung anlegen“ und Karte „Sendungen“ */
.modal.modal-breit { width: min(46rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; }
.modal.modal-breit.modal-sehr-breit { width: min(1100px, 100%); }   /* Adress-Suchfenster: breiter als .modal-breit (sonst überschrieb die Zeile darüber die Breite) */
.modal-breit fieldset.modal-feld { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem 1rem; margin: 0 0 1rem; }
.modal-breit fieldset.modal-feld legend { padding: 0 .4rem; font-weight: 600; }
.sendung-felder { margin-bottom: 1rem; }
.sendungen .sendung { padding: .7rem 0; border-top: 1px solid var(--line); }
.sendungen .sendung:first-of-type { border-top: 0; padding-top: 0; }
.sendungen .sendung.storniert { opacity: .6; }
.sendungen .sendung.neu { background: var(--primary-soft); border-radius: var(--radius); padding: .7rem; }
.sendung-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.sendung-aktionen { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.paketdienst-form { display: flex; flex-direction: column; gap: 1rem; }
.modal-breit fieldset.modal-feld > label.check { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .6rem; margin-top: .9rem; text-align: left; }
/* Offene Posten: „OP-Liste drucken“ im Feldstil der Etiketten (Auswahl und Knopf in einer Zeile) */
.op-druck { max-width: 30rem; margin-bottom: 1rem; flex-wrap: nowrap; justify-content: flex-start; }
.op-druck > label.op-druck-art { flex: 0 1 17rem; min-width: 0; }
.op-druck > label.op-druck-art > select, .op-druck > label.op-druck-art > .auswahl-select { width: 100%; }
.op-druck > .btn { flex: none; }

/* Telegram: Verbindungscode groß, Einrichtungsschritte */
.code-gross { margin: .3rem 0 .9rem; font-family: var(--mono, monospace); font-size: 1.8rem; font-weight: 600; letter-spacing: .15em; }
ol.schritte { margin: .2rem 0 .9rem; padding-left: 1.3rem; }
ol.schritte > li { margin-bottom: .3rem; }

/* KI-Assistent: Beispielfragen je Bereich (Klick übernimmt die Frage) */
.ki-beispiele { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem 1.4rem; margin: .5rem 0; text-align: left; }
.ki-beispiele ul { margin: .25rem 0 0; padding: 0; list-style: none; }
.ki-beispiele li { margin: .15rem 0; }
button.ki-beispiel { display: block; width: 100%; padding: .1rem 0 .1rem 1rem; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--primary-text, var(--primary));
  font: inherit; font-size: .88rem; font-weight: 400; text-align: left; justify-content: flex-start; cursor: pointer; line-height: 1.4; position: relative; }
button.ki-beispiel::before { content: "›"; position: absolute; left: .2rem; color: var(--muted); }
button.ki-beispiel:hover { background: none; text-decoration: underline; }
details.ki-hilfe > summary { cursor: pointer; font-weight: 500; }

/* Darstellung (eigene Farben): Texte und Symbole der Kopfleiste folgen ihrer Farbe (ohne Einstellung wie bisher) */
.top .icon-btn, .top .navtoggle, .top .top-title, .top .dropdown > .dropdown-toggle { color: var(--kopf-text, var(--text)); }
.top .icon-btn:hover, .top .navtoggle:hover, .top .dropdown > .dropdown-toggle:hover { color: var(--kopf-text, var(--text)); background: var(--kopf-hover, var(--hover)); }

/* Darstellung: Farbfelder, Vorschläge */
.darstellung-vorschlaege { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .4rem 0 1rem; }
.farbvorschlag { gap: .4rem; padding: .3rem .7rem; font-size: .85rem; font-weight: 400; }
.farbpunkt { display: inline-block; width: .9rem; height: .9rem; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.farbe-8c57ff { background: #8c57ff; } .farbe-1e6fd9 { background: #1e6fd9; } .farbe-00838f { background: #00838f; } .farbe-2e7d32 { background: #2e7d32; }
.farbe-fccd15 { background: #fccd15; } .farbe-e65100 { background: #e65100; } .farbe-c62828 { background: #c62828; } .farbe-455a64 { background: #455a64; }
.darstellung-modi { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.darstellung-modi fieldset { margin: 0; min-width: 0; display: grid; gap: .6rem; }
.darstellung-modi fieldset:disabled { opacity: .55; }
label.farbfeld { display: flex; flex-direction: row; align-items: center; gap: .8rem; }
label.farbfeld input[type=color] { flex: none; width: 3rem; height: 2.2rem; padding: .15rem; border-radius: var(--radius); cursor: pointer; }
label.farbfeld span { display: flex; flex-direction: column; min-width: 0; }
label.farbfeld small { color: var(--muted); font-size: .78rem; }

/* KI-Textarbeit: Knopf unter Textfeldern und Fenster „Mit KI überarbeiten“ */
.ki-text-leiste { display: flex; justify-content: flex-end; margin-top: .25rem; }
.ki-text-knopf { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  color: var(--primary-text, var(--primary)); font-size: .8125rem; cursor: pointer; }
.ki-text-knopf:hover, .ki-text-knopf:focus-visible { background: var(--primary-soft); }
.ki-text-auftraege { display: flex; flex-wrap: wrap; gap: .4rem; }
.ki-text-auftraege .btn { font-size: .875rem; }
.ki-text-eigene { display: flex; gap: .5rem; align-items: flex-end; }
.ki-text-eigene label { flex: 1; display: flex; flex-direction: column; gap: .3rem; }
.ki-text-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ki-text-vergleich label { display: flex; flex-direction: column; gap: .3rem; }
.ki-text-vergleich textarea { width: 100%; resize: vertical; }
.ki-text-vergleich textarea[readonly] { background: var(--surface-2); color: var(--muted); }
.ki-text .modal-fuss .such-knoepfe { margin-left: auto; }
.ki-text-status.fehler { color: var(--danger-text); }
.ki-text-status.arbeitet::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .4em; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: 50%; vertical-align: -.1em; animation: ki-dreht .8s linear infinite; }
@keyframes ki-dreht { to { transform: rotate(360deg); } }
@media (max-width: 640px) { .ki-text-vergleich { grid-template-columns: 1fr; } .ki-text-eigene { flex-direction: column; align-items: stretch; } }
@media print { .ki-text-leiste { display: none; } }

/* Serien-E-Mail: Vorschau des Textes, Fortschritt, Empfängerwahl im Fenster */
.serien-vorschau { padding: .8rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); max-height: 22rem; overflow-y: auto; line-height: 1.5; overflow-wrap: anywhere; }
.serien-fortschritt { width: 100%; height: .6rem; margin: .2rem 0 .6rem; accent-color: var(--primary); }
.serienmail-empfaenger { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; border: 0; padding: 0; margin: 0; }
.serienmail-empfaenger legend { font-size: .8125rem; color: var(--muted); padding: 0; margin-bottom: .3rem; }

/* Datenimport: Feldgruppen der Zuordnung, Zahlen des Probelaufs, breite Vorschau-Tabelle */
.import-gruppe { border: 0; padding: 0; margin: 0 0 1rem; }
.import-gruppe legend { font-weight: 600; margin-bottom: .5rem; }
.import-zahlen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.import-zahlen .tag { font-size: .875rem; padding: .25rem .6rem; }
.tabelle-scroll { overflow-x: auto; max-width: 100%; }
.tabelle-scroll table { min-width: max-content; }
/* Reiter, die erst beim Öffnen geladen werden (Adressseite: Belege, Verlauf, Aktivitäten, Dokumente) */
.reiter-nachladen { padding: 1.5rem 0; }
.reiter-nachladen p { display: flex; align-items: center; gap: .6rem; margin: 0; }
.lade-kreis { display: inline-block; width: 1.1em; height: 1.1em; border: 2px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: lade-dreh .8s linear infinite; }
@keyframes lade-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lade-kreis { animation: none; } }
[data-reiter-basis][aria-busy="true"] { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* PHP-Umgebung (Update): Erweiterungen als Schlagwörter */
.php-erweiterungen { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Belegliste: Filter ruhen, solange gesucht wird (Suche hat Vorrang) */
.filter.ruht select, .filter.ruht input[type=date] { opacity: .5; }

/* „Alle Belege des Kunden/Lieferanten“ im Beleg (Menü ⋮, wie VB6 frmAndockfenster): Seitenleiste von rechts, Kopf mit Suche und
   Filter steht, nur die Liste scrollt */
.belegbaum-leiste { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1086; width: min(var(--belegbaum-breite), 100%); background: var(--card);
  border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: seite-ein .2s ease-out; }
.belegbaum-leiste[hidden] { display: none; }
:root { --belegbaum-breite: 400px; }
@keyframes seite-ein { from { transform: translateX(2rem); opacity: 0; } }
.belegbaum-fenster { display: flex; flex-direction: column; height: 100%; }
.modal.belegbaum-fenster { height: min(85vh, 820px); }
.belegbaum-fenster .modal-kopf { justify-content: space-between; align-items: flex-start; padding: 1rem 1rem .4rem 1.2rem; }
.belegbaum-fenster .modal-kopf h2 { font-size: 1.05rem; overflow-wrap: anywhere; }
.belegbaum-fenster .modal-kopf p { margin: .15rem 0 0; }
/* breite Bildschirme (ab 1400 px, wie in app.js): angedockt – der Inhalt rückt zur Seite, nichts wird verdeckt */
@media (min-width: 1400px) {
  body.belegbaum-offen .layout { padding-right: var(--belegbaum-breite); }
  .belegbaum-leiste { box-shadow: none; animation: none; }
}
/* Griff am rechten Rand, solange die Leiste zu ist */
.belegbaum-griff { position: fixed; right: 0; top: 50%; z-index: 1084; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .7rem .3rem; border: 1px solid var(--line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); background: var(--card);
  color: var(--muted); box-shadow: var(--shadow); cursor: pointer; transform: translateY(-50%); font: inherit; font-size: .8rem; }
.belegbaum-griff span { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .03em; }
.belegbaum-griff:hover, .belegbaum-griff:focus-visible { color: var(--primary-text, var(--primary)); background: var(--primary-soft); }
body.belegbaum-offen .belegbaum-griff { display: none; }
@media (max-width: 699px) { .belegbaum-griff { display: none; } }
.belegbaum-zu { flex: none; margin: -.3rem -.3rem 0 0; }
.belegbaum-filter { margin: 0; padding: .3rem 1.2rem .6rem; border-bottom: 1px solid var(--line); gap: .4rem; }
.belegbaum-filter input[type=search] { flex: 1 1 100%; }
.belegbaum-filter select { flex: 1 1 8rem; }
.belegbaum-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: .6rem 1rem 1rem 1.2rem; overscroll-behavior: contain; }
.belegbaum-fenster .modal-fuss { padding: .7rem 1.2rem; border-top: 1px solid var(--line); justify-content: flex-start; }
.belegbaum-summe { margin: 0 0 .4rem; }
.belegbaum details { border-top: 1px solid var(--line); }
.belegbaum details:first-child { border-top: 0; }
.belegbaum summary { cursor: pointer; padding: .45rem .1rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.belegbaum summary::-webkit-details-marker { display: none; }
.belegbaum summary::before { content: "\203A"; display: inline-block; width: .8rem; color: var(--muted); font-size: 1.15rem; line-height: 1; transition: transform .15s; }
.belegbaum details[open] > summary::before { transform: rotate(90deg); }
.belegbaum-art { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belegbaum-gruppe { padding: 0 0 .5rem .6rem; }
.belegbaum ul { list-style: none; margin: 0; padding: 0; }
.belegbaum li a { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto 6.8rem; gap: .5rem; align-items: center;
  padding: .28rem .4rem; border-radius: var(--radius); color: inherit; text-decoration: none; font-size: .875rem; font-variant-numeric: tabular-nums; }
.belegbaum li a:hover, .belegbaum li a:focus-visible { background: var(--surface-2); }
.belegbaum li.aktuell a { background: var(--primary-soft); box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.belegbaum .nr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.belegbaum .datum { color: var(--muted); }
.belegbaum .betrag { text-align: right; }
.belegbaum .status-offen .ic { color: var(--warn); }
.belegbaum .status-erledigt .ic { color: var(--ok); }
.belegbaum .status-storniert .ic, .belegbaum .status-storniert .betrag { color: var(--muted); }
.belegbaum .status-storniert .nr { text-decoration: line-through; }
.belegbaum-luecke { padding: 0 .4rem 0 2rem; color: var(--muted); line-height: 1; }
.belegbaum-mehr { margin: .3rem 0 0 2rem; }
@media (max-width: 480px) {
  .belegbaum li a { grid-template-columns: 1.1rem minmax(0, 1fr) auto; }
  .belegbaum li a .datum { display: none; }
}
/* Auswertung „Umsatz je Mitarbeiter“: Reihenfarben (Diagramm und Legende), Vorjahresvergleich, Summenzeile */
.machart rect.ma0, .ma-farbe.ma0 { fill: var(--primary); background: var(--primary); }
.machart rect.ma1, .ma-farbe.ma1 { fill: #ffb400; background: #ffb400; }
.machart rect.ma2, .ma-farbe.ma2 { fill: #16b1ff; background: #16b1ff; }
.machart rect.ma3, .ma-farbe.ma3 { fill: #56ca00; background: #56ca00; }
.machart rect.ma4, .ma-farbe.ma4 { fill: #ff4c51; background: #ff4c51; }
.machart rect.ma5, .ma-farbe.ma5 { fill: #8a8d93; background: #8a8d93; }
.machart rect.ma6, .ma-farbe.ma6 { fill: #c06ad6; background: #c06ad6; }
.machart rect.ma7, .ma-farbe.ma7 { fill: #26a69a; background: #26a69a; }
.machart-legende { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.machart-legende li { display: flex; align-items: center; gap: .4rem; }
.ma-farbe { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; }
td .plus { color: var(--success-text); }
td .minus { color: var(--danger-text); }
table.grid tr.summe th { border-top: 2px solid var(--line); }
.mazuordnung summary { cursor: pointer; }
.mazuordnung table.grid select { width: auto; min-width: min(14rem, 50vw); }

/* HTML-Editor (Shop-Beschreibung im Produkt): Werkzeugleiste, Bearbeitungsfläche; „HTML“ zeigt die Textarea mit dem Quelltext */
.html-editor-feld { display: block; }
.html-editor-feld > span { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .3rem; }
.html-editor { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.html-editor-leiste { display: flex; flex-wrap: wrap; gap: .25rem; padding: .4rem; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.html-editor-leiste .btn.small { padding: .2rem .55rem; min-width: 2.2rem; }
.html-editor-leiste [data-befehl="bold"] { font-weight: 700; }
.html-editor-leiste [data-befehl="italic"] { font-style: italic; }
.html-editor-leiste [data-befehl="underline"] { text-decoration: underline; }
.html-editor-leiste [data-befehl="quelle"] { margin-left: auto; }
.html-editor-leiste [aria-pressed="true"] { background: var(--primary-soft); color: var(--primary-text, var(--primary)); }
.html-editor > textarea { display: none; width: 100%; min-height: 14rem; border: 0; border-radius: 0 0 var(--radius) var(--radius); font-family: ui-monospace, Consolas, monospace; font-size: .85rem; }
.html-editor.quelltext > textarea { display: block; }

/* Bearbeitungsfläche im Rahmen des Shops (assets/html-editor.js): eigener iframe mit dem hinterlegten Stylesheet */
.q7ed .html-editor-leiste { align-items: center; gap: .35rem; }
.q7ed .html-editor-leiste select.q7ed-block { width: auto; flex: 0 0 auto; height: 2rem; min-width: 11rem; padding: 0 1.6rem 0 .5rem; font-size: .85rem; }
.q7ed-gruppe-knoepfe { display: flex; align-items: center; gap: .15rem; padding: 0 .35rem; border-left: 1px solid var(--line); }
.q7ed-gruppe-knoepfe:first-of-type { border-left: 0; }
.q7ed-knopf { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 2rem; height: 2rem; padding: 0 .35rem;
  border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text); cursor: pointer; }
.q7ed-knopf:hover:not(:disabled) { background: var(--surface-3, rgba(125,140,170,.14)); }
.q7ed-knopf:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.q7ed-knopf:disabled { opacity: .45; cursor: default; }
.q7ed-knopf[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.q7ed-knopf-text { font-size: .8rem; font-weight: 500; }
.q7ed .html-editor-leiste .q7ed-ki { color: var(--primary-text, var(--primary)); }
.q7ed-umbruch { flex-basis: 100%; height: 0; }
.q7ed .html-editor-leiste .q7ed-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; margin-left: auto; }
.q7ed .html-editor-leiste .q7ed-breite { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.q7ed-rahmen { background: #fff; border-radius: 0 0 var(--radius) var(--radius); overflow: auto; }
.q7ed-frame { display: block; width: 100%; min-height: 14rem; border: 0; background: #fff; }
.q7ed.quelltext .q7ed-rahmen, .q7ed.quelltext .q7ed-pfad { display: none; }
.q7ed-pfad { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .35rem .5rem; border-top: 1px solid var(--line);
  background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); font-size: .78rem; }
.q7ed-pfad-text { color: var(--muted); }
.q7ed-pfad-trenner { color: var(--muted); }
.q7ed-pfad-teil { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: .1rem .4rem; font-size: .78rem; cursor: pointer; }
.q7ed-pfad-teil.aktuell { background: var(--primary-soft); color: var(--primary-text, var(--primary)); border-color: var(--primary-soft); }
.q7ed-cssfehler { margin: .3rem .6rem; }
.q7ed--voll { position: fixed; inset: 1rem; z-index: 60; display: flex; flex-direction: column; box-shadow: var(--shadow-lg, 0 1rem 3rem rgba(0,0,0,.3)); }
.q7ed--voll .q7ed-rahmen { flex: 1 1 auto; }
html.q7ed-voll-offen { overflow: hidden; }
/* Fenster des Editors (Bausteine, Klassen, KI) */
.q7ed-modal .modal.q7ed-modal-breit { max-width: 60rem; width: 95vw; }
.q7ed-bausteine { display: grid; grid-template-columns: minmax(14rem, 22rem) 1fr; gap: 1rem; }
.q7ed-bausteine-liste { max-height: 24rem; overflow-y: auto; }
.q7ed-gruppe { margin: .6rem 0 .25rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.q7ed-baustein { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius);
  padding: .4rem .6rem; margin-bottom: .3rem; cursor: pointer; }
.q7ed-baustein:hover, .q7ed-baustein:focus-visible { border-color: var(--primary); }
.q7ed-baustein-name { display: block; font-weight: 500; }
.q7ed-baustein-hinweis { display: block; font-size: .78rem; color: var(--muted); }
.q7ed-vorschau-frame { width: 100%; min-height: 18rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.q7ed-marken { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.q7ed-marke { border: 1px solid var(--primary-soft); background: var(--primary-soft); color: var(--primary-text, var(--primary));
  border-radius: 999px; padding: .1rem .5rem; font-size: .78rem; cursor: pointer; }
.q7ed-klassenliste { max-height: 18rem; overflow-y: auto; margin-top: .4rem; }
.q7ed-klassen { display: flex; flex-wrap: wrap; gap: .25rem; }
.q7ed-klasse { border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: .1rem .45rem; font-size: .78rem;
  font-family: ui-monospace, Consolas, monospace; cursor: pointer; }
.q7ed-klasse.an { background: var(--primary-soft); color: var(--primary-text, var(--primary)); border-color: var(--primary-soft); }
.q7ed-vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .6rem; }
.q7ed-vergleich-seite p { margin: 0 0 .2rem; }
@media (max-width: 820px) {
  .q7ed-bausteine, .q7ed-vergleich { grid-template-columns: 1fr; }
  .q7ed--voll { inset: .25rem; }
}

/* 2FA-Code als sechs Einzelfelder (app.js, input[data-code-felder]) – Stil Materio „two steps“ */
.code-original[hidden], .code-felder[hidden] { display: none; }
.code-felder { display: flex; justify-content: space-between; gap: .5rem; margin: .35rem 0 .1rem; }
.code-felder .code-ziffer { width: 100%; min-width: 0; max-width: 3.25rem; height: 3.25rem; padding: 0; text-align: center; font-size: 1.35rem; font-weight: 500;
  font-variant-numeric: tabular-nums; caret-color: var(--primary); }
.code-felder .code-ziffer.fehlt { border-color: var(--danger); }
.link-btn.code-wechsel, .link-btn.code-wechsel:hover { align-self: flex-start; margin-top: .3rem; padding: 0; min-height: 0; border: 0; background: none; font-weight: 400; }
@media (max-width: 360px) { .code-felder { gap: .3rem; } .code-felder .code-ziffer { height: 2.8rem; font-size: 1.15rem; } }

/* Belegübersicht im Artikel (Reiter Lager): Summenzeile */
table.grid tr.summe td { border-top: 2px solid var(--line); }

/* Reiter „Artikel“ der Adresse (mit Details): Artikelzeile fett, Belegzeilen eingerückt */
table.adress-artikel tr.gruppe td { font-weight: 600; background: var(--field-off); }
table.adress-artikel tr.detail td { font-size: .85rem; }
table.adress-artikel tr.detail td:nth-child(2) { padding-left: 1.6rem; }

/* Filterzeilen mit beschrifteten Feldern (Beschriftung auf der Rahmenlinie wie in den Formularen): Schalter und Knöpfe auf Höhe der Felder */
.filter:has(> label:not(.check) > span) { align-items: flex-end; }
.filter:has(> label:not(.check) > span) > label.check { min-height: 2.6rem; }
.filter:has(> label:not(.check) > span) > .btn, .filter:has(> label:not(.check) > span) > button { min-height: 2.6rem; }

/* Geteilter Knopf „Zur Liste | ⋯“ mit „Zuletzt geöffnet“ (Produkt, Kunde, Lieferant) */
.knopf-gruppe { position: relative; display: inline-flex; align-items: stretch; }
.knopf-gruppe > .dropdown { position: static; }   /* Menü an der linken Kante des ganzen Knopfs */
.knopf-gruppe > .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.knopf-gruppe > .dropdown > .btn.dropdown-toggle { height: 100%; padding: .45rem .55rem; margin-left: -1px; border: 1px solid var(--input); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); color: var(--text); }
.knopf-gruppe > .dropdown > .btn.dropdown-toggle:hover, .knopf-gruppe > .dropdown.open > .btn.dropdown-toggle { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-text, var(--primary)); }
.knopf-gruppe .dropdown-menu { left: 0; right: auto; width: max-content; min-width: min(20rem, calc(100vw - 2rem)); max-width: min(28rem, calc(100vw - 2rem)); }
.zuletzt-menue .zuletzt-text { display: flex; flex-direction: column; min-width: 0; }
.zuletzt-menue .zuletzt-text > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zuletzt-menue .zuletzt-nr { font-weight: 500; }

/* Abgelegte E-Mail (E-Mail-Ablage): Klartext mit Zeilenumbrüchen */
.mail-ablage-text { margin: 1rem 0 0; padding: 1rem; background: var(--field-off); border-radius: var(--radius); white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .9rem; color: var(--text); max-height: 70vh; overflow: auto; }
.mail-ablage-einrichtung { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
.mail-ablage-einrichtung > * { min-width: 0; }
.mail-ablage-einrichtung textarea { width: 100%; max-width: 36rem; }

/* Briefsymbol „Neue E-Mails“ (E-Mail-Ablage) in der Kopfleiste */
.mail-meldungen-btn { position: relative; overflow: visible; }   /* Zahl nicht abschneiden (Knöpfe haben sonst overflow: hidden) */
.mail-meldungen-btn .zaehler { position: absolute; top: -.2rem; right: -.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 50rem;
  background: var(--danger); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.1rem; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.mail-meldungen-btn .zaehler[hidden] { display: none; }
.mail-meldungen .mail-meldungen-menue { width: min(24rem, calc(100vw - 2rem)); padding: .4rem 0; }
.mail-meldungen-inhalt .dropdown-kopf { justify-content: space-between; }
.mail-meldungen-leer { padding: .6rem 1.2rem; margin: 0; }
.mail-meldungen-liste { list-style: none; margin: 0; padding: 0; max-height: min(26rem, 70vh); overflow-y: auto; }
.mail-meldungen-liste li { position: relative; border-top: 1px solid var(--line); }
.mail-meldungen-liste li.neu { background: var(--primary-soft); }
.dropdown-menu .mail-meldungen-liste li > a:first-child { display: flex; flex-direction: column; align-items: stretch; gap: .1rem; padding: .55rem 1.2rem .2rem; }
.mail-meldung-kopf { display: flex; align-items: baseline; gap: .35rem; min-width: 0; font-size: .85rem; }
.mail-meldung-kopf strong { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-meldung-zeit { margin-left: auto; font-size: .75rem; white-space: nowrap; }
.mail-meldung-betreff { font-size: .85rem; color: var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-menu .mail-meldungen-liste li > a.mail-meldung-adresse { display: inline-block; width: auto; padding: 0 1.2rem .5rem; color: var(--primary-text, var(--primary)); font-size: .78rem; }
/* dieselbe Liste als eigene Seite (direkter Aufruf von /mailablage/meldungen) */
.mail-meldungen-seite { padding: 0; overflow: hidden; }
.mail-meldungen-seite .dropdown-kopf { display: none; }
.mail-meldungen-seite .mail-meldungen-liste { max-height: none; }
.mail-meldungen-seite .mail-meldungen-liste li:first-child { border-top: 0; }
.mail-meldungen-seite .mail-meldungen-liste li > a:first-child { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 1.25rem .2rem; color: inherit; text-decoration: none; }
.mail-meldungen-seite .mail-meldungen-liste li > a:first-child:hover { background: var(--hover); }
.mail-meldungen-seite .mail-meldung-kopf, .mail-meldungen-seite .mail-meldung-betreff { font-size: .9rem; }
.mail-meldungen-seite .mail-meldung-adresse { display: inline-block; padding: 0 1.25rem .6rem; font-size: .8rem; }
.mail-meldungen-seite .mail-meldungen-leer { padding: 1.25rem; }
/* Verlauf oben rechts (Uhr-Symbol): zuletzt aufgerufene Seiten */
.seitenverlauf .seitenverlauf-menue { width: min(22rem, calc(100vw - 2rem)); padding: .4rem 0; }
.seitenverlauf-leer { padding: .6rem 1.2rem; margin: 0; }
.seitenverlauf-liste { list-style: none; margin: 0; padding: 0; max-height: min(26rem, 70vh); overflow-y: auto; }
.seitenverlauf-liste li { border-top: 1px solid var(--line); }
.dropdown-menu .seitenverlauf-liste a { display: flex; align-items: baseline; gap: .6rem; padding: .5rem 1.2rem; font-size: .85rem; }
.seitenverlauf-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seitenverlauf-zeit { margin-left: auto; font-size: .75rem; white-space: nowrap; }
@media (max-width: 600px) {
  .seitenverlauf { position: static; }
  .seitenverlauf .seitenverlauf-menue { left: .5rem; right: .5rem; width: auto; }
  .mail-meldungen { position: static; }   /* Menü an der Kopfleiste statt am Symbol ausrichten */
  .mail-meldungen .mail-meldungen-menue { left: .5rem; right: .5rem; width: auto; }
}

/* Knopfgruppe aus mehreren Knöpfen (z. B. „Artikelliste | mit Details“): aneinandergesetzt, nur außen gerundet */
.knopf-gruppe > .btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.knopf-gruppe > .btn:last-child { border-top-right-radius: var(--radius); border-bottom-right-radius: var(--radius); }
.knopf-gruppe > .btn.primary { position: relative; z-index: 1; }
/* Symbol-Teil einer Knopfgruppe (z. B. Drucken neben „Artikelliste“) – schmal wie der ⋮-Teil bei „Zur Liste“ */
.knopf-gruppe > .btn.knopf-symbol { padding-left: .55rem; padding-right: .55rem; }
.knopf-gruppe > .btn.knopf-symbol .ic { margin: 0; }

/* Kleine Summenkacheln in Reitern (Produkt → Belege, Adresse → Belege), wie die Kennzahlen im Kopf */
/* Summen-Kacheln der Belege (Adresse, Produkt): klein und rechtsbündig über der Liste */
.tiles.kompakt.artikel-belege-summen, .tiles.kompakt.adress-belege-summen { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin: 0 0 .8rem; }
.tiles.kompakt.artikel-belege-summen > .tile, .tiles.kompakt.adress-belege-summen > .tile { flex: 0 1 190px; min-width: 140px; }
@media (max-width: 600px) { .tiles.kompakt.artikel-belege-summen > .tile, .tiles.kompakt.adress-belege-summen > .tile { flex: 1 1 140px; } }
/* Auswertungen → Umsatzübersicht: Kopfkarte wie im Beleg (Kennzahlen, Menü „Weitere Funktionen“, Umschalter und Filter) */
.auswertung-profil .avatar .ic { font-size: 2rem; }
.auswertung-profil .actions { align-items: center; margin-bottom: 0; }
.auswertung-profil .auswertung-filter { margin: 0 0 0 auto; }
@media (max-width: 700px) { .auswertung-profil .auswertung-filter { margin-left: 0; width: 100%; } }
/* Listen (Belege, Projekte, Produkte, Adressen): Kopfkarte wie im Beleg – „Neuer Beleg“ oben rechts neben dem Menü ⋮, Filter in der Kartenleiste */
:is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .profil-knopf { margin-left: auto; }
:is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .avatar .ic { font-size: 2rem; }
:is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .actions { align-items: center; margin-bottom: 0; }
:is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .actions .filter { flex: 1 1 auto; margin: 0; }
:is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .actions .filter input[type=date] { width: 10rem; }
:is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .actions .filter select[name=art] { max-width: 15rem; }
@media (max-width: 900px) { :is(.belegliste-profil, .projekte-profil, .artikel-profil, .adressen-profil) .actions .filter { width: 100%; } }

/* Zeitstrahl der Ticketliste: Tagesleiste mit Stundenraster, Zeiten als Balken, rote Linie = jetzt */
.zeitstrahl { padding: .7rem 1rem .9rem; margin-bottom: 1.25rem; }
.zeitstrahl-kopf { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; }
.zeitstrahl-knoepfe { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.zeitstrahl-wer select { padding: .25rem .5rem; font-size: .85rem; }
.zeitstrahl-rahmen { overflow-x: auto; border: 1px solid var(--line); border-radius: 4px; }
.zeitstrahl-flaeche { --stunden: 12; --zeilen: 1; min-width: calc(var(--stunden) * 56px); }
.zeitstrahl-stunden { display: grid; grid-template-columns: repeat(var(--stunden), 1fr); border-bottom: 1px solid var(--line); background: var(--head); }
.zeitstrahl-stunden span { font-size: .72rem; color: var(--muted); padding: .2rem .3rem; border-left: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.zeitstrahl-stunden span:first-child { border-left: 0; }
.zeitstrahl-balken { position: relative; height: calc(var(--zeilen) * 1.75rem + .5rem);
  background: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / var(--stunden) - 1px), var(--line) calc(100% / var(--stunden) - 1px), var(--line) calc(100% / var(--stunden))); }
.zeitstrahl-eintrag { --zeile: 0; position: absolute; top: calc(var(--zeile) * 1.75rem + .25rem); height: 1.5rem; box-sizing: border-box; overflow: hidden; display: flex; align-items: center;
  padding: 0 .35rem; border-radius: 3px; background: var(--primary-soft); border: 1px solid var(--primary-line); color: var(--text); font-size: .75rem; white-space: nowrap; }
.zeitstrahl-eintrag span { overflow: hidden; text-overflow: ellipsis; }
.zeitstrahl-eintrag:hover { text-decoration: none; background: var(--primary); border-color: var(--primary); color: var(--on-primary); z-index: 1; }
.zeitstrahl-eintrag.laeuft { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-text); }
.zeitstrahl-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--danger); z-index: 2; }
@media print { .zeitstrahl { display: none; } }

/* Versandweg einrichten: Microsoft 365 in einem Schritt (Code für die Anmeldung des Administrators) */

/* Fensteransicht: Seite läuft als Fenster in einem Rahmen – Seitenleiste, Benutzermenü und Fußzeile stehen in der Hülle */
.im-fenster .side, .im-fenster .nav-backdrop, .im-fenster .navtoggle, .im-fenster .fusszeile,
.im-fenster .top-right > .dropdown:last-child, .im-fenster .top-right [data-theme-umschalten], .im-fenster .top-right .update-hinweis { display: none !important; }
.im-fenster .layout { min-height: 100%; }
.im-fenster .top { margin: 0 .75rem; }
.im-fenster main { padding-bottom: 1rem; }
@media (max-width: 767.98px) { .nur-breit { display: none !important; } }   /* z. B. Menüeintrag „Fensteransicht“: nicht auf dem Handy */
/* Benutzermenü: Hinweis auf die Datenbank als eine kurze Zeile (Einzelheiten im Tooltip); das Menü passt sich der Bildschirmhöhe an
   und lässt sich rollen – „Abmelden“ bleibt auch auf kleinen Bildschirmen erreichbar */
.dropdown-menu .dropdown-kopf.db-hinweis { gap: .4rem; padding: .15rem 1.2rem .35rem; font-size: .72rem; cursor: help; }
.dropdown-menu .dropdown-kopf.db-hinweis span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .top-right > .dropdown > .dropdown-menu { max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain; }
/* Adresse, Reiter Belege: Filter (Belegart, Status) links und Kennzahlen rechts auf einer Höhe; bei wenig Platz untereinander */
.beleg-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 .8rem; }
.beleg-kopfzeile > .filter { margin: 0; }
.beleg-kopfzeile > .tiles.kompakt.adress-belege-summen,
.beleg-kopfzeile > .tiles.kompakt.artikel-belege-summen { margin: 0 0 0 auto; flex: none; flex-wrap: nowrap; }   /* Kacheln bleiben nebeneinander */
.beleg-kopfzeile > .tiles.kompakt.adress-belege-summen > .tile,
.beleg-kopfzeile > .tiles.kompakt.artikel-belege-summen > .tile { flex: 0 0 auto; min-width: 8.5rem; }
@media (max-width: 900px) { .beleg-kopfzeile > .tiles.kompakt.artikel-belege-summen { flex: 1 1 100%; margin-left: 0; } }
@media (max-width: 600px) { .beleg-kopfzeile > .tiles.kompakt.adress-belege-summen,
  .beleg-kopfzeile > .tiles.kompakt.artikel-belege-summen { flex: 1 1 100%; margin-left: 0; }
  .beleg-kopfzeile > .tiles.kompakt.adress-belege-summen > .tile,
  .beleg-kopfzeile > .tiles.kompakt.artikel-belege-summen > .tile { flex: 1 1 0; min-width: 0; } }

/* SEPA-Lastschriftmandat (Druck aus dem Browser) */
.sepa-mandat { max-width: 48rem; }
.sepa-mandat-text { border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; margin: 1rem 0; }
.sepa-mandat-felder { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.sepa-mandat-felder th { width: 16rem; text-align: left; font-weight: 400; color: var(--muted); font-size: .875rem; padding: .7rem .5rem .2rem 0; vertical-align: bottom; }
.sepa-mandat-felder td { border-bottom: 1px solid var(--body); padding: .7rem 0 .2rem; vertical-align: bottom; }
.sepa-mandat-unterschrift { display: flex; gap: 2.5rem; margin-top: 3.5rem; }
.sepa-mandat-unterschrift div { flex: 1; border-top: 1px solid var(--body); padding-top: .3rem; font-size: .8125rem; color: var(--muted); }
@media print { .sepa-mandat { max-width: none; border: 0 !important; } .head { display: none; } }

/* Arbeitszeit je Mitarbeiter: Belegarten-Auswahl in der Filterleiste */
/* Arbeitszeit je Mitarbeiter: Filter im Stil der Formularfelder (Beschriftung auf der Rahmenlinie, Auswahl mit Knopf); Belegarten als Mehrfachauswahl */
.arbeitszeit-profil .actions .az-filter { flex: 1 1 auto; margin: 0; align-items: flex-end; }
.az-filter > label { flex: 0 1 auto; }
.az-filter > label > input[type=date] { width: 9.75rem; }
.az-filter > .btn { min-height: 2.6rem; }
.az-arten { position: relative; display: flex; flex-direction: column; padding-top: .55rem; flex: 0 1 13rem; min-width: 9rem; }
/* Aufgaben: „Zuständig“ als Mehrfachauswahl im Formular (Spalte): keine Grundbreite als Höhe, Liste mit Bildlauf */
.termin-zustaendig { flex: none; min-width: 0; }
.termin-zustaendig .dropdown-menu { max-height: 18rem; overflow-y: auto; }
.az-arten > span:first-child { position: absolute; top: 0; left: .6rem; z-index: 2; padding: 0 .3rem; font-size: .75rem; line-height: 1.1rem; font-weight: 500; color: var(--muted);
  white-space: nowrap; background: linear-gradient(to bottom, transparent 0 calc(.55rem - 3px), var(--field) calc(.55rem - 3px)); border-radius: .2rem; pointer-events: none; }
.az-arten:focus-within > span:first-child { color: var(--primary-text, var(--primary)); }
.az-arten .az-arten-wert { display: block; flex: 1 1 auto; min-width: 0; text-align: left; font: inherit; font-size: .9375rem; color: var(--text); padding: .7rem .8rem .6rem; line-height: 1.25;
  border: 1px solid var(--input); border-radius: var(--radius); background: var(--field); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.az-arten-wert:hover { border-color: var(--input-hover); }
.az-arten .dropdown-menu { padding: .4rem 0; }
.az-arten .dropdown-menu > label.check { display: flex; align-items: center; gap: .5rem; padding: .4rem 1rem; margin: 0; white-space: nowrap; cursor: pointer; }
.az-arten .dropdown-menu > label.check:hover { background: var(--hover); }
/* Ordnerauswahl wie im Explorer (Beleg → „PDF speichern unter“) */
.ordnerwahl-leiste { display: flex; align-items: flex-end; gap: .5rem; flex-wrap: wrap; }
.ordnerwahl-leiste > label { flex: 1 1 18rem; min-width: 0; }
.ordnerwahl-leiste > .feldknopf { min-height: 2.6rem; }
.ordnerwahl-laufwerke { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.ordnerwahl-liste { list-style: none; margin: .6rem 0; padding: .3rem 0; max-height: 45vh; overflow-y: auto; border: 1px solid var(--input); border-radius: var(--radius); background: var(--field); }
.ordnerwahl-liste > li > button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .4rem .9rem; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.ordnerwahl-liste > li > button:hover, .ordnerwahl-liste > li > button:focus-visible { background: var(--hover); }
.ordnerwahl-liste > li > button .ic { color: var(--warning, #e0a800); font-size: 1.15rem; }
.ordnerwahl-liste > li.muted { padding: .4rem .9rem; }
.ordnerwahl { text-align: left; }
.ordnerwahl-liste > li > button { justify-content: flex-start; }
.ordnerwahl > label.check { flex-direction: row; align-items: center; justify-content: flex-start; }
/* Beleg: „Direkt drucken ▾“ – Knopf im Stil der übrigen Knöpfe, Liste der Drucker */
.direktdruck-wahl > .dropdown-toggle { border: 1px solid var(--input); border-radius: var(--radius); background: var(--card); padding: .45rem 1rem; gap: .35rem; color: var(--text); }
.direktdruck-wahl > .dropdown-toggle:hover { background: var(--primary-soft); border-color: var(--primary-line); color: var(--primary-text, var(--primary)); }
.direktdruck-wahl .dropdown-menu { left: 0; right: auto; min-width: 19rem; }
.direktdruck-wahl .dropdown-menu li > button { white-space: nowrap; }
/* Drucker einrichten: Felder je Anbindung, Anleitung, Kopf des Druckprotokolls */
[data-nur-art][hidden] { display: none !important; }
.druck-anleitung { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.druck-anleitung > summary { cursor: pointer; font-weight: 600; color: var(--primary-text, var(--primary)); }
.druck-anleitung h3 { margin: .9rem 0 .3rem; font-size: .95rem; }
.druck-anleitung ol { margin: .2rem 0 .4rem 1.2rem; padding: 0; line-height: 1.55; }
.card-kopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.card-kopf > .card-titel { margin-bottom: 0; }
.card-kopf + .grid, .card-kopf + table { margin-top: .8rem; }
/* Druckerseite: Speichern rechts; Dialog „Direkt drucken“: Drucker und Exemplare nebeneinander, Duplikat als Schalterzeile darunter */
.drucker-fuss { justify-content: flex-end; }
.direktdruck-felder { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; gap: .9rem .7rem; align-items: end; }
.direktdruck-felder > label.schalter { grid-column: 1 / -1; margin: .1rem 0 0; flex-direction: row; align-items: center; text-align: left; }
@media (max-width: 520px) { .direktdruck-felder { grid-template-columns: 1fr; } }
/* EGIS: Preis und Verfügbarkeit */
.egis-artikel { margin: 1.1rem 0 .1rem; font-size: 1rem; }
/* EGIS: Suche, Kalkulationswahl, Übernahme */
.egis-suche .egis-begriff { flex: 1 1 18rem; }
.egis-suche .egis-begriff > input { width: 100%; }
.egis-kalkwahl { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; margin: .2rem 0 .8rem; padding: .7rem .8rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.egis-kalkwahl form.inline { display: inline-flex; align-items: flex-end; gap: .4rem; }
.egis-hinzu { display: inline-flex; align-items: center; gap: .3rem; }
.egis-menge { width: 4.2rem; padding: .3rem .45rem; }

/* EGIS-Kalkulation: schmale Zahlenfelder, Produkt breit */
.egis-kalkpos input.egis-zahl { width: 6.2rem; min-width: 0; text-align: right; padding: .35rem .5rem; }
.egis-kalkpos input.egis-zahl.fest { font-weight: 600; border-color: var(--primary-line); }
.egis-kalkpos td:nth-child(2) { min-width: 16rem; }
.egis-kalkpos td { vertical-align: middle; }
.egis-kalkwahl.filter { margin: .2rem 0 .8rem; }
/* Warengruppenbaum links neben den Treffern */
.egis-browser { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 899px) { .egis-browser { grid-template-columns: minmax(0, 1fr); } }   /* die Höhe des Baums steht weiter unten */
.egis-baum { position: sticky; top: 4.5rem; max-height: min(28rem, calc(100vh - 6rem)); overflow-y: auto; overscroll-behavior: contain; padding: .4rem .3rem;
  border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; }
.egis-baum ul { list-style: none; margin: 0; padding: 0 0 0 .8rem; }
.egis-baum > ul { padding-left: 0; }
.egis-baum a { display: block; padding: .18rem .4rem; border-radius: var(--radius); color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.egis-baum a:hover, .egis-baum a:focus-visible { background: var(--surface-2); }
.egis-baum a.aktiv { background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-weight: 600; }
.egis-baum summary { display: flex; align-items: center; cursor: pointer; list-style: none; }
.egis-baum summary::-webkit-details-marker { display: none; }
.egis-baum summary::before { content: "\203A"; flex: none; width: .9rem; color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform .15s; }
.egis-baum details[open] > summary::before { transform: rotate(90deg); }
.egis-baum summary > a { flex: 1 1 auto; min-width: 0; }
.egis-baum li > a { margin-left: .9rem; }
.egis-wg-wahl { margin: 0 0 .4rem; }
.egis-herstellerfilter { margin: 0 0 .5rem; }
/* Preis und Verfügbarkeit als Dialog: breit genug für alle Spalten samt „+ Kalkulation“ */
/* Übersicht: Vorschau einer Aufgabe */
.aufgabe-titel { margin: 0 0 .6rem; font-size: 1.05rem; }
.aufgabe-bemerkung { margin: .4rem 0 0; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); white-space: normal; }
.aufgabe-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin: .9rem 0 0; }
.aufgabe-knoepfe form.inline { display: inline-flex; }
/* Beleg: Dialog „Bestellung erstellen“ */
.modal.bestellung-modal { width: min(1200px, 100%); max-width: 100%; }
.bestellung-inhalt { max-height: 70vh; }
.bestellung-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.bestellung-pos select { width: 100%; max-width: 19rem; min-width: 12rem; }
.bestellung-pos td:nth-child(3) small { display: block; max-width: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestellung-pos td, .bestellung-pos th { padding-left: .45rem; padding-right: .45rem; }
.bestellung-pos input.bestellung-menge { width: 5.5rem; text-align: right; padding: .35rem .5rem; }
.bestellung-pos tr:has([data-bestellung-aktiv]:not(:checked)) td:not(:first-child) { opacity: .55; }
.bestellung-titel { margin: 1rem 0 .4rem; font-size: 1rem; }
.bestellung-ziele { display: grid; gap: .6rem; }
.bestellung-ziel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 26rem); gap: .8rem; align-items: center; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.bestellung-ziel label { margin: 0; }
.bestellung-ziel[hidden] { display: none; }
@media (max-width: 699px) { .bestellung-ziel { grid-template-columns: minmax(0, 1fr); } }
.bestellung-fuss { margin: .9rem 0 0; text-align: right; }
/* Belegliste: Schnellansicht der Positionen (Auge neben der Nummer) */
.schnell-knopf { width: 1.7rem; height: 1.7rem; font-size: 1rem; color: var(--muted); vertical-align: middle; margin-left: .15rem; }
td.nowrap > .schnell-knopf:first-child { margin: 0 .25rem 0 -.3rem; }   /* Auge vor der Belegnummer (Belegliste, Übersicht) */
.schnell-knopf:hover, .schnell-knopf:focus-visible { color: var(--primary-text, var(--primary)); }
.modal.schnell-modal { width: min(1000px, 100%); max-width: 100%; }
.schnell-inhalt { max-height: 65vh; }
.schnell-kopf { margin: 0 0 .5rem; }
.schnell-pos .schnell-text td { color: var(--muted); font-style: italic; }
.schnell-fuss { margin: .7rem 0 0; text-align: right; }
.modal.egis-preise-modal { width: min(1320px, calc(100vw - 2rem)); max-width: 100%; min-width: 0; }   /* nach .modal-breit (46rem) */
/* Liefertermin: Hinweis des Distributors (z. B. „Wareneingang 5 Stück am …“) in eigener Zeile, damit „+ Kalkulation“ hineinpasst */
.egis-termin { min-width: 9rem; }
/* Dialog: Hinweis und Produktzeile bleiben stehen, nur die Liste der Distributoren scrollt (Kopfzeile fest) */
.egis-preise-modal .modal-inhalt { max-height: none; overflow: visible; }
.egis-preise-modal .tabelle-scroll { max-height: calc(100vh - 19rem); overflow: auto; }
.egis-preise-modal .tabelle-scroll th { position: sticky; top: 0; z-index: 1; background: var(--card); }
.egis-termin small { line-height: 1.25; }
/* Produktsuche und Preisabfrage nebeneinander über dem Warengruppenbaum */
.egis-kopfkarten { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 1rem; align-items: stretch; }
.egis-kopfkarten > .card { margin: 0; }
.egis-kopfkarten .egis-suche, .egis-kopfkarten .rowform { margin-bottom: 0; }
.egis-kopfkarten #preise .rowform > label { flex: 1 1 12rem; }
@media (max-width: 999px) { .egis-kopfkarten { grid-template-columns: minmax(0, 1fr); } }
.egis-browser-karte { margin-top: 1rem; }
/* Karte nicht höher als nötig (Wunsch Anwender 26.10.2026): Baum scrollt in sich, ohne Treffer noch niedriger */
.egis-browser:not(:has(.egis-treffer)) .egis-baum { max-height: 18rem; }
/* Auf der eigenen EGIS-Seite steht die Karte allein: dort den Baum den freien Platz nutzen lassen (Wunsch Anwender 30.10.2026) */
.egis-browser-karte.gross .egis-browser:not(:has(.egis-treffer)) .egis-baum { max-height: min(34rem, calc(100vh - 15rem)); }
.egis-browser-karte.gross .egis-browser:not(:has(.egis-treffer)) .egis-ergebnis { min-height: 12rem; }
/* Trefferliste genauso hoch wie der Warengruppenbaum (gleiche Grenze wie .egis-baum oben): beide scrollen in sich, Suchfeld,
   Trefferzahl und Blättern bleiben stehen. Nur im Desktop-Layout – schmal stehen Baum und Treffer untereinander, dort scrollt
   die Seite selbst (Wunsch Anwender 30.10.2026) */
@media (min-width: 900px) {
  .egis-browser-karte.gross .tabelle-scroll:has(.egis-treffer) { max-height: min(28rem, calc(100vh - 6rem)); overflow-y: auto; overscroll-behavior: contain; }
  .egis-browser-karte.gross .tabelle-scroll:has(.egis-treffer) tr:first-child th { position: sticky; top: 0; z-index: 1; background: var(--head); }
}
/* Schmaler Bildschirm: Baum und Treffer stehen untereinander, der Baum bleibt niedrig, damit die Treffer nicht weit unten
   anfangen. Steht bewusst am Ende – die Regeln oben sind spezifischer bzw. stehen später und haben diese Höhe bis 2.4.2
   überschrieben, weshalb der Baum auch schmal 28rem hoch war. */
@media (max-width: 899px) {
  .egis-browser .egis-baum,
  .egis-browser:not(:has(.egis-treffer)) .egis-baum,
  .egis-browser-karte.gross .egis-browser:not(:has(.egis-treffer)) .egis-baum { max-height: 16rem; }
}
.egis-vorspann .egis-kalkwahl { margin: 0; border: 0; padding: 0; }
.egis-preise-modal .egis-artikel:first-of-type { margin-top: .2rem; }
.egis-wg-wahl a { margin-left: .35rem; color: inherit; text-decoration: none; }
.egis-eigene .rowform > .btn { flex: none; white-space: nowrap; }   /* Knöpfe nicht zusammendrücken (Symbol und Text in einer Zeile) */
.egis-lief { color: var(--muted); }
.egis-lief strong { color: var(--text); font-weight: 500; }
/* Modul GAEB: Angaben der eingelesenen Datei, Titelzeilen der Vorschau */
.gaeb-angaben { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .25rem 1rem; margin: 0 0 1rem; }
.gaeb-angaben dt { color: var(--muted); }
.gaeb-angaben dd { margin: 0; }
.gaeb-inhalt .gaeb-titel td { background: var(--surface-2); }
/* EGIS: „+ Kalkulation“ ohne Neuladen – kurz als übernommen markiert; Produktliste lädt im Hintergrund */
.btn.egis-uebernommen, .btn.primary.egis-uebernommen { background: var(--success); border-color: var(--success); color: #fff; }
.btn.egis-uebernommen .ic-plus::before { content: "\eb81"; }   /* Haken wie .ic-ok */
.egis-browser-karte[aria-busy="true"] .egis-ergebnis { opacity: .55; transition: opacity .15s; }
.egis-browser-karte[aria-busy="true"] .egis-ergebnis::before { content: "Wird bei EGIS geladen …"; display: block; margin: 0 0 .5rem; padding: .35rem .6rem; border-radius: var(--radius);
  background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-weight: 600; }
/* EGIS: Kopfkarte wie die Belegliste, eine Zeile – „Kalkulation öffnen“ und „Neue Kalkulation“ rechts neben dem Titel */
.egis-profil .profil-text { flex: 0 1 auto; }
.egis-profil .egis-kalkwahl { margin: 0 0 0 auto; padding: 0; border: 0; background: none; box-shadow: none; }
.egis-profil .egis-kalkwahl select { min-width: 16rem; }
.egis-profil .egis-neukalk:first-of-type { margin-left: auto; }
.egis-profil .egis-kalkwahl + .egis-neukalk { margin-left: 0; }
.egis-profil .egis-angebot-knopf { margin-left: auto; }
.egis-profil .egis-kalkwahl ~ .egis-angebot-knopf, .egis-profil .egis-angebot-knopf ~ .egis-neukalk { margin-left: 0; }
/* EGIS: KI-Suchhilfe – korrigierter Suchbegriff */
.egis-ki-vorschlag { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: 0 0 .5rem; padding: .4rem .7rem; border-radius: var(--radius);
  background: var(--primary-soft); color: var(--text); font-size: .875rem; }
.egis-ki-vorschlag .ic { color: var(--primary-text, var(--primary)); }
/* Zusatzmodule als Kauf: Preis, „Modul kaufen“ bzw. Stand (kostenfrei, gekauft, freigeschaltet) unter der Beschreibung */
.schalter-liste.module > label.schalter .modul-stand { grid-column: 1 / -1; grid-row: 4; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .3rem; }
.schalter-liste.module .modul-preis { font-weight: 600; color: var(--text); font-size: .875rem; }
.schalter-liste.module > label.schalter:has(input:disabled) { opacity: 1; }
/* Kundenportal (Modul WebKundenportal): eigenes Layout ohne Menü der Mitarbeiter, Branding mit Firmenlogo */
body.portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.portal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .8rem max(1rem, env(safe-area-inset-left));
  background: var(--card); border-bottom: 1px solid var(--line);
  /* Kopf bleibt beim Blättern stehen (Wunsch Anwender 29.10.2026) */
  position: sticky; top: 0; z-index: 1085; padding-top: max(.8rem, env(safe-area-inset-top)); box-shadow: var(--shadow-sm); }
.portal-marke { display: flex; align-items: center; gap: .8rem; color: var(--text); text-decoration: none; min-width: 0; }
.portal-logo { max-height: 3rem; max-width: 12rem; object-fit: contain; }
.portal-name { display: flex; flex-direction: column; line-height: 1.2; }
.portal-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.portal-nav > a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: var(--radius); color: var(--text); text-decoration: none; }
.portal-nav > a:hover { background: var(--hover); }
.portal-nav > a.aktiv { background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-weight: 500; }
.portal-nav form.inline { margin-left: .5rem; }
.portal-inhalt { flex: 1 0 auto; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.2rem 1rem 2rem; box-sizing: border-box; }
.portal-box { max-width: 30rem; margin: 2rem auto; }
.portal-daten th { width: 40%; font-weight: 500; color: var(--muted); }
.portal-fuss { text-align: center; padding: 1rem; }
/* schmal: Navigation in einer Zeile (waagerecht blättern), damit der feststehende Kopf niedrig bleibt */
@media (max-width: 700px) { .portal-kopf { gap: .5rem; padding-top: max(.5rem, env(safe-area-inset-top)); padding-bottom: .5rem; } .portal-logo { max-height: 2.2rem; }
  .portal-nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .portal-nav::-webkit-scrollbar { display: none; }
  .portal-nav > a { padding: .4rem .55rem; white-space: nowrap; flex: none; } .portal-nav form.inline { flex: none; } }
.portal-seiten { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.portal-seiten-links { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.portal-logo-vorschau { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.portal-logo-vorschau img { max-height: 3.5rem; max-width: 14rem; object-fit: contain; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem; }

/* Einstellungen → Nummern: je Nummernart nächste Nummer und Vergabe untereinander */
.nummern-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem; }

/* Seriennummern einer Belegposition: Auswahl im Dialog (Schalter in Spalten, mit Bildlauf), Anzeige in der Positionsliste */
.sn-auswahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .35rem 1rem; max-height: 50vh; overflow-y: auto; padding: .25rem 0; }
.sn-auswahl label.check small { margin-left: .25rem; }
[data-sn-zaehler].fehler { color: var(--danger-text, var(--danger)); font-weight: 600; }
.sn-liste { color: var(--muted); }
.lagerbuchung .nur-zugang { display: none; }
.lagerbuchung:has(input[name=art][value=ein]:checked) .nur-zugang { display: flex; }

/* E-Mail-Ablage: Ansicht wie im E-Mail-Programm (HTML im abgeschotteten Rahmen), umschaltbar auf Text */
.mail-ansicht-leiste { align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.segment { display: inline-flex; }
.segment > .btn { border-radius: 0; }
.segment > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.segment > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; margin-left: -1px; }
.segment > .btn.aktiv { background: var(--primary-soft); color: var(--primary-text, var(--primary)); font-weight: 500; }
.mail-rahmen { display: block; width: 100%; max-width: none; height: 70vh; min-height: 20rem; margin-top: .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; resize: vertical; }
.mail-anhaenge a { display: inline-flex; align-items: center; gap: .3rem; }

/* Shop-Kategorien (Einrichtung Shopware/WooCommerce/Shopify): Baum Hauptwarengruppe › Warengruppe, Mehrfachauswahl mit Suche */
.shop-kategorien .shop-kategorien-hwg td { background: var(--surface-2); }
.shop-kategorien .shop-kategorien-wg { padding-left: 1.6rem; }
.shop-kategorie-wahl { flex: 1 1 auto; min-width: 16rem; max-width: 34rem; padding-top: 0; }
.shop-kategorie-wahl .dropdown-menu { max-height: 22rem; overflow-y: auto; }
.dropdown-menu .mehrfach-suche { display: block; width: calc(100% - 1.6rem); margin: .2rem .8rem .5rem; }
.dropdown-menu > label.check[hidden] { display: none; }
.shop-artikel-kategorien { margin: 1rem 0 0; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.shop-artikel-kategorien legend { padding: 0 .3rem; font-weight: 500; }
.shop-kurz { margin-top: .8rem; }
.mail-ticket { align-items: center; margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--line); }
/* Die Zeile hat nur ein Feld – ohne Begrenzung zöge es .rowform-typisch über die ganze Breite (Meldung Anwender 01.11.2026) */
.mail-ticket > label:not(.check) { flex: 0 1 20rem; }
@media (max-width: 700px) { .mail-ticket > label:not(.check) { flex: 1 1 100%; } }
/* Ticket: Erfassungszeilen (Zeiten, Fahrten, Material) als abgesetzter Kasten unter der Tabelle, Felder mit festen bzw. mitwachsenden Breiten */
.ticket-erfassen { gap: .6rem; padding: .8rem .9rem; margin: .6rem 0 1.6rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.ticket-erfassen > label.datum { flex: 0 0 10rem; }
.ticket-erfassen > label.zahl { flex: 0 0 8rem; }
.ticket-erfassen > label.breit { flex: 1.5 1 14rem; }
.ticket-erfassen > label.text { flex: 2 1 14rem; }
.ticket-erfassen > label.check { display: flex; align-items: center; align-self: flex-end; height: 2.6rem; white-space: nowrap; }
.ticket-erfassen > .umbruch { flex: 0 0 100%; height: 0; }
.ticket-erfassen > .btn, .ticket-erfassen > button { min-height: 2.6rem; }
.ticket-erfassen > .feld-hinweis { align-self: center; flex: 1 1 14rem; }
#panel-zeiten > h2 { margin-top: .4rem; }
#panel-zeiten > table.grid + h2, #panel-zeiten > .grid + h2 { margin-top: 1.6rem; }
#panel-afs > .formgrid + h2 { margin-top: 1.6rem; }   /* „AFS-Zusatzfelder“ nicht an „Produkt im Web“ kleben */
/* Digitale Unterschrift: weiße Fläche (auch im Dunkelmodus – wie Papier), Zeichnen ohne Seitenblättern auf Touchgeräten */
.unterschrift-feld { position: relative; }
.unterschrift-feld canvas { display: block; width: 100%; height: 12rem; background: #fff; border: 1px dashed var(--muted); border-radius: var(--radius); touch-action: none; cursor: crosshair; }
.unterschrift-feld .unterschrift-linie { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 2.4rem; border-top: 1px solid #c8c8d4; pointer-events: none; }
.unterschrift-feld .unterschrift-knoepfe { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .4rem; }
.unterschrift-bild { display: block; max-width: 18rem; max-height: 6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .3rem; }
.modal.unterschrift-dialog { width: min(44rem, calc(100vw - 2rem)); }
/* Ticket → Zeiten: Ausgeführte Arbeiten (Feld über die volle Breite, Knopf darunter rechts) */
.ticket-arbeiten { display: flex; flex-direction: column; gap: .5rem; }
.ticket-arbeiten > .btn { align-self: flex-end; }
/* Einstellungen: Karte „Meine Unterschrift“ (eigenes Formular) mit Abstand unter der Speicherleiste */
form.darstellung-form + .card#unterschrift { margin-top: 1.2rem; }
/* Angebotsverhandlung (Kundenportal und Reiter „Verhandlung“ im Beleg): Verlauf als abgesetzte Beiträge, Kunde und Firma unterschiedlich eingefärbt */
.verhandlung-eintrag { padding: .7rem .9rem; margin: 0 0 .7rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); border-left: 3px solid var(--line); }
.verhandlung-eintrag.von-kunde { border-left-color: var(--primary); }
.verhandlung-eintrag.von-firma { border-left-color: var(--muted); }
.verhandlung-eintrag > p { margin: .3rem 0; }
.verhandlung-eintrag > table.grid { margin: .4rem 0; }
.verhandlung-kopf { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; margin: 0 0 .2rem; }
.verhandlung-posliste { list-style: none; margin: .3rem 0 .6rem; padding: 0; }
.verhandlung-posliste > li { list-style: none; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.verhandlung-posliste > li::marker { content: none; }
.verhandlung-posliste > li:last-child { border-bottom: 0; }
.verhandlung-posliste .verhandlung-preis { display: block; margin-left: 1.6rem; white-space: nowrap; }

/* Angebotsverhandlung in der Kopfleiste: Symbol mit Zahl offener Rückmeldungen, Aufklappmenü wie bei den E-Mails */
.verh-meldungen-btn { position: relative; overflow: visible; }   /* Zahl nicht abschneiden (Knöpfe haben sonst overflow: hidden) */
.verh-meldungen-btn .zaehler { position: absolute; top: -.2rem; right: -.25rem; min-width: 1.1rem; height: 1.1rem; padding: 0 .3rem; border-radius: 50rem;
  background: var(--danger); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.1rem; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.verh-meldungen-btn .zaehler[hidden] { display: none; }
.verh-meldungen.hat-neu .verh-meldungen-btn .ic { color: var(--danger); }
.verh-meldungen .verh-meldungen-menue { width: min(26rem, calc(100vw - 2rem)); padding: .4rem 0; }
.verh-meldungen-leer { padding: .6rem 1.2rem; margin: 0; }
.verh-meldungen-liste { list-style: none; margin: 0; padding: 0; max-height: min(26rem, 70vh); overflow-y: auto; }
.verh-meldungen-liste li { border-top: 1px solid var(--line); }
.verh-meldungen-liste li:first-child { border-top: 0; }
.verh-meldungen-liste a { display: block; padding: .5rem 1.2rem; text-decoration: none; color: inherit; }
.verh-meldungen-liste a:hover, .verh-meldungen-liste a:focus-visible { background: var(--surface-2); }
.verh-meldung-kopf { display: flex; flex-wrap: wrap; gap: .35rem; align-items: baseline; }
.verh-meldung-zeit { margin-left: auto; font-size: .75rem; white-space: nowrap; }
.verh-meldung-text, .verh-meldung-nachricht { display: block; font-size: .8rem; }

/* Q7Fakt-API: Rechte der Stammdaten-Schnittstelle je Quelle (drei Spalten: lesen, anlegen, ändern) */
.servicehub-rechte { margin: .8rem 0 0; }
.servicehub-rechte > legend { font-size: .9rem; color: var(--muted); padding: 0 .3rem; }
.servicehub-rechte .schalterzeile { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)); gap: .3rem .9rem; margin-top: .4rem; }
@media (max-width: 700px) { .servicehub-rechte .schalterzeile { grid-template-columns: 1fr; } }

/* Q7Fakt-API: Seite „Schnittstelle“ (/servicehub/dokumentation) */
.api-doku h3 { margin: 1.2rem 0 .4rem; font-size: 1rem; }
.api-doku > p:first-of-type { margin-top: 0; }
.api-doku .api-inhalt { margin: .4rem 0 0; padding-left: 1.3rem; line-height: 1.9; }
.api-doku .api-endpunkt { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .35rem 0; }
.api-doku .api-endpunkt code { font-size: .9rem; }
.api-doku .api-methode { min-width: 3.6rem; text-align: center; font-weight: 600; letter-spacing: .02em; }
.api-doku pre.befehl { font-size: .82rem; line-height: 1.55; white-space: pre; }
.api-doku .api-felder td:first-child { white-space: nowrap; }
.api-doku .api-oben { margin: 1rem 0 0; text-align: right; font-size: .8rem; }
.api-doku .api-oben a { color: var(--muted); text-decoration: none; }
.api-doku .api-oben a:hover { color: var(--primary); text-decoration: underline; }
:target.api-doku { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Telegram-Einrichtung: Bot-Karte und Bild für den Bot nebeneinander (Wunsch Anwender 01.11.2026) */
.telegram-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: 1rem; align-items: start; }
.telegram-spalten > .card { margin: 0; max-width: none; }
.telegram-bild img { display: block; width: 100%; max-width: 16rem; height: auto; margin: 0 auto; border-radius: var(--radius, .6rem); }
.telegram-bild .btn { width: 100%; justify-content: center; }
@media (max-width: 62rem) { .telegram-spalten { grid-template-columns: minmax(0, 1fr); } }

/* Datenbank-Editor (Update → Datenbank-Editor) */
.sql-form textarea { font: .92rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; resize: vertical; min-height: 7rem; }
.sql-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.sql-zeile > label:not(.check) { flex: 0 0 11rem; }
.sql-zeile .btn { margin-left: auto; }
.sql-ergebnis { font-size: .88rem; }
.sql-ergebnis td { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; max-width: 32rem; }
.sql-ergebnis th .tag { font-size: .7rem; }
/* Zwei Spalten: links der Tabellenbaum (1/3), rechts Eingabe und Ergebnis (2/3) – wie der Warengruppenbaum bei EGIS */
.sql-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.sql-rechts { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.sql-baum-karte { position: sticky; top: 4.5rem; display: flex; flex-direction: column; max-height: calc(100vh - 6rem); }
.sql-baum { flex: 1 1 auto; overflow: hidden auto; overscroll-behavior: contain; margin: .2rem -.3rem -.3rem; padding: 0 .3rem .3rem; }
.sql-baum ul { list-style: none; margin: 0; padding: 0 0 0 .8rem; }
.sql-baum > ul { padding-left: 0; }
.sql-baum summary { display: flex; align-items: center; gap: .3rem; cursor: pointer; list-style: none; padding: .18rem .4rem; border-radius: var(--radius); }
.sql-baum summary::-webkit-details-marker { display: none; }
.sql-baum summary::before { content: "\203A"; flex: none; width: .9rem; color: var(--muted); font-size: 1.1rem; line-height: 1; transition: transform .15s; }
.sql-baum details[open] > summary::before { transform: rotate(90deg); }
.sql-baum summary:hover { background: var(--surface-2); }
.sql-baum-gruppe { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; }
.sql-baum li > .sql-tab { margin-left: .9rem; }
.sql-baum details .sql-tab { margin-left: 0; }
.sql-tab { display: block; width: 100%; text-align: left; padding: .18rem .4rem; border: 0; border-radius: var(--radius); background: none; color: inherit;
  font: .85rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sql-tab:hover, .sql-tab:focus-visible { background: var(--surface-2); }
@media (max-width: 62rem) {
  .sql-layout { grid-template-columns: minmax(0, 1fr); }
  .sql-baum-karte { position: static; max-height: none; }
  .sql-baum { max-height: 18rem; }
}
@media (max-width: 48rem) { .sql-zeile .btn { margin-left: 0; width: 100%; justify-content: center; } }

/* ------------------------------------------------------------------ Rechte-Übersicht „Wer darf was?“ (benutzer/rechte) */
.rechteblatt-kopf { margin-bottom: 1.25rem; }
.rechteblatt-kopf h2 { margin: 0 0 .25rem; }
.rechteblatt-kopf p { margin: 0 0 .35rem; }
.rechteblatt h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; }
/* Breiten auf Kopf und Zelle gleichermaßen, sonst stehen Überschrift und Wert nicht untereinander */
.rechteblatt-merkmale th { width: 16rem; text-align: left; }
.rechteblatt-tabelle th:nth-child(2), .rechteblatt-tabelle td:nth-child(2) { width: 6rem; }
.rechteblatt-tabelle th:nth-child(3), .rechteblatt-tabelle td:nth-child(3) { width: 16rem; }
/* Nicht wirksame Rechte zurücknehmen, damit die vergebenen beim Überfliegen auffallen */
.rechteblatt-tabelle tr.recht-nein td { color: var(--muted); }
.rechteblatt-fuss { margin-top: 1.5rem; }
@media print {
  .rechteblatt { break-inside: auto; }
  .rechteblatt-tabelle tr { break-inside: avoid; }
  .rechteblatt h3 { break-after: avoid; }
  .rechteblatt-tabelle tr.recht-nein td { color: #666; }
}

/* ------------------------------------------------------------------ Dialoge mit Liste: Höhe bleibt konstant
   (Vorgabe Anwender 01.11.2026). Bisher wuchs und schrumpfte ein Suchfenster mit der Zahl der Treffer, weil
   .modal-inhalt nur eine Obergrenze hatte (max-height) und die Höhe sonst vom Inhalt kam: 100 Treffer = hoch,
   1 Treffer = flach, kein Treffer = winzig. Jetzt gibt der Dialog die Höhe vor – nach dem Vorbild von
   .belegbaum-fenster, das es schon so macht –, und nur die Liste scrollt. Kopf, Suchfeld und Fußzeile bleiben
   sichtbar. Die Höhe folgt weiterhin dem Bildschirm (dvh: ohne/mit eingeblendeter Browserleiste), aber nie dem
   Inhalt. Bestätigungs- und Hinweisdialoge bleiben unberührt – sie richten sich weiter nach ihrem Text.
   Je Dialogart ist die Höhe über --modal-hoehe anpassbar. */
.modal.such-dialog, .modal.modal-liste {
  --modal-hoehe: 44rem;
  display: flex;
  flex-direction: column;
  height: min(var(--modal-hoehe), calc(100vh - 2rem));
  height: min(var(--modal-hoehe), calc(100dvh - 2rem));
}
/* Nur dieser Bereich wächst und scrollt; min-height: 0 ist nötig, weil ein Flex-Kind sonst nicht unter seinen
   Inhalt schrumpft und stattdessen der ganze Dialog höher würde. */
.such-dialog > .modal-inhalt, .modal-liste > .modal-inhalt {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;   /* am Listenende scrollt nicht die Seite dahinter weiter */
}
.such-dialog > :not(.modal-inhalt), .modal-liste > :not(.modal-inhalt) { flex: none; }
/* Statusmeldung („Keine Treffer“) sitzt im scrollenden Bereich und darf ihn nicht aufspannen */
.such-inhalt [data-such-status] { position: sticky; left: 0; }

/* Schnellansicht und Bestellvorschlag: eigene Höhe, gleiche Mechanik */
.modal.schnell-modal { --modal-hoehe: 38rem; }
.modal.bestellung-modal { --modal-hoehe: 40rem; }
/* EGIS-Preise: hier scrollt nicht der ganze Inhalt, sondern die Distributorentabelle mit ihrer festen Kopfzeile –
   der Hinweis und die Produktzeile darüber bleiben stehen. */
.modal.egis-preise-modal { --modal-hoehe: 46rem; }
.egis-preise-modal > .modal-inhalt { display: flex; flex-direction: column; overflow: visible; }
.egis-preise-modal .tabelle-scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
/* Aufgabe der Übersicht: ein Formular, keine Liste – es behält seine inhaltsabhängige Höhe. Damit es beim
   Nachladen nicht aus dem Ladehinweis heraus aufspringt, bekommt der Bereich nur eine Mindesthöhe. */
.aufgabe-inhalt { min-height: 14rem; }

/* Modul „AFS-Support“: Zusatzfelder (25 im Produkt, 27 im Beleg). Sie stehen in einem `.formgrid` und sehen damit
   aus wie jedes andere Feld – Beschriftung klein auf der oberen Rahmenlinie; das Raster stapelt auf schmalen
   Bildschirmen von selbst. In der Einrichtung steht neben jedem Feld der Schalter „anzeigen“. */
.afs-felder { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.afs-feld { display: flex; align-items: center; gap: .75rem; }
.afs-feld > label:first-child { flex: 1 1 auto; margin: 0; }
.afs-feld > label.check { flex: 0 0 auto; white-space: nowrap; }