/* 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-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-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-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"; }
.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)); }
.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; }
.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 */
.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; }
.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; }
.warnstufe-text { font-size: .8rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; }
.warnstufe-text.stufe-2 { color: #fff; background: #dc2626; } .warnstufe-text.stufe-1 { color: #1f2937; background: #fbbf24; }
.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; }

/* ------------------------------------------------------------------ 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; }
/* 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; }
.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, .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, .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, .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 .5rem, var(--notch) .5rem); border-radius: .2rem;
  pointer-events: none; transition: color .15s; overflow: hidden; text-overflow: ellipsis; }   /* zu lange Beschriftung: „…“ statt über den Rand */
:is(.formgrid, .stack, .modal-feld, .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; }
:is(.formgrid, .stack, .modal-feld, .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, .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, .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, .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, .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, .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, .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, .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; }
/* 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: Beschriftung neben der Auswahl */
.termine-filter label { flex-direction: row; align-items: center; gap: .4rem; }
.termine-filter label > span { color: var(--muted); }
.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; }
.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); }
.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: bis zu sechs Kacheln in einer Reihe */
.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; }

/* ------------------------------------------------------------------ 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 */
.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; }
.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; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .4rem .8rem; }
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 5.6rem; }
.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; }
.bilder img { width: 160px; height: 120px; object-fit: contain; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.bilder figcaption { font-size: .8rem; display: flex; justify-content: space-between; gap: .3rem; margin-top: .25rem; }
.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-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; }

/* ------------------------------------------------------------------ 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; align-items: center; gap: .5rem; margin: .25rem 0 .5rem; }
.intervallform select { flex: 1 1 auto; min-width: 0; width: auto; }
.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; }
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(280px, 1fr)); gap: .8rem; }
/* 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; }
@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; } }
/* 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; }
.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; }
.nachrichten { display: grid; grid-template-columns: minmax(15rem, 20rem) 1fr; gap: 1rem; align-items: start; }
.nachrichten .card { padding: 0; overflow: hidden; }
.nachrichten-liste { max-height: calc(100vh - 12rem); overflow-y: auto; }
.nachrichten-liste .partner { display: flex; gap: .6rem; align-items: center; padding: .65rem .9rem; border-bottom: 1px solid var(--line); color: var(--body); text-decoration: none; }
.nachrichten-liste .partner:hover { background: var(--row-hover); text-decoration: none; }
.nachrichten-liste .partner.aktiv { background: var(--primary-soft); }
.nachrichten-liste .partner.ungelesen strong { color: var(--text); font-weight: 700; }
.partner-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.partner-text small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.partner-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; flex: 0 0 auto; }
.badge.rot { background: var(--danger); color: #fff; }
.nachrichten-liste > p { padding: .9rem; margin: 0; }
.nachrichten-verlauf { display: flex; flex-direction: column; min-height: 24rem; max-height: calc(100vh - 12rem); }
.nachrichten-verlauf .leer { padding: 1.2rem; margin: 0; }
.verlauf-kopf { display: flex; gap: .6rem; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.verlauf { flex: 1 1 auto; overflow-y: auto; padding: .9rem; display: flex; flex-direction: column; gap: .5rem; background: var(--surface-2); }
.blase { max-width: min(36rem, 80%); padding: .5rem .75rem .35rem; border-radius: .8rem; background: var(--card); border: 1px solid var(--line); overflow-wrap: anywhere; }
.blase.ich { align-self: flex-end; background: var(--primary-soft); border-color: var(--primary-line); border-bottom-right-radius: .2rem; }
.blase.du { align-self: flex-start; border-bottom-left-radius: .2rem; }
.blase-text { color: var(--text); line-height: 1.45; }
.blase-fuss { display: flex; gap: .4rem; justify-content: flex-end; align-items: center; color: var(--muted); font-size: .72rem; margin-top: .15rem; }
.blase-fuss .link-btn { color: var(--muted); padding: 0; }
.blase-fuss .link-btn:hover { color: var(--danger); }
.nachricht-form { display: flex; gap: .5rem; align-items: flex-end; padding: .7rem .9rem; border-top: 1px solid var(--line); }
.nachricht-form textarea { flex: 1 1 auto; resize: vertical; min-height: 2.6rem; max-height: 12rem; }
.nur-mobil { display: none; }
@media (max-width: 767.98px) {
  .nachrichten { grid-template-columns: 1fr; }
  .nachrichten.mit-verlauf .nachrichten-liste { display: none; }
  .nachrichten:not(.mit-verlauf) .nachrichten-verlauf { display: none; }
  .nachrichten-verlauf { max-height: calc(100vh - 9rem); }
  .nur-mobil { display: inline-grid; }
  .blase { max-width: 88%; }
}
.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-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: max-content 1fr; gap: .35rem 1rem; margin: 0 0 .8rem; }
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; }
/* 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, .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; }
/* <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; }
.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; }   /* 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; }
.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-eingabe-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; }

/* 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-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; }