/* GIEDORF app styles. No inline styles: CSP style-src 'self'. Colours only via tokens. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Values 1:1 from the mockups (docs/mockups *.dc.html, inline styles of the elements); only class names and
   colour tokens (same values) differ. No global box-sizing: as in the mockups only the rules that say so use
   border-box. */
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
}
a { color: inherit; }

/* mockup root: display flex, background, colour, font (settings: position relative) */
.shell { display: flex; height: 100vh; position: relative; }

/* ---------- Main navigation (mockup Navigation.dc.html): open 256 px, collapsed 72 px ---------- */
.sidebar {
  width: 256px;
  height: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--side);
  border-right: 1px solid var(--line);
}
.sidebar.ready { transition: width .22s cubic-bezier(.2, .7, .2, 1); will-change: width; }
.sidebar.collapsed { width: 72px; }
.sidebar.settings { padding: 22px 16px 20px 16px; }

/* logo: a link to the dashboard (the mockup shows it without link) */
.logo { position: relative; display: block; flex-shrink: 0; height: 34px; margin: 0 0 26px 0; text-decoration: none; cursor: default; }
.sidebar.settings .logo { margin: 0 0 16px 0; }
.logo img { position: absolute; left: 4px; transition: opacity .12s; }
.logo-full { top: 4px; height: 26px; width: auto; max-width: 216px; object-fit: contain; object-position: left center; white-space: nowrap; opacity: 1; }
.logo-mark { top: 1px; width: 32px; height: 32px; object-fit: contain; opacity: 0; }
.logo-dark { display: none; }
.logo-full.logo-dark { height: 25px; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .logo-light { display: none; }
  [data-theme="system"] .logo-dark { display: block; }
}

.nav-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 20px 12px 6px 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-scroll > .nav-heading:first-child { padding: 0 12px 6px 12px; }
.sidebar.settings .nav-heading, .sidebar.settings .nav-scroll > .nav-heading:first-child { padding: 16px 12px 6px 12px; }

/* Entries scroll inside the sidebar when they do not fit (not in the mockup: there all entries fit). The box has
   no look of its own; the scrollbar is invisible and only shows while scrolling (mockup [data-ganz]/[data-rollt],
   app.js sets data-scrolling). It sits in the right padding of the sidebar, so the entries keep the mockup width. */
.nav-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin-right: -16px;
  padding-right: 6px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
.nav-scroll[data-scrolling] { scrollbar-color: var(--scroll-thumb) transparent; }
.nav-scroll::-webkit-scrollbar { width: 6px; }
.nav-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 9px; }
.nav-scroll[data-scrolling]::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }

.nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  position: relative;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text);
  transition: background-color .12s;
}
.nav-link svg { flex-shrink: 0; }
.nav-link[aria-current="page"] { font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.nav-link:not([aria-current="page"]):hover { background: var(--hover); }
.nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* settings menu (mockup: buttons, width 100 %, border-box, 36 px; back link 38 px + 2 px) */
.sidebar.settings .nav-scroll .nav-link { height: 36px; width: 100%; box-sizing: border-box; text-align: left; }
.sidebar.settings .nav-scroll .nav-link.nav-back { height: 38px; margin-bottom: 2px; width: auto; box-sizing: content-box; }

.nav-label { white-space: nowrap; transition: opacity .12s; opacity: 1; }
/* count next to an entry (mockup Navigation: Bestellungen); collapsed: an 8 px dot on the icon */
.nav-grow { flex-grow: 1; }
.nav-badge { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--accent-ink); }
.nav-badge:empty { display: none; }
.sidebar.collapsed .nav-badge { position: absolute; top: 8px; left: 28px; width: 8px; height: 8px; padding: 0; border-radius: 999px; font-size: 0; background: var(--accent); }

/* bell (mockup Navigation.dc.html glockeStil, glockeBadge, section of the list; Benachrichtigungen-Glocke/-Liste/-Leer):
   a nav entry as a button, active while the list is open; the count white on blue, collapsed a circle on the icon; the
   list at most as high as the window leaves above its bottom gap (122px) and a top gap (12px) */
.bell-button { width: 100%; box-sizing: border-box; border: 0; font-family: inherit; text-align: left; cursor: pointer; background: transparent; }
.bell-button[aria-expanded="true"], .bell-button[aria-expanded="true"]:hover { font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.bell-badge { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-text); }
.sidebar.collapsed .bell-badge { position: absolute; top: 4px; left: 24px; min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; border-radius: 999px; font-size: 11px; line-height: 18px; font-weight: 800; text-align: center; background: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 2px var(--side); }
.bell-panel { position: fixed; left: 268px; bottom: 122px; z-index: 30; width: 420px; max-height: min(620px, calc(100vh - 134px)); box-sizing: border-box; border-radius: 20px; background: var(--card); color: var(--text); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; overflow: hidden; font-weight: 400; }
.sidebar.collapsed .bell-panel { left: 84px; }
.bell-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 58px; box-sizing: border-box; padding: 0 14px 0 20px; border-bottom: 1px solid var(--line); }
.bell-head h2 { margin: 0; font-size: 17px; font-weight: 800; flex-grow: 1; white-space: nowrap; }
.bell-head form { display: contents; }
.bell-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; padding-bottom: 6px; }
.bell-group { padding: 14px 20px 4px 20px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.bell-form { display: block; margin: 0; }
.bell-row { display: flex; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 20px 12px 20px; margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; font: inherit; text-align: left; text-decoration: none; color: var(--text); cursor: pointer; }
.bell-row.last { border-bottom: 0; }
.bell-row:hover { background: var(--hover); }
.bell-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.bell-dot { width: 8px; height: 8px; flex-shrink: 0; margin-top: 6px; border-radius: 999px; background: transparent; }
.bell-row.unread .bell-dot { background: var(--accent); }
.bell-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.bell-line { display: flex; align-items: baseline; gap: 10px; }
.bell-title { font-size: 14px; font-weight: 600; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-row.unread .bell-title { font-weight: 800; }
.bell-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.bell-object { font-size: 13px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bell-object.plain { color: var(--muted); }
.bell-empty { padding: 28px 20px; font-size: 14px; color: var(--muted); text-align: center; }

.nav-person {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 14px 3px 0 3px;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.person-text { display: flex; flex-direction: column; }
.person-name { font-size: 14px; font-weight: 700; }
.person-role { font-size: 12px; color: var(--muted); }

.sidebar.collapsed .nav-label, .sidebar.collapsed .logo-full { opacity: 0; }
.sidebar.collapsed .logo-mark { opacity: 1; }
.sidebar.collapsed .nav-heading {
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 70%;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar * { transition: none !important; }
}

/* ---------- Main area ---------- */
/* lists (mockup Kunden/Lieferanten main) */
.content {
  flex-grow: 1;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  padding: 28px 28px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* dashboard (mockup Dashboard main: gap 18) */
.content.dashboard { gap: 18px; }
/* detail pages (mockup Kunde-Detail main: no min-height; the page is taller than the window and scrolls) */
.content.detail { min-height: auto; overflow-y: auto; }
/* settings (mockup Einstellungen main: padding 28/32, overflow hidden, the page box inside has the gap);
   scrolls vertically when stacked cards (Mein Konto, Anbindungen) exceed the window – pages with a table
   of their own fit the window and keep its scroll area */
.content.settings { min-height: auto; padding: 28px 32px; gap: normal; overflow-x: hidden; overflow-y: auto; }

.grow { flex-grow: 1; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Lists (mockup Kunden.dc.html / Lieferanten.dc.html) ---------- */
.list-head { display: flex; align-items: center; gap: 16px; }
.list-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.list-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 360px;
  height: 44px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
}
.list-search input {
  flex-grow: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.list-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.state-form { display: none; }
/* HTMX swap target without a box: toolbar and table are children of main */
.resource-body { display: contents; }
.toolbar { display: flex; align-items: center; gap: 8px; }
.segments { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.segment {
  height: 36px;
  white-space: nowrap;
  padding: 0 12px 0 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  text-decoration: none;
}
.segment[aria-current="page"] { font-weight: 800; background: var(--card); color: var(--text); box-shadow: var(--shadow-segment); }
.segment-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.segment[aria-current="page"] .segment-count { color: var(--accent-ink); }
/* links and summaries in place of the mockup buttons get the button defaults (border-box, centred text) */
.segment, .toolbar-button, .th-button, .menu-button, .reset-filters, .page-button { box-sizing: border-box; text-align: center; }
.menu-item { box-sizing: border-box; }
/* "Spalten" (and "Ansichten", same look) */
.toolbar-menu { display: contents; }
.views-menu-wrap { position: relative; z-index: 5; flex-shrink: 0; }
.toolbar-menu > summary, .views-menu-wrap > summary { list-style: none; }
.toolbar-menu > summary::-webkit-details-marker, .views-menu-wrap > summary::-webkit-details-marker { display: none; }
.toolbar-button {
  position: relative;
  z-index: 5;
  height: 36px;
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.segment:focus-visible, .toolbar-button:focus-visible, .th-button:focus-visible, .menu-item:focus-visible,
.menu-button:focus-visible, .table-row:focus-visible, .page-button:focus-visible, .reset-filters:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* the Spalten panel: mockup absolute in the card at top 6 / right 14. The menu box takes no room
   (display: contents), so the panel is placed in the window (.shell): main padding 28 + head 44 + gap 20 +
   toolbar 44 + gap 20 + 6 = 162 from the top, main padding 28 + 14 = 42 from the right. */
.columns-menu {
  position: absolute;
  top: 162px;
  right: 42px;
  z-index: 6;
  width: 240px;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
}
.menu-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  padding: 4px 6px 8px 6px;
  border-bottom: 1px solid var(--line);
}
.menu-column { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.menu-column input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }

/* The table card: header row, scrolling rows, footer */
.table-card {
  position: relative;
  flex-grow: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.table-head {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: var(--cols);
  gap: 12px;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.th { position: relative; display: flex; min-width: 0; justify-content: flex-start; }
.th.num:not(.key) { justify-content: flex-end; }
.th > summary { list-style: none; }
.th > summary::-webkit-details-marker { display: none; }
.th-button {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
}
.th-button.active { color: var(--accent-ink); }
.th-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-arrow { flex-shrink: 0; }
.th-on, .th-tr { flex-shrink: 0; }
.th-tr { display: none; }
.th-button:hover .th-tr, .th-button:focus-visible .th-tr { display: block; }
/* moving columns (mockup tabelle.py CSS_ZIEHEN, marke): the header is grabbed; a 2px mark in the middle of the
   column gap shows where it lands (before the column, or after the last one) */
.th[data-zieh], .th[data-zieh] > .th-button { cursor: grab; }
.th[data-zieh]:active, .th[data-zieh]:active > .th-button { cursor: grabbing !important; }
.th.drop-before::before, .th.drop-after::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
}
.th.drop-before::before { left: -7px; }
.th.drop-after::before { right: -7px; }
.table-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; }
.table-row {
  text-decoration: none;
  display: grid;
  grid-template-columns: var(--cols);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  box-sizing: border-box;
  padding: 8px 18px;
  font-size: 14px;
  line-height: 19px;
  border-bottom: 1px solid var(--line);
}
.table-row .num:not(.key) { text-align: right; }
.cell-key { font-weight: 700; color: var(--muted); }
.cell-stack { display: flex; flex-direction: column; min-width: 0; }
.cell-strong { font-weight: 700; }
.cell-sub-cut { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cell-tel { white-space: nowrap; color: var(--text); }
.cell-sub { font-size: 12px; color: var(--muted); white-space: nowrap; }
.cell-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cell-plain { white-space: nowrap; }
.table-row .muted { color: var(--muted); }
.cell-chip { display: inline-block; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; }
.table-empty { padding: 28px 18px; font-size: 14px; color: var(--muted); }

/* column widths: mockup `T.grid`, one custom property per visible column (gd_ui::table::Table::grid) */
.cols-1 { --cols: var(--c1); }
.cols-2 { --cols: var(--c1) var(--c2); }
.cols-3 { --cols: var(--c1) var(--c2) var(--c3); }
.cols-4 { --cols: var(--c1) var(--c2) var(--c3) var(--c4); }
.cols-5 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5); }
.cols-6 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6); }
.cols-7 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7); }
.cols-8 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8); }
.cols-9 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9); }
.cols-10 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10); }
.cols-11 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10) var(--c11); }
.cols-12 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10) var(--c11) var(--c12); }
.cols-13 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10) var(--c11) var(--c12) var(--c13); }
.cols-14 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10) var(--c11) var(--c12) var(--c13) var(--c14); }
.cols-15 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10) var(--c11) var(--c12) var(--c13) var(--c14) var(--c15); }
.cols-16 { --cols: var(--c1) var(--c2) var(--c3) var(--c4) var(--c5) var(--c6) var(--c7) var(--c8) var(--c9) var(--c10) var(--c11) var(--c12) var(--c13) var(--c14) var(--c15) var(--c16); }
.c1-fr { --c1: minmax(0, 1fr); } .c1-fr16 { --c1: minmax(0, 1.6fr); } .c1-64 { --c1: 64px; } .c1-84 { --c1: 84px; } .c1-88 { --c1: 88px; } .c1-96 { --c1: 96px; } .c1-100 { --c1: 100px; } .c1-110 { --c1: 110px; } .c1-120 { --c1: 120px; } .c1-121 { --c1: 121px; } .c1-124 { --c1: 124px; } .c1-130 { --c1: 130px; } .c1-140 { --c1: 140px; } .c1-150 { --c1: 150px; }
.c2-fr { --c2: minmax(0, 1fr); } .c2-fr16 { --c2: minmax(0, 1.6fr); } .c2-64 { --c2: 64px; } .c2-84 { --c2: 84px; } .c2-88 { --c2: 88px; } .c2-96 { --c2: 96px; } .c2-100 { --c2: 100px; } .c2-110 { --c2: 110px; } .c2-120 { --c2: 120px; } .c2-121 { --c2: 121px; } .c2-124 { --c2: 124px; } .c2-130 { --c2: 130px; } .c2-140 { --c2: 140px; } .c2-150 { --c2: 150px; }
.c3-fr { --c3: minmax(0, 1fr); } .c3-fr16 { --c3: minmax(0, 1.6fr); } .c3-64 { --c3: 64px; } .c3-84 { --c3: 84px; } .c3-88 { --c3: 88px; } .c3-96 { --c3: 96px; } .c3-100 { --c3: 100px; } .c3-110 { --c3: 110px; } .c3-120 { --c3: 120px; } .c3-121 { --c3: 121px; } .c3-124 { --c3: 124px; } .c3-130 { --c3: 130px; } .c3-140 { --c3: 140px; } .c3-150 { --c3: 150px; }
.c4-fr { --c4: minmax(0, 1fr); } .c4-fr16 { --c4: minmax(0, 1.6fr); } .c4-64 { --c4: 64px; } .c4-84 { --c4: 84px; } .c4-88 { --c4: 88px; } .c4-96 { --c4: 96px; } .c4-100 { --c4: 100px; } .c4-110 { --c4: 110px; } .c4-120 { --c4: 120px; } .c4-121 { --c4: 121px; } .c4-124 { --c4: 124px; } .c4-130 { --c4: 130px; } .c4-140 { --c4: 140px; } .c4-150 { --c4: 150px; }
.c5-fr { --c5: minmax(0, 1fr); } .c5-fr16 { --c5: minmax(0, 1.6fr); } .c5-64 { --c5: 64px; } .c5-84 { --c5: 84px; } .c5-88 { --c5: 88px; } .c5-96 { --c5: 96px; } .c5-100 { --c5: 100px; } .c5-110 { --c5: 110px; } .c5-120 { --c5: 120px; } .c5-121 { --c5: 121px; } .c5-124 { --c5: 124px; } .c5-130 { --c5: 130px; } .c5-140 { --c5: 140px; } .c5-150 { --c5: 150px; }
.c6-fr { --c6: minmax(0, 1fr); } .c6-fr16 { --c6: minmax(0, 1.6fr); } .c6-64 { --c6: 64px; } .c6-84 { --c6: 84px; } .c6-88 { --c6: 88px; } .c6-96 { --c6: 96px; } .c6-100 { --c6: 100px; } .c6-110 { --c6: 110px; } .c6-120 { --c6: 120px; } .c6-121 { --c6: 121px; } .c6-124 { --c6: 124px; } .c6-130 { --c6: 130px; } .c6-140 { --c6: 140px; } .c6-150 { --c6: 150px; }
.c7-fr { --c7: minmax(0, 1fr); } .c7-fr16 { --c7: minmax(0, 1.6fr); } .c7-64 { --c7: 64px; } .c7-84 { --c7: 84px; } .c7-88 { --c7: 88px; } .c7-96 { --c7: 96px; } .c7-100 { --c7: 100px; } .c7-110 { --c7: 110px; } .c7-120 { --c7: 120px; } .c7-121 { --c7: 121px; } .c7-124 { --c7: 124px; } .c7-130 { --c7: 130px; } .c7-140 { --c7: 140px; } .c7-150 { --c7: 150px; }
.c8-fr { --c8: minmax(0, 1fr); } .c8-fr16 { --c8: minmax(0, 1.6fr); } .c8-64 { --c8: 64px; } .c8-84 { --c8: 84px; } .c8-88 { --c8: 88px; } .c8-96 { --c8: 96px; } .c8-100 { --c8: 100px; } .c8-110 { --c8: 110px; } .c8-120 { --c8: 120px; } .c8-121 { --c8: 121px; } .c8-124 { --c8: 124px; } .c8-130 { --c8: 130px; } .c8-140 { --c8: 140px; } .c8-150 { --c8: 150px; }
.c9-fr { --c9: minmax(0, 1fr); } .c9-fr16 { --c9: minmax(0, 1.6fr); } .c9-64 { --c9: 64px; } .c9-84 { --c9: 84px; } .c9-88 { --c9: 88px; } .c9-96 { --c9: 96px; } .c9-100 { --c9: 100px; } .c9-110 { --c9: 110px; } .c9-120 { --c9: 120px; } .c9-121 { --c9: 121px; } .c9-124 { --c9: 124px; } .c9-130 { --c9: 130px; } .c9-140 { --c9: 140px; } .c9-150 { --c9: 150px; }
.c10-fr { --c10: minmax(0, 1fr); } .c10-fr16 { --c10: minmax(0, 1.6fr); } .c10-64 { --c10: 64px; } .c10-84 { --c10: 84px; } .c10-88 { --c10: 88px; } .c10-96 { --c10: 96px; } .c10-100 { --c10: 100px; } .c10-110 { --c10: 110px; } .c10-120 { --c10: 120px; } .c10-121 { --c10: 121px; } .c10-124 { --c10: 124px; } .c10-130 { --c10: 130px; } .c10-140 { --c10: 140px; } .c10-150 { --c10: 150px; }
.c11-fr { --c11: minmax(0, 1fr); } .c11-fr16 { --c11: minmax(0, 1.6fr); } .c11-64 { --c11: 64px; } .c11-84 { --c11: 84px; } .c11-88 { --c11: 88px; } .c11-96 { --c11: 96px; } .c11-100 { --c11: 100px; } .c11-110 { --c11: 110px; } .c11-120 { --c11: 120px; } .c11-121 { --c11: 121px; } .c11-124 { --c11: 124px; } .c11-130 { --c11: 130px; } .c11-140 { --c11: 140px; } .c11-150 { --c11: 150px; }
.c12-fr { --c12: minmax(0, 1fr); } .c12-fr16 { --c12: minmax(0, 1.6fr); } .c12-64 { --c12: 64px; } .c12-84 { --c12: 84px; } .c12-88 { --c12: 88px; } .c12-96 { --c12: 96px; } .c12-100 { --c12: 100px; } .c12-110 { --c12: 110px; } .c12-120 { --c12: 120px; } .c12-121 { --c12: 121px; } .c12-124 { --c12: 124px; } .c12-130 { --c12: 130px; } .c12-140 { --c12: 140px; } .c12-150 { --c12: 150px; }
.c13-fr { --c13: minmax(0, 1fr); } .c13-fr16 { --c13: minmax(0, 1.6fr); } .c13-64 { --c13: 64px; } .c13-84 { --c13: 84px; } .c13-88 { --c13: 88px; } .c13-96 { --c13: 96px; } .c13-100 { --c13: 100px; } .c13-110 { --c13: 110px; } .c13-120 { --c13: 120px; } .c13-121 { --c13: 121px; } .c13-124 { --c13: 124px; } .c13-130 { --c13: 130px; } .c13-140 { --c13: 140px; } .c13-150 { --c13: 150px; }
.c14-fr { --c14: minmax(0, 1fr); } .c14-fr16 { --c14: minmax(0, 1.6fr); } .c14-64 { --c14: 64px; } .c14-84 { --c14: 84px; } .c14-88 { --c14: 88px; } .c14-96 { --c14: 96px; } .c14-100 { --c14: 100px; } .c14-110 { --c14: 110px; } .c14-120 { --c14: 120px; } .c14-121 { --c14: 121px; } .c14-124 { --c14: 124px; } .c14-130 { --c14: 130px; } .c14-140 { --c14: 140px; } .c14-150 { --c14: 150px; }
.c15-fr { --c15: minmax(0, 1fr); } .c15-fr16 { --c15: minmax(0, 1.6fr); } .c15-64 { --c15: 64px; } .c15-84 { --c15: 84px; } .c15-88 { --c15: 88px; } .c15-96 { --c15: 96px; } .c15-100 { --c15: 100px; } .c15-110 { --c15: 110px; } .c15-120 { --c15: 120px; } .c15-121 { --c15: 121px; } .c15-124 { --c15: 124px; } .c15-130 { --c15: 130px; } .c15-140 { --c15: 140px; } .c15-150 { --c15: 150px; }
.c16-fr { --c16: minmax(0, 1fr); } .c16-fr16 { --c16: minmax(0, 1.6fr); } .c16-64 { --c16: 64px; } .c16-84 { --c16: 84px; } .c16-88 { --c16: 88px; } .c16-96 { --c16: 96px; } .c16-100 { --c16: 100px; } .c16-110 { --c16: 110px; } .c16-120 { --c16: 120px; } .c16-121 { --c16: 121px; } .c16-124 { --c16: 124px; } .c16-130 { --c16: 130px; } .c16-140 { --c16: 140px; } .c16-150 { --c16: 150px; }

/* Column menu (mockup: dialog under the header cell) */
.popover {
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 6;
  width: 260px;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text);
  cursor: default;
}
.popover.right { left: auto; right: 0; }
.menu-list { display: flex; flex-direction: column; gap: 2px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  font-weight: 500;
  background: transparent;
  color: var(--text);
  text-decoration: none;
}
.menu-item[aria-current="true"] { font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); }
.menu-arrow { width: 16px; text-align: center; }
.menu-sep { height: 1px; background: var(--line); margin: 8px 0; }
.menu-filter { display: flex; flex-direction: column; gap: 6px; }
.menu-buttons { display: flex; gap: 6px; }
.menu-buttons.wrap { flex-wrap: wrap; }
.menu-button {
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  border: 0;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.menu-button.accent { color: var(--accent-ink); }
/* "Nach links" / "Nach rechts" at the edge (mockup: disabled, muted ink) */
.menu-button:disabled { color: var(--muted); }
.menu-choices { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; }
.menu-choice { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 4px; font-size: 14px; font-weight: 500; cursor: pointer; }
.menu-choice[hidden] { display: none; }
.menu-choice input { width: 17px; height: 17px; flex-shrink: 0; margin: 0; accent-color: var(--accent); }
.menu-choice-label { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.menu-input {
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  min-width: 0;
  width: 100%;
}
.menu-input:focus-visible { outline: none; border-color: var(--accent); }
.menu-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu-range.date { margin-top: 8px; }
.menu-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
/* Ansichten (not in the mockup): rows of the column menu style */
.view-row { display: flex; align-items: center; gap: 2px; }
.view-row form { margin: 0; }
.view-load { flex-grow: 1; min-width: 0; }
.view-load .menu-item { width: 100%; }
.menu-item.icon { width: 36px; justify-content: center; padding: 0; color: var(--muted); }
.menu-item:hover { background: var(--hover); }
.menu-item[aria-current="true"]:hover { background: var(--accent-soft); }
.menu-save { display: flex; flex-direction: column; gap: 6px; margin: 0; }

/* Footer of the table */
.table-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  height: 60px;
  padding: 0 18px;
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.foot-text { color: var(--muted); white-space: nowrap; }
.reset-filters {
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.page-button {
  width: 36px;
  height: 36px;
  padding: 1px 6px;
  font-size: 13.3333px;
  text-decoration: none;
  border-radius: 10px;
  border: 0;
  background: var(--field);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.page-button.disabled { color: var(--muted); }
/* the page field is a GET form of its own; it takes no box */
.page-jump { display: contents; }
.page-text { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.page-input {
  width: 52px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.page-size { display: flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--muted); }
.page-select {
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
}
.page-input:focus-visible, .page-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- Login (outside the app layout; mockup Anmeldung*.dc.html) ---------- */
.login-page { min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-main { flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.login-card {
  width: 440px;
  box-sizing: border-box;
  padding: 36px 40px 40px 40px;
  border-radius: 24px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.login-logo { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; }
.login-logo img { height: 44px; width: auto; display: block; }
.login-logo .logo-dark { display: none; }
[data-theme="dark"] .login-logo .logo-light { display: none; }
[data-theme="dark"] .login-logo .logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .login-logo .logo-light { display: none; }
  [data-theme="system"] .login-logo .logo-dark { display: block; }
}
.login-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
/* the forms take no box: their fields are items of the card as in the mockup */
.login-form { display: contents; }
.login-field { display: flex; flex-direction: column; gap: 8px; }
.login-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.login-input {
  width: 100%;
  height: 52px;
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font: inherit;
  outline: none;
  font-size: 16px;
}
.login-input.error { border-color: var(--tone-red-fg); }
.login-input:focus-visible { border-color: var(--accent); }
.login-error { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--tone-red-fg); }
.login-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--tone-red-fg); }
.login-button {
  height: 48px;
  box-sizing: border-box;
  padding: 0 20px;
  border-radius: 999px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}
.login-button.primary { border: 0; background: var(--accent); color: var(--accent-text); }
.login-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.login-icon { width: 56px; height: 56px; border-radius: 18px; display: flex; align-items: center; justify-content: center; }
.login-rows { display: flex; flex-direction: column; }
.login-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.login-row-label { font-size: 14px; color: var(--muted); flex-grow: 1; }
.login-row-value { font-size: 15px; font-weight: 700; color: var(--muted); }

/* ---------- Gallery (debug only) ---------- */
.gallery-block { display: flex; flex-direction: column; gap: 12px; }
.gallery-block h2 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.gallery-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Contact detail (mockup Kunde-Detail.dc.html / Lieferant-Detail.dc.html) ---------- */
.detail-head { display: flex; align-items: center; gap: 16px; }
.detail-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.crumb { font-size: 13px; color: var(--muted); }
.crumb a { text-decoration: none; font-weight: 600; color: var(--accent-ink); }
.title-line { display: flex; align-items: center; gap: 12px; }
.title-line h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; white-space: nowrap; }
.title-chip { white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; }
.detail-card { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; flex-shrink: 0; }
.detail-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.detail-col { padding: 0 20px 6px 20px; display: flex; flex-direction: column; }
.detail-col + .detail-col { border-left: 1px solid var(--line); }
.detail-h {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  box-sizing: border-box;
  font-size: 17px;
  font-weight: 800;
  border-bottom: 1px solid var(--line);
}
.kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv-label { font-size: 13px; color: var(--muted); }
.kv-value { font-size: 14px; font-weight: 600; color: var(--text); }
.kv-value.muted { color: var(--muted); }
.kv-address { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv-address:last-child { border-bottom: 0; }
.kv-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-line { font-size: 14px; font-weight: 600; }
.kv-note { font-size: 13px; color: var(--muted); }
.map-button {
  height: 30px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--field);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.detail-block { padding: 0 20px 16px 20px; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.detail-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 46px; padding-top: 12px; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact.persons { grid-column: 4; grid-row: 1 / span 2; gap: 4px; }
.fact-label { font-size: 12px; color: var(--muted); }
.fact-value { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fact-value.link { color: var(--accent-ink); text-decoration: none; }
.fact-value.muted { color: var(--muted); }
.person-link {
  align-self: flex-start;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-ink);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.more-button {
  align-self: flex-start;
  margin-top: 4px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.admin-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 16px; padding: 12px 22px; background: var(--header); }
.admin-label { font-size: 12px; color: var(--header-label); }
.admin-value { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-value.muted { color: var(--muted); }
.notes-card { padding: 0 20px 16px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); flex-shrink: 0; }
.notes { margin: 0; padding-top: 10px; font-size: 14px; line-height: 21px; white-space: pre-line; }
.fact-value.link:focus-visible, .person-link:focus-visible, .map-button:focus-visible, .more-button:focus-visible,
.crumb a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* contact person dialog (mockup: overlay over the page, dialog 120 px from the top, centred) */
.ap-dialog {
  width: 640px;
  max-height: 760px;
  overflow: auto;
  border-radius: 20px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-dialog);
  padding: 16px 22px 8px 22px;
  border: 0;
  margin: 120px auto auto auto;
}
.ap-dialog:popover-open { display: flex; flex-direction: column; }
.ap-dialog::backdrop { background: var(--overlay); }
.ap-head { display: flex; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ap-head h2 { margin: 0; flex-grow: 1; font-size: 17px; font-weight: 800; }
.ap-person { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ap-person.last { border-bottom: none; }
.ap-name { font-size: 15px; font-weight: 800; }
.ap-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.dialog-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: var(--field);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Shared parts of the app pages (mockup Einstellungen*.dc.html) ---------- */
.chip { white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; }
.chips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.chip-check { display: flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 11px 4px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; background: var(--field); color: var(--text); }
.chip-check-icon { color: var(--accent-ink); display: flex; }
.muted { color: var(--muted); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
/* forms that only carry fields and buttons take no box (the mockup has no form elements) */
form.inline { display: contents; }
.notice { margin: 0; flex-shrink: 0; font-size: 14px; font-weight: 700; color: var(--tone-cyan-fg); }
.notice.error { color: var(--tone-red-fg); }

.btn {
  height: 36px;
  flex-shrink: 0;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 0 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
}
.btn.primary { border: 0; background: var(--accent); color: var(--accent-text); }
.btn.small { height: 36px; padding: 0 14px; }
.btn.danger { color: var(--tone-red-fg); }
.btn.push { margin-left: auto; }
.btn:focus-visible, .choice:focus-visible, .check:focus-visible, .switch:focus-visible, .role-row:focus-visible,
.settings-row:focus-visible, .drawer-close:focus-visible, .exception-remove:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* settings page (mockup Einstellungen: page box, head 44 px) */
.settings-page { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.settings-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; height: 44px; }
.settings-head h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.head-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--field); color: var(--muted); }
.settings-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 300px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--muted);
}
.settings-search input {
  box-sizing: content-box;
  flex-grow: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: var(--text);
}
.settings-search:focus-within { box-shadow: var(--shadow), inset 0 0 0 1px var(--accent); }

.card {
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-shrink: 0;
}
.card.start { align-self: start; flex-shrink: 1; }
.card-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  box-sizing: border-box;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { margin: 0; font-size: 17px; font-weight: 800; flex-grow: 1; white-space: nowrap; }
.card-note { font-size: 13px; color: var(--muted); }
.card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 22px; border-top: 1px solid var(--line); }
.card-foot .card-note { padding-right: 6px; }

/* Mein Konto */
.profile { display: flex; align-items: center; gap: 18px; padding: 16px 22px; }
.avatar.large { width: 64px; height: 64px; font-weight: 800; font-size: 22px; }
.profile-text { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.profile-line { display: flex; align-items: center; gap: 10px; }
.profile-name { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }
.profile-mail { font-size: 14px; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; padding: 12px 22px; background: var(--header); }
.facts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.facts-label { font-size: 12px; color: var(--header-label); }
.facts-value { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Rollen › Dashboard-Standard: the value opens the menu of the standards */
.role-dash-wrap { position: relative; min-width: 0; }
.role-dash-wrap > summary { list-style: none; cursor: pointer; }
.role-dash-wrap > summary::-webkit-details-marker { display: none; }
.role-dash-menu { position: absolute; bottom: 48px; left: 0; z-index: 12; width: 240px; box-sizing: border-box; padding: 8px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.role-dash-item { width: 100%; height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.role-dash-item.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.rights-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 4px 22px 8px 22px; }
.rights-col { display: flex; flex-direction: column; }
.rights-row { display: grid; grid-template-columns: minmax(0, 1fr) 92px 92px 92px; gap: 8px; align-items: center; height: 36px; border-bottom: 1px solid var(--line); }
.rights-row:last-child { border-bottom: 0; }
.rights-row.head { height: 34px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.rights-area { font-size: 14px; font-weight: 700; }
.tick { display: flex; justify-content: center; color: var(--accent-ink); }

/* tables of the settings (Benutzer, Protokoll; mockup: header 44, gap 16, padding 22) */
.settings-table {
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex-grow: 1;
  overflow: visible;
  position: relative;
}
.settings-table.users { --cols: 280px minmax(0, 1.3fr) 130px 100px minmax(0, 1.1fr) 110px; }
.settings-table.log { --cols: 170px 150px 170px minmax(0, 1fr) minmax(0, 1.4fr); }
.settings-table-head {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: var(--cols);
  gap: 16px;
  align-items: center;
  height: 44px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
}
.settings-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.settings-row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 16px;
  align-items: center;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.user-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar.small { font-size: 12px; font-weight: 800; }
.user-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-mail { font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: 16px;
  align-items: center;
  min-height: 54px;
  padding: 6px 22px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
}
.log-time { font-size: 14px; color: var(--text); white-space: nowrap; }
.log-who { font-size: 14px; font-weight: 700; color: var(--text); }
.log-action { font-size: 14px; font-weight: 700; }
.log-details { font-size: 14px; color: var(--text); }

/* Rollen & Rechte */
.roles-layout { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr) 340px; gap: 20px; }
.role-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  box-sizing: border-box;
  padding: 0 22px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.role-row:last-child { border-bottom: 0; }
.role-name { font-size: 15px; font-weight: 700; flex-grow: 1; }
.role-count { font-size: 13px; color: var(--muted); }
.role-row[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); }
.role-row[aria-current="page"] .role-name { font-weight: 800; }
.role-row[aria-current="page"] .role-count { color: var(--accent-ink); }
.matrix-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px 96px 96px; gap: 8px; align-items: center; height: 52px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.matrix-row.head { height: 40px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.matrix-area { font-size: 15px; font-weight: 700; }
.matrix-cell { display: flex; justify-content: center; }
.check {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 7px;
  border: 2px solid var(--line);
  background: transparent;
  color: transparent;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.check.on { border: 0; background: var(--accent); color: var(--accent-text); }
.check:disabled, .switch:disabled { opacity: 0.45; cursor: default; }
.stack { display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.switch-row { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-label { font-size: 15px; font-weight: 700; flex-grow: 1; }
.switch {
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  opacity: 1;
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
}
.switch[aria-checked="true"] { background: var(--switch-on); justify-content: flex-end; }
.switch span { width: 18px; height: 18px; border-radius: 999px; background: var(--accent-text); box-shadow: var(--shadow-knob); }
.grow-card { flex-grow: 1; flex-shrink: 1; }
.card-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.member { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.member:last-child { border-bottom: 0; }
.avatar.tiny { width: 30px; height: 30px; font-size: 12px; font-weight: 800; }
.member-name { font-size: 14px; font-weight: 700; flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-empty { padding: 16px 22px; font-size: 14px; color: var(--muted); }

/* columns of cards (mockup Einstellungen-Anbindungen) */
.columns { flex-grow: 1; min-height: 0; display: grid; gap: 20px; align-items: start; }
.columns.three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.column { display: flex; flex-direction: column; gap: 20px; min-height: 0; max-height: 100%; }
.setting-row { display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 6px 22px; border-bottom: 1px solid var(--line); }
.setting-row:last-child { border-bottom: 0; }
.setting-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 110px; }
.setting-label { font-size: 14px; font-weight: 700; color: var(--text); }
.setting-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setting-value { flex: 0 1 auto; max-width: 60%; min-width: 0; text-align: right; overflow-wrap: break-word; font-size: 14px; font-weight: 700; color: var(--text); }

/* fields of dialogs and forms (mockup Einstellungen DIALOG) */
.form { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px 22px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  outline: none;
}
.input:focus-visible { border-color: var(--accent); }
.field-row { display: flex; align-items: center; gap: 14px; }
.field-row .field-label { flex-grow: 1; }
/* select as the mockup `auswahl` (button 36 px, radius 12, field background, chevron 16 px) */
.select-wrap { position: relative; flex-shrink: 0; display: block; }
.select-wrap.w-right { width: 230px; }
.select-wrap.w-effect { width: 130px; }
.select-wrap.w-role { width: 220px; }
.select-wrap.w-sync { width: 230px; }
.select {
  appearance: none;
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 36px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background: currentColor;
  -webkit-mask: url("images/chevron-down.svg") center / 16px 16px no-repeat;
  mask: url("images/chevron-down.svg") center / 16px 16px no-repeat;
  pointer-events: none;
}

/* dialogs: native popovers (Passwort, HERO-Key) and server-rendered over a list (Benutzer hinzufügen);
   mockup: overlay, dialog 520 px, radius 22, centred */
.dialog {
  width: 520px;
  box-sizing: border-box;
  border-radius: 22px;
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-modal);
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
}
.dialog[popover]:not(:popover-open) { display: none; }
.dialog::backdrop { background: var(--overlay); }
.dialog-body { padding: 10px 22px 6px 22px; display: flex; flex-direction: column; gap: 14px; }
.dialog-body.last { padding-bottom: 22px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 22px 22px 22px; }
.modal-layer { position: absolute; inset: 0; z-index: 25; background: var(--overlay); display: flex; align-items: center; justify-content: center; }
.dialog .fact-label { font-size: 12px; color: var(--muted); }

/* drawer over the user list (mockup Einstellungen-Benutzer-Detail) */
.drawer-layer { position: absolute; inset: 0; z-index: 20; background: var(--overlay); display: flex; justify-content: flex-end; }
/* the backdrop is a link back to the list, behind the drawer */
.drawer-backdrop { position: absolute; inset: 0; z-index: -1; }
/* a modal dialog (data-modal, app.js) takes the focus itself when it has no [autofocus]: no ring for that */
[data-modal]:focus { outline: none; }
.drawer { width: 560px; height: 100%; box-sizing: border-box; background: var(--card); box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; }
.drawer-head { flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); }
.avatar.drawer-avatar { width: 52px; height: 52px; font-weight: 800; font-size: 17px; }
.drawer-title { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.drawer-name { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.drawer-sub { display: flex; align-items: center; gap: 8px; }
.drawer-close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--field);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.drawer-body { flex-grow: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.drawer-body > .notice { padding: 14px 24px 0 24px; }
.drawer-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 14px 24px; background: var(--header); }
.drawer-section { padding: 18px 24px 6px 24px; }
.drawer-section.last { padding: 18px 24px 20px 24px; }
.drawer-section h3 { margin: 0 0 12px 0; font-size: 15px; font-weight: 800; }
.drawer-section h3.tight { margin: 0 0 4px 0; }
.role-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.choice[aria-checked="true"] { border: 1px solid var(--accent-soft); background: var(--accent-soft); color: var(--accent-ink); }
.choice-tick { display: flex; overflow: hidden; width: 0; }
.choice[aria-checked="true"] .choice-tick { width: 14px; }
.exception { display: flex; align-items: center; gap: 10px; height: 48px; border-bottom: 1px solid var(--line); }
.exception.empty { font-size: 14px; color: var(--muted); }
.exception-name { font-size: 14px; font-weight: 700; flex-grow: 1; }
.exception-remove {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.exception-add { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
/* Benutzer-Detail, Geräte (mockup Einstellungen-Benutzer-Detail, admins only) */
.drawer-section.devices { padding: 4px 24px 20px 24px; }
.devices-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.devices-head h3 { margin: 0; flex-grow: 1; }
.devices-head .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.user-device { display: flex; align-items: center; gap: 12px; min-height: 58px; border-bottom: 1px solid var(--line); }
.user-device.empty { min-height: 44px; font-size: 14px; color: var(--muted); }
.user-device-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.user-device-name { font-size: 14px; font-weight: 700; color: var(--text); }
.user-device-time { font-size: 13px; color: var(--muted); }
.drawer-foot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--line); }

/* links in place of the mockup buttons get the button defaults */
.drawer-close, .dialog-close, .settings-row, .role-row { box-sizing: border-box; }
.drawer-close, .dialog-close { padding: 1px 6px; font-size: 13.3333px; text-align: center; text-decoration: none; }

/* Dashboard head (mockup Dashboard.dc.html) */
.dashboard-head { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.greeting { display: flex; flex-direction: column; gap: 2px; }
.greeting-date { font-size: 14px; color: var(--muted); font-weight: 500; }
.greeting h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }

/* Search page (no mockup): head as the lists, hits as the settings rows */
.hits { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; }


/* ---------- Round 3: mockup elements not built yet (data-todo), per area ---------- */

/* == round3: dashboard == */
/* head (mockup Dashboard.dc.html): search, Notizen, Anpassen, Neu */
.dash-search { display: flex; align-items: center; gap: 10px; width: 280px; height: 44px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; background: var(--field); color: var(--muted); }
.dash-search input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
.dash-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.dash-notes-wrap { position: relative; flex-shrink: 0; }
.dash-btn { box-sizing: border-box; text-decoration: none; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.dash-btn.primary { background: var(--accent); color: var(--accent-text); }
/* key figure tiles (links in the mockup, hence the pointer while inert) */
.dash-kpi { cursor: pointer; text-decoration: none; flex-grow: 1; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); min-width: 0; }
.dash-kpi-num { flex-shrink: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; line-height: 30px; white-space: nowrap; color: var(--text); }
.dash-kpi-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.dash-kpi-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-kpi-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* widget cards */
.dash-card { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 16px 20px 14px 20px; display: flex; flex-direction: column; min-width: 0; min-height: 0; flex-grow: 1; }
.dash-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.dash-card-title { cursor: pointer; text-decoration: none; margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; }
.dash-card-meta { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 0; }
.dash-filter-wrap { position: relative; flex-shrink: 0; }
.dash-filter { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.dash-card-body { flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; display: flex; flex-direction: column; }
.dash-card-foot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 36px; margin-top: 2px; border-top: 1px solid var(--line); }
.dash-card-count { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* "Weitere"/"Alle anzeigen": hidden while the list fits (mockup shows it only on overflow) */
.dash-more { cursor: pointer; display: none; flex-shrink: 0; align-items: center; font-size: 13px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.dash-more-bar { height: 36px; margin-top: 2px; border-top: 1px solid var(--line); }

/* == round3: contacts == */
/* list head "Neuer Kunde" / "Neuer Lieferant" (mockup Kunden.dc.html, a link styled as button) */
.list-create { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-text); text-decoration: none; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* "Spalten" (display: contents): the closed details' content slot would take a flex gap of the toolbar, which
   moved the button 8px left of the mockup's position */
.toolbar-menu:not([open])::details-content { display: none; }
.toolbar-menu[open]::details-content { display: contents; }
/* the mockup draws the checkboxes of its menus in the light scheme in both themes */
.menu-column input, .menu-choice input { color-scheme: light; }
/* column width of the mockup Lieferanten (IDS) */
.c1-60 { --c1: 60px; } .c2-60 { --c2: 60px; } .c3-60 { --c3: 60px; } .c4-60 { --c4: 60px; } .c5-60 { --c5: 60px; } .c6-60 { --c6: 60px; } .c7-60 { --c7: 60px; } .c8-60 { --c8: 60px; } .c9-60 { --c9: 60px; } .c10-60 { --c10: 60px; } .c11-60 { --c11: 60px; } .c12-60 { --c12: 60px; } .c13-60 { --c13: 60px; } .c14-60 { --c14: 60px; } .c15-60 { --c15: 60px; } .c16-60 { --c16: 60px; }
/* detail head buttons (mockups Kunde-Detail / Lieferant-Detail) */
.detail-button { height: 44px; flex-shrink: 0; white-space: nowrap; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; }
.detail-button.hide { padding: 0 18px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* Projekte / Verlauf (mockup Kunde-Detail) */
.detail-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.detail-tab { height: 48px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.detail-tab[aria-selected="true"] { border-bottom-color: var(--accent); font-weight: 800; color: var(--text); }
.detail-tab-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.projects-head { display: grid; grid-template-columns: 130px minmax(0, 0.6fr) 190px 140px 140px minmax(0, 1fr) 90px; gap: 14px; align-items: center; height: 40px; padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
/* Angebotsoptionen (mockup Kunde-Detail) */
.offer-card { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 12px 22px; }
.offer-h { margin: 0; width: 180px; flex-shrink: 0; font-size: 17px; font-weight: 800; }
.offer-facts { flex-grow: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
/* Customer page as redesign proposal (mockup Kunde-Umbau-Vorschlag): tabs Stammdaten / Projekte / Verlauf */
.cv-tabs { display: flex; gap: 8px; }
.cv-tab { height: 36px; box-sizing: border-box; display: flex; align-items: center; white-space: nowrap; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; background: var(--field); color: var(--text); }
.cv-tab[aria-current="page"] { background: var(--accent); color: var(--accent-text); }
.cv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; flex-shrink: 0; }
.cv-card { padding: 0 20px 6px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.cv-kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cv-label { font-size: 13px; color: var(--muted); }
.cv-value { font-size: 14px; font-weight: 600; color: var(--text); }
.cv-value.link { color: var(--accent-ink); text-decoration: none; }
.cv-value.muted { color: var(--muted); }
.cv-sub { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); padding: 18px 0 8px 0; border-bottom: 1px solid var(--line); }
.cv-address { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cv-person { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.cv-address:last-child, .cv-person:last-child { border-bottom: 0; }
.cv-person-name { font-size: 14px; font-weight: 700; }
.cv-admin { flex-shrink: 0; padding: 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cv-admin .fact { gap: 4px; }
.cv-admin-value { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-admin-value.muted { color: var(--muted); }
.cv-notes { flex-shrink: 0; padding: 16px 22px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.cv-notes-h { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 800; }
.cv-notes-text { margin: 0; padding-top: 11px; font-size: 14px; line-height: 21px; white-space: pre-line; }
.cv-offer { flex-shrink: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.cv-offer-head { display: flex; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.cv-offer-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.cv-offer-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 22px; background: var(--header); }
.cv-projects { flex-shrink: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.cv-project-head, .cv-project { display: grid; grid-template-columns: 130px minmax(0, 0.6fr) 190px 140px 140px minmax(0, 1fr) 90px; gap: 14px; align-items: center; padding: 0 22px; }
.cv-project-head { height: 44px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.cv-project { position: relative; height: 50px; font-size: 14px; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line); }
.cv-project:last-child { border-bottom: 0; }
.cv-project-nr { font-weight: 700; color: var(--accent-ink); }
/* the project number is the link, it covers the row (the row stays a table row for screen readers) */
.cv-project-link { color: inherit; text-decoration: none; }
.cv-project-link::after { content: ""; position: absolute; inset: 0; }
.cv-project-link:focus-visible { outline: none; }
.cv-project-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.cv-cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-project .muted { color: var(--muted); }
.cv-nowrap { white-space: nowrap; }
.cv-status { display: inline-block; }
.cv-history { flex-shrink: 0; padding: 6px 22px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.cv-entry { display: grid; grid-template-columns: 120px 110px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cv-entry:last-child { border-bottom: 0; }
.cv-entry .kv-stack { gap: 3px; }
.cv-when { font-size: 13px; color: var(--muted); }
.cv-entry-project { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.cv-entry-title { font-size: 14px; font-weight: 700; }
.cv-entry-text { font-size: 13px; line-height: 19px; color: var(--muted); white-space: pre-line; }
.cv-tab:focus-visible, .cv-value.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Einkaufsangaben (mockup Lieferant-Detail) */
.purchase-head { display: flex; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.purchase-h { margin: 0; font-size: 17px; font-weight: 800; }
.purchase-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.8fr); gap: 16px; padding: 14px 22px; background: var(--header); }
.purchase-value { font-size: 14px; font-weight: 700; color: var(--text); }
.purchase-value.muted { color: var(--muted); }
.purchase-versions { padding: 14px 22px 6px 22px; display: flex; flex-direction: column; }
.purchase-h3 { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 800; }
.purchase-version { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.purchase-version:last-child { border-bottom: 0; }
.purchase-version-time { font-size: 13px; color: var(--muted); }
.purchase-version-text { display: flex; flex-direction: column; gap: 2px; }
.purchase-version-title { font-size: 14px; font-weight: 700; }
.purchase-version-who { font-size: 13px; color: var(--muted); }

/* == round3: settings == */
/* Mein Konto: rows of "Angemeldete Geräte" (mockup Einstellungen.dc.html) */
.device-row { display: grid; grid-template-columns: minmax(0, 1fr) 260px 150px; gap: 16px; align-items: center; min-height: 52px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.device-row:last-child { border-bottom: 0; }
.device-name { font-size: 14px; font-weight: 700; color: var(--text); }
.device-name.muted { color: var(--muted); }
.device-time { font-size: 14px; color: var(--muted); }
.device-end { display: flex; justify-content: flex-end; }
/* Benutzer: tabs Benutzer / Tageszugänge, columns Zugang and HERO-Nr. (mockup Einstellungen-Benutzer.dc.html) */
.settings-tabs { display: flex; flex-shrink: 0; }
.settings-tabs .segments { flex-shrink: 0; }
.row-access { font-size: 14px; color: var(--muted); }
.row-text { font-size: 14px; color: var(--text); }
.settings-tabs .segment { padding: 0 14px; }
/* Benutzer-Detail: access line next to the status chip (mockup Einstellungen-Benutzer-Detail.dc.html) */
.drawer-access { font-size: 13px; color: var(--muted); }
/* Benutzer hinzufügen: switch Mitarbeiter (Microsoft 365) / Gast einladen */
.dialog-tabs { padding: 18px 22px 8px 22px; display: flex; }
.dialog-tabs .segments { flex-shrink: 0; }
.dialog-tabs .segment { padding: 0 14px; }
.dialog-tabs .segment[aria-pressed="true"] { font-weight: 800; background: var(--card); color: var(--text); box-shadow: var(--shadow-segment); }
/* Rollen: HERO number of a member (mockup Einstellungen-Rollen.dc.html) */
.member-hero { font-size: 13px; color: var(--muted); }
/* Löschen of a role that is fixed or still has members (mockup: opacity 0.4) */
.btn.dim { opacity: 0.4; }

/* == round3: login == */
/* mockup Anmeldung start state: Microsoft sign-in, "oder" divider; anchors centre like the mockup's buttons */
.login-button { text-align: center; }
.login-ms { margin-top: 8px; text-align: start; }
.login-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.login-or-line { flex-grow: 1; height: 1px; background: var(--line); }

/* M4 – editable records (gd-resource form). The live frame has no box of its own, so the page keeps the
   mockup's layout; the form element only carries the inputs' values (they refer to it via form="…"). */
.live, .live-body, .lock-status, .toast-slot { display: contents; }
.edit-form, .heartbeat { display: none; }
/* Lock bar (mockup Bestellung-Detail) */
.lock-bar { height: 48px; flex-shrink: 0; box-sizing: border-box; padding: 0 8px 0 16px; border-radius: 14px; display: flex; align-items: center; gap: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.lock-text { font-size: 14px; flex-grow: 1; white-space: nowrap; }
.lock-button { height: 36px; flex-shrink: 0; white-space: nowrap; padding: 0 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; }
/* unavailable while waiting (mockup Tour: locked controls at 0.45) */
.lock-button:disabled { opacity: 0.45; }
.lock-button:focus-visible, .detail-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* "Bearbeiten" while another edits (mockup Bestellung-Detail: disabled, muted) */
.detail-button:disabled { color: var(--muted); }
.detail-button.primary { border: 0; background: var(--accent); color: var(--accent-text); }
/* Inputs while editing (mockup Dashboard note dialog: fields and textarea) */
.kv-edit, .fact-edit, .admin-edit { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.edit-input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; }
.edit-input.multiline { min-height: 110px; padding: 12px 14px; border-radius: 14px; border: 0; font-size: 15px; line-height: 1.4; resize: none; }
.edit-input:focus-visible { outline: none; border-color: var(--accent); }
.edit-input.multiline:focus-visible { outline: 2px solid var(--accent); }
.edit-input.error { border-color: var(--tone-red-fg); }
.edit-error { font-size: 12px; font-weight: 700; color: var(--tone-red-fg); }
.notes-edit { padding-top: 10px; }
.edit-notice { margin: 0; }
.dialog.wide { width: 640px; }
.dialog-text { margin: 0; font-size: 14px; line-height: 21px; }
/* Toast (mockup Einstellungen); disappears by itself */
.toast { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 40; display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 14px; background: var(--text); color: var(--card); font-size: 14px; font-weight: 700; box-shadow: var(--shadow-toast); white-space: nowrap; animation: toast-out 0.3s ease 6s forwards; }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }

/* == M5: Listen == */
/* Aufträge (mockup Auftraege.dc.html) and Bestellungen (mockup Bestellungen.dc.html): values of their
   inline styles; the list class (gd_resource::More::class) scopes what differs from Kunden/Lieferanten. */
/* column widths of the mockup grids */
.c1-68 { --c1: 68px; } .c2-68 { --c2: 68px; } .c3-68 { --c3: 68px; } .c4-68 { --c4: 68px; } .c5-68 { --c5: 68px; } .c6-68 { --c6: 68px; } .c7-68 { --c7: 68px; } .c8-68 { --c8: 68px; } .c9-68 { --c9: 68px; } .c10-68 { --c10: 68px; } .c11-68 { --c11: 68px; } .c12-68 { --c12: 68px; } .c13-68 { --c13: 68px; } .c14-68 { --c14: 68px; } .c15-68 { --c15: 68px; } .c16-68 { --c16: 68px; }
.c1-70 { --c1: 70px; } .c2-70 { --c2: 70px; } .c3-70 { --c3: 70px; } .c4-70 { --c4: 70px; } .c5-70 { --c5: 70px; } .c6-70 { --c6: 70px; } .c7-70 { --c7: 70px; } .c8-70 { --c8: 70px; } .c9-70 { --c9: 70px; } .c10-70 { --c10: 70px; } .c11-70 { --c11: 70px; } .c12-70 { --c12: 70px; } .c13-70 { --c13: 70px; } .c14-70 { --c14: 70px; } .c15-70 { --c15: 70px; } .c16-70 { --c16: 70px; }
.c1-98 { --c1: 98px; } .c2-98 { --c2: 98px; } .c3-98 { --c3: 98px; } .c4-98 { --c4: 98px; } .c5-98 { --c5: 98px; } .c6-98 { --c6: 98px; } .c7-98 { --c7: 98px; } .c8-98 { --c8: 98px; } .c9-98 { --c9: 98px; } .c10-98 { --c10: 98px; } .c11-98 { --c11: 98px; } .c12-98 { --c12: 98px; } .c13-98 { --c13: 98px; } .c14-98 { --c14: 98px; } .c15-98 { --c15: 98px; } .c16-98 { --c16: 98px; }
.c1-108 { --c1: 108px; } .c2-108 { --c2: 108px; } .c3-108 { --c3: 108px; } .c4-108 { --c4: 108px; } .c5-108 { --c5: 108px; } .c6-108 { --c6: 108px; } .c7-108 { --c7: 108px; } .c8-108 { --c8: 108px; } .c9-108 { --c9: 108px; } .c10-108 { --c10: 108px; } .c11-108 { --c11: 108px; } .c12-108 { --c12: 108px; } .c13-108 { --c13: 108px; } .c14-108 { --c14: 108px; } .c15-108 { --c15: 108px; } .c16-108 { --c16: 108px; }
.c1-112 { --c1: 112px; } .c2-112 { --c2: 112px; } .c3-112 { --c3: 112px; } .c4-112 { --c4: 112px; } .c5-112 { --c5: 112px; } .c6-112 { --c6: 112px; } .c7-112 { --c7: 112px; } .c8-112 { --c8: 112px; } .c9-112 { --c9: 112px; } .c10-112 { --c10: 112px; } .c11-112 { --c11: 112px; } .c12-112 { --c12: 112px; } .c13-112 { --c13: 112px; } .c14-112 { --c14: 112px; } .c15-112 { --c15: 112px; } .c16-112 { --c16: 112px; }
.c1-136 { --c1: 136px; } .c2-136 { --c2: 136px; } .c3-136 { --c3: 136px; } .c4-136 { --c4: 136px; } .c5-136 { --c5: 136px; } .c6-136 { --c6: 136px; } .c7-136 { --c7: 136px; } .c8-136 { --c8: 136px; } .c9-136 { --c9: 136px; } .c10-136 { --c10: 136px; } .c11-136 { --c11: 136px; } .c12-136 { --c12: 136px; } .c13-136 { --c13: 136px; } .c14-136 { --c14: 136px; } .c15-136 { --c15: 136px; } .c16-136 { --c16: 136px; }
.c1-158 { --c1: 158px; } .c2-158 { --c2: 158px; } .c3-158 { --c3: 158px; } .c4-158 { --c4: 158px; } .c5-158 { --c5: 158px; } .c6-158 { --c6: 158px; } .c7-158 { --c7: 158px; } .c8-158 { --c8: 158px; } .c9-158 { --c9: 158px; } .c10-158 { --c10: 158px; } .c11-158 { --c11: 158px; } .c12-158 { --c12: 158px; } .c13-158 { --c13: 158px; } .c14-158 { --c14: 158px; } .c15-158 { --c15: 158px; } .c16-158 { --c16: 158px; }
/* head: search field 320 wide; "Neues Projekt" with a 16 px icon */
.list-head.list-orders .list-search, .list-head.list-purchase .list-search { width: 320px; }
.list-head.list-orders .list-create svg { width: 16px; height: 16px; }
/* hint chip of the toolbar (Bestellungen "Ausgeblendet: … Einstellungen") */
.list-hint { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.list-hint-link { font-weight: 800; text-decoration: underline; }
/* many hidden suppliers: the names shorten, the toolbar keeps its buttons */
.list-hint { min-width: 0; }
.list-hint > svg { flex-shrink: 0; }
.list-hint-values { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.list-hint-link { flex-shrink: 0; }
/* first lines: bold / semibold (mockup font-weight 700 / 600) */
.table-row .strong > .cell-line, .table-row .cell-text.strong, .table-row .cell-plain.strong { font-weight: 700; }
.table-row .semi > .cell-line, .table-row .cell-plain.semi { font-weight: 600; }
/* chip with a badge next to it (Aufträge "Warnung": "2 Sammelposten +1") */
.cell-badge { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cell-badge > .cell-chip { overflow: hidden; text-overflow: ellipsis; }
.cell-more { font-size: 12px; font-weight: 700; color: var(--muted); }
/* chip list (Bestellungen "Artikel"): one chip per item, green delivered, red missing, "+ n weitere Artikel" */
.cell-items { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.item { display: block; margin-bottom: 3px; padding: 1px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item.ok { background: var(--item-ok-bg); color: var(--item-ok-ink); }
.item.miss { background: var(--item-miss-bg); color: var(--item-miss-ink); }
.item-lead { font-weight: 700; }
.items-more { font-weight: 700; color: var(--accent-ink); }
/* Aufträge: grid gap 10; first line of the order in accent ink; second lines 13 px, cut */
.table-card.list-orders .table-head, .table-card.list-orders .table-row { gap: 10px; }
.list-orders .accent .cell-strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent-ink); }
.list-orders .cell-sub-cut, .list-orders .cell-sub { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.list-orders .cell-chipbox { display: flex; min-width: 0; }
.list-orders .cell-chipbox > .cell-chip { overflow: hidden; text-overflow: ellipsis; }
/* Bestellungen: rows start at the top (chip lists), padding 12, no minimum height; project in accent ink */
.table-card.list-purchase .table-row { align-items: start; min-height: 0; padding: 12px 18px; }
.list-purchase .accent .cell-strong { color: var(--accent-ink); }
.list-orders .accent .cell-strong.muted, .list-purchase .accent .cell-strong.muted { color: var(--muted); }
/* Bestellungen "Zu prüfen" (mockup Bestellungen-Pruefen): column Betreff 1.2fr; a header without menu (the buttons);
   the row's link lies over the row, the order link and the buttons above it; the kind with its dot (gold, red after
   the assembly start) and the document type below; reason chips in apricot with the text colour; second lines cut */
.c1-fr12 { --c1: minmax(0, 1.2fr); } .c2-fr12 { --c2: minmax(0, 1.2fr); } .c3-fr12 { --c3: minmax(0, 1.2fr); } .c4-fr12 { --c4: minmax(0, 1.2fr); } .c5-fr12 { --c5: minmax(0, 1.2fr); } .c6-fr12 { --c6: minmax(0, 1.2fr); } .c7-fr12 { --c7: minmax(0, 1.2fr); } .c8-fr12 { --c8: minmax(0, 1.2fr); } .c9-fr12 { --c9: minmax(0, 1.2fr); } .c10-fr12 { --c10: minmax(0, 1.2fr); } .c11-fr12 { --c11: minmax(0, 1.2fr); } .c12-fr12 { --c12: minmax(0, 1.2fr); } .c13-fr12 { --c13: minmax(0, 1.2fr); } .c14-fr12 { --c14: minmax(0, 1.2fr); } .c15-fr12 { --c15: minmax(0, 1.2fr); } .c16-fr12 { --c16: minmax(0, 1.2fr); }
.th.bare { display: block; }
.table-row.overlay { position: relative; }
.row-link { position: absolute; inset: 0; }
.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.list-cases .cell-sub { overflow: hidden; text-overflow: ellipsis; }
.case-kind { display: flex; flex-direction: column; min-width: 0; }
.case-kind-line { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.case-dot { width: 8px; height: 8px; border-radius: 999px; flex-shrink: 0; background: var(--warn-dot); }
.case-dot.red { background: var(--tag-w); }
.case-kind-sub { padding-left: 16px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-text { display: block; min-width: 0; overflow-wrap: anywhere; }
.table-row .case-text.muted { color: var(--muted); }
.case-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.chip-review { white-space: nowrap; padding: 0 10px; border-radius: 999px; font-size: 12px; line-height: 22px; font-weight: 700; background: var(--chip-review-bg); color: var(--text); }
.case-order { position: relative; text-decoration: none; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.case-actions { position: relative; display: flex; gap: 4px; justify-content: flex-end; }
.case-btn { width: 30px; height: 30px; box-sizing: border-box; padding: 0; border: 0; border-radius: 9px; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.case-btn.ok { background: var(--accent-soft); color: var(--accent-ink); }
.case-btn.del { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.case-btn:disabled, .dw-btn:disabled { cursor: default; }
/* == M5: Bestellung-Detail == */
/* mockup Bestellung-Detail.dc.html: two cards side by side, label/value rows, flow, positions, documents, history */
.po-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.po-card { padding: 0 20px 4px 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.po-card.list { padding: 0 20px 6px 20px; }
.po-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--line); }
.po-row:last-child { border-bottom: none; }
.po-label { font-size: 13px; color: var(--muted); }
.po-value { font-size: 14px; font-weight: 600; color: var(--text); }
.po-value.link { color: var(--accent-ink); text-decoration: none; }
.po-value.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.po-value.muted { color: var(--muted); }
/* Ablauf */
.po-flow { padding: 20px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.po-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.po-step { display: flex; flex-direction: column; gap: 7px; }
.po-bar { height: 5px; border-radius: 999px; background: var(--line); }
.po-bar.done { background: var(--accent); }
.po-bar.current { background: var(--step-current); }
.po-step-title { font-size: 14px; font-weight: 700; }
.po-step-sub { font-size: 13px; color: var(--muted); }
/* Positionen with the supplier head */
.po-positions { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.po-supplier { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.po-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.po-fact-label { font-size: 12px; color: var(--muted); }
/* supplier names are longer than the mockup's: the label stays on one line like there */
.po-fact-label.cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-fact-value { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-fact-value.big { font-size: 16px; font-weight: 800; }
.po-title { display: flex; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--line); }
.po-title h2 { margin: 0; font-size: 17px; font-weight: 800; }
.po-note { font-size: 13px; color: var(--muted); }
.po-grid { display: grid; grid-template-columns: 36px 120px minmax(0, 1fr) 76px 76px 76px 64px 104px 108px; gap: 14px; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); }
.po-grid .num { text-align: right; }
.po-thead { height: 40px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.po-tr { height: 48px; font-size: 14px; }
.po-pos { color: var(--muted); }
.po-article { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-open { font-weight: 800; color: var(--muted); }
.po-open.warn { color: var(--warn-ink); }
.po-sum { font-weight: 600; }
.po-total { display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; padding: 14px 22px; font-size: 14px; }
.po-total-label { color: var(--muted); }
.po-total-value { font-size: 17px; font-weight: 800; }
/* Belege aus einkauf@ */
.po-doc { text-decoration: none; display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.po-doc:last-child { border-bottom: none; }
.po-doc-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--field); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.po-doc-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.po-doc-title { font-size: 14px; font-weight: 700; }
.po-doc-sub { font-size: 13px; color: var(--muted); }
.po-doc-date { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* Verlauf */
.po-event { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.po-event:last-child { border-bottom: none; }
.po-event-time { width: 92px; flex-shrink: 0; font-size: 13px; color: var(--muted); }
.po-event-text { display: flex; flex-direction: column; min-width: 0; }
.po-event-title { font-size: 14px; font-weight: 700; }
.po-event-sub { font-size: 13px; color: var(--muted); }
/* == M5: Auftrag-Detail == */
/* Customer order detail (mockups Auftrag*.dc.html, generator auftraege.py): the page box is as high as the mockup
   (1260 px minus the padding of main); the rows scroll inside the tab card. */
.order-page { height: 1208px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; }
/* head buttons (mockup: links styled as buttons, K_SEK / K_PRIM) */
.order-action { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.order-action.primary { border: 0; background: var(--accent); color: var(--accent-text); }
.order-action.danger { border: 0; background: var(--tone-red-bg); color: var(--tone-red-fg); }
/* Löschen of the appointment dialog: after Speichern in the DOM (Enter saves), shown first on the left (mockup: a
   flex-grow spacer after it) */
.order-dialog-delete { order: -1; margin-right: auto; }
/* master data: three columns, rows "label value", admin line below */
.order-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.order-col { padding: 0 20px 4px 20px; display: flex; flex-direction: column; }
.order-col + .order-col { border-left: 1px solid var(--line); }
.order-kv { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--line); }
.order-kv:last-child { border-bottom: 0; }
.order-admin { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 16px; padding: 10px 20px; background: var(--header); }
/* timeline "Termine" (mockup: dragged, no scrollbar; app.js sets data-ready – without JS it scrolls natively) */
.order-timeline { flex-shrink: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 12px 0 6px 0; }
.order-timeline-head { display: flex; align-items: center; gap: 12px; margin: 0 20px; padding-bottom: 8px; }
.order-timeline-h { margin: 0; flex-grow: 1; font-size: 17px; font-weight: 800; }
/* "Termin hinzufügen" and the pencils (links in place of the mockup's buttons; inert without the permission) */
.order-add { height: 32px; margin: -5px 0; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.order-edit { width: 26px; height: 26px; margin: -4px 0; flex-shrink: 0; box-sizing: border-box; padding: 0; border-radius: 999px; border: 0; background: var(--field); color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.order-add[aria-disabled="true"], .order-edit[aria-disabled="true"] { cursor: default; }
.order-strip { overflow-x: auto; user-select: none; }
.order-strip[data-ready] { overflow: hidden; cursor: grab; touch-action: pan-y; }
.order-strip[data-dragging] { cursor: grabbing; }
.order-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.order-strip-row { display: flex; width: max-content; padding: 0 22px 4px 22px; }
.order-point { width: 214px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.order-mark { display: flex; align-items: center; height: 14px; margin-bottom: 8px; }
.order-dot { width: 12px; height: 12px; flex-shrink: 0; border-radius: 999px; box-sizing: border-box; background: var(--card); border: 2px solid var(--accent); }
.order-dot.past { background: var(--done); border: 0; }
.order-dot.today { background: var(--accent); border: 0; }
.order-line { flex-grow: 1; height: 3px; background: var(--line); }
.order-line.done { background: var(--done); }
.order-point-head { display: flex; align-items: center; gap: 6px; padding-right: 8px; }
.order-point-date { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; }
.order-point-date.today { color: var(--accent-ink); }
.order-point-time { font-size: 13px; color: var(--muted); }
.order-point-what { font-size: 13px; font-weight: 700; padding-right: 14px; }
.order-point-who { font-size: 13px; color: var(--muted); padding-right: 14px; }
/* fixed delivery date (Fixtermin): gold chip with a lock */
.order-fixed { align-self: flex-start; display: flex; align-items: center; gap: 5px; height: 22px; box-sizing: border-box; margin-top: 2px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); font-size: 12px; font-weight: 700; white-space: nowrap; }
.order-fixed svg { flex-shrink: 0; }
/* tab card: tabs (links; the mockup's buttons are border-box), rows scroll in the card */
.order-card { flex-grow: 1; min-height: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.order-tablist { flex-shrink: 0; display: flex; align-items: flex-end; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.order-tab { height: 48px; box-sizing: border-box; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: inherit; font-size: 15px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--muted); text-decoration: none; }
.order-tab[aria-selected="true"] { border-bottom-color: var(--accent); font-weight: 800; color: var(--text); }
.order-tab-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.order-tab-count.open { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.order-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; }
.order-thead { display: grid; gap: 14px; align-items: center; height: 40px; padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.order-row { display: grid; gap: 14px; align-items: center; box-sizing: border-box; padding: 6px 22px; font-size: 14px; border-bottom: 1px solid var(--line); }
.cols-material { grid-template-columns: 128px minmax(0, 1fr) 70px 206px 92px 118px; }
.order-row.cols-material { min-height: 52px; }
.cols-services { grid-template-columns: 110px minmax(0, 1fr) 90px 80px minmax(0, 1.2fr); }
.order-row.cols-services { min-height: 48px; }
.cols-orders { grid-template-columns: 150px 100px 120px 140px 84px 100px minmax(0, 1fr); }
.order-row.cols-orders { min-height: 50px; }
.cols-documents { grid-template-columns: 150px 100px 120px 140px 84px 100px minmax(0, 1fr) 104px; }
.order-row.cols-documents { min-height: 50px; }
.cols-files { grid-template-columns: minmax(0, 1fr) 190px 120px 124px; }
.order-row.cols-files { min-height: 56px; }
.cols-log { grid-template-columns: 140px 110px minmax(0, 1fr) 150px; }
.order-row.cols-log { min-height: 54px; }
.order-thead .right, .order-row .right { text-align: right; }
/* cells of the tab rows (scoped: gd-ui has list cells of the same names) */
.order-row .cell-stack { display: flex; flex-direction: column; min-width: 0; }
.order-row .cell-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.order-row .cell-note { font-size: 13px; color: var(--muted); }
.order-row .cell-note.cut, .order-row .cell-cut { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order-row .cell-chip { display: flex; }
.order-row .cell-end { display: flex; justify-content: flex-end; }
.order-row .strong { font-weight: 700; }
.mat-nr { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.mat-name { font-weight: 600; }
.mat-qty { text-align: right; white-space: nowrap; font-weight: 700; }
.mat-supply { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.supply-button { align-self: flex-start; max-width: 100%; height: 30px; box-sizing: border-box; padding: 0 10px 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.supply-button.open { border-color: var(--warn-dot); }
.supply-button svg { flex-shrink: 0; }
.supply-label { overflow: hidden; text-overflow: ellipsis; }
.supply-note { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mat-doc { font-weight: 700; white-space: nowrap; }
/* small buttons in rows (mockup K_KLEIN: "Artikel ergänzen", "Zuordnen") */
.order-foot { display: flex; align-items: center; gap: 14px; padding: 12px 22px; font-size: 13px; color: var(--muted); }
.small-action { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.svc-nr { font-weight: 700; white-space: nowrap; }
.svc-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-labour { font-size: 13px; color: var(--muted); min-width: 0; }
/* rows that lead to the purchase order: the number is the link, it covers the row; buttons stay above it */
.order-row.linked { position: relative; }
.row-link { color: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; }
.row-link:focus-visible { outline: none; }
.row-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.order-row.linked .small-action { position: relative; z-index: 1; }
/* Dokumente */
.file-cell { display: flex; align-items: center; gap: 12px; min-width: 0; }
.file-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: var(--field); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.versions-button { height: 30px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; border: 0; background: var(--field); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--muted); }
.versions-button.many { color: var(--text); }
.versions-count { font-size: 12px; color: var(--muted); }
/* Bilder */
.image-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding: 18px 22px; }
.image-tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.image-box { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--image); color: var(--image-ink); display: flex; align-items: center; justify-content: center; }
.image-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.image-date { font-size: 12px; color: var(--muted); }
/* Logbuch */
.log-time { white-space: nowrap; font-size: 13px; color: var(--text); }
/* Versionen (mockup Auftrag-Versionen: overlay, dialog 720 px, 170 px from the top) */
.versions-dialog { width: 720px; box-sizing: border-box; border-radius: 22px; background: var(--card); color: var(--text); box-shadow: var(--shadow-versions); padding: 0; border: 0; margin: 170px auto auto auto; }
.versions-dialog:popover-open { display: flex; flex-direction: column; }
.versions-dialog::backdrop { background: var(--overlay); }
.versions-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px 24px; border-bottom: 1px solid var(--line); }
.versions-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.versions-close { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; }
.versions-body { padding: 8px 24px 12px 24px; display: flex; flex-direction: column; }
.versions-row { display: grid; grid-template-columns: 90px 120px 80px minmax(0, 1fr) 90px; gap: 12px; align-items: center; min-height: 52px; font-size: 14px; border-bottom: 1px solid var(--line); }
.versions-file { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cut-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.versions-open { height: 30px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.versions-foot { display: flex; align-items: center; gap: 12px; padding: 14px 24px 20px 24px; border-top: 1px solid var(--line); }
/* Termin hinzufügen / bearbeiten (mockups Auftrag-Termin-*: overlay, dialog 600 px, 170 px from the top) */
.modal-layer.order-dialog-layer { z-index: 20; align-items: flex-start; padding-top: 170px; }
.order-dialog { width: 600px; box-sizing: border-box; border-radius: 22px; background: var(--card); color: var(--text); box-shadow: var(--shadow-versions); display: flex; flex-direction: column; }
.order-dialog-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px 24px; border-bottom: 1px solid var(--line); }
.order-dialog-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.order-dialog-close { width: 36px; height: 36px; box-sizing: border-box; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 18px; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.order-dialog-form { display: contents; }
.order-dialog-body { padding: 18px 24px 8px 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
.order-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.order-field.wide { grid-column: 1 / -1; }
.order-field-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.order-input { height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; width: 100%; min-width: 0; }
.order-input:focus-visible { outline: none; border-color: var(--accent); }
.order-input.error { border-color: var(--tone-red-fg); }
.order-select { position: relative; display: block; }
.order-select select { appearance: none; padding: 0 40px 0 14px; font-weight: 700; cursor: pointer; }
.order-select select:disabled { cursor: default; opacity: 1; }
.order-select-chevron { position: absolute; right: 14px; top: 14px; display: flex; color: var(--muted); pointer-events: none; }
.order-window { display: flex; align-items: center; gap: 8px; }
.order-window-dash { color: var(--muted); }
.order-fix { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--line); }
.order-fix-label { flex-grow: 1; font-size: 14px; font-weight: 700; }
/* Fixtermin switch: a checkbox (sent with the form) drawn as the mockup's switch; half covered while unusable */
.order-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; box-sizing: border-box; padding: 3px; border-radius: 999px; background: var(--line); display: flex; justify-content: flex-start; cursor: pointer; }
.order-switch:has(input:checked) { background: var(--switch-on); justify-content: flex-end; }
.order-switch:has(input:disabled) { opacity: 0.5; cursor: default; }
.order-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.order-switch span { width: 18px; height: 18px; border-radius: 999px; background: var(--accent-text); box-shadow: var(--shadow-knob); }
.order-switch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.order-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px 20px 24px; border-top: 1px solid var(--line); }
/* Speichern inactive while Art or Datum is missing (mockup dlg.ok) */
.order-dialog-form:invalid .order-dialog-save { background: var(--field); color: var(--muted); cursor: default; }
.order-action:focus-visible, .order-tab:focus-visible, .supply-button:focus-visible, .small-action:focus-visible,
.versions-button:focus-visible, .versions-close:focus-visible, .versions-open:focus-visible, .order-add:focus-visible,
.order-edit:focus-visible, .order-dialog-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Document view and review dialog over the page (mockups Bestellung-Beleg / -Fehlt, Dashboard-Pruefen): 1240 × 820,
   the overlay covers the whole window as in the mockup (navigation included) */
.modal-layer.doc-layer { position: fixed; z-index: 30; }
.doc-dialog { position: relative; width: 1240px; height: 820px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); box-sizing: border-box; border-radius: 22px; background: var(--card); color: var(--text); box-shadow: var(--shadow-dash-dialog); display: flex; flex-direction: column; overflow: hidden; }
.doc-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 24px 14px 24px; border-bottom: 1px solid var(--line); }
.doc-head h2 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.3; flex-grow: 1; min-width: 0; overflow-wrap: anywhere; }
.doc-close { width: 36px; height: 36px; flex-shrink: 0; box-sizing: border-box; border-radius: 999px; background: var(--field); color: var(--text); font-size: 18px; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.doc-body { flex-grow: 1; min-height: 0; display: flex; }
.doc-view { flex-grow: 1; min-width: 0; box-sizing: border-box; padding: 20px; display: flex; align-items: center; justify-content: center; background: var(--field); border-right: 1px solid var(--line); overflow: hidden; }
.doc-page { height: 100%; aspect-ratio: 0.707; box-sizing: border-box; border: 0; border-radius: 6px; background: var(--paper); box-shadow: var(--shadow-page); }
.doc-image { max-width: 100%; max-height: 100%; border-radius: 6px; background: var(--paper); box-shadow: var(--shadow-page); }
.doc-mail { align-self: stretch; width: 100%; box-sizing: border-box; padding: 16px 22px; border-radius: 14px; background: var(--card); white-space: pre-wrap; font-size: 14px; line-height: 1.55; overflow-y: auto; overflow-wrap: anywhere; }
.doc-missing { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.doc-missing-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--card); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.doc-missing-text { font-size: 15px; font-weight: 700; }
.doc-side { width: 440px; flex-shrink: 0; overflow-y: auto; box-sizing: border-box; padding: 4px 22px 8px 22px; display: flex; flex-direction: column; }
.doc-side.pf-side { box-sizing: content-box; }
.doc-fact { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.doc-label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.doc-value { font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.doc-value.muted { color: var(--muted); }
.doc-files { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; }
.doc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-chip { height: 36px; max-width: 396px; box-sizing: border-box; padding: 0 14px; border-radius: 10px; background: var(--field); color: var(--text); font-size: 13px; font-weight: 700; line-height: 36px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-chip.wide { max-width: 420px; }
.doc-chip.on { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.doc-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 18px 24px; border-top: 1px solid var(--line); }
.doc-btn { height: 44px; box-sizing: border-box; padding: 0 20px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.doc-btn.primary { padding: 0 22px; background: var(--accent); color: var(--accent-text); }
.doc-btn.danger { padding: 0 18px; background: var(--tone-red-bg); color: var(--tone-red-fg); }
.doc-btn:disabled { padding: 0 22px; color: var(--muted); cursor: default; }
.doc-btn[aria-disabled="true"] { cursor: default; }
.pf-mail { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.pf-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 24px; border-bottom: 1px solid var(--line); }
.pf-meta-row { display: flex; gap: 10px; font-size: 13px; }
.pf-meta-label { width: 52px; flex-shrink: 0; color: var(--muted); font-weight: 600; }
.pf-meta-value { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.pf-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 14px 24px 18px 24px; }
.pf-text { white-space: pre-wrap; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.pf-files { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.pf-file-text { white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.45; padding: 14px 16px; border-radius: 14px; background: var(--field); overflow-x: auto; }
.pf-block { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-block.last { gap: 6px; border-bottom: 0; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-opt { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 600; background: var(--field); color: var(--text); white-space: nowrap; cursor: default; }
.pf-opt.on { font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pf-project { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.pf-project .doc-label { width: 70px; }
.pf-input { flex-grow: 1; height: 38px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; }
.doc-close:focus-visible, .doc-chip:focus-visible, .doc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* review dialog (M9 C5b): the choice as radio chips in the look of .pf-opt / .on; "Kein Einkauf" hides supplier and
   project (mockup pfMitLf) */
.pf-form { display: contents; }
label.pf-opt { position: relative; display: inline-flex; align-items: center; box-sizing: border-box; }
.pf-radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pf-opt:has(.pf-radio:checked) { font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pf-opt:has(.pf-radio:enabled) { cursor: pointer; }
.pf-opt:has(.pf-radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-form:has(.pf-radio[name="typ"][value="kein"]:checked) .pf-if-supplier { display: none; }
/* ===== M6 Lager – Bestand, Artikel-Detail (articles) ===== */
/* Bestand (mockup Bestand.dc.html): column widths of its grid not covered above */
.c1-76 { --c1: 76px; } .c2-76 { --c2: 76px; } .c3-76 { --c3: 76px; } .c4-76 { --c4: 76px; } .c5-76 { --c5: 76px; } .c6-76 { --c6: 76px; } .c7-76 { --c7: 76px; } .c8-76 { --c8: 76px; } .c9-76 { --c9: 76px; } .c10-76 { --c10: 76px; } .c11-76 { --c11: 76px; } .c12-76 { --c12: 76px; } .c13-76 { --c13: 76px; } .c14-76 { --c14: 76px; } .c15-76 { --c15: 76px; } .c16-76 { --c16: 76px; }
.c1-90 { --c1: 90px; } .c2-90 { --c2: 90px; } .c3-90 { --c3: 90px; } .c4-90 { --c4: 90px; } .c5-90 { --c5: 90px; } .c6-90 { --c6: 90px; } .c7-90 { --c7: 90px; } .c8-90 { --c8: 90px; } .c9-90 { --c9: 90px; } .c10-90 { --c10: 90px; } .c11-90 { --c11: 90px; } .c12-90 { --c12: 90px; } .c13-90 { --c13: 90px; } .c14-90 { --c14: 90px; } .c15-90 { --c15: 90px; } .c16-90 { --c16: 90px; }
/* Artikel-Nr. in accent ink, cut; Bezeichnung semibold over at most two lines */
.list-stock .accent .cell-strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent-ink); }
.list-stock .cell-text.name { font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* figure cell (gd-resource CellLook::Figure; Bestand "Verfügbar"): bold value, warning dot, second line below */
.cell-figure { display: flex; flex-direction: column; align-items: flex-end; }
.cell-figure-value { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; white-space: nowrap; color: var(--text); }
.table-row .cell-figure-value.warn { color: var(--warn-ink); }
.cell-figure-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--warn-dot); }
/* Artikel-Detail (mockup Artikel-Detail.dc.html): title over two lines, labels 170 wide, six admin facts */
.article-head .title-line h1 { white-space: normal; }
.article-card .kv { grid-template-columns: 170px minmax(0, 1fr); }
.article-card .kv-value.strong { font-weight: 800; }
.article-card .admin-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* tab card: Verkaufspreise in two columns */
.price-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 46px; padding: 4px 22px 6px 22px; }
.price-col { display: flex; flex-direction: column; }
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) 90px 120px; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); }
.price-grid .right { text-align: right; }
.price-head { height: 38px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.price-row { height: 40px; font-size: 14px; }
.price-row:last-child { border-bottom: 0; }
.price-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.price-standard { padding: 1px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; }
.price-markup { color: var(--muted); }
.price-net { font-weight: 700; }
/* Kommissionen and Einträge in HERO (rows 48 high as in the mockup) */
.cols-commit { grid-template-columns: 150px minmax(0, 1fr) 90px 150px 160px; }
.cols-entries { grid-template-columns: 150px 130px 110px 110px 140px 150px minmax(0, 1fr); }
.order-row.commit-row, .order-row.entry-row, .order-row.commit-sum { min-height: 48px; }
.commit-row { text-decoration: none; color: inherit; }
.commit-project { font-weight: 700; color: var(--accent-ink); }
.order-row.commit-sum, .order-row.entry-row:last-child { border-bottom: 0; }
.commit-total { font-weight: 800; }
.order-row.entry-row .cell-chip { display: inline-block; }
.order-row .muted { color: var(--muted); }
.commit-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* ----- end articles ----- */

/* ===== M6 Lager – Lagerorte, Lagerort-Detail, Bewegungen (places) ===== */
/* column widths of the list (mockup Lagerorte-Liste grid 104 130 112 130 1fr 84 142) */
.c1-104 { --c1: 104px; } .c2-104 { --c2: 104px; } .c3-104 { --c3: 104px; } .c4-104 { --c4: 104px; } .c5-104 { --c5: 104px; } .c6-104 { --c6: 104px; } .c7-104 { --c7: 104px; } .c8-104 { --c8: 104px; } .c9-104 { --c9: 104px; } .c10-104 { --c10: 104px; } .c11-104 { --c11: 104px; } .c12-104 { --c12: 104px; } .c13-104 { --c13: 104px; } .c14-104 { --c14: 104px; } .c15-104 { --c15: 104px; } .c16-104 { --c16: 104px; }
.c1-142 { --c1: 142px; } .c2-142 { --c2: 142px; } .c3-142 { --c3: 142px; } .c4-142 { --c4: 142px; } .c5-142 { --c5: 142px; } .c6-142 { --c6: 142px; } .c7-142 { --c7: 142px; } .c8-142 { --c8: 142px; } .c9-142 { --c9: 142px; } .c10-142 { --c10: 142px; } .c11-142 { --c11: 142px; } .c12-142 { --c12: 142px; } .c13-142 { --c13: 142px; } .c14-142 { --c14: 142px; } .c15-142 { --c15: 142px; } .c16-142 { --c16: 142px; }
/* head (mockup Lagerorte): view switch, search 320 wide, outline button */
.list-head.list-places .list-search { width: 320px; }
.pl-search { display: contents; }
.pl-switch { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--field); }
.pl-switch-item { height: 36px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; display: flex; align-items: center; font-size: 13px; font-weight: 700; text-decoration: none; color: var(--muted); background: transparent; }
.pl-switch-item[aria-current="page"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-switch); }
.pl-button { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; text-decoration: none; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.list-places .list-create[aria-disabled="true"], .list-head.list-places .list-create[aria-disabled="true"], .pl-create[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.warn-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--warn-dot); flex-shrink: 0; }
.pl-foot { flex-shrink: 0; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.pl-foot-link { font-weight: 700; color: var(--text); text-decoration: none; }
/* view "Bereiche": side bar Lagerort › Bereich (250 wide) and the bins of the chosen area */
.pl-split { flex-grow: 1; min-height: 0; display: flex; gap: 20px; }
.pl-tree { width: 250px; flex-shrink: 0; box-sizing: border-box; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.pl-tree-search { padding: 12px 12px 8px 12px; }
.pl-tree-field { display: flex; align-items: center; gap: 8px; height: 38px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; background: var(--field); color: var(--muted); }
.pl-tree-field input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
.pl-tree-field:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.pl-tree-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 0 10px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.pl-site > summary { list-style: none; }
.pl-site > summary::-webkit-details-marker { display: none; }
.pl-site-row { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 800; cursor: pointer; }
.pl-chevron { color: var(--muted); display: flex; }
.pl-site[open] > summary .pl-chevron svg { transform: rotate(90deg); }
.pl-site-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-count { font-size: 12px; font-weight: 700; color: var(--muted); }
.pl-area { display: flex; align-items: center; gap: 8px; height: 36px; box-sizing: border-box; margin-top: 2px; padding: 0 10px 0 30px; border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; }
.pl-area[aria-current="page"] { background: var(--field); font-weight: 700; }
.pl-area[hidden] { display: none; }
.pl-area-name { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-tree-foot { padding: 10px 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.pl-legend { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.pl-create { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; background: var(--field); color: var(--text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; }
.pl-bins { flex-grow: 1; min-width: 0; min-height: 0; overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.pl-bins-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.pl-bins-head h2 { margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; }
.pl-meta { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pl-cols { display: grid; grid-template-columns: 116px 140px minmax(0, 1fr) 84px 142px; gap: 12px; align-items: center; }
.pl-thead { flex-shrink: 0; height: 46px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.pl-th { display: flex; align-items: center; justify-content: flex-start; gap: 5px; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.pl-th.end { justify-content: flex-end; }
.pl-th svg { flex-shrink: 0; }
.pl-th-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; }
.pl-row { text-decoration: none; color: var(--text); min-height: 54px; box-sizing: border-box; padding: 8px 18px; font-size: 14px; line-height: 19px; border-bottom: 1px solid var(--line); }
.pl-code { font-weight: 700; white-space: nowrap; }
.pl-nr { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--accent-ink); }
.pl-row .pl-name { font-weight: 600; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text); }
.pl-num { text-align: right; white-space: nowrap; }
.pl-row .muted, .pl-vehicle .muted { color: var(--muted); }
.pl-vehicle { text-decoration: none; color: var(--text); display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 18px; background: var(--field); border-bottom: 1px solid var(--line); font-size: 14px; }
.pl-vehicle-code { width: 116px; flex-shrink: 0; }
.pl-vehicle-count { font-size: 13px; color: var(--muted); }
/* view "Liste" (gd-resource, class list-places): area with dot, article number in the accent colour */
.cell-dot { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.cell-dot-text { overflow: hidden; text-overflow: ellipsis; }
.list-places .cell-text.pl-accent { font-weight: 700; color: var(--accent-ink); }
.list-places .cell-text.pl-accent.muted { color: var(--muted); }
.list-places .cell-text.pl-name { font-weight: 600; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* Lagerort-Detail (mockups Lagerort, Lagerort-Bewegungen) */
.kv.pl-kv { grid-template-columns: 150px minmax(0, 1fr); }
.pl-lines { display: flex; flex-direction: column; }
.detail-col.pl-label-col { padding-bottom: 16px; }
.pl-label-row { display: flex; gap: 18px; align-items: center; padding-top: 14px; }
.pl-label-box { padding: 12px; border-radius: 14px; background: var(--field); }
.pl-label-box:empty { display: none; }
.pl-label-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: 13px; color: var(--muted); }
.pl-label-text b { color: var(--text); }
.detail-button.pl-print { box-sizing: border-box; display: flex; align-items: center; gap: 8px; text-decoration: none; }
[data-pl-reiter] .detail-tab { box-sizing: border-box; text-decoration: none; }
.pl-tab-head { height: 40px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.pl-stock { display: grid; grid-template-columns: 130px minmax(0, 1fr) 100px 140px 110px 110px; gap: 14px; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); }
.pl-stock .end, .pl-tab-head .end, .pl-place-row .end { text-align: right; }
.pl-stock-row { height: 46px; font-size: 14px; }
.pl-link { font-weight: 700; color: var(--accent-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-cut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-strong { font-weight: 600; }
.pl-nowrap { white-space: nowrap; }
.pl-actions { display: flex; justify-content: flex-end; }
.pl-small { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.pl-everywhere { display: flex; flex-direction: column; padding: 14px 22px 4px 22px; }
.pl-h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 800; }
.pl-place-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 140px 110px; gap: 14px; align-items: center; height: 42px; font-size: 14px; border-bottom: 1px solid var(--line); }
.pl-strong-code { font-weight: 700; }
.pl-yes { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--text); }
.pl-yes.no { color: var(--muted); }
.pl-sums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 46px; padding: 12px 0 6px 0; }
.pl-sum { display: flex; flex-direction: column; gap: 2px; }
.pl-sum-value { font-size: 15px; font-weight: 700; color: var(--text); }
.pl-bar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); }
.pl-empty { padding: 14px 22px; font-size: 14px; color: var(--muted); border-bottom: 1px solid var(--line); }
.pl-moves { display: grid; grid-template-columns: 140px 90px minmax(0, 1fr) 90px 150px 130px 110px; gap: 14px; align-items: center; padding: 0 22px; border-bottom: 1px solid var(--line); }
.pl-move { min-height: 52px; box-sizing: border-box; padding: 6px 22px; font-size: 14px; }
.pl-move:has(+ .pl-bar), .pl-empty:has(+ .pl-bar) { border-bottom: 0; }
.pl-article { display: flex; flex-direction: column; min-width: 0; }
.pl-article-nr { font-weight: 700; color: var(--text); white-space: nowrap; }
.pl-article-name { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-move-qty { text-align: right; white-space: nowrap; font-weight: 700; color: var(--text); }
.pl-doc { white-space: nowrap; font-weight: 700; text-decoration: none; color: var(--text); }
.pl-doc.link { color: var(--accent-ink); }
.pl-doc.muted { color: var(--muted); }
.pl-switch-item:focus-visible, .pl-button:focus-visible, .pl-area:focus-visible, .pl-site-row:focus-visible, .pl-create:focus-visible,
.pl-row:focus-visible, .pl-vehicle:focus-visible, .pl-small:focus-visible, .pl-link:focus-visible, .pl-doc.link:focus-visible,
.pl-foot-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ----- end places ----- */

/* ===== M6 Lager – Umlagerungen, Arbeitsplatz (transfers) ===== */
/* list (mockup Umlagerungen.dc.html): "heute …" next to the title, head buttons, column widths and cells */
.list-sub { font-size: 14px; color: var(--muted); white-space: nowrap; }
.list-link { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.list-link.primary { border: 0; background: var(--accent); color: var(--accent-text); }
.list-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.list-head.list-transfers .list-search { width: 320px; }
.c1-170 { --c1: 170px; } .c2-170 { --c2: 170px; } .c3-170 { --c3: 170px; } .c4-170 { --c4: 170px; } .c5-170 { --c5: 170px; } .c6-170 { --c6: 170px; } .c7-170 { --c7: 170px; } .c8-170 { --c8: 170px; } .c9-170 { --c9: 170px; } .c10-170 { --c10: 170px; } .c11-170 { --c11: 170px; } .c12-170 { --c12: 170px; } .c13-170 { --c13: 170px; } .c14-170 { --c14: 170px; } .c15-170 { --c15: 170px; } .c16-170 { --c16: 170px; }
.cell-chipsub { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.list-transfers .nr .cell-strong { font-weight: 800; color: var(--accent-ink); }
.list-transfers .cell-stack .cell-sub { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.list-transfers .cell-plain.w-96 { white-space: nowrap; }

/* new transfer (mockups Umlagerung-Neu*.dc.html): the form has no box; head, cards and rows as the mockup */
.tf-form { display: contents; }
a.detail-button.tf-link { box-sizing: border-box; display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; }
.tf-card { flex-shrink: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.tf-order { padding: 16px 22px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.tf-order-head { display: flex; align-items: center; gap: 16px; }
.tf-order-head h2 { margin: 0; font-size: 17px; font-weight: 800; flex-grow: 1; }
.tf-switch { display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--field); }
.tf-switch-option { height: 36px; padding: 0 16px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; background: transparent; color: var(--muted); box-shadow: none; }
.tf-switch-option[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-option); }
.tf-fields { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; gap: 14px 24px; }
.tf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tf-label { font-size: 12px; color: var(--muted); }
.tf-box { position: relative; height: 42px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; background: var(--field); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; }
.tf-box:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.tf-input { flex-grow: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: none; background: transparent; font: inherit; color: inherit; appearance: none; }
select.tf-input { cursor: pointer; }
select.tf-input option { background: var(--card); color: var(--text); }
.tf-chevron { flex-shrink: 0; color: var(--muted); pointer-events: none; }
/* the native picker of the date fields lies (invisible) over the chevron of the mockup */
.tf-date::-webkit-calendar-picker-indicator { position: absolute; top: 0; right: 0; bottom: 0; width: 42px; height: auto; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.tf-pick { flex-shrink: 0; display: flex; padding: 0; border: 0; background: transparent; color: var(--muted); }
.tf-positions { position: relative; }
.tf-pos-head { display: flex; align-items: center; gap: 10px; padding: 14px 22px; }
.tf-pos-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.tf-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.tf-search-wrap { position: relative; }
.tf-search { display: flex; align-items: center; gap: 10px; width: 340px; height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; background: var(--field); color: var(--muted); }
.tf-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.tf-search input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
/* hits of the article search (no mockup state): a menu under the field as the column menus */
.tf-hits { position: absolute; top: 46px; left: 0; z-index: 10; width: 420px; box-sizing: border-box; max-height: 360px; overflow-y: auto; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px; }
.tf-hits.empty { display: none; }
.tf-hit { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; box-sizing: border-box; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; color: var(--text); text-align: left; cursor: pointer; }
.tf-hit:hover, .tf-hit:focus-visible { background: var(--hover); outline: none; }
.tf-hit-nr { flex-shrink: 0; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.tf-hit-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-hit-none { padding: 8px 10px; font-size: 14px; color: var(--muted); }
.tf-small { height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.tf-grid { display: grid; grid-template-columns: 124px minmax(0, 1fr) 96px 124px 130px 124px 34px; gap: 14px; align-items: center; }
.tf-thead { height: 40px; padding: 0 22px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tf-thead .num, .tf-row .num { text-align: right; }
.tf-thead .center { text-align: center; }
.tf-row { min-height: 54px; box-sizing: border-box; padding: 6px 22px; font-size: 14px; border-bottom: 1px solid var(--line); }
.tf-nr { font-weight: 700; color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tf-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-name-text { font-weight: 600; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text); }
.tf-hint { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--warn-ink); }
.tf-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--warn-dot); }
.tf-vehicle { color: var(--muted); }
.tf-avail { color: var(--text); }
.tf-avail.warn { color: var(--warn-ink); }
.tf-qty { display: flex; align-items: center; justify-content: center; gap: 8px; }
.tf-step { width: 30px; height: 30px; border-radius: 10px; border: 0; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.tf-qty-input { min-width: 34px; width: 34px; field-sizing: content; padding: 0; border: 0; outline: none; background: transparent; font: inherit; text-align: center; font-size: 15px; font-weight: 800; color: var(--text); }
.tf-qty-input:focus-visible { box-shadow: inset 0 -1px 0 var(--accent); }
.tf-serial { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tf-remove { width: 30px; height: 30px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.tf-info { display: flex; align-items: center; gap: 14px; padding: 14px 22px; font-size: 13px; color: var(--muted); }
.tf-info svg { flex-shrink: 0; }
.tf-info-text { flex-grow: 1; line-height: 18px; }
.tf-switch-option:focus-visible, .tf-small:focus-visible, .tf-step:focus-visible, .tf-remove:focus-visible, .tf-nr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* detail (mockup Umlagerung-Detail.dc.html): stamm card as Kunde-Detail; vehicle with QR, flow, tab card */
.tf-note { white-space: pre-line; }
.tf-vehicle-card { display: flex; gap: 20px; padding-top: 12px; }
.tf-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.tf-qr-code svg { display: block; width: 150px; height: 150px; border-radius: 10px; }
.tf-qr-nr { font-size: 12px; font-weight: 700; color: var(--muted); }
.tf-vehicle-facts { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; margin-top: -9px; }
.kv.tf-kv { grid-template-columns: 90px minmax(0, 1fr); }
.detail-block.tf-flow { padding-bottom: 18px; }
.tf-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 46px; margin: 0; padding: 14px 0 0 0; list-style: none; }
.tf-step-item { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.tf-step-mark { width: 26px; height: 26px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; background: var(--field); color: var(--muted); }
.tf-step-mark.done { background: var(--accent); color: var(--accent-text); }
.tf-step-mark.current { background: var(--accent-soft); color: var(--accent-ink); }
.tf-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tf-step-title { font-size: 14px; font-weight: 700; color: var(--text); }
.tf-step-title.muted { color: var(--muted); }
.tf-step-sub { font-size: 12px; color: var(--muted); }
.tf-tabcard { flex-shrink: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.tf-tabs { display: flex; align-items: flex-end; gap: 4px; padding: 0 22px; border-bottom: 1px solid var(--line); }
.tf-tab { height: 48px; box-sizing: border-box; padding: 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 15px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tf-tab.tf-tab-positions:has(input:checked), .tf-tab.tf-tab-history:has(input:checked) { border-bottom-color: var(--accent); font-weight: 800; color: var(--text); }
.tf-tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.tf-tab-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.tf-panel-history { display: none; }
.tf-tabcard:has(.tf-tab-history input:checked) .tf-panel-history { display: block; }
.tf-tabcard:has(.tf-tab-history input:checked) .tf-panel-positions { display: none; }
.tf-dgrid { display: grid; grid-template-columns: 40px 130px minmax(0, 1fr) 90px 80px 170px; gap: 14px; align-items: center; padding: 0 22px; }
.tf-hgrid { display: grid; grid-template-columns: 150px 220px minmax(0, 1fr); gap: 14px; align-items: center; padding: 0 22px; }
.tf-dthead { height: 40px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.tf-drow { height: 46px; font-size: 14px; border-bottom: 1px solid var(--line); }
.tf-drow:last-child { border-bottom: 0; }
.tf-dgrid .num { text-align: right; }
.tf-cut { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.tf-semi { font-weight: 600; }
.tf-strong { font-weight: 700; }

/* workstation (kiosk, mockups Arbeitsplatz*.dc.html): the whole window, no app navigation */
.kiosk { height: 100%; display: flex; background: var(--bg); color: var(--text); }
.ws { width: 100%; height: 100%; display: flex; flex-direction: column; }
.ws-head { flex-shrink: 0; height: 72px; box-sizing: border-box; padding: 0 28px; display: flex; align-items: center; gap: 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.ws-logo { width: 38px; height: 38px; object-fit: contain; flex-shrink: 0; }
.ws-title { display: flex; flex-direction: column; }
.ws-name { font-size: 18px; font-weight: 800; }
.ws-sub { font-size: 13px; color: var(--muted); }
.ws-beleg { font-size: 13px; color: var(--muted); }
.ws-toggle { height: 44px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ws-box { width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px; border: 0; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.ws-sep { width: 1px; height: 32px; background: var(--line); }
.ws-user { display: flex; flex-direction: column; align-items: flex-end; }
.ws-user-name { font-size: 14px; font-weight: 700; }
.ws-user-sub { font-size: 12px; color: var(--muted); }
.ws-card { border-radius: 24px; background: var(--card); box-shadow: var(--shadow); }
.ws-wait { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; padding: 28px; }
.ws-scan { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 30px; }
.ws-frame { width: 220px; height: 220px; box-sizing: border-box; border-radius: 28px; border: 3px dashed var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.ws-scan-title { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.ws-scan-form { display: contents; }
.ws-scan-field { display: flex; align-items: center; gap: 10px; width: 380px; height: 52px; box-sizing: border-box; padding: 0 18px; border-radius: 999px; background: var(--field); color: var(--muted); }
.ws-scan-field:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.ws-scan-field input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.ws-lists { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.ws-list { overflow: hidden; display: flex; flex-direction: column; }
.ws-list-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.ws-list-head h2 { margin: 0; font-size: 18px; font-weight: 800; flex-grow: 1; }
.ws-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--field); color: var(--muted); }
.ws-entry-form { display: contents; }
.ws-entry { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%; padding: 14px 22px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: var(--text); text-align: left; text-decoration: none; cursor: pointer; }
.ws-list > .ws-entry-form:last-child > .ws-entry { border-bottom: 0; }
.ws-entry:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ws-entry-nr { font-size: 16px; font-weight: 800; color: var(--accent-ink); }
.ws-entry-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-entry-title { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-entry-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.ws-entry-chip { font-size: 13px; }
.ws-check { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 24px; padding: 24px 28px; }
.ws-info { padding: 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.ws-nr { font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.ws-chips { display: flex; gap: 8px; padding: 6px 0 12px 0; }
.ws-fact { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.ws-fact-label { font-size: 12px; color: var(--muted); }
.ws-fact-value { font-size: 15px; font-weight: 700; color: var(--text); }
.ws-fact-value.muted { color: var(--muted); }
.ws-cancel { height: 48px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--text); }
.ws-positions { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.ws-pos-head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.ws-pos-head h2 { margin: 0; font-size: 18px; font-weight: 800; flex-grow: 1; }
.notice.ws-error { padding: 10px 22px 0 22px; }
.ws-grid { display: grid; grid-template-columns: 56px minmax(0, 1fr) 80px 170px; gap: 16px; align-items: center; padding: 0 22px; }
.ws-thead { flex-shrink: 0; height: 40px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.ws-thead .num, .ws-soll { text-align: right; }
.ws-thead .center { text-align: center; }
.ws-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; }
.ws-row { min-height: 84px; box-sizing: border-box; padding: 10px 22px; border-bottom: 1px solid var(--line); background: transparent; }
.ws-row.open { background: var(--row-open); }
.ws-tick { width: 48px; height: 48px; box-sizing: border-box; border-radius: 14px; border: 2px solid var(--line); background: transparent; color: var(--accent-text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ws-tick.on { border: 0; background: var(--accent); }
.ws-article { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ws-art-nr { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.ws-art-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.ws-dev { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--warn-ink); white-space: nowrap; }
.ws-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 999px; background: var(--warn-dot); }
.ws-reason { min-width: 90px; field-sizing: content; padding: 0; border: 0; border-bottom: 1px solid var(--line); outline: none; background: transparent; font: inherit; color: var(--warn-ink); }
.ws-reason:focus-visible { border-bottom-color: var(--accent); }
.ws-soll { font-size: 18px; font-weight: 800; color: var(--muted); }
.ws-ist { display: flex; align-items: center; justify-content: center; gap: 10px; }
.ws-step { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ws-ist-input { min-width: 36px; width: 36px; field-sizing: content; padding: 0; border: 0; outline: none; background: transparent; font: inherit; text-align: center; font-size: 22px; font-weight: 800; color: var(--text); }
.ws-ist-input.warn { color: var(--warn-ink); }
.ws-ist-input:focus-visible { box-shadow: inset 0 -2px 0 var(--accent); }
.ws-foot { flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 16px 22px; border-top: 1px solid var(--line); }
.ws-foot-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; }
.ws-foot-title { font-size: 16px; font-weight: 800; }
.ws-foot-sub { font-size: 13px; color: var(--muted); }
.ws-book { height: 56px; box-sizing: border-box; padding: 0 28px; border-radius: 999px; border: 0; background: var(--field); color: var(--muted); font: inherit; font-size: 17px; font-weight: 800; display: flex; align-items: center; white-space: nowrap; }
.ws-book.ready { background: var(--accent); color: var(--accent-text); cursor: pointer; }
.ws-toggle:focus-visible, .ws-tick:focus-visible, .ws-step:focus-visible, .ws-cancel:focus-visible, .ws-book:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Stornieren: refusal inside the confirmation dialog */
.storno-message .notice { margin: 14px 22px 0 22px; }
/* ----- end transfers ----- */

/* ===== M6 Lager – Etiketten, Druck (labels) ===== */
/* Etiketten drucken (mockups Etiketten, Etiketten-Bogen, -NurQR, -NurGS1, -Dunkel): head buttons */
.labels-print { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; border: 0; background: var(--accent); color: var(--accent-text); }
.labels-pdf { box-sizing: border-box; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.labels-print:focus-visible, .labels-pdf:focus-visible, .labels-more:focus-visible, .labels-format:has(input:focus-visible),
.labels-bin input:focus-visible, .labels-switch input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.labels-page { flex-grow: 1; min-height: 0; display: flex; gap: 20px; }
/* left card: Auswahl, Format, Inhalt, Drucker */
.labels-side { width: 400px; flex-shrink: 0; box-sizing: border-box; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
/* the card shows six bins as the mockup (its content runs into the bottom padding there), more scroll */
.labels-choice { display: flex; flex-direction: column; }
.labels-choice-head { display: flex; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.labels-choice-head h2 { margin: 0; flex-grow: 1; font-size: 16px; font-weight: 800; }
.labels-pick { font-size: 13px; font-weight: 700; color: var(--accent-ink); text-decoration: none; }
.labels-bins { max-height: calc(6 * 37px - 1px); overflow-y: auto; }
.labels-bin { display: flex; align-items: center; gap: 10px; height: 36px; font-size: 14px; border-bottom: 1px solid var(--line); cursor: pointer; }
.labels-bin:last-child { border-bottom: 0; }
.labels-bin b { width: 112px; flex-shrink: 0; }
.labels-bin span { min-width: 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the mockup draws its checkboxes in the light scheme in both themes */
.labels-bin input, .labels-switch input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); color-scheme: light; }
.labels-h { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 800; }
.labels-formats { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.labels-format { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-align: left; cursor: pointer; }
.labels-format:has(input:checked) { border: 2px solid var(--accent); }
.labels-radio { width: 16px; height: 16px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--line); flex-shrink: 0; }
.labels-format:has(input:checked) .labels-radio { border: 5px solid var(--accent); }
.labels-format-text { display: flex; flex-direction: column; }
.labels-format-name { font-size: 14px; font-weight: 700; }
.labels-format-note { font-size: 13px; color: var(--muted); }
.labels-content { display: flex; flex-direction: column; flex-shrink: 0; }
.labels-switch { display: flex; align-items: center; gap: 10px; height: 34px; font-size: 14px; border-bottom: 1px solid var(--line); }
.labels-switch:has(+ .labels-more) { border-bottom: 0; }
.labels-switch-name { font-weight: 600; }
.labels-switch-note { flex-grow: 1; color: var(--muted); font-size: 13px; }
.labels-more { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; align-self: flex-start; margin-top: 10px; }
.labels-printer { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; flex-shrink: 0; }
.labels-printer-label { font-size: 13px; color: var(--muted); }
.labels-printer-value { height: 38px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; background: var(--field); color: var(--muted); display: flex; align-items: center; font-weight: 600; }
/* right card: Vorschau */
.labels-preview { flex-grow: 1; min-width: 0; min-height: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.labels-preview-head { display: flex; align-items: center; gap: 10px; height: 52px; flex-shrink: 0; padding: 0 22px; border-bottom: 1px solid var(--line); }
.labels-preview-head h2 { margin: 0; flex-grow: 1; font-size: 16px; font-weight: 800; }
/* centred like the mockup; more labels or sheets than fit scroll inside */
.labels-stage { flex-grow: 1; min-height: 0; box-sizing: border-box; padding: 24px; background: var(--field); display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 18px; overflow: auto; }
.labels-grid { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px; justify-content: center; }
/* one label; all sizes in label millimetres: --u is one millimetre (preview 3.1 px, sheet preview 2.119 px,
   Lagerort card 3.4 px, print 1 mm), --h the label height in millimetres */
.label { --u: 3.1px; --h: 50; width: calc(100 * var(--u)); height: calc(var(--h) * var(--u)); flex-shrink: 0; box-sizing: border-box; padding: calc(3 * var(--u)); border-radius: calc(1.5 * var(--u)); background: var(--paper); color: var(--paper-ink); box-shadow: var(--shadow-label); display: flex; flex-direction: column; gap: calc(2 * var(--u)); overflow: hidden; }
.label-top { display: flex; gap: calc(3 * var(--u)); min-height: 0; }
.label .code-qr { display: block; flex-shrink: 0; width: calc((var(--h) - 22) * var(--u)); height: calc((var(--h) - 22) * var(--u)); }
.label-text { display: flex; flex-direction: column; gap: calc(0.9 * var(--u)); min-width: 0; flex-grow: 1; }
.label-place { font-size: calc(3 * var(--u)); line-height: 1.15; font-weight: 700; color: var(--paper-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-name { font-size: calc(4 * var(--u)); line-height: 1.15; font-weight: 800; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.label-nr { font-size: calc(4.6 * var(--u)); line-height: 1.1; font-weight: 800; letter-spacing: calc(-0.032 * var(--u)); white-space: nowrap; }
.label-gs1 { display: flex; flex-direction: column; align-items: center; gap: calc(0.6 * var(--u)); }
.label .code-gs1 { display: block; width: 100%; height: calc(11 * var(--u)); }
.label-hri { font-size: calc(2.8 * var(--u)); line-height: 1; letter-spacing: calc(0.13 * var(--u)); font-family: ui-monospace, monospace; }
.label.qr-only .label-top { gap: calc(3.5 * var(--u)); align-items: center; height: 100%; }
.label.qr-only .code-qr { width: calc((var(--h) - 6) * var(--u)); height: calc((var(--h) - 6) * var(--u)); }
.label.gs1-only .label-top { flex-grow: 1; }
.label.gs1-only .code-gs1 { height: calc(14 * var(--u)); }
.code-paper { fill: var(--paper); }
.code-ink { fill: var(--paper-ink); }
/* A4 sheet: 2 × 5 labels of 105 × 57 mm, 6 mm top and bottom (mockup Etiketten-Bogen) */
.labels-sheet { --u: 2.119px; width: calc(210 * var(--u)); height: calc(297 * var(--u)); flex-shrink: 0; box-sizing: border-box; padding: calc(6 * var(--u)) 0; background: var(--paper); box-shadow: var(--shadow-sheet); display: grid; grid-template-columns: repeat(2, max-content); align-content: start; }
.labels-sheet .label { --u: 2.119px; --h: 57; width: calc(105 * var(--u)); border-radius: 0; outline: 1px dashed var(--paper-line); outline-offset: -1px; box-shadow: none; }
.labels-slot { width: calc(105 * var(--u) - 1px); height: calc(57 * var(--u) - 1px); box-sizing: border-box; border: 1px dashed var(--paper-slot); border-radius: 3px; }
/* Etikett card of the Lagerort detail page (mockup Lagerort: frame 12 px, label at 3.4 px per mm) */
.label-frame { padding: 12px; border-radius: 14px; background: var(--field); }
.label-frame .label { --u: 3.4px; }
/* print: only the labels, one label per 100 × 50 mm page or one A4 sheet per page, without page margins */
@page labels-single { size: 100mm 50mm; margin: 0; }
@page labels-a4 { size: A4; margin: 0; }
@media print {
  html:has(.labels-page), html:has(.labels-page) body { background: none; height: auto; }
  body:has(.labels-page) .sidebar, .labels-head, .labels-side, .labels-preview-head, body:has(.labels-page) .toast-slot { display: none !important; }
  body:has(.labels-page) .shell, body:has(.labels-page) .content, .labels-page, .labels-preview, .labels-stage, .labels-grid {
    display: block; width: auto; height: auto; min-height: 0; padding: 0; margin: 0; gap: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible;
  }
  .labels-grid .label { --u: 1mm; page: labels-single; border-radius: 0; box-shadow: none; }
  .labels-grid .label + .label, .labels-sheet + .labels-sheet { break-before: page; }
  .labels-sheet { --u: 1mm; page: labels-a4; box-shadow: none; overflow: hidden; }
  .labels-sheet .label { --u: 1mm; outline: none; }
  .labels-slot { border: 0; }
}
/* ----- end labels ----- */

/* ===== M6 Lager – Scannen mobil, Einstellungen Lager (scan) ===== */
/* Mobile frame (gd_ui::page_mobile, mockup Mobil-*: 390 × 844, bottom bar with five areas) */
.mobile-shell {
  height: 100vh;
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}
.mobile-main { flex-grow: 1; min-height: 0; display: flex; flex-direction: column; }
.mobile-nav {
  flex-shrink: 0;
  height: 76px;
  box-sizing: border-box;
  padding: 8px 8px 14px 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--card);
  border-top: 1px solid var(--line);
}
.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.mobile-nav-link[aria-current="page"] { font-weight: 700; color: var(--accent-ink); }

/* Scannen (mockups Mobil-Scan, -Fach, -Menge, -Gebucht, -Umlagern) */
.scan-head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px 8px; }
.scan-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.scan-head h1 { margin: 0; font-size: 20px; font-weight: 800; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-modes { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--field); }
.scan-mode {
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.scan-mode[aria-current="page"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-switch); }
.scan-body { flex-grow: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 16px 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.scan-steps { flex-shrink: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scan-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scan-step { display: flex; flex-direction: column; gap: 5px; }
.scan-step-bar { height: 4px; border-radius: 999px; background: var(--line); }
.scan-step-label { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.scan-step.done .scan-step-bar { background: var(--accent); }
.scan-step.current .scan-step-bar { background: var(--text); }
.scan-step.done .scan-step-label, .scan-step.current .scan-step-label { color: var(--text); }
.scan-done { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.scan-done-check { width: 28px; height: 28px; flex-shrink: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.scan-done-text { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.scan-done-label { font-size: 12px; color: var(--muted); }
.scan-done-value { font-size: 14px; font-weight: 800; color: var(--text); white-space: nowrap; }
.scan-done-value.article { color: var(--accent-ink); }
.scan-done-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-change {
  height: 40px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.scan-title { flex-shrink: 0; font-size: 17px; font-weight: 800; padding: 2px 2px 0 2px; }
.scan-frame { flex-shrink: 0; height: 250px; border: 0; border-radius: 18px; background: var(--scan-frame); position: relative; overflow: hidden; cursor: pointer; font: inherit; }
.scan-mask { position: absolute; left: 50%; top: 50%; width: 220px; height: 150px; transform: translate(-50%, -54%); border-radius: 16px; box-shadow: 0 0 0 999px var(--scan-mask); }
.scan-corners { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); stroke: var(--scan-corner); }
.scan-line { position: absolute; left: 50%; top: 50%; width: 200px; height: 2px; transform: translate(-50%, -54%); background: var(--scan-line); box-shadow: 0 0 10px var(--scan-line); }
.scan-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; font-weight: 600; color: var(--scan-hint); }
/* camera picture (app.js, only where the browser can read codes) */
.scan-video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.scan-frame.live .scan-video { display: block; }
.scan-form { display: contents; }
.scan-input { flex-shrink: 0; display: flex; align-items: center; gap: 10px; height: 46px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; background: var(--field); color: var(--muted); }
.scan-input input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.scan-input:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.scan-message { flex-shrink: 0; font-size: 12px; line-height: 16px; color: var(--muted); padding: 0 4px; }
.scan-message.error { color: var(--tone-red-fg); }
.scan-list { flex-shrink: 0; padding: 4px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.scan-list-head { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px 0; }
.scan-list-title { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); flex-grow: 1; }
.scan-list-nr { font-size: 12px; font-weight: 700; color: var(--accent-ink); }
.scan-row {
  min-height: 48px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.scan-row-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.scan-row-nr { font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.scan-row-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-row-qty { font-size: 13px; font-weight: 800; white-space: nowrap; }
.scan-card { flex-shrink: 0; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.scan-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.scan-label.sep { padding-top: 4px; border-top: 1px solid var(--line); }
.scan-qty { display: flex; align-items: center; gap: 12px; }
.scan-qty-button { width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.scan-qty-value { flex-grow: 1; text-align: center; font-size: 26px; font-weight: 800; }
.scan-qty-input {
  field-sizing: content;
  min-width: 1ch;
  max-width: 7ch;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: var(--text);
  text-align: center;
}
.scan-qty-input:focus-visible { box-shadow: 0 2px 0 var(--accent); }
.scan-qty-unit { font-size: 16px; font-weight: 700; color: var(--muted); }
.scan-origins { display: flex; flex-direction: column; gap: 6px; }
.scan-origin {
  min-height: 44px;
  box-sizing: border-box;
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font: inherit;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}
.scan-origin:has(.scan-radio:checked) { border: 2px solid var(--accent); }
.scan-radio { appearance: none; margin: 0; width: 16px; height: 16px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--line); flex-shrink: 0; cursor: pointer; }
.scan-radio:checked { border: 5px solid var(--accent); }
.scan-radio:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scan-origin-text { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.scan-origin-title { font-size: 14px; font-weight: 700; }
.scan-origin-sub { font-size: 12px; color: var(--muted); }
.scan-origin-field { padding: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 12px; color: var(--text); }
.scan-origin-field::placeholder { color: var(--muted); opacity: 1; }
.scan-origin-field:focus-visible { box-shadow: 0 1px 0 var(--accent); }
.scan-submit { flex-shrink: 0; height: 50px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.scan-booked { flex-shrink: 0; padding: 18px 16px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.scan-booked-check { width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.scan-booked-title { font-size: 17px; font-weight: 800; }
.scan-booked-text { font-size: 13px; line-height: 18px; color: var(--muted); }
.scan-actions { flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scan-action {
  height: 46px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--field);
  color: var(--text);
  text-decoration: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
}
.scan-action.primary { background: var(--accent); color: var(--accent-text); }
.scan-back:focus-visible, .scan-mode:focus-visible, .scan-change:focus-visible, .scan-frame:focus-visible, .scan-row:focus-visible,
.scan-qty-button:focus-visible, .scan-submit:focus-visible, .scan-action:focus-visible, .mobile-nav-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Einstellungen › Lager (mockup Einstellungen-Lager): two columns, segments of the label settings */
.columns.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* Einstellungen › Module: module switches beside the lock times (mockup 1.3fr / 1fr) */
.columns.modules { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.setting-label.muted, .setting-value.muted { color: var(--muted); }
.setting-segments { display: flex; gap: 2px; padding: 3px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); flex-shrink: 0; }
.setting-segment {
  height: 30px;
  white-space: nowrap;
  padding: 0 14px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.setting-segment[aria-pressed="true"] { font-weight: 800; background: var(--card); color: var(--text); box-shadow: var(--shadow-segment); }
/* Einstellungen › Benachrichtigungen (mockup Einstellungen-Benachrichtigungen): trigger × way, the groups on the
   header ground with their scope */
.nb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px 120px 120px; gap: 16px; align-items: center; padding: 0 22px; }
.nb-columns { height: 46px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.nb-columns span + span { text-align: center; }
.nb-group { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px; background: var(--header); }
.nb-group-title { font-size: 14px; font-weight: 800; flex-grow: 1; }
.nb-scope-label { font-size: 13px; color: var(--header-label); }
.nb-time { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nb-time input {
  width: 104px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.nb-row { height: 52px; border-bottom: 1px solid var(--line); }
.nb-row.last { border-bottom: 0; }
.nb-label { font-size: 15px; font-weight: 700; }
.nb-cell { display: flex; justify-content: center; }
.nb-cell .switch[aria-disabled="true"] { cursor: default; }
.facts-value.muted { color: var(--header-label); }
/* Einstellungen › Experimentell (mockup Einstellungen-Experimentell): one row per catalog area, dimmed while the
   main switch is off */
.exp-row, .look-row { display: flex; align-items: center; gap: 14px; min-height: 60px; box-sizing: border-box; padding: 0 22px; border-bottom: 1px solid var(--line); }
.exp-row:last-child, .look-row:last-child { border-bottom: 0; }
.exp-row.off { opacity: 0.45; }
.exp-row .switch[aria-disabled="true"] { cursor: default; }
.exp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.exp-title { font-size: 15px; font-weight: 700; }
.exp-widgets { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-count { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; }
/* Einstellungen › Logistik (mockup Einstellungen-Logistik): number with unit, weekday buttons, multi-select */
.setting-number { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.setting-number input {
  width: 72px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
.setting-unit { width: 40px; font-size: 13px; color: var(--muted); }
.setting-days { display: flex; gap: 4px; }
.setting-day { width: 38px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.setting-day[aria-pressed="true"] { border-color: var(--chip-review-bg); background: var(--chip-review-bg); color: var(--text); }
.setting-day:disabled { cursor: default; }
/* Abfahrt (mockup Fachvorgaben row "uhr"): a time field 104 px with the unit "Uhr" */
.setting-time { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.setting-time input {
  width: 104px;
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  color-scheme: light;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}
[data-theme="dark"] .setting-time input { color-scheme: dark; }
@media (prefers-color-scheme: dark) { [data-theme="system"] .setting-time input { color-scheme: dark; } }
/* Montage-Kategorien (mockup Fachvorgaben row "multi"): the chosen ones as chips with ×, the button „+ Kategorie“
   opens the list */
.setting-chips { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; max-width: 250px; }
.setting-chip { display: flex; align-items: center; gap: 2px; height: 30px; box-sizing: border-box; padding: 0 4px 0 12px; border-radius: 999px; background: var(--chip-review-bg); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; }
.setting-chip-remove { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.setting-chip-remove:disabled { cursor: default; }
.setting-chips > details { position: static; }
.setting-chips > details > summary { list-style: none; }
.setting-chips > details > summary::-webkit-details-marker { display: none; }
.setting-add { height: 30px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.setting-chips .setting-multi-list { top: 38px; width: 300px; }
/* a single choice (mockup Fachvorgaben row "einzel"): 210 px */
.setting-multi.single { width: 210px; }
.setting-multi-text.muted { color: var(--muted); }
.setting-multi-button[aria-disabled="true"] { cursor: default; }
/* unbuilt setting shown inert like a locked switch: half transparent, no on/off or day picked */
.setting-locked { opacity: 0.45; }
.setting-locked, .setting-locked .setting-day { cursor: default; }
/* the selection menu reaches over the card edge (mockup karte(menue=True)) */
.card.with-menu { overflow: visible; }
.setting-multi { position: relative; width: 190px; flex-shrink: 0; }
.setting-multi > summary { list-style: none; }
.setting-multi > summary::-webkit-details-marker { display: none; }
.setting-multi-button {
  width: 100%;
  height: 36px;
  box-sizing: border-box;
  padding: 0 12px 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.setting-multi-text { flex-grow: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setting-multi-list {
  position: absolute;
  top: 44px;
  right: 0;
  z-index: 6;
  min-width: 100%;
  box-sizing: border-box;
  padding: 6px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-pop), 0 0 0 1px var(--line);
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow-y: auto;
}
.setting-option {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.setting-option[aria-selected="true"] { background: var(--field); font-weight: 800; }
.setting-option-text { flex-grow: 1; }
.setting-option-check { width: 16px; color: var(--accent-ink); opacity: 0; }
.setting-option[aria-selected="true"] .setting-option-check { opacity: 1; }
/* Einstellungen › Logistik, dialog „Firmensitz ändern“ (mockup: fields 18px 22px 6px, PLZ 140px | Ort, Breite | Länge) */
.dialog-body.seat-fields { padding-top: 18px; }
/* Rollen & Rechte, name dialogs (mockup Einstellungen-Rollen-Hinzufuegen: field 18px 22px 6px, button locked 0.4) */
.dialog-body.role-name-fields { padding-top: 18px; }
form[data-role-name] .btn.primary[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.seat-place { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; }
.seat-coords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.seat-place .field, .seat-coords .field { min-width: 0; }
/* ----- end scan ----- */

/* ===== M7 Logistik – Fuhrpark, Fahrzeug (fleet) ===== */
/* Fuhrpark (mockup Fuhrpark.dc.html): column widths of its grid (Bild 56, Status heute 178, Diese Woche 106,
   Nutzlast 92, km-Stand 94; Leasing-Ende at least its header: 106) */
.c1-56 { --c1: 56px; } .c2-56 { --c2: 56px; } .c3-56 { --c3: 56px; } .c4-56 { --c4: 56px; } .c5-56 { --c5: 56px; } .c6-56 { --c6: 56px; } .c7-56 { --c7: 56px; } .c8-56 { --c8: 56px; } .c9-56 { --c9: 56px; } .c10-56 { --c10: 56px; } .c11-56 { --c11: 56px; } .c12-56 { --c12: 56px; } .c13-56 { --c13: 56px; } .c14-56 { --c14: 56px; } .c15-56 { --c15: 56px; } .c16-56 { --c16: 56px; }
.c1-178 { --c1: 178px; } .c2-178 { --c2: 178px; } .c3-178 { --c3: 178px; } .c4-178 { --c4: 178px; } .c5-178 { --c5: 178px; } .c6-178 { --c6: 178px; } .c7-178 { --c7: 178px; } .c8-178 { --c8: 178px; } .c9-178 { --c9: 178px; } .c10-178 { --c10: 178px; } .c11-178 { --c11: 178px; } .c12-178 { --c12: 178px; } .c13-178 { --c13: 178px; } .c14-178 { --c14: 178px; } .c15-178 { --c15: 178px; } .c16-178 { --c16: 178px; }
.c1-106 { --c1: 106px; } .c2-106 { --c2: 106px; } .c3-106 { --c3: 106px; } .c4-106 { --c4: 106px; } .c5-106 { --c5: 106px; } .c6-106 { --c6: 106px; } .c7-106 { --c7: 106px; } .c8-106 { --c8: 106px; } .c9-106 { --c9: 106px; } .c10-106 { --c10: 106px; } .c11-106 { --c11: 106px; } .c12-106 { --c12: 106px; } .c13-106 { --c13: 106px; } .c14-106 { --c14: 106px; } .c15-106 { --c15: 106px; } .c16-106 { --c16: 106px; }
.c1-92 { --c1: 92px; } .c2-92 { --c2: 92px; } .c3-92 { --c3: 92px; } .c4-92 { --c4: 92px; } .c5-92 { --c5: 92px; } .c6-92 { --c6: 92px; } .c7-92 { --c7: 92px; } .c8-92 { --c8: 92px; } .c9-92 { --c9: 92px; } .c10-92 { --c10: 92px; } .c11-92 { --c11: 92px; } .c12-92 { --c12: 92px; } .c13-92 { --c13: 92px; } .c14-92 { --c14: 92px; } .c15-92 { --c15: 92px; } .c16-92 { --c16: 92px; }
.c1-94 { --c1: 94px; } .c2-94 { --c2: 94px; } .c3-94 { --c3: 94px; } .c4-94 { --c4: 94px; } .c5-94 { --c5: 94px; } .c6-94 { --c6: 94px; } .c7-94 { --c7: 94px; } .c8-94 { --c8: 94px; } .c9-94 { --c9: 94px; } .c10-94 { --c10: 94px; } .c11-94 { --c11: 94px; } .c12-94 { --c12: 94px; } .c13-94 { --c13: 94px; } .c14-94 { --c14: 94px; } .c15-94 { --c15: 94px; } .c16-94 { --c16: 94px; }
/* Bild: the vehicle picture placeholder (56 × 40, radius 10) */
.cell-vehicle { width: 56px; height: 40px; border-radius: 10px; background: var(--image); color: var(--image-ink); display: flex; align-items: center; justify-content: center; }
/* Fahrzeug: plate 800, second line 13 px; Fester Fahrer 600; Status heute: chip, reason below (gap 3, 12/16) */
.list-fleet .fl-plate > .cell-line { font-weight: 800; }
.list-fleet .fl-plate > .cell-sub { font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.list-fleet .cell-text.semi { font-weight: 600; }
.list-fleet .cell-chipsub { gap: 3px; }
.list-fleet .cell-chipsub > .cell-sub { line-height: 16px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Diese Woche: five squares 18 × 18 (radius 5) over the weekday (12/12, 700), today underlined */
.cell-week { display: flex; gap: 4px; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.week-mark, .legend-mark { box-sizing: border-box; border: 0; }
.week-mark { width: 18px; height: 18px; border-radius: 5px; }
.week-tag { font-size: 12px; line-height: 12px; font-weight: 700; color: var(--muted); border-bottom: 2px solid transparent; }
.week-tag.today { border-bottom-color: var(--text); }
.tag-t { background: var(--tag-t); }
.tag-e { background: var(--tag-e); }
.tag-a { background: var(--tag-a); }
.tag-b { background: var(--tag-b); }
.tag-w { background: var(--tag-w); }
.tag-empty { background: var(--tag-empty); border: 1px solid var(--line); }
/* footer: gap 18, legend squares 12 × 12 (radius 4), labels 13 px muted */
.list-fleet .table-foot { gap: 18px; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.legend-mark { width: 12px; height: 12px; border-radius: 4px; }
.table-empty.segment { padding: 40px 18px; text-align: center; }
/* Fahrzeug (mockups Fahrzeug, -Bestand, -Kosten): picture 150 × 110 next to the facts (labels 116) */
a.detail-button.fl-release { box-sizing: border-box; text-decoration: none; display: flex; align-items: center; }
.fl-vehicle-card { display: flex; gap: 18px; padding-top: 10px; }
.fl-photo { width: 150px; height: 110px; flex-shrink: 0; border-radius: 14px; background: var(--image); color: var(--image-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.fl-photo-text { font-size: 12px; color: var(--muted); }
.fl-vehicle-facts { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; margin-top: -9px; }
.kv.fl-kv { grid-template-columns: 116px minmax(0, 1fr); }
/* Zuordnung › Diese Woche: days 52 wide (radius 10, 12/700), note 13 px */
.fl-week { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0 12px 0; }
.fl-week-label { padding-top: 2px; }
.fl-week-body { display: flex; flex-direction: column; gap: 8px; }
.fl-days { display: flex; gap: 6px; }
.fl-day { width: 52px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0; border-radius: 10px; font-size: 12px; font-weight: 700; }
.fl-day-text { font-size: 12px; font-weight: 600; }
.fl-week-note { font-size: 13px; color: var(--muted); }
/* tab card: tabs are links */
a.detail-tab { text-decoration: none; box-sizing: border-box; }
.detail-tab[aria-disabled="true"] { cursor: default; }
.detail-tab.fl-locked { opacity: 0.5; }
.fl-thead { height: 40px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.fl-mgrid { display: grid; grid-template-columns: 110px 190px minmax(0, 1fr) 220px; gap: 14px; align-items: center; padding: 0 22px; }
.fl-dgrid { display: grid; grid-template-columns: minmax(0, 1fr) 130px 130px minmax(0, 1fr) 130px; gap: 14px; align-items: center; padding: 0 22px; }
.fl-sgrid { display: grid; grid-template-columns: 130px minmax(0, 1fr) 110px 140px 140px; gap: 14px; align-items: center; padding: 0 22px; }
.fl-thead .num, .fl-srow .num { text-align: right; }
.fl-mrow { min-height: 54px; padding-top: 6px; padding-bottom: 6px; box-sizing: border-box; font-size: 14px; border-bottom: 1px solid var(--line); }
.fl-mrow:last-child, .fl-drow:last-of-type { border-bottom: 0; }
.fl-drow { height: 48px; font-size: 14px; border-bottom: 1px solid var(--line); }
.fl-srow { height: 44px; font-size: 14px; border-bottom: 1px solid var(--line); }
.fl-strong { font-weight: 700; }
.fl-semi { font-weight: 600; }
.fl-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-action { display: flex; justify-content: flex-end; }
.fl-take { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--accent-ink); text-decoration: none; font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; cursor: pointer; }
.fl-locked { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.fl-nr { font-weight: 700; color: var(--accent-ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-cut { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-foot { display: flex; align-items: center; gap: 14px; padding: 12px 22px; font-size: 13px; color: var(--muted); }
.fl-foot.line { border-top: 1px solid var(--line); }
.fl-button { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; display: flex; align-items: center; white-space: nowrap; }
.fl-button.primary { background: var(--accent); color: var(--accent-text); }
/* Schäden & Dokumente: two columns */
.fl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fl-damage { padding: 14px 22px 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.fl-docs { padding: 14px 22px 16px 22px; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.fl-h3-line { display: flex; align-items: center; }
.fl-h3-line.docs { padding-bottom: 4px; }
.fl-h3 { margin: 0; flex-grow: 1; font-size: 15px; font-weight: 800; }
.fl-small { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; }
.fl-empty { padding: 22px; border-radius: 14px; border: 1px dashed var(--line); font-size: 14px; color: var(--muted); text-align: center; }
.fl-doc { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fl-doc:last-child { border-bottom: 0; }
.fl-doc .fl-semi { font-size: 14px; }
.fl-doc-file { font-size: 12px; color: var(--muted); }
.fl-doc-date { font-size: 13px; color: var(--muted); text-align: right; }
/* Kosten & Vertrag: hint chip (gold), four columns as Ausstattung & Logistik */
.fl-costs { padding: 14px 22px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.fl-costs-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.fl-costs-chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); font-weight: 700; }
.fl-costs-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 46px; }
/* ----- end fleet ----- */

/* ===== M7 Logistik – Tourenboard (mockups Touren, Touren-Dunkel, Touren-Fahrzeug; touren_board.tpl.html) ===== */
.tb-head { display: flex; align-items: center; gap: 14px; }
.tb-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.tb-week { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.tb-round { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tb-kw { display: flex; flex-direction: column; align-items: center; min-width: 150px; }
.tb-kw-nr { font-size: 15px; font-weight: 800; }
.tb-kw-range { font-size: 12px; color: var(--muted); }
.tb-today { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tb-suggest { height: 44px; flex-shrink: 0; white-space: nowrap; padding: 0 18px; margin-left: 8px; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tb-new { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; background: var(--accent); color: var(--accent-text); text-decoration: none; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* Neue Tour (mockup neuOffen): menu of the weekdays under the button */
.tb-new-wrap { position: relative; flex-shrink: 0; }
.tb-new-wrap > summary { list-style: none; cursor: pointer; }
.tb-new-wrap > summary::-webkit-details-marker { display: none; }
.tb-new-menu { position: absolute; top: 52px; right: 0; z-index: 6; width: 180px; box-sizing: border-box; padding: 10px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px; }
.tb-new-day { height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tb-new-cancel { height: 28px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tb-board { flex-grow: 1; min-height: 0; overflow: hidden; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.tb-tabs { flex-shrink: 0; display: flex; align-items: flex-end; gap: 2px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--board-line); }
.tb-tab { flex-shrink: 0; height: 48px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
.tb-tab[aria-selected="true"] { border-bottom-color: var(--accent); font-weight: 800; color: var(--text); }
.tb-tab > svg { flex-shrink: 0; }
.tb-count { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--muted); }
.tb-count.gold { background: var(--tone-gold-bg); color: var(--tone-gold-fg); }
.tb-banner { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 12px 18px; background: var(--accent-soft); border-bottom: 1px solid var(--board-line); }
.tb-banner > svg { flex-shrink: 0; color: var(--accent-ink); }
.tb-banner-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.tb-banner-title { font-size: 14px; font-weight: 800; color: var(--accent-ink); }
.tb-banner-sub { font-size: 13px; color: var(--text); }
.tb-banner-button { height: 36px; flex-shrink: 0; padding: 0 16px; border-radius: 999px; border: 0; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tb-banner-button.primary { background: var(--accent); color: var(--accent-text); }
.tb-days { flex-shrink: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--board-line); }
.tb-day-head { display: flex; flex-direction: column; justify-content: center; height: 56px; padding: 0 16px; border-left: 1px solid var(--board-line); }
.tb-day-head:first-child, .tb-col:first-child { border-left: 0; }
.tb-day-name { font-size: 15px; font-weight: 800; }
.tb-day-sum { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-cols { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tb-col { min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; box-sizing: border-box; padding: 14px 10px 14px 12px; border-left: 1px solid var(--board-line); display: flex; flex-direction: column; gap: 14px; }
.tb-tour { flex-shrink: 0; box-sizing: border-box; border-radius: 14px; background: var(--field); box-shadow: none; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tb-tour.ring, .tb-stop.ring { box-shadow: 0 0 0 2px var(--accent); }
.tb-tour-head { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 4px; padding: 0 2px; }
.tb-row { display: flex; align-items: center; gap: 6px; }
.tb-row.small { font-size: 12px; color: var(--muted); }
.tb-tour-name { font-size: 14px; font-weight: 800; white-space: nowrap; }
.tb-tour-duration { font-size: 14px; font-weight: 800; white-space: nowrap; color: var(--text); }
.tb-tour-duration.over { color: var(--warn-ink); }
.tb-bar { display: block; height: 4px; margin: 2px 0; border-radius: 999px; background: var(--board-line); overflow: hidden; }
.tb-bar-fill { display: block; height: 4px; border-radius: 999px; background: var(--accent); }
.tb-bar-fill.over { background: var(--warn-dot); }
.tb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tb-chip-proposal { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); }
.tb-chip-combi { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--tone-cyan-bg); color: var(--tone-cyan-fg); }
.tb-warning { align-self: flex-start; font-size: 12px; line-height: 18px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); white-space: nowrap; }
.tb-stops { display: flex; flex-direction: column; gap: 8px; }
.tb-stop { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; padding: 12px; border-radius: 12px; background: var(--card); border-left: 4px solid var(--line-2); box-shadow: none; cursor: grab; }
.tb-stop.an { background: var(--accent-soft); border-left-color: var(--accent); }
.tb-stop.ab { border-left-color: var(--tone-neutral-fg); }
.tb-stop-top { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.tb-chip { display: flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px 0 5px; border-radius: 999px; background: transparent; color: var(--text); border: 1.5px solid var(--line-2); box-sizing: border-box; font-size: 12px; font-weight: 800; letter-spacing: 0.2px; text-transform: uppercase; white-space: nowrap; }
.tb-chip.an { background: var(--card); color: var(--accent-ink); border: 0; }
.tb-chip.ab { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); border: 0; }
.tb-chip > svg { flex-shrink: 0; }
.tb-stop-km { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.tb-stop-nr { font-size: 14px; font-weight: 800; color: var(--accent-ink); white-space: nowrap; }
.tb-stop-customer { font-size: 14px; font-weight: 700; line-height: 18px; overflow-wrap: break-word; hyphens: auto; }
.tb-stop-address { font-size: 13px; line-height: 17px; color: var(--muted); }
.tb-stop-info { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Fixtermin (mockup Touren-Fixtermin): not draggable, the info as gold chip with a lock */
.tb-stop.fixed { cursor: default; }
.tb-fixed { align-self: flex-start; display: flex; align-items: center; gap: 5px; height: 22px; box-sizing: border-box; margin-top: 2px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tb-fixed > svg { flex-shrink: 0; }
.tb-locked { display: flex; align-items: center; gap: 8px; min-height: 34px; box-sizing: border-box; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.tb-locked > svg { flex-shrink: 0; }
.tb-choose { display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.tb-choose-label { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 2px; }
.tb-choose-vehicle { height: 30px; box-sizing: border-box; padding: 0 10px; border-radius: 9px; border: 1px solid var(--board-line); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tb-choose-vehicle > svg { flex-shrink: 0; color: var(--muted); }
.tb-choose-vehicle > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-choose-plate { display: flex; gap: 6px; margin: 0; }
.tb-plate-input { min-width: 0; flex-grow: 1; height: 32px; box-sizing: border-box; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.tb-plate-ok { height: 30px; flex-shrink: 0; padding: 0 12px; border-radius: 9px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tb-choose-cancel { height: 30px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.tb-accept { height: 36px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.tb-driver { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0 2px; }
.tb-driver > svg { flex-shrink: 0; color: var(--muted); }
.tb-driver-name { min-width: 0; flex-grow: 1; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-return { width: 30px; height: 30px; flex-shrink: 0; border-radius: 999px; border: 0; background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.tb-empty { padding: 8px 4px; font-size: 13px; color: var(--muted); }
.tb-drops { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.tb-drops-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); padding: 0 2px 2px 2px; }
.tb-drop { box-sizing: border-box; padding: 9px 11px; border-radius: 11px; border: 1.5px dashed var(--line-2); display: flex; flex-direction: column; gap: 3px; }
.tb-drop-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.tb-drop-customer { font-size: 14px; font-weight: 700; line-height: 18px; }
.tb-drop-supplier { font-size: 12px; color: var(--muted); }
.tb-rest { flex-grow: 1; min-height: 0; overflow-y: auto; }
.tb-rest-head, .tb-rest-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr) 90px 330px; gap: 12px; align-items: center; border-bottom: 1px solid var(--board-line); }
.tb-rest-head { height: 46px; padding: 0 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.tb-rest-head > .right { text-align: right; }
.tb-rest-row { min-height: 64px; box-sizing: border-box; padding: 10px 18px; font-size: 14px; }
/* group of Nicht zugeordnet (mockup Touren-Rest): Rückstände / Nicht ausgeführte Lieferungen / Nicht zugeordnet */
.tb-rest-group { display: flex; align-items: flex-end; height: 44px; box-sizing: border-box; padding: 0 18px 8px 18px; border-bottom: 1px solid var(--board-line); font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.tb-rest-project { display: flex; flex-direction: column; gap: 2px; }
.tb-rest-nr { font-weight: 800; color: var(--accent-ink); }
.tb-rest-project > .tb-chip { align-self: flex-start; padding: 0 8px 0 6px; letter-spacing: 0.3px; }
.tb-rest-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-rest-customer { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-rest-address { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-rest-reason { font-weight: 600; }
.tb-rest-info { font-size: 13px; color: var(--muted); }
.tb-rest-km { text-align: right; white-space: nowrap; }
.tb-rest-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tb-scrap, .tb-plan { height: 36px; padding: 0 14px; border-radius: 999px; border: 0; font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.tb-scrap { background: var(--tone-gold-bg); color: var(--tone-gold-fg); }
.tb-plan { background: var(--field); color: var(--text); }
.tb-rest-empty { display: block; padding: 24px 18px; font-size: 14px; color: var(--muted); }
.tb-abbr-title { display: block; padding: 18px 18px 8px 18px; font-size: 16px; font-weight: 800; }
.tb-abbr-title.next { padding-top: 28px; }
.tb-rest-head.tb-abbr-tours, .tb-rest-row.tb-abbr-tours { grid-template-columns: 170px minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 2fr); }
.tb-rest-head.tb-abbr-lines, .tb-rest-row.tb-abbr-lines { grid-template-columns: 150px minmax(0, 2.2fr) 80px minmax(0, 1fr) minmax(0, 1fr); }
.tb-abbr-link { color: var(--text); text-decoration: none; }
.tb-abbr-tour { font-weight: 800; color: var(--accent-ink); white-space: nowrap; }
.tb-abbr-stops { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tb-abbr-stop { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-abbr-customer { font-weight: 600; }
.tb-abbr-city { font-size: 13px; color: var(--muted); }
/* width of the duration bar: duration / longest day in whole percent (no inline style) */
.tb-w-0 { width: 0%; } .tb-w-1 { width: 1%; } .tb-w-2 { width: 2%; } .tb-w-3 { width: 3%; } .tb-w-4 { width: 4%; } .tb-w-5 { width: 5%; } .tb-w-6 { width: 6%; } .tb-w-7 { width: 7%; } .tb-w-8 { width: 8%; } .tb-w-9 { width: 9%; } .tb-w-10 { width: 10%; } .tb-w-11 { width: 11%; } .tb-w-12 { width: 12%; } .tb-w-13 { width: 13%; } .tb-w-14 { width: 14%; } .tb-w-15 { width: 15%; } .tb-w-16 { width: 16%; } .tb-w-17 { width: 17%; } .tb-w-18 { width: 18%; } .tb-w-19 { width: 19%; } .tb-w-20 { width: 20%; } .tb-w-21 { width: 21%; } .tb-w-22 { width: 22%; } .tb-w-23 { width: 23%; } .tb-w-24 { width: 24%; } .tb-w-25 { width: 25%; } .tb-w-26 { width: 26%; } .tb-w-27 { width: 27%; } .tb-w-28 { width: 28%; } .tb-w-29 { width: 29%; } .tb-w-30 { width: 30%; } .tb-w-31 { width: 31%; } .tb-w-32 { width: 32%; } .tb-w-33 { width: 33%; } .tb-w-34 { width: 34%; } .tb-w-35 { width: 35%; } .tb-w-36 { width: 36%; } .tb-w-37 { width: 37%; } .tb-w-38 { width: 38%; } .tb-w-39 { width: 39%; } .tb-w-40 { width: 40%; } .tb-w-41 { width: 41%; } .tb-w-42 { width: 42%; } .tb-w-43 { width: 43%; } .tb-w-44 { width: 44%; } .tb-w-45 { width: 45%; } .tb-w-46 { width: 46%; } .tb-w-47 { width: 47%; } .tb-w-48 { width: 48%; } .tb-w-49 { width: 49%; } .tb-w-50 { width: 50%; } .tb-w-51 { width: 51%; } .tb-w-52 { width: 52%; } .tb-w-53 { width: 53%; } .tb-w-54 { width: 54%; } .tb-w-55 { width: 55%; } .tb-w-56 { width: 56%; } .tb-w-57 { width: 57%; } .tb-w-58 { width: 58%; } .tb-w-59 { width: 59%; } .tb-w-60 { width: 60%; } .tb-w-61 { width: 61%; } .tb-w-62 { width: 62%; } .tb-w-63 { width: 63%; } .tb-w-64 { width: 64%; } .tb-w-65 { width: 65%; } .tb-w-66 { width: 66%; } .tb-w-67 { width: 67%; } .tb-w-68 { width: 68%; } .tb-w-69 { width: 69%; } .tb-w-70 { width: 70%; } .tb-w-71 { width: 71%; } .tb-w-72 { width: 72%; } .tb-w-73 { width: 73%; } .tb-w-74 { width: 74%; } .tb-w-75 { width: 75%; } .tb-w-76 { width: 76%; } .tb-w-77 { width: 77%; } .tb-w-78 { width: 78%; } .tb-w-79 { width: 79%; } .tb-w-80 { width: 80%; } .tb-w-81 { width: 81%; } .tb-w-82 { width: 82%; } .tb-w-83 { width: 83%; } .tb-w-84 { width: 84%; } .tb-w-85 { width: 85%; } .tb-w-86 { width: 86%; } .tb-w-87 { width: 87%; } .tb-w-88 { width: 88%; } .tb-w-89 { width: 89%; } .tb-w-90 { width: 90%; } .tb-w-91 { width: 91%; } .tb-w-92 { width: 92%; } .tb-w-93 { width: 93%; } .tb-w-94 { width: 94%; } .tb-w-95 { width: 95%; } .tb-w-96 { width: 96%; } .tb-w-97 { width: 97%; } .tb-w-98 { width: 98%; } .tb-w-99 { width: 99%; } .tb-w-100 { width: 100%; }
/* ----- end tour board ----- */

/* ===== M7 Logistik – Tour-Detail (mockups Tour, Tour-Dunkel, Tour-Lesend; touren_detail.py) ===== */
/* main as the lists (padding 28/28/24, gap 20): the page is as high as the window (Ladeliste fills the rest),
   lower windows scroll */
.content.tour { overflow-y: auto; }
/* Tour-Lesend: lock bar (radius 16, padding 12/18) and the inert parts dimmed */
.td-lockbar { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); }
.td-lockbar > svg { flex-shrink: 0; }
.td-lockbar-text { font-size: 14px; flex-grow: 1; }
.td-lockbar-button { height: 36px; flex-shrink: 0; padding: 0 14px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.td-read .td-actions, .td-read .td-scan, .td-read .td-note { opacity: 0.45; pointer-events: none; }
/* read only: the lines take no pointer, the list itself still scrolls (wheel, touch) */
.td-read .td-load-list > * { pointer-events: none; }
/* head as Kunde-Detail (title-line, title-chip) */
.td-chip-field { background: var(--field); color: var(--text); }
.td-actions { display: flex; align-items: center; gap: 16px; }
.td-start { height: 44px; flex-shrink: 0; white-space: nowrap; padding: 0 20px; border-radius: 999px; border: 0; background: var(--field); color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
/* Stammdaten as Kunde-Detail (detail-col, detail-h, kv); facts strip on the header colour */
.td-facts { display: grid; grid-template-columns: 0.8fr 1.3fr 0.9fr 1fr 1fr; gap: 12px 16px; padding: 12px 22px; background: var(--header); }
.td-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.td-fact-label { font-size: 12px; color: var(--header-label); }
.td-fact-value { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-fact-value.muted { color: var(--muted); }
/* map 580 wide next to the schedule, both 690 high */
.td-grid { flex-shrink: 0; display: grid; grid-template-columns: 580px minmax(0, 1fr); gap: 20px; height: 690px; }
.td-card { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.td-card-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px 18px; border-bottom: 1px solid var(--line); }
.td-card-head.column { flex-direction: column; align-items: stretch; gap: 2px; }
.td-card-title { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.td-card-h { font-size: 17px; font-weight: 800; }
.td-card-sub { font-size: 13px; color: var(--muted); }
.td-legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.td-legend-seat { width: 12px; height: 12px; border-radius: 4px; background: var(--text); }
.td-legend-vehicle { width: 12px; height: 12px; margin-left: 8px; border-radius: 999px; border: 2px solid var(--accent); box-sizing: border-box; }
.td-map { flex-grow: 1; min-height: 0; overflow: hidden; }
.td-map-svg { display: block; }
.td-map-bg { fill: var(--map-bg); }
.td-map-grid { stroke: var(--map-line); }
.td-map-city { fill: var(--map-city); }
.td-map-text { fill: var(--map-text); }
.td-map-route { stroke: var(--accent); }
.td-map-seat { fill: var(--text); }
.td-map-seat-text { fill: var(--card); }
.td-map-stop { fill: var(--tone-neutral-bg); stroke: var(--card); }
.td-map-stop.an { fill: var(--accent); }
.td-map-stop-text { fill: var(--tone-neutral-fg); }
.td-map-stop-text.an { fill: var(--accent-text); }
.td-map-label { fill: var(--text); stroke: var(--map-bg); }
.td-map-label.muted { fill: var(--muted); }
/* Ablauf: time rows (54 / 30 / text) and stops (delivery on accent-soft with an accent bar) */
.td-rows { flex-grow: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.td-time-row { display: grid; grid-template-columns: 54px 30px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.td-time { font-size: 14px; font-weight: 800; }
.td-time-icon { width: 26px; height: 26px; border-radius: 8px; background: var(--field); color: var(--muted); display: flex; align-items: center; justify-content: center; }
.td-time-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.td-time-title { font-size: 14px; font-weight: 700; }
.td-time-sub { font-size: 13px; color: var(--muted); }
.td-stop { text-decoration: none; color: inherit; display: grid; grid-template-columns: 54px 30px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 18px; background: var(--card); border-left: 4px solid var(--tone-neutral-bg); border-bottom: 1px solid var(--line); }
.td-stop.an { background: var(--accent-soft); border-left-color: var(--accent); }
.td-stop-time { display: flex; flex-direction: column; gap: 1px; }
.td-stop-until { font-size: 12px; color: var(--muted); }
.td-stop-pos { width: 26px; height: 26px; border-radius: 999px; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.td-stop-pos.an { background: var(--accent); color: var(--accent-text); }
.td-stop-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.td-stop-top { display: flex; align-items: center; gap: 8px; }
.td-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; box-sizing: border-box; padding: 0 9px 0 7px; border-radius: 999px; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); font-size: 11px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap; }
.td-chip.an { background: var(--accent-soft); color: var(--accent-ink); }
.td-chip.termin { background: transparent; color: var(--text); border: 1.5px solid var(--line-2); }
.td-stop-nr { font-size: 14px; font-weight: 800; color: var(--accent-ink); }
.td-stop-state { padding: 2px 9px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; }
/* a stop that left the tour and is planned again (mockup Tour-Abgebrochen): link to its new tour */
.td-stop-replanned { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 700; white-space: nowrap; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; }
.td-stop-replanned > svg { flex-shrink: 0; }
.td-stop-name { font-size: 15px; font-weight: 700; }
.td-stop-muted { font-size: 13px; color: var(--muted); }
.td-stop-line { font-size: 13px; color: var(--text); }
.td-stop-leg { font-size: 12px; color: var(--muted); }
/* Ladeliste: fills the rest of the page (at least its head and a few rows) */
.td-load-wrap { flex-grow: 1; min-height: 360px; display: flex; flex-direction: column; }
.td-load { flex-grow: 1; min-height: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.td-load-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px 12px 18px; }
.td-load-status { font-size: 12px; line-height: 18px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); white-space: nowrap; }
.td-scan { height: 44px; flex-shrink: 0; padding: 0 16px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.td-progress { flex-shrink: 0; height: 6px; margin: 0 18px 10px 18px; border-radius: 999px; background: var(--field); overflow: hidden; }
.td-progress-fill { height: 6px; width: 0; border-radius: 999px; background: var(--accent); }
.td-load-cols { flex-shrink: 0; display: grid; grid-template-columns: 28px 100px minmax(0, 1fr) 70px 96px; gap: 10px; align-items: center; height: 36px; padding: 0 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.td-load-cols .right { text-align: right; }
.td-load-list { flex-grow: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.td-ware-head { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px; background: var(--field); border-bottom: 1px solid var(--line); }
.td-ware-pos { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.td-ware-pos.an { background: var(--accent); color: var(--accent-text); }
.td-ware-head-nr { font-size: 14px; font-weight: 800; color: var(--accent-ink); }
.td-ware-head-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-ware-info { font-size: 12px; color: var(--muted); white-space: nowrap; }
.td-ware-group { display: grid; grid-template-columns: 28px 118px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; box-sizing: border-box; padding: 6px 18px; border-bottom: 1px solid var(--line); color: var(--text); }
.td-ware-group > svg { color: var(--muted); }
.td-ware-nr { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-ware-group-name { font-size: 14px; font-weight: 800; line-height: 19px; }
.td-ware-group-info { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.td-ware-line { display: grid; grid-template-columns: 28px 100px minmax(0, 1fr) 70px 96px; gap: 10px; align-items: center; min-height: 44px; box-sizing: border-box; padding: 6px 18px; border-bottom: 1px solid var(--line); background: var(--card); }
.td-ware-line.part { padding-left: 46px; }
.td-check { width: 22px; height: 22px; box-sizing: border-box; border-radius: 999px; border: 2px solid var(--line-2); background: transparent; }
.td-ware-name-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.td-ware-name { font-size: 14px; font-weight: 600; line-height: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.td-ware-qty { text-align: right; font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--text); }
.td-ware-end { display: flex; justify-content: flex-end; }
.td-built { height: 26px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.td-ware-pickup { display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 6px 18px 6px 56px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.td-pickup-add { height: 30px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.td-load-foot { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); }
.td-load-lock { color: var(--tone-gold-fg); }
.td-load-text { font-size: 13px; color: var(--muted); flex-grow: 1; }
.td-note { height: 36px; flex-shrink: 0; padding: 0 16px; border-radius: 999px; border: 0; background: var(--field); color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: default; }
/* ----- end tour detail ----- */

/* ===== M7 Logistik – Fahrt-Detail (mockups Fahrt, Fahrt-Dunkel, Fahrt-Lesend; touren_detail.py): lock bar, head,
   map and loading list as the Tour-Detail (td-*, templates/detail.html) ===== */
.td-chip.large { height: 26px; font-size: 12px; }
.fd-tour { height: 44px; flex-shrink: 0; box-sizing: border-box; white-space: nowrap; padding: 0 20px; border-radius: 999px; background: var(--field); color: var(--text); text-decoration: none; font-size: 14px; font-weight: 700; display: flex; align-items: center; }
.fd-release { height: 44px; flex-shrink: 0; white-space: nowrap; padding: 0 20px; border-radius: 999px; border: 0; background: var(--accent-soft); color: var(--accent-ink); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fd-accept { height: 44px; flex-shrink: 0; white-space: nowrap; padding: 0 20px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* "Annehmen mit" under "Fahrt annehmen" (mockup Fahrt-Annehmen: 260 wide, 52 below the button, right-aligned) */
.fd-accept-wrap { position: relative; flex-shrink: 0; }
.fd-accept:disabled, .fd-release:disabled { cursor: default; }
.fd-choose { position: absolute; top: 52px; right: 0; z-index: 5; width: 260px; box-sizing: border-box; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--board-line); display: flex; flex-direction: column; gap: 6px; }
.fd-choose-label { font-size: 12px; font-weight: 700; color: var(--muted); padding: 0 2px 2px 2px; }
.fd-choose-vehicle { height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--board-line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.fd-choose-plate { display: flex; gap: 6px; margin: 0; }
.fd-plate-input { min-width: 0; flex-grow: 1; height: 36px; box-sizing: border-box; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-transform: uppercase; }
.fd-plate-ok { height: 36px; padding: 0 12px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fd-project { color: var(--accent-ink); font-weight: 800; }
.fact.fd-wide { grid-column: span 2; }
.fd-wide .fact-value { white-space: normal; }
.td-facts.fd-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* map 470 wide, the loading list fills the rest of the window */
.fd-grid { flex-grow: 1; min-height: 360px; display: grid; grid-template-columns: 470px minmax(0, 1fr); gap: 20px; }
/* ----- end trip detail ----- */

/* ===== M7 Fahreransicht (mockups Fahrer, -Dunkel, -Stopp, -Navigation, -Navigation-Details, -Navigation-Dunkel,
   -Ankunft, -Keine-Tour; generators fahrer.py, fahrer_navi.py): 390 × 844 full screen, page_mobile_full ===== */
.dr-screen { position: relative; flex-grow: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; overflow: hidden; }
.dr-screen a { color: inherit; text-decoration: none; }
.dr-head { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 12px 4px 8px 8px; }
.dr-screen .dr-back { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--accent-ink); }
.dr-title { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.dr-title-main { font-size: 15px; font-weight: 800; }
.dr-empty-title { font-size: 16px; font-weight: 800; }
.dr-empty-title { flex-grow: 1; }
.dr-title-sub { font-size: 12px; color: var(--muted); }
.dr-title-row { display: flex; align-items: center; gap: 8px; }
.dr-title-row .dr-title-main { flex-grow: 1; white-space: nowrap; }
.dr-status { font-size: 12px; line-height: 18px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-text); white-space: nowrap; margin: -2px 0; }
.dr-screen .dr-cancel { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.dr-progress { flex-shrink: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; padding: 0 16px 10px 16px; }
.dr-bar { height: 5px; border-radius: 999px; background: var(--board-line); }
.dr-bar.done { background: var(--accent); }
.dr-bar.current { background: var(--accent-ink); }
.dr-bar.next { background: var(--accent-soft); }
.dr-main { flex-grow: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding: 0 16px 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.dr-main.dr-scroll { padding-bottom: 16px; }
.dr-main.dr-plain { overflow: visible; padding-bottom: 16px; }
/* the finished stop (long lists on the last stop) scrolls; 10px more room above keeps the first card's shadow */
.dr-main.dr-fin { margin-top: -10px; padding-top: 10px; padding-bottom: 16px; }
.dr-card { flex-shrink: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); }
.dr-map { flex-shrink: 0; height: 250px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.dr-map-svg { display: block; border-radius: 18px; }
.dr-map-stop { fill: var(--tone-neutral-fg); stroke: var(--card); }
.dr-map-stop.an { fill: var(--accent); }
.dr-map-stop-text { fill: var(--card); }
.dr-map-stop-text.an { fill: var(--accent-text); }
.dr-map-vehicle { fill: var(--card); stroke: var(--accent); }
.dr-map-vehicle-icon { stroke: var(--accent-ink); }
.dr-screen .dr-next { padding: 16px; display: flex; flex-direction: column; gap: 6px; border-left: 5px solid var(--accent); }
.dr-screen .dr-next.ab, .dr-screen .dr-next.termin { border-left-color: var(--tone-neutral-fg); }
.dr-next-top { display: flex; align-items: center; gap: 8px; }
.dr-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: 0.3px; text-transform: uppercase; }
.dr-chip.ab, .dr-chip.termin { background: var(--tone-neutral-fg); color: var(--card); }
.dr-nr { font-size: 13px; font-weight: 800; color: var(--accent-ink); }
.dr-of { font-size: 12px; color: var(--muted); }
.dr-next-customer { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; }
.dr-next-address { font-size: 15px; color: var(--muted); }
.dr-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
.dr-fact { display: flex; flex-direction: column; gap: 1px; }
.dr-fact-label { font-size: 12px; color: var(--muted); }
.dr-fact-value { font-size: 16px; font-weight: 800; }
.dr-note { font-size: 13px; color: var(--muted); margin-top: 4px; }
.dr-then { flex-shrink: 0; display: flex; align-items: center; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 12px 14px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.dr-then-label { font-size: 12px; font-weight: 700; color: var(--muted); }
.dr-then-stop { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.dr-then-text { font-size: 13px; font-weight: 700; white-space: nowrap; }
.dr-dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dr-dot.big { width: 26px; height: 26px; font-size: 13px; }
.dr-dot.ab, .dr-dot.termin { background: var(--tone-neutral-fg); color: var(--card); }
.dr-foot { flex-shrink: 0; padding: 12px 16px 22px 16px; background: var(--card); border-top: 1px solid var(--board-line); }
.dr-two { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
.dr-foot-stack { display: flex; flex-direction: column; gap: 6px; }
.dr-foot-hint { font-size: 12px; color: var(--muted); text-align: center; }
.dr-screen .dr-call { height: 56px; border-radius: 16px; background: var(--image); color: var(--text); display: flex; align-items: center; justify-content: center; }
.dr-screen .dr-call.small { height: 52px; }
.dr-screen .dr-primary { width: 100%; height: 56px; border-radius: 16px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 17px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; }
.dr-screen .dr-primary.off { background: var(--image); color: var(--muted); cursor: default; }
/* at the customer (Fahrer-Stopp) */
.dr-slip { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.dr-slip-sub { font-size: 12px; color: var(--muted); }
.dr-slip-customer { font-size: 18px; font-weight: 800; }
.dr-slip-address { font-size: 14px; color: var(--muted); }
.dr-unload { overflow: hidden; }
.dr-unload-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px 16px; }
.dr-unload-title { font-size: 16px; font-weight: 800; flex-grow: 1; }
.dr-unload-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); }
.dr-unload-group { padding: 8px 16px; background: var(--image); font-size: 12px; font-weight: 800; color: var(--muted); }
.dr-unload-row { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 8px 16px; border: 0; border-top: 1px solid var(--board-line); background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.dr-unload-row.part { padding-left: 32px; }
.dr-check { width: 26px; height: 26px; flex-shrink: 0; box-sizing: border-box; border-radius: 8px; border: 2px solid var(--line-2); background: transparent; color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.dr-unload-name { flex-grow: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 19px; }
.dr-unload-qty { font-size: 14px; font-weight: 800; white-space: nowrap; }
.dr-photos { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.dr-photos-title { font-size: 16px; font-weight: 800; }
.dr-photos-row { display: flex; gap: 8px; }
.dr-photo { width: 72px; height: 72px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: default; }
.dr-remark { height: 70px; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--board-line); background: var(--image); color: var(--text); font: inherit; font-size: 14px; resize: none; }
/* full-screen navigation and arrival (Fahrer-Navigation, -Details, -Ankunft) */
.dr-navi-map { position: absolute; inset: 0; }
.dr-navi-svg { display: block; }
.dr-navi-halo { fill: var(--accent); }
.dr-navi-arrow { fill: var(--accent); stroke: var(--accent-text); }
.dr-navi-head { position: absolute; left: 12px; right: 12px; top: 14px; z-index: 2; border-radius: 20px; background: var(--navi-head); color: var(--accent-text); box-shadow: var(--shadow-navi); overflow: hidden; }
.dr-navi-turn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.dr-navi-turn svg { flex-shrink: 0; }
.dr-navi-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dr-navi-dist { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 32px; }
.dr-navi-what { font-size: 17px; font-weight: 800; }
.dr-navi-where { font-size: 13px; opacity: 0.85; }
.dr-navi-then { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--navi-sub); font-size: 13px; font-weight: 700; }
.dr-navi-road { position: absolute; left: 12px; top: 176px; z-index: 2; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--card); color: var(--text); box-shadow: var(--shadow); font-size: 12px; font-weight: 800; display: flex; align-items: center; }
.dr-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; box-sizing: border-box; padding: 10px 16px 22px 16px; border-radius: 24px 24px 0 0; background: var(--card); box-shadow: var(--shadow-navi-sheet); display: flex; flex-direction: column; gap: 12px; }
.dr-screen .dr-grip { align-self: stretch; height: 44px; margin: -6px 0 -4px 0; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; }
.dr-grip span, .dr-grip-static { width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); }
.dr-grip-static { align-self: center; width: 40px; }
.dr-times { display: flex; align-items: flex-end; gap: 18px; }
.dr-time { display: flex; flex-direction: column; }
.dr-time-big { font-size: 26px; font-weight: 800; line-height: 30px; }
.dr-time-value { font-size: 20px; font-weight: 800; line-height: 30px; }
.dr-time-label { font-size: 12px; color: var(--muted); }
.dr-sheet-stop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dr-sheet-texts { display: flex; flex-direction: column; min-width: 0; }
.dr-sheet-customer { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sheet-address { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-sheet-actions { display: grid; grid-template-columns: 56px 56px minmax(0, 1fr); gap: 10px; }
.dr-screen .dr-second { height: 52px; border-radius: 16px; border: 0; background: var(--image); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-screen .dr-scrim { position: absolute; inset: 0; z-index: 3; background: var(--navi-scrim); }
/* Stopp-Details: as high as the screen below the top; a long tour scrolls inside without a bar (the actions stay
   reachable, the look as in the mockup) */
.dr-details { position: absolute; left: 0; right: 0; bottom: 0; top: 64px; z-index: 4; box-sizing: border-box; padding: 10px 16px 22px 16px; border-radius: 24px 24px 0 0; background: var(--card); box-shadow: var(--shadow-navi-details); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; scrollbar-width: none; }
.dr-details-top { display: flex; align-items: center; gap: 8px; margin-top: -4px; }
.dr-screen .dr-to-map { height: 40px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--image); color: var(--text); font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.dr-details-of { font-size: 13px; color: var(--muted); }
.dr-details-stop { flex-shrink: 0; border-radius: 18px; background: var(--accent-soft); border-left: 5px solid var(--accent); padding: 14px; display: flex; flex-direction: column; gap: 5px; }
.dr-details-stop.ab, .dr-details-stop.termin { border-left-color: var(--tone-neutral-fg); }
.dr-details-stop .dr-chip { height: 22px; padding: 0 8px 0 6px; }
.dr-details-stop .dr-note { margin-top: 0; }
.dr-details-customer { font-size: 19px; font-weight: 800; }
.dr-details-address { font-size: 14px; color: var(--muted); }
.dr-details-phone { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.dr-details-phone-texts { display: flex; flex-direction: column; flex-grow: 1; }
.dr-details-phone-nr { font-size: 15px; font-weight: 700; }
.dr-screen .dr-call-accent { width: 44px; height: 44px; border-radius: 14px; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.dr-load { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--image); }
.dr-load svg { color: var(--accent); }
.dr-load-texts { display: flex; flex-direction: column; }
.dr-load-title { font-size: 14px; font-weight: 700; }
.dr-load-sub { font-size: 12px; color: var(--muted); }
.dr-section-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); padding: 0 2px; margin-bottom: -6px; }
.dr-then-row { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--board-line); }
.dr-then-texts { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.dr-then-customer { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-then-sub { font-size: 12px; color: var(--muted); }
.dr-then-time { font-size: 14px; font-weight: 800; }
.dr-details-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.dr-arrived { position: absolute; left: 12px; right: 12px; top: 14px; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--navi-head); color: var(--accent-text); box-shadow: var(--shadow-navi); }
.dr-arrived svg { flex-shrink: 0; }
.dr-arrived-texts { display: flex; flex-direction: column; }
.dr-arrived-title { font-size: 24px; font-weight: 800; }
.dr-arrived-street { font-size: 14px; opacity: 0.9; }
.dr-arrival-stop { display: flex; flex-direction: column; gap: 2px; }
.dr-arrival-of { font-size: 13px; color: var(--muted); }
.dr-arrival-customer { font-size: 20px; font-weight: 800; }
.dr-arrival-address { font-size: 14px; color: var(--muted); }
.dr-arrival-note { font-size: 13px; color: var(--muted); }
.dr-done { padding: 24px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.dr-done-title { font-size: 20px; font-weight: 800; }
/* at the customer: ticking off, signature, stop done (mockups Fahrer-Stopp, -Unterschrift, -Fertig(-Fehlbestand)) */
.dr-unload-status.all { background: var(--accent); color: var(--accent-text); }
.dr-unload-form { display: contents; }
.dr-unload-row.on .dr-check { border: 0; background: var(--accent); }
.dr-unload-row.on .dr-unload-name, .dr-unload-row.on .dr-unload-qty { color: var(--muted); }
.dr-sign { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.dr-sign-title { font-size: 16px; font-weight: 800; }
.dr-sign-label { display: flex; flex-direction: column; gap: 4px; }
.dr-sign-small { font-size: 12px; color: var(--muted); }
.dr-sign-name { height: 46px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--board-line); background: var(--image); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; }
.dr-sign-choice { display: flex; gap: 8px; }
.dr-sign-option { position: relative; flex: 1; height: 44px; border-radius: 12px; background: var(--image); color: var(--text); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-sign-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dr-sign-option:has(input:checked) { background: var(--accent); color: var(--accent-text); }
.dr-sign-option:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.dr-sign-box { display: flex; flex-direction: column; gap: 4px; }
.dr-sign-head { display: flex; align-items: center; }
.dr-sign-head .dr-sign-small { flex-grow: 1; }
.dr-sign-clear { height: 40px; padding: 0 10px; border-radius: 999px; border: 0; background: var(--image); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.dr-sign-pad { display: block; border-radius: 14px; background: var(--image); touch-action: none; cursor: crosshair; }
.dr-sign-base { stroke: var(--line-2); }
.dr-sign-line { stroke: var(--text); }
.dr-done-icon { width: 64px; height: 64px; border-radius: 999px; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.dr-done-sub { font-size: 14px; color: var(--muted); }
.dr-list { overflow: hidden; }
.dr-list-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--board-line); }
.dr-list-icon { flex-shrink: 0; stroke: var(--accent); }
.dr-list-icon.open { stroke: var(--tone-gold-fg); }
.dr-list-texts { display: flex; flex-direction: column; min-width: 0; }
.dr-list-title { font-size: 14px; font-weight: 700; }
.dr-list-text { font-size: 12px; color: var(--muted); }
.dr-after { padding: 14px 16px; display: flex; align-items: center; gap: 12px; border-left: 5px solid var(--accent); }
.dr-after.ab, .dr-after.termin { border-left-color: var(--tone-neutral-fg); }
.dr-dot.after { width: 28px; height: 28px; font-size: 13px; }
.dr-after-texts { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.dr-after-of { font-size: 12px; color: var(--muted); }
.dr-after-customer { font-size: 15px; font-weight: 800; }
.dr-after-address { font-size: 13px; color: var(--muted); }
.dr-after-time { font-size: 15px; font-weight: 800; }
/* sheets Nicht vollständig ausgeliefert, Tour abbrechen; stop done with lines not delivered, tour done
   (mockups Fahrer-Rest, Fahrer-Tour-Abbrechen, Fahrer-Fertig-Fehlbestand, Fahrer-Tour-Abschliessen) */
.dr-screen .dr-modal-scrim { z-index: 5; }
.dr-modal { position: absolute; left: 0; right: 0; bottom: 0; max-height: min(780px, 100%); overflow-y: auto; scrollbar-width: none; z-index: 6; box-sizing: border-box; padding: 10px 16px 22px 16px; border-radius: 24px 24px 0 0; background: var(--card); box-shadow: var(--shadow-navi-details); display: flex; flex-direction: column; gap: 12px; }
.dr-modal .dr-grip { flex-shrink: 0; cursor: pointer; }
.dr-modal-head { flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; margin-top: -4px; }
.dr-modal-title { font-size: 18px; font-weight: 800; }
.dr-modal-title.alone { flex-shrink: 0; margin-top: -4px; }
.dr-modal-sub { font-size: 13px; color: var(--muted); }
.dr-modal-label { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); padding: 0 2px; margin-bottom: -4px; }
.dr-rest-list { flex-shrink: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 10px; }
.dr-rest-item { flex-shrink: 0; border-radius: 14px; border: 1px solid var(--board-line); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.dr-rest-top { display: flex; gap: 10px; }
.dr-rest-name { flex-grow: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 19px; }
.dr-rest-qty { font-size: 14px; font-weight: 800; white-space: nowrap; }
.dr-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dr-choice { position: relative; height: 44px; border-radius: 12px; background: var(--image); color: var(--text); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dr-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dr-choice:has(input:checked) { background: var(--accent); color: var(--accent-text); }
.dr-choice:has(input:focus-visible), .dr-quitt:has(input:focus-visible) { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.dr-rest-item .dr-choice:has(input[value="sonstiges"]) { grid-column: 1 / -1; }
.dr-reason { display: none; height: 46px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--board-line); background: var(--image); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; }
.dr-rest-item:has(input[value="sonstiges"]:checked) .dr-reason, .dr-modal:has(input[name="grund"][value="sonstiges"]:checked) .dr-reason { display: block; }
.dr-quitt { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 12px; min-height: 52px; box-sizing: border-box; padding: 8px 12px; border-radius: 14px; background: var(--image); color: var(--text); cursor: pointer; }
.dr-quitt input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dr-quitt .dr-check svg { display: none; }
.dr-quitt:has(input:checked) .dr-check { border: 0; background: var(--accent); }
.dr-quitt:has(input:checked) .dr-check svg { display: block; }
.dr-quitt-text { font-size: 15px; font-weight: 700; }
/* "Kunde nicht angetroffen", "Neuen Termin setzen": switches sent with the sheet's form (mockup Fahrer-Nicht-Angetroffen) */
button.dr-quitt { width: 100%; border: 0; font: inherit; text-align: left; }
.dr-quitt.on .dr-check { border: 0; background: var(--accent); }
.dr-quitt.on .dr-check svg { display: block; }
.dr-quitt[aria-disabled="true"] { cursor: default; color: var(--muted); }
/* Fixtermin under "Neuen Termin setzen" (mockup Fahrer-Nicht-Angetroffen-Fixtermin: the chip on a line of its own) */
.dr-quitt-stack { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.dr-fixed { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 9px; border-radius: 999px; background: var(--tone-gold-bg); color: var(--tone-gold-fg); white-space: nowrap; }
.dr-date { flex-shrink: 0; height: 46px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--board-line); background: var(--card); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; }
.dr-default { display: none; }
.dr-modal-actions { flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 10px; }
.dr-modal-actions.spaced { margin-top: 4px; }
.dr-screen .dr-modal-back, .dr-modal-go { height: 52px; border-radius: 16px; border: 0; font: inherit; font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; background: var(--image); color: var(--text); cursor: pointer; }
.dr-modal-go { background: var(--accent); color: var(--accent-text); }
.dr-modal-go.danger { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.dr-modal:invalid .dr-modal-go, .dr-modal:has(.dr-date:invalid) .dr-modal-go { background: var(--image); color: var(--muted); cursor: default; }
.dr-open-stop { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--board-line); }
.dr-open-texts { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; }
.dr-open-customer { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-open-sub { font-size: 12px; color: var(--muted); }
.dr-open-time { font-size: 14px; font-weight: 800; }
.dr-missing-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px 16px; }
.dr-missing-title { flex-grow: 1; font-size: 16px; font-weight: 800; }
.dr-missing-chip { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 9px; border-radius: 999px; white-space: nowrap; background: var(--tone-gold-bg); color: var(--tone-gold-fg); }
.dr-missing-chip.new { background: var(--accent-soft); color: var(--accent-ink); }
.dr-missing-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--board-line); }
/* ----- end driver ----- */
/* dialog "Neues Fahrzeug" over the Fuhrpark (mockup Fuhrpark-Neu) */
.fl-new { width: 960px; box-sizing: border-box; border-radius: 22px; background: var(--card); color: var(--text); box-shadow: var(--shadow-vehicle-dialog); display: flex; flex-direction: column; }
.fl-new-form { display: contents; }
.fl-new-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px 24px; border-bottom: 1px solid var(--line); }
.fl-new-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.fl-new-close { width: 36px; height: 36px; box-sizing: border-box; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font-size: 18px; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fl-new-body { padding: 18px 24px 22px 24px; display: flex; flex-direction: column; gap: 22px; }
.fl-new-group { display: flex; flex-direction: column; gap: 12px; }
.fl-new-group h3 { margin: 0; font-size: 15px; font-weight: 800; }
.fl-new-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.fl-new-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fl-new-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.fl-new-input { height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; width: 100%; }
.fl-new-input:focus-visible { outline: none; border-color: var(--accent); }
.fl-new-input.error { border-color: var(--tone-red-fg); }
.fl-new-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px 20px 24px; border-top: 1px solid var(--line); }
.fl-new-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== Dashboard (mockups Dashboard, -Seite-2, -Anpassen, -Katalog-Release, -Einstellen, -Ganze-Seite;
   generator dashboard.py RASTER, rahmen, steuer, SEITEN, KATALOG, EINST) ===== */
/* the search in the head is a form of its own; the edit mode is one form around head and grid */
.dash-search-form, .dash-edit { display: contents; }
/* grid of a page: 4 columns, 7 rows; the server places each widget by classes (column, row, width, height) */
.dash-grid { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 18px; }
.dash-cell { position: relative; min-width: 0; min-height: 0; display: flex; border-radius: 20px; }
.dash-c1 { grid-column-start: 1; }
.dash-c2 { grid-column-start: 2; }
.dash-c3 { grid-column-start: 3; }
.dash-c4 { grid-column-start: 4; }
.dash-w1 { grid-column-end: span 1; }
.dash-w2 { grid-column-end: span 2; }
.dash-w3 { grid-column-end: span 3; }
.dash-w4 { grid-column-end: span 4; }
.dash-r1 { grid-row-start: 1; }
.dash-r2 { grid-row-start: 2; }
.dash-r3 { grid-row-start: 3; }
.dash-r4 { grid-row-start: 4; }
.dash-r5 { grid-row-start: 5; }
.dash-r6 { grid-row-start: 6; }
.dash-r7 { grid-row-start: 7; }
.dash-h1 { grid-row-end: span 1; }
.dash-h2 { grid-row-end: span 2; }
.dash-h3 { grid-row-end: span 3; }
.dash-h4 { grid-row-end: span 4; }
.dash-h5 { grid-row-end: span 5; }
.dash-h6 { grid-row-end: span 6; }
.dash-h7 { grid-row-end: span 7; }
/* page switcher in the head (SEITEN) */
.dash-pages { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.dash-page-arrow { width: 36px; height: 36px; box-sizing: border-box; padding: 0; border-radius: 10px; border: 0; background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-dash-arrow); text-decoration: none; font: inherit; }
.dash-page-arrow.off { opacity: 0.4; }
.dash-dots { display: flex; align-items: center; gap: 6px; padding: 0 6px; }
.dash-dot { display: block; width: 8px; height: 8px; box-sizing: border-box; padding: 0; border: 0; border-radius: 999px; background: var(--line); cursor: pointer; }
.dash-dot.on { width: 22px; background: var(--accent); }
.dash-dot-new { display: none; background: transparent; }
.dash-page-text { font-size: 13px; font-weight: 700; color: var(--muted); min-width: 34px; text-align: center; }
/* edit mode with one page: the switcher (with the dot of a new page) only while a widget is dragged */
.dash-pages-drag { display: none; }
.dash-edit.dragging .dash-pages-drag { display: flex; }
.dash-edit.dragging .dash-dot-new { display: block; }
.dash-dot.dash-target { width: 26px; height: 12px; background: var(--accent-ink); }
/* edit mode: dashed frame, a layer to drag by, the handle to resize, the toolbar above the frame */
.dash-frame { outline: 2px dashed var(--accent); outline-offset: 3px; }
.dash-frame.dash-target { outline: 3px solid var(--accent); }
.dash-frame.dash-dragging { opacity: 0.85; transform: translate(var(--dash-dx, 0), var(--dash-dy, 0)); z-index: 10; box-shadow: var(--shadow-dash-lift); }
.dash-grab { position: absolute; inset: 0; z-index: 3; border-radius: 20px; background: transparent; cursor: grab; touch-action: none; }
.dash-target > .dash-grab { background: var(--dash-drop); }
.dash-edit.dragging .dash-grab, .dash-edit.dragging .dash-grip { cursor: grabbing; }
.dash-resize { position: absolute; right: -9px; bottom: -9px; z-index: 5; width: 26px; height: 26px; border-radius: 9px; background: var(--card); box-shadow: var(--shadow-dash-tool), 0 0 0 1px var(--line); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; cursor: nwse-resize; touch-action: none; }
.dash-tools { position: absolute; top: -15px; right: 14px; z-index: 4; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 11px; background: var(--card); box-shadow: var(--shadow-dash-tool), 0 0 0 1px var(--line); }
.dash-grip { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; }
.dash-grip:focus-visible, .dash-resize:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-size { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.dash-size.on { font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); }
.dash-tool-settings { height: 28px; padding: 0 10px 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.dash-tool-remove { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
/* first free cell of the page (FREI) */
.dash-free { border-radius: 18px; border: 2px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.dash-free.dash-target { border-color: var(--accent); }
/* dialogs "Widget hinzufügen" (KATALOG) and "Einstellen" (EINST) */
.dash-layer { z-index: 20; }
.dash-dialog { box-sizing: border-box; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-dash-dialog); display: flex; flex-direction: column; }
.dash-catalog { width: 960px; height: 700px; }
.dash-settings { width: 640px; max-height: 760px; }
.dash-dialog-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px 24px; border-bottom: 1px solid var(--line); }
.dash-dialog-head h2 { margin: 0; font-size: 19px; font-weight: 800; flex-grow: 1; }
.dash-cat-search { display: flex; align-items: center; gap: 10px; width: 260px; height: 40px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; background: var(--field); color: var(--muted); }
.dash-cat-search input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); }
.dash-cat-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.dash-dialog-close { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; }
.dash-cat-list { flex-grow: 1; min-width: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 6px 24px 16px 24px; }
.dash-cat-row { display: flex; align-items: center; gap: 14px; min-height: 68px; border-bottom: 1px solid var(--line); }
.dash-cat-row[hidden] { display: none; }
.dash-cat-figure { min-width: 48px; height: 48px; box-sizing: border-box; padding: 0 8px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; white-space: nowrap; }
.dash-cat-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--field); color: var(--accent-ink); }
.dash-cat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex-grow: 1; }
.dash-cat-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-cat-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-cat-right { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); white-space: nowrap; }
.dash-cat-right.finance { background: var(--tone-gold-bg); color: var(--tone-gold-fg); }
.dash-cat-right:empty { display: none; }
.dash-cat-exp { flex-shrink: 0; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--tone-blue-bg); color: var(--tone-blue-fg); white-space: nowrap; }
.dash-cat-sizes { display: flex; gap: 4px; flex-shrink: 0; width: 170px; justify-content: flex-end; }
.dash-cat-sizes span { padding: 3px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--field); color: var(--muted); }
.dash-cat-add { height: 36px; padding: 0 16px; border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; width: 168px; flex-shrink: 0; background: var(--accent); color: var(--accent-text); }
.dash-cat-add.placed { background: var(--field); color: var(--muted); cursor: default; }
/* catalog with the area bar (mockup Dashboard-Katalog, experimental widgets offered) */
.dash-cat-body { flex-grow: 1; min-height: 0; display: flex; }
.dash-cat-areas { width: 230px; flex-shrink: 0; box-sizing: border-box; padding: 12px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.dash-cat-area { height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; }
.dash-cat-area.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.dash-catalog[data-searching] .dash-cat-area.on { background: transparent; color: var(--text); font-weight: 600; }
.dash-cat-area-title { flex-grow: 1; }
.dash-cat-area-n { font-size: 13px; font-weight: 700; color: var(--muted); }
/* menu "Standard für Rolle" of the edit mode (mockup Dashboard-Rolle, ROLLE_MENU) */
.dash-role-wrap { position: relative; }
.dash-role-wrap > summary { list-style: none; }
.dash-role-wrap > summary::-webkit-details-marker { display: none; }
.dash-role-menu { position: absolute; top: 52px; right: 0; z-index: 12; width: 240px; box-sizing: border-box; padding: 8px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.dash-role-item { height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.dash-role-item.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.dash-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px 24px; border-top: 1px solid var(--line); }
.dash-dialog-done { height: 44px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--accent); color: var(--accent-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dash-dialog-reset { height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.dash-settings-body { overflow-y: auto; padding: 6px 24px 10px 24px; display: flex; flex-direction: column; }
.dash-settings-field { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dash-settings-label { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.dash-settings-options { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-option { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 600; background: var(--field); color: var(--text); box-shadow: none; cursor: pointer; white-space: nowrap; }
.dash-option.on { font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.dash-cell.dash-off, .dash-free.dash-off { display: none; }

/* ----- Diagramme (gd_ui::chart, templates/chart.html; mockups Statistiken*, Dashboard*: ui_gemeinsam.py svg_saeulen/svg_linien,
   statistiken.py SPUR, BALKEN_ZEILE, SAEULEN_HTML, LEG/LEGZ/STRICH/MARKE, tiles of "Lieferwege & Touren") ----- */
.chart { display: block; overflow: visible; }
.chart-grid { stroke: var(--line); }
.chart-muted { fill: var(--muted); }
.chart-strong { fill: var(--text); }
.chart-mark { stroke: var(--text); }
.chart-hit { fill: transparent; }
.chart-forecast { fill: var(--field); }
.chart-fill { fill: var(--chart-c); }
.chart-line { fill: none; stroke: var(--chart-c); }
.chart-dot { fill: var(--card); stroke: var(--chart-c); }
/* series colours (t.accent, t.accentInk, t.c.* of statistiken.py) on value-equal tokens */
.chart-c-accent { --chart-c: var(--accent); }
.chart-c-accent-ink { --chart-c: var(--accent-ink); }
.chart-c-cyan { --chart-c: var(--tag-a); }
.chart-c-gold { --chart-c: var(--warn-dot); }
.chart-c-grey { --chart-c: var(--chart-grey); }
.chart-c-blue-light { --chart-c: var(--step-current); }
.chart-c-teal { --chart-c: var(--ok-dot); }
.chart-c-red { --chart-c: var(--tag-w); }
.chart-c-free { --chart-c: var(--board-line); }
/* bar list (BALKEN_ZEILE) and the bar in its track (SPUR); the bar is an SVG so that its width needs no inline style */
.chart-bar-row { display: flex; flex-direction: column; gap: 5px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.chart-bar-head { display: flex; gap: 10px; font-size: 14px; }
.chart-bar-name { font-weight: 700; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-bar-value { font-weight: 800; white-space: nowrap; }
.chart-track { display: block; height: 10px; border-radius: 999px; background: var(--field); overflow: hidden; }
.chart-track-bar { display: block; fill: var(--accent); }
/* histogram (SAEULEN_HTML); column height round(150 * n / max) px as a class (no inline style) */
.chart-hist { flex-grow: 1; min-height: 0; display: flex; align-items: flex-end; gap: 8px; padding: 12px 0 0 0; }
.chart-hist-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.chart-hist-n { font-size: 12px; font-weight: 700; }
.chart-hist-bar { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--accent); }
.chart-hist-x { font-size: 12px; font-weight: 700; white-space: nowrap; padding-top: 3px; }
.chart-hist-caption { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; padding-top: 4px; }
.chart-h-0 { height: 0px; } .chart-h-1 { height: 1px; } .chart-h-2 { height: 2px; } .chart-h-3 { height: 3px; } .chart-h-4 { height: 4px; } .chart-h-5 { height: 5px; } .chart-h-6 { height: 6px; } .chart-h-7 { height: 7px; } .chart-h-8 { height: 8px; } .chart-h-9 { height: 9px; } .chart-h-10 { height: 10px; } .chart-h-11 { height: 11px; } .chart-h-12 { height: 12px; } .chart-h-13 { height: 13px; } .chart-h-14 { height: 14px; } .chart-h-15 { height: 15px; } .chart-h-16 { height: 16px; } .chart-h-17 { height: 17px; } .chart-h-18 { height: 18px; } .chart-h-19 { height: 19px; } .chart-h-20 { height: 20px; } .chart-h-21 { height: 21px; } .chart-h-22 { height: 22px; } .chart-h-23 { height: 23px; } .chart-h-24 { height: 24px; } .chart-h-25 { height: 25px; } .chart-h-26 { height: 26px; } .chart-h-27 { height: 27px; } .chart-h-28 { height: 28px; } .chart-h-29 { height: 29px; } .chart-h-30 { height: 30px; } .chart-h-31 { height: 31px; } .chart-h-32 { height: 32px; } .chart-h-33 { height: 33px; } .chart-h-34 { height: 34px; } .chart-h-35 { height: 35px; } .chart-h-36 { height: 36px; } .chart-h-37 { height: 37px; } .chart-h-38 { height: 38px; } .chart-h-39 { height: 39px; } .chart-h-40 { height: 40px; } .chart-h-41 { height: 41px; } .chart-h-42 { height: 42px; } .chart-h-43 { height: 43px; } .chart-h-44 { height: 44px; } .chart-h-45 { height: 45px; } .chart-h-46 { height: 46px; } .chart-h-47 { height: 47px; } .chart-h-48 { height: 48px; } .chart-h-49 { height: 49px; } .chart-h-50 { height: 50px; } .chart-h-51 { height: 51px; } .chart-h-52 { height: 52px; } .chart-h-53 { height: 53px; } .chart-h-54 { height: 54px; } .chart-h-55 { height: 55px; } .chart-h-56 { height: 56px; } .chart-h-57 { height: 57px; } .chart-h-58 { height: 58px; } .chart-h-59 { height: 59px; } .chart-h-60 { height: 60px; } .chart-h-61 { height: 61px; } .chart-h-62 { height: 62px; } .chart-h-63 { height: 63px; } .chart-h-64 { height: 64px; } .chart-h-65 { height: 65px; } .chart-h-66 { height: 66px; } .chart-h-67 { height: 67px; } .chart-h-68 { height: 68px; } .chart-h-69 { height: 69px; } .chart-h-70 { height: 70px; } .chart-h-71 { height: 71px; } .chart-h-72 { height: 72px; } .chart-h-73 { height: 73px; } .chart-h-74 { height: 74px; } .chart-h-75 { height: 75px; } .chart-h-76 { height: 76px; } .chart-h-77 { height: 77px; } .chart-h-78 { height: 78px; } .chart-h-79 { height: 79px; } .chart-h-80 { height: 80px; } .chart-h-81 { height: 81px; } .chart-h-82 { height: 82px; } .chart-h-83 { height: 83px; } .chart-h-84 { height: 84px; } .chart-h-85 { height: 85px; } .chart-h-86 { height: 86px; } .chart-h-87 { height: 87px; } .chart-h-88 { height: 88px; } .chart-h-89 { height: 89px; } .chart-h-90 { height: 90px; } .chart-h-91 { height: 91px; } .chart-h-92 { height: 92px; } .chart-h-93 { height: 93px; } .chart-h-94 { height: 94px; } .chart-h-95 { height: 95px; } .chart-h-96 { height: 96px; } .chart-h-97 { height: 97px; } .chart-h-98 { height: 98px; } .chart-h-99 { height: 99px; } .chart-h-100 { height: 100px; } .chart-h-101 { height: 101px; } .chart-h-102 { height: 102px; } .chart-h-103 { height: 103px; } .chart-h-104 { height: 104px; } .chart-h-105 { height: 105px; } .chart-h-106 { height: 106px; } .chart-h-107 { height: 107px; } .chart-h-108 { height: 108px; } .chart-h-109 { height: 109px; } .chart-h-110 { height: 110px; } .chart-h-111 { height: 111px; } .chart-h-112 { height: 112px; } .chart-h-113 { height: 113px; } .chart-h-114 { height: 114px; } .chart-h-115 { height: 115px; } .chart-h-116 { height: 116px; } .chart-h-117 { height: 117px; } .chart-h-118 { height: 118px; } .chart-h-119 { height: 119px; } .chart-h-120 { height: 120px; } .chart-h-121 { height: 121px; } .chart-h-122 { height: 122px; } .chart-h-123 { height: 123px; } .chart-h-124 { height: 124px; } .chart-h-125 { height: 125px; } .chart-h-126 { height: 126px; } .chart-h-127 { height: 127px; } .chart-h-128 { height: 128px; } .chart-h-129 { height: 129px; } .chart-h-130 { height: 130px; } .chart-h-131 { height: 131px; } .chart-h-132 { height: 132px; } .chart-h-133 { height: 133px; } .chart-h-134 { height: 134px; } .chart-h-135 { height: 135px; } .chart-h-136 { height: 136px; } .chart-h-137 { height: 137px; } .chart-h-138 { height: 138px; } .chart-h-139 { height: 139px; } .chart-h-140 { height: 140px; } .chart-h-141 { height: 141px; } .chart-h-142 { height: 142px; } .chart-h-143 { height: 143px; } .chart-h-144 { height: 144px; } .chart-h-145 { height: 145px; } .chart-h-146 { height: 146px; } .chart-h-147 { height: 147px; } .chart-h-148 { height: 148px; } .chart-h-149 { height: 149px; } .chart-h-150 { height: 150px; }
/* flat figure tile inside a card (mockup "Lieferwege & Touren") */
.chart-tile { border-radius: 14px; background: var(--field); padding: 6px 12px; display: flex; flex-direction: column; justify-content: center; gap: 0; min-width: 0; min-height: 0; }
.chart-tile-label { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-tile-value { font-size: 18px; font-weight: 800; line-height: 24px; color: var(--text); }
.chart-tile-value.muted { color: var(--muted); }
.chart-tile-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* legend line above a chart (LEGZ, LEG, STRICH, MARKE, "geplant") */
.chart-legend { display: flex; align-items: center; gap: 14px; padding: 10px 0 4px 0; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.chart-legend.wrap { flex-wrap: wrap; gap: 4px 12px; }
.chart-legend-item { display: flex; align-items: center; gap: 6px; }
.chart-legend-swatch, .chart-legend-faded { width: 10px; height: 10px; border-radius: 3px; background: var(--chart-c); }
.chart-legend-faded { opacity: 0.55; }
.chart-legend-dashed { width: 14px; border-top: 2px dashed var(--muted); }
.chart-legend-mark { width: 14px; height: 2px; border-radius: 2px; background: var(--text); }
/* component gallery (/dev/komponenten): a chart in the width of a statistics card */
.gallery-chart { width: 423px; display: flex; flex-direction: column; }
.gallery-chart.tall { height: 220px; }
.gallery-chart.tiles { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 64px; gap: 10px; }
/* ----- end Diagramme ----- */

/* ----- Dashboard-Widgets (Einkauf) (mockup Dashboard / Dashboard-Dunkel, dashboard.py KACHEL, wMont, wHeute, wAcht;
   tiles and cards: .dash-kpi / .dash-card above) ----- */
/* a figure is coloured only as a deviation (mockup kachel_ink) */
.dash-kpi-num.gold { color: var(--tone-gold-fg); }
.dash-kpi-num.red { color: var(--tone-red-fg); }
/* a widget link without a list of the same rows (UI-OFFEN widget.liste) */
.dash-kpi[aria-disabled="true"], .dash-card-title[aria-disabled="true"], .dash-more[aria-disabled="true"] { cursor: default; }
/* list of whole rows (mockup [data-ganz]): the scrollbar shows only while scrolling */
.dash-card-body[data-ganz], .st-scroll[data-ganz] { scrollbar-color: transparent transparent; }
.dash-card-body[data-ganz][data-scrolling], .st-scroll[data-ganz][data-scrolling] { scrollbar-color: var(--scroll-thumb) transparent; }
.dash-card-body[data-ganz]::-webkit-scrollbar, .st-scroll[data-ganz]::-webkit-scrollbar { width: 6px; }
.dash-card-body[data-ganz]::-webkit-scrollbar-thumb, .st-scroll[data-ganz]::-webkit-scrollbar-thumb { background: transparent; border-radius: 9px; }
.dash-card-body[data-ganz][data-scrolling]::-webkit-scrollbar-thumb, .st-scroll[data-ganz][data-scrolling]::-webkit-scrollbar-thumb { background: var(--scroll-thumb); }
.dash-card-body[data-ganz] > *, .st-scroll[data-ganz] > * { flex-shrink: 0; box-sizing: border-box; }
.dash-more.shown { display: flex; }
.dash-filter.on { background: var(--accent-soft); color: var(--accent-ink); }
.dw-strong { font-weight: 700; }
.dw-accent { color: var(--accent-ink); }
.dw-nowrap { white-space: nowrap; }
.dw-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-flex { display: flex; }
.dw-col { display: flex; flex-direction: column; min-width: 0; }
.dw-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-chip { flex-shrink: 0; }
.dw-chip-start { align-self: flex-start; }
.chip.dw-chip-none { background: transparent; color: var(--muted); }
.dw-head { padding: 10px 0 6px 0; border-bottom: 1px solid var(--line); }
.dw-head > span { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.dw-head > .end, .dw-mont-line > .end { text-align: right; }
/* Nächste Montagen: list (mittel) and table (groß) */
.dw-mont { text-decoration: none; display: flex; align-items: center; gap: 14px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.dw-mont-day { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; background: var(--field); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dw-mont-wd { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.dw-mont-dd { font-size: 17px; font-weight: 800; line-height: 1.1; }
.dw-mont-text { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.dw-mont-title { font-size: 14px; font-weight: 700; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dw-mont-nr { font-weight: 500; color: var(--muted); }
.dw-mont-grid { display: grid; grid-template-columns: 96px 110px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 84px minmax(0, 1fr) minmax(0, 1fr) 150px; gap: 10px; align-items: center; }
.dw-mont-line { text-decoration: none; height: 44px; border-bottom: 1px solid var(--line); font-size: 14px; }
/* Heute erwartet: list (mittel) and table (groß) with the delivery track */
.dw-heute { text-decoration: none; display: flex; flex-direction: column; gap: 4px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dw-heute-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dw-heute-win { flex-shrink: 0; font-size: 13px; font-weight: 800; white-space: nowrap; }
.dw-heute-title { flex-grow: 1; min-width: 0; font-size: 14px; font-weight: 700; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dw-heute-cust { font-weight: 500; color: var(--muted); }
.dw-heute-grid { display: grid; grid-template-columns: 100px 96px 104px minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 1fr) 320px; gap: 10px; }
.dw-heute-line { text-decoration: none; align-items: center; min-height: 56px; padding: 6px 0; box-sizing: border-box; border-bottom: 1px solid var(--line); font-size: 14px; }
.dw-npos { font-size: 13px; color: var(--muted); }
.dw-send { gap: 4px; }
.dw-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 2px; }
.dw-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.dw-step-line { position: absolute; top: 7px; left: calc(50% + 11px); right: calc(-50% + 11px); height: 3px; border-radius: 999px; background: var(--line); }
.dw-step-line.on { background: var(--switch-on); }
.dw-step-dot { width: 16px; height: 16px; box-sizing: border-box; border-radius: 999px; background: var(--card); border: 2px solid var(--line); color: var(--accent-text); display: flex; align-items: center; justify-content: center; }
.dw-step.done .dw-step-dot, .dw-step.now .dw-step-dot { background: var(--switch-on); border: 0; }
.dw-step.now:not(.done) .dw-step-dot { box-shadow: 0 0 0 4px var(--track-ring); }
.dw-step.now.moved .dw-step-dot { background: var(--warn-dot); }
.dw-step.now.moved:not(.done) .dw-step-dot { box-shadow: 0 0 0 4px var(--tone-gold-bg); }
.dw-step-label { max-width: 100%; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-step.done .dw-step-label { color: var(--text); }
.dw-step.now .dw-step-label { font-weight: 800; color: var(--track-ink); }
.dw-step.now.moved .dw-step-label { color: var(--tone-gold-fg); }
/* Braucht Aufmerksamkeit: dot (gold, red when the new date is after the assembly), text, buttons (groß with label) */
.dw-acht { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dw-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 999px; flex-shrink: 0; background: var(--warn-dot); }
.dw-dot.red { background: var(--tag-w); }
.dw-acht-text { text-decoration: none; display: flex; flex-direction: column; gap: 1px; min-width: 0; flex-grow: 1; cursor: pointer; }
.dw-acht-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-acht-btns { display: flex; gap: 4px; flex-shrink: 0; }
.dw-btn { height: 30px; min-width: 30px; padding: 0; border: 0; border-radius: 9px; background: var(--field); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.dw-btn.wide { padding: 0 10px; }
.dw-btn.ok { background: var(--accent-soft); color: var(--accent-ink); }
.dw-btn.del { background: var(--tone-red-bg); color: var(--tone-red-fg); }
a.dw-btn { text-decoration: none; }
/* widget gallery (/dev/widgets): the cell sizes of the dashboard mockup at 1440 × 900 (1 × 1, 2 × 3, 2 × 6, 4 × 3) */
.widget-gallery-cell { position: relative; min-width: 0; min-height: 0; display: flex; border-radius: 20px; }
.widget-gallery-s { width: 315px; height: 96px; }
.widget-gallery-m { width: 647px; height: 323px; }
.widget-gallery-m6 { width: 647px; height: 663px; }
.widget-gallery-l { width: 1312px; height: 323px; }
/* Offene Bestellungen (dashboard.py offen_m / offen_l) */
.dw-offen { text-decoration: none; display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dw-offen-text { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; min-width: 0; }
.dw-offen-title { font-size: 14px; font-weight: 700; line-height: 18px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dw-offen-ref { font-weight: 500; color: var(--muted); }
.dw-offen-items { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-offen-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-offen-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.dw-offen-date { font-size: 13px; font-weight: 700; white-space: nowrap; }
.dw-offen-date.red, .dw-offen-line > .red { color: var(--tone-red-fg); }
.dw-offen-net { font-size: 13px; font-weight: 700; }
.dw-offen-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 1.6fr) 84px 120px minmax(0, 1fr) 116px 112px 128px; gap: 10px; }
.dw-offen-line { text-decoration: none; align-items: center; min-height: 46px; padding: 4px 0; box-sizing: border-box; border-bottom: 1px solid var(--line); font-size: 14px; }
.dw-offen-line > .end { text-align: right; }
.dw-offen-small { font-size: 13px; }
/* Touren heute (dashboard.py wTouren; the app's tours) */
.dw-tour-grid { display: grid; grid-template-columns: 96px minmax(0, 1fr) 96px 70px 56px; gap: 10px; }
.dw-tour-line { text-decoration: none; align-items: center; height: 44px; border-bottom: 1px solid var(--line); font-size: 14px; }
.dw-tour-line > .end { text-align: right; }
/* ----- end Dashboard-Widgets (Einkauf) ----- */
/* ----- Notizen (mockups Dashboard-Notizen, Dashboard-Notiz, Dashboard-Notizen-Archiv; dashboard.py NOTIZ_LAGE,
   notiz_knopf, NOTIZ_DLG, notiz_formular) ----- */
/* button "Notizen" (dash-btn) as the summary of its menu, count of open notes */
.dash-notes-wrap > summary { list-style: none; }
.dash-notes-wrap > summary::-webkit-details-marker { display: none; }
.note-count { min-width: 20px; height: 20px; box-sizing: border-box; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.note-menu { position: absolute; top: 52px; right: 0; z-index: 25; width: 230px; box-sizing: border-box; padding: 6px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.note-menu-form { display: contents; }
.note-menu-item { height: 44px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; text-decoration: none; display: flex; align-items: center; cursor: pointer; }
.note-menu-item:hover, .note-menu-item:focus-visible { background: var(--hover); outline: none; }
/* the notes lie over the whole window; app.js places them (data-x/data-y) */
.note-layer { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
.note { position: absolute; left: 0; top: 0; width: 210px; min-height: 150px; pointer-events: auto; box-sizing: border-box; padding: 10px 12px 10px 10px; border-radius: 3px 3px 16px 3px; box-shadow: var(--shadow-note); display: flex; flex-direction: column; gap: 8px; cursor: grab; touch-action: none; user-select: none; }
.note-yellow { background: var(--note-yellow); color: var(--note-yellow-ink); }
.note-blue { background: var(--note-blue); color: var(--note-blue-ink); }
.note-green { background: var(--note-green); color: var(--note-green-ink); }
.note-pink { background: var(--note-pink); color: var(--note-pink-ink); }
.note.done, .note.archived { opacity: 0.6; }
.note.dragging { z-index: 5; opacity: 0.9; box-shadow: var(--shadow-note-lift); cursor: grabbing; }
.note-top { display: flex; align-items: flex-start; gap: 8px; }
.note-tick { display: contents; }
.note-check { width: 30px; height: 30px; flex-shrink: 0; box-sizing: border-box; padding: 0; border-radius: 7px; border: 2px solid currentColor; background: transparent; color: inherit; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.8; }
.note-check svg { visibility: hidden; }
.note.done .note-check { background: currentColor; }
.note.done .note-check svg { visibility: visible; }
.note-yellow.done .note-check svg { color: var(--note-yellow); }
.note-blue.done .note-check svg { color: var(--note-blue); }
.note-green.done .note-check svg { color: var(--note-green); }
.note-pink.done .note-check svg { color: var(--note-pink); }
.note-text { flex-grow: 1; min-width: 0; font-size: 14px; font-weight: 600; line-height: 19px; white-space: pre-wrap; overflow-wrap: anywhere; text-decoration: none; color: inherit; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; cursor: inherit; -webkit-user-drag: none; }
.note.done .note-text { text-decoration: line-through; }
.note-meta { margin-top: auto; display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; opacity: 0.85; }
.note-line { display: flex; align-items: center; gap: 5px; min-width: 0; }
.note-line svg { flex-shrink: 0; }
.note-line-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* dialog Neue Notiz / Notiz bearbeiten */
.note-dialog-layer { z-index: 20; }
.note-dialog { width: 520px; box-sizing: border-box; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-dash-dialog); display: flex; flex-direction: column; }
.note-dialog-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px 24px; }
.note-dialog-head h2 { margin: 0; font-size: 19px; font-weight: 800; flex-grow: 1; }
.note-dialog-close { width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font-size: 18px; text-decoration: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.note-dialog-body { padding: 0 24px; display: flex; flex-direction: column; }
.note-textarea { width: 100%; min-height: 110px; box-sizing: border-box; padding: 12px 14px; border-radius: 14px; border: 0; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.4; resize: none; outline: none; background: var(--note-yellow); color: var(--note-yellow-ink); }
.note-dialog:has(.note-blue:checked) .note-textarea { background: var(--note-blue); color: var(--note-blue-ink); }
.note-dialog:has(.note-green:checked) .note-textarea { background: var(--note-green); color: var(--note-green-ink); }
.note-dialog:has(.note-pink:checked) .note-textarea { background: var(--note-pink); color: var(--note-pink-ink); }
.note-textarea::placeholder { color: inherit; opacity: 0.6; }
.note-textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.note-error { padding-top: 6px; }
.note-row { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.note-row-head { display: flex; align-items: center; gap: 12px; }
.note-row-label { font-size: 14px; font-weight: 700; flex-grow: 1; }
.note-row:not(:has(.note-switch:checked)) .note-sub { display: none; }
.note-colors { display: flex; gap: 8px; }
.note-color { appearance: none; margin: 0; width: 36px; height: 36px; border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.note-color:checked { box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--accent); }
.note-color.note-yellow { background: var(--note-yellow); }
.note-color.note-blue { background: var(--note-blue); }
.note-color.note-green { background: var(--note-green); }
.note-color.note-pink { background: var(--note-pink); }
.note-color:focus-visible, .note-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* switch (mockup sw_: track 42 × 24, knob 18) as a checkbox of the form */
.note-switch { appearance: none; margin: 0; width: 42px; height: 24px; flex-shrink: 0; box-sizing: border-box; padding: 3px; border: 0; border-radius: 999px; background: var(--line); display: flex; justify-content: flex-start; cursor: pointer; }
.note-switch::before { content: ""; width: 18px; height: 18px; border-radius: 999px; background: var(--accent-text); box-shadow: var(--shadow-knob); }
.note-switch:checked { background: var(--switch-on); justify-content: flex-end; }
.note-when { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.note-field { height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: inherit; font-size: 14px; }
.note-field:focus-visible { outline: none; border-color: var(--accent); }
input.note-field.note-sub { width: 100%; }
.note-channels { display: flex; flex-wrap: wrap; gap: 6px; }
.note-channel { height: 36px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--field); color: var(--text); display: flex; align-items: center; cursor: pointer; }
.note-channel input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.note-channel:has(input:checked) { font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.note-channel:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* push is not built (no mobile app yet): greyed out like a locked switch, not choosable */
.note-channel[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.note-dialog-foot { display: flex; gap: 10px; padding: 14px 24px 20px 24px; border-top: 1px solid var(--line); }
.note-btn { height: 44px; box-sizing: border-box; padding: 0 20px; border-radius: 999px; border: 0; font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; display: flex; align-items: center; cursor: pointer; }
.note-delete { background: var(--tone-red-bg); color: var(--tone-red-fg); }
.note-cancel { background: var(--field); color: var(--text); }
.note-save { background: var(--accent); color: var(--accent-text); }
/* ----- end Notizen ----- */
/* ----- Statistiken (M8 B8; mockups Statistiken*, Statistiken-Forecast*; generator statistiken.py MARK, KARTE,
   KOPF_K, RASTER, RASTER3, FORECAST, GERAETE_TAB, KALENDER, DLG_EIN) ----- */
.st-head { display: flex; align-items: center; gap: 16px; }
.st-h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.4px; }
.st-pill { box-sizing: border-box; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.st-pill.drop { padding: 0 16px 0 18px; }
.st-chips { display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.st-chip { box-sizing: border-box; height: 36px; white-space: nowrap; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; display: flex; align-items: center; gap: 8px; background: transparent; color: var(--muted); box-shadow: none; text-decoration: none; }
.st-chip[aria-current="page"] { font-weight: 800; background: var(--card); color: var(--text); box-shadow: var(--shadow-segment); }
.st-tabs { flex-shrink: 0; display: flex; align-items: center; gap: 12px; }
.st-kpis { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; }
.st-kpi { text-decoration: none; display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); min-width: 0; color: var(--text); }
.st-kpi-num { flex-shrink: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.3px; line-height: 30px; white-space: nowrap; color: var(--text); }
.st-kpi-num.gold { color: var(--tone-gold-fg); }
.st-kpi-num.red { color: var(--tone-red-fg); }
.st-kpi-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex-grow: 1; }
.st-kpi-label { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-kpi-note { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-grid { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.st-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-card { border-radius: 20px; background: var(--card); box-shadow: var(--shadow); padding: 16px 20px 14px 20px; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.st-card.wide { grid-column: 1 / -1; }
.st-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.st-card-title { margin: 0; font-size: 17px; font-weight: 800; white-space: nowrap; }
.st-card-note { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.st-pin { width: 30px; height: 30px; flex-shrink: 0; margin: -4px -6px -4px 0; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.st-pin.flat { margin: 0; }
.st-pin-form { display: contents; }
/* tables and lists inside the area cards (statistiken.py TH, ZL, ZR_, KL, C_LF, C_LA, the scrolling box, hints of
   "Abgleich Lieferanten-Aufträge", rows of "Größte Bestandswerte", tiles of "Lieferwege & Touren") */
.st-scroll { flex-grow: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.st-th { display: grid; gap: 10px; align-items: center; padding: 10px 0 6px 0; border-bottom: 1px solid var(--line); }
.st-thl { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.st-thl.r { text-align: right; }
.st-tr { display: grid; gap: 10px; align-items: center; min-height: 38px; padding: 4px 0; box-sizing: border-box; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-td { text-align: right; font-weight: 600; color: var(--text); white-space: nowrap; }
.st-td.strong { font-weight: 800; }
.st-td-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-td-nr { font-weight: 700; color: var(--accent-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-td-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-cols-lf { grid-template-columns: minmax(0, 1fr) 90px 100px 100px 110px 100px 110px 110px; }
.st-cols-lf.no-net { grid-template-columns: minmax(0, 1fr) 90px 100px 100px 100px 110px 110px; }
.st-cols-la { grid-template-columns: 10px 150px minmax(0, 1fr) 100px 100px 140px 110px; }
.st-cols-la.no-value { grid-template-columns: 10px 150px minmax(0, 1fr) 100px 100px 140px; }
.st-dot { width: 8px; height: 8px; border-radius: 999px; background: transparent; }
.st-dot.gold { background: var(--warn-dot); }
.st-dot.red { background: var(--tag-w); }
.st-sublabel { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); padding: 14px 0 4px 0; }
.st-hint { display: flex; align-items: center; gap: 10px; height: 36px; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-hint-name { flex-grow: 1; font-weight: 700; }
.st-hint-n { font-weight: 800; }
.st-top { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-top-head { display: flex; gap: 10px; font-size: 14px; }
.st-top-name { font-weight: 700; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-top-value { font-weight: 800; white-space: nowrap; }
.st-top-line { display: flex; align-items: center; gap: 10px; }
.st-top-track { flex-grow: 1; }
.st-top-sub { font-size: 13px; color: var(--muted); white-space: nowrap; }
.st-tiles { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 1fr); gap: 10px; padding-top: 12px; }
.st-chart { padding-top: 6px; }
.st-chart.low { padding-top: 16px; }
/* Überblick › Materialbedarf je KW (statistiken.py UEBERBLICK) */
.st-mat { display: flex; gap: 20px; flex-grow: 1; min-height: 0; }
.st-mat-chart { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; }
.st-mat-list { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; padding-top: 10px; }
.st-listhead { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.st-gh { display: flex; flex-direction: column; gap: 1px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.st-gh-head { display: flex; gap: 8px; }
.st-gh-name { font-size: 14px; font-weight: 700; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-gh-value { font-size: 14px; font-weight: 700; }
.st-gh-sub { font-size: 13px; color: var(--muted); }
/* Trichter, Durchlaufzeiten (statistiken.py VERTRIEB, BAUSTELLE) */
.st-th.st-cols-tr, .st-fr.st-cols-tr { grid-template-columns: 170px minmax(0, 1fr) 70px 70px 84px; gap: 14px; }
.st-th.st-cols-ph, .st-fr.st-cols-ph { grid-template-columns: 230px minmax(0, 1fr) 76px 76px; gap: 14px; }
.st-fr { display: grid; align-items: center; height: 34px; border-bottom: 1px solid var(--line); font-size: 14px; }
.st-fr.st-cols-ph { height: 44px; }
.st-fr-name { font-weight: 700; white-space: nowrap; }
.st-fr-n { text-align: right; font-weight: 800; white-space: nowrap; }
.st-fr-sub { text-align: right; color: var(--muted); font-weight: 600; white-space: nowrap; }
/* Aufträge je Projektleiter */
.st-pm { display: flex; flex-direction: column; gap: 6px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.st-pm-head { display: flex; gap: 10px; font-size: 14px; }
.st-pm-name { font-weight: 700; flex-grow: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-pm-n { color: var(--muted); font-weight: 600; white-space: nowrap; }
.st-pm-value { font-weight: 800; white-space: nowrap; width: 84px; text-align: right; }
/* the area cards as dashboard widgets (dashboard.py diag, frei, lf_m, la_m, gh_liste, tr, tour) */
.st-widget > .st-chart { flex-grow: 1; display: flex; align-items: center; }
.st-widget .st-mat { gap: 24px; }
.st-widget .st-mat-chart { width: 640px; }
.st-widget .st-tiles { grid-template-columns: 1fr 1fr 1fr; }
.st-widget .st-th.st-cols-tr, .st-widget .st-fr.st-cols-tr { grid-template-columns: 170px minmax(0, 1fr) 64px 60px 76px; gap: 12px; }
.st-scroll[data-ganz] { overflow-x: hidden; scrollbar-width: thin; overscroll-behavior: contain; display: flex; flex-direction: column; }
.st-cols-lfm { grid-template-columns: minmax(0, 1fr) 64px 100px 84px; }
.st-cols-lfm.no-net { grid-template-columns: minmax(0, 1fr) 64px 84px; }
.st-cols-lam { grid-template-columns: 10px minmax(0, 1fr) 86px 96px; }
.st-td-two { display: flex; flex-direction: column; min-width: 0; }
.st-td-sub { font-size: 13px; font-weight: 700; color: var(--accent-ink); }
/* forecast card: views, chips, period stepper, columns menu */
.st-card.fc { flex-grow: 1; padding-bottom: 0; position: relative; }
.fc-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
.fc-views { display: flex; align-items: center; }
.fc-view { box-sizing: border-box; height: 36px; padding: 0 2px; margin-right: 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; font: inherit; font-size: 16px; font-weight: 800; color: var(--muted); cursor: pointer; white-space: nowrap; text-decoration: none; display: flex; align-items: center; }
.fc-view[aria-current="page"] { border-bottom-color: var(--accent); color: var(--text); }
.fc-chip { box-sizing: border-box; height: 30px; white-space: nowrap; padding: 0 12px 0 14px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; display: flex; align-items: center; gap: 8px; background: transparent; color: var(--muted); box-shadow: none; text-decoration: none; }
.fc-chip[aria-current="page"] { font-weight: 800; background: var(--card); color: var(--text); box-shadow: var(--shadow-segment); }
.fc-chip-n { font-size: 12px; font-weight: 700; color: var(--muted); }
.fc-chip[aria-current="page"] .fc-chip-n { color: var(--accent-ink); }
.fc-step { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 14px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line); }
.fc-step-btn { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-step); }
.fc-range { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; min-width: 128px; line-height: 1.15; padding: 2px 6px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; cursor: pointer; text-decoration: none; }
.fc-range-days { font-size: 13px; font-weight: 800; white-space: nowrap; }
.fc-range-kw { font-size: 12px; font-weight: 600; color: var(--muted); }
.fc-cols { display: contents; }
.fc-cols > summary { list-style: none; }
.fc-cols > summary::-webkit-details-marker { display: none; }
.fc-cols-btn { box-sizing: border-box; height: 44px; flex-shrink: 0; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.fc-menu { position: absolute; top: 62px; right: 14px; z-index: 5; width: 250px; box-sizing: border-box; padding: 12px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; margin: 0; }
.fc-menu-title { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); padding: 4px 6px 8px 6px; border-bottom: 1px solid var(--line); }
.fc-menu-item { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px; font-size: 14px; font-weight: 600; cursor: pointer; }
.fc-menu-item input { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); }
/* table: flex rows with the mockup's column widths (grid template of statistiken.py SP / gSP) */
.fc-scroll { flex-grow: 1; min-height: 0; overflow: auto; scrollbar-width: thin; margin: 0 -20px; padding: 0 20px; }
.fc-tr { display: flex; gap: 6px; align-items: center; min-width: max-content; box-sizing: border-box; }
.fc-th { position: sticky; top: 0; z-index: 4; background: var(--card); height: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fc-th.dev { z-index: 2; }
.fc-dotcell, .fc-dot { flex: none; width: 8px; margin-right: 2px; }
.fc-dot { height: 8px; border-radius: 999px; background: transparent; }
.fc-dot.red { background: var(--tag-w); }
.fc-dot.gold { background: var(--warn-dot); }
.fc-dot.ok { background: var(--done); }
.fc-name { flex: 1 0 170px; width: 170px; min-width: 0; display: flex; align-items: center; gap: 8px; }
.fc-th.dev .fc-name, .fc-row.dev .fc-name, .fc-ghead .fc-name { flex-basis: 160px; width: 160px; }
.fc-c { flex: none; text-align: right; min-width: 0; }
.fc-w { width: 40px; }
.narrow .fc-w { width: 36px; }
.fc-sum { width: 52px; } .fc-stock { width: 86px; } .fc-ordered { width: 74px; } .fc-open { width: 50px; }
.fc-supplier { width: 92px; } .fc-lead { width: 88px; } .fc-deadline { width: 78px; } .fc-by { width: 98px; }
.g-stock { width: 60px; } .g-transit { width: 82px; } .g-backlog { width: 80px; } .g-later { width: 58px; }
.g-undated { width: 84px; } .g-drop { width: 72px; } .g-lasts { width: 100px; } .g-missing { width: 100px; }
.fc-hl { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fc-hl.kw { letter-spacing: 0; }
.fc-hcell { position: relative; display: flex; justify-content: flex-start; }
.fc-hcell.end { justify-content: flex-end; }
.fc-hbtn { display: flex; align-items: center; gap: 5px; min-width: 0; height: 30px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.fc-hlabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-hsort, .fc-hfilter { flex-shrink: 0; }
.fc-hmodel { display: flex; align-items: center; gap: 5px; }
.fc-hmodel-filter { flex-shrink: 0; opacity: 0.7; }
.fc-row { min-width: max-content; border-bottom: 1px solid var(--line); background: transparent; }
.fc-row[open] { background: var(--row-expanded); }
.fc-row > summary { list-style: none; cursor: pointer; color: var(--text); font-size: 14px; }
.fc-row > summary::-webkit-details-marker { display: none; }
.fc-art { min-height: 52px; padding: 6px 0; }
.fc-model { min-height: 46px; padding: 4px 0; }
.fc-chev { flex-shrink: 0; color: var(--muted); }
.fc-row[open] .fc-chev { transform: rotate(90deg); }
.fc-name-text { display: flex; flex-direction: column; min-width: 0; }
.fc-name-main { font-weight: 700; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-name-nr { font-size: 13px; color: var(--accent-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-w.on { font-weight: 700; color: var(--text); }
.fc-w.off { font-weight: 500; color: var(--muted); }
.fc-art .fc-sum { font-weight: 800; }
.fc-art .fc-stock { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-art .fc-ordered { font-weight: 600; }
.fc-art .fc-open { font-weight: 800; }
.fc-art .fc-supplier { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-art .fc-lead { font-weight: 600; white-space: nowrap; }
.fc-art .fc-deadline, .fc-art .fc-by { font-weight: 700; white-space: nowrap; }
.fc-c.muted, .fc-ell.muted, .fc-model-title.muted { color: var(--muted); }
.fc-c.red { color: var(--tag-w); }
/* opened row: the projects */
.fc-sub { padding: 0 0 12px 38px; }
.fc-sub-grid { display: grid; grid-template-columns: 110px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) 150px 120px 90px 70px 70px; gap: 10px; align-items: center; }
.g-sub-grid { display: grid; grid-template-columns: 110px minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 130px 60px minmax(0, 1.6fr); gap: 10px; align-items: center; }
.fc-sub-head { height: 32px; border-bottom: 1px solid var(--line); }
.fc-sub-head > span { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.fc-sub-head > .end { text-align: right; }
.fc-sub-row { text-decoration: none; height: 36px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.fc-sub-nr { font-weight: 700; color: var(--accent-ink); }
.fc-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-sub-date { font-weight: 600; white-space: nowrap; }
.fc-sub-qty { text-align: right; font-weight: 800; }
.fc-sub-ordered { text-align: right; color: var(--muted); }
/* devices: group heads and models */
.fc-ghead { height: 38px; border-bottom: 1px solid var(--line); font-size: 14px; min-width: max-content; }
.fc-gtitle { font-weight: 800; white-space: nowrap; }
.g-num { font-weight: 700; white-space: nowrap; color: var(--text); }
.g-wsum { font-weight: 800; }
.g-w.on { font-weight: 700; color: var(--text); }
.g-w.off { font-weight: 500; color: var(--muted); }
.g-num.muted { color: var(--muted); }
.g-num.red { color: var(--tag-w); }
.fc-model-title { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-model-sub { font-size: 13px; color: var(--muted); font-weight: 600; }
.g-route { display: flex; align-items: center; gap: 8px; min-width: 0; }
.chip.g-pill { flex-shrink: 0; padding: 2px 9px; line-height: normal; }
.g-info { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* calendar "Zeitraum wählen" */
.fc-cal { position: absolute; top: 62px; right: 110px; z-index: 6; width: 680px; box-sizing: border-box; padding: 20px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow-pop), 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 12px; }
.fc-cal-nav { display: flex; align-items: center; gap: 10px; }
.fc-cal-arrow { width: 36px; height: 36px; border-radius: 10px; border: 0; background: var(--field); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.fc-cal-months { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.fc-cal-month { display: flex; flex-direction: column; gap: 4px; }
.fc-cal-title { font-size: 14px; font-weight: 800; text-align: center; padding-bottom: 4px; }
.fc-cal-grid { display: grid; grid-template-columns: 34px repeat(7, 1fr); }
.fc-cal-wd { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.fc-cal-row { gap: 2px 0; }
.fc-cal-kw, .fc-cal-day { box-sizing: border-box; height: 36px; border: 0; border-radius: 9px; background: transparent; font: inherit; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.fc-cal-kw { margin-right: 4px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 800; cursor: pointer; }
.fc-cal-kw.on { background: var(--accent-soft); color: var(--accent-ink); }
.fc-cal-kw.past { color: var(--line); cursor: default; }
.fc-cal-day { color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; }
.fc-cal-day.out { color: transparent; cursor: default; }
.fc-cal-day.past { color: var(--line); cursor: default; }
.fc-cal-day.on { background: var(--accent-soft); color: var(--accent-ink); }
.fc-cal-day.edge { background: var(--accent); color: var(--accent-text); font-weight: 800; }
.fc-cal-day.today { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--accent); }
.fc-cal-foot { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.fc-cal-text { font-size: 14px; font-weight: 700; flex-grow: 1; }
.fc-cal-cancel, .fc-cal-ok { box-sizing: border-box; height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; display: flex; align-items: center; }
.fc-cal-ok { padding: 0 20px; background: var(--accent); color: var(--accent-text); }
/* dialog "Einstellungen Forecast" (DLG_EIN) */
.fc-dialog { width: 560px; max-height: 720px; box-sizing: border-box; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-dash-dialog); display: flex; flex-direction: column; }
.fc-dialog-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px 14px 24px; border-bottom: 1px solid var(--line); }
.fc-dialog-head h2 { margin: 0; font-size: 19px; font-weight: 800; flex-grow: 1; }
.fc-dialog-close { box-sizing: border-box; width: 36px; height: 36px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 18px; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.fc-dialog-form { display: flex; flex-direction: column; min-height: 0; }
.fc-dialog-body { overflow-y: auto; padding: 8px 24px 8px 24px; display: flex; flex-direction: column; }
.fc-set-row { display: flex; align-items: center; gap: 12px; height: 56px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 700; }
.fc-set-row.supplier { height: 52px; font-weight: normal; }
.fc-set-input { width: 90px; height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: right; }
.fc-set-unit { width: 52px; color: var(--muted); font-weight: 600; }
.fc-set-title { font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); padding: 16px 0 6px 0; }
.fc-set-name { flex-grow: 1; display: flex; flex-direction: column; }
.fc-set-supplier { font-weight: 700; }
.fc-set-measured { font-size: 13px; color: var(--muted); }
.fc-dialog-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 20px 24px; border-top: 1px solid var(--line); }
.fc-dialog-cancel, .fc-dialog-save { box-sizing: border-box; height: 44px; padding: 0 20px; border-radius: 999px; border: 0; background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; display: flex; align-items: center; }
.fc-dialog-save { padding: 0 22px; background: var(--accent); color: var(--accent-text); }
/* ----- end Statistiken ----- */
/* ----- Dashboard-Widgets (Forecast, M8 B8; mockup dashboard.py rueck_m/_l, faell_m/_l, ba_m/_l, gm_m/_l) ----- */
.sw-back-m { display: grid; grid-template-columns: minmax(0, 1.3fr) 92px minmax(0, 0.9fr) 76px 44px; gap: 10px; align-items: center; }
.sw-back-l { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px minmax(0, 1fr) minmax(0, 1fr) 110px 60px minmax(0, 1.4fr); gap: 10px; align-items: center; }
.sw-due-m { display: grid; grid-template-columns: minmax(0, 1fr) 76px 110px; gap: 10px; align-items: center; }
.sw-due-l { display: grid; grid-template-columns: minmax(0, 1.6fr) 130px 80px 70px minmax(0, 1fr) 70px 110px; gap: 10px; align-items: center; }
.dw-head > .end, .sw-line > .end { text-align: right; }
.sw-line { text-decoration: none; height: 40px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.sw-line.m { height: auto; min-height: 44px; }
.sw-line.tall { height: auto; min-height: 46px; padding: 4px 0; box-sizing: border-box; }
.sw-route { font-size: 13px; font-weight: 700; color: var(--tone-neutral-fg); }
.sw-route.tone-red { color: var(--tone-red-fg); } .sw-route.tone-gold { color: var(--tone-gold-fg); } .sw-route.tone-cyan { color: var(--tone-cyan-fg); }
.sw-route { background: transparent; }
.sw-date { font-weight: 600; white-space: nowrap; }
.sw-qty { text-align: right; font-weight: 800; white-space: nowrap; }
.sw-by { text-align: right; font-weight: 700; white-space: nowrap; color: var(--tag-w); }
.sw-name { font-weight: 700; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sw-sub { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-nr { font-size: 13px; color: var(--accent-ink); font-weight: 600; }
.sw-due-l .sw-nr { font-size: 14px; }
.sw-msub { font-size: 13px; color: var(--muted); font-weight: 600; }
/* forecast tables of the widgets: flex rows with the mockup's column widths (weeks vary) */
.sw-tr { display: flex; gap: 8px; align-items: center; }
.sw-th { padding: 10px 0 6px 0; border-bottom: 1px solid var(--line); }
.sw-th > span { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); white-space: nowrap; letter-spacing: 0; }
.sw-th > .sw-c { text-align: right; }
.sw-row { text-decoration: none; min-height: 48px; padding: 4px 0; box-sizing: border-box; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.sw-row.dev { min-height: 46px; }
.sw-name-c { flex: 1 1 0; min-width: 0; }
.sw-c { flex: none; text-align: right; min-width: 0; }
.sw-flex { flex: 0.5 1 0; }
.w40 { width: 40px; } .w50 { width: 50px; } .w54 { width: 54px; } .w60 { width: 60px; } .w70 { width: 70px; } .w76 { width: 76px; }
.w80 { width: 80px; } .w82 { width: 82px; } .w86 { width: 86px; } .w90 { width: 90px; } .w96 { width: 96px; } .w100 { width: 100px; }
.sw-strong { font-weight: 800; }
.sw-mid { font-weight: 600; }
.sw-b { font-weight: 700; color: var(--text); }
.sw-b.muted, .sw-row .muted { color: var(--muted); }
.sw-b.red { color: var(--tag-w); }
.sw-by-c { font-weight: 700; white-space: nowrap; }
/* the weeks of the wide forecast tables ("Bedarf je Artikel", "Geräte nach Modell", up to 26): as many as fit beside
   the article / model and the fixed columns ("Bestellen bis", "Zu beschaffen" never cut off); a week takes 48 px,
   the rest of the row 680 px */
.dash-card:has(> .sw-th > .w40) { container: fc / inline-size; }
.dash-card:has(> .sw-th > .w40) .sw-name-c { min-width: 160px; }
@container fc (max-width: 1927px) { .sw-tr > .w40:nth-child(n+26 of .w40) { display: none; } }
@container fc (max-width: 1879px) { .sw-tr > .w40:nth-child(n+25 of .w40) { display: none; } }
@container fc (max-width: 1831px) { .sw-tr > .w40:nth-child(n+24 of .w40) { display: none; } }
@container fc (max-width: 1783px) { .sw-tr > .w40:nth-child(n+23 of .w40) { display: none; } }
@container fc (max-width: 1735px) { .sw-tr > .w40:nth-child(n+22 of .w40) { display: none; } }
@container fc (max-width: 1687px) { .sw-tr > .w40:nth-child(n+21 of .w40) { display: none; } }
@container fc (max-width: 1639px) { .sw-tr > .w40:nth-child(n+20 of .w40) { display: none; } }
@container fc (max-width: 1591px) { .sw-tr > .w40:nth-child(n+19 of .w40) { display: none; } }
@container fc (max-width: 1543px) { .sw-tr > .w40:nth-child(n+18 of .w40) { display: none; } }
@container fc (max-width: 1495px) { .sw-tr > .w40:nth-child(n+17 of .w40) { display: none; } }
@container fc (max-width: 1447px) { .sw-tr > .w40:nth-child(n+16 of .w40) { display: none; } }
@container fc (max-width: 1399px) { .sw-tr > .w40:nth-child(n+15 of .w40) { display: none; } }
@container fc (max-width: 1351px) { .sw-tr > .w40:nth-child(n+14 of .w40) { display: none; } }
@container fc (max-width: 1303px) { .sw-tr > .w40:nth-child(n+13 of .w40) { display: none; } }
@container fc (max-width: 1255px) { .sw-tr > .w40:nth-child(n+12 of .w40) { display: none; } }
@container fc (max-width: 1207px) { .sw-tr > .w40:nth-child(n+11 of .w40) { display: none; } }
@container fc (max-width: 1159px) { .sw-tr > .w40:nth-child(n+10 of .w40) { display: none; } }
@container fc (max-width: 1111px) { .sw-tr > .w40:nth-child(n+9 of .w40) { display: none; } }
@container fc (max-width: 1063px) { .sw-tr > .w40:nth-child(n+8 of .w40) { display: none; } }
@container fc (max-width: 1015px) { .sw-tr > .w40:nth-child(n+7 of .w40) { display: none; } }
@container fc (max-width: 967px) { .sw-tr > .w40:nth-child(n+6 of .w40) { display: none; } }
@container fc (max-width: 919px) { .sw-tr > .w40:nth-child(n+5 of .w40) { display: none; } }
@container fc (max-width: 871px) { .sw-tr > .w40:nth-child(n+4 of .w40) { display: none; } }
@container fc (max-width: 823px) { .sw-tr > .w40:nth-child(n+3 of .w40) { display: none; } }
@container fc (max-width: 775px) { .sw-tr > .w40:nth-child(n+2 of .w40) { display: none; } }
@container fc (max-width: 727px) { .sw-tr > .w40:nth-child(n+1 of .w40) { display: none; } }
/* ----- end Dashboard-Widgets (Forecast) ----- */
/* the funnel of a column head shows on hover only (mockup design.py `.th-tr`) */
.fc-hfilter { display: none; }
.fc-hbtn:hover .fc-hfilter, .fc-hbtn:focus-visible .fc-hfilter { display: block; }

/* Einstellungen › Darstellung (mockup Einstellungen-Darstellung, einstellungen.py DARST): rows with segments or a
   selection, the logo previews on their grounds, the saved views per page */
.look-label { font-size: 15px; font-weight: 700; flex-grow: 1; }
.look-segments { flex-shrink: 0; }
.look-segments .segment { padding: 0 14px; }
.look-segments .segment[aria-pressed="true"] { font-weight: 800; background: var(--card); color: var(--text); box-shadow: var(--shadow-segment); }
.setting-multi.look-start { width: 220px; }
a.setting-option { text-decoration: none; }
.logo-grid { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr; gap: 16px; padding: 4px 22px 18px 22px; }
.logo-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.logo-cell-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.logo-preview { height: 84px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; padding: 0 16px; }
.logo-preview.light { background: var(--logo-ground-light); }
.logo-preview.dark { background: var(--logo-ground-dark); }
.logo-preview.mark { background: var(--field); }
.logo-preview img { max-height: 44px; max-width: 100%; object-fit: contain; }
.logo-actions { display: flex; gap: 8px; }
.file-hidden { display: none; }
.card.look-views { flex-grow: 1; flex-shrink: 1; }
.look-views-body { flex-grow: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.look-views-group { display: flex; align-items: center; height: 34px; padding: 0 22px; background: var(--header); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--header-label); }
.look-views-row { display: flex; align-items: center; gap: 14px; height: 50px; padding: 0 22px; }
.look-views-row:has(+ .look-views-row) { border-bottom: 1px solid var(--line); }
.look-views-name { font-size: 15px; font-weight: 700; flex-grow: 1; }
.btn.dim[aria-disabled="true"] { cursor: default; }
/* Mein Konto, card E-Mail-Adresse (mockup Einstellungen: label row 60 px, field 360 × 36) */
.mail-row { display: flex; align-items: center; gap: 12px; min-height: 60px; box-sizing: border-box; padding: 6px 22px; }
.mail-label { font-size: 15px; font-weight: 700; flex-grow: 1; }
.mail-input { width: 360px; height: 36px; box-sizing: border-box; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; }
.mail-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Einstellungen › Lieferanten ausblenden and › Einkauf „Für alle ausgeblendete Lieferanten“ (mockups
   Einstellungen-Lieferanten(-Dunkel), Einstellungen-Einkauf: einstellungen.py LIEF, einstellungen_fach.py ALLE_AUS) */
.hide-grid { flex-grow: 1; min-height: 0; display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 24px; }
.card.hide-own { align-self: start; max-height: 100%; }
.hide-own-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 22px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.hide-own-row:last-child, .hide-row:last-child { border-bottom: 0; }
.hide-own-text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0; }
.hide-own-line { display: flex; align-items: center; gap: 8px; }
.hide-own-name { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hide-own-domains { font-size: 13px; color: var(--muted); }
/* hidden for everyone (mockup Einstellungen-Lieferanten-Fuer-Alle): greyed out as the fixed switches, note instead of the button */
.hide-own-row.for-all .hide-own-text { opacity: 0.45; }
.hide-own-note { flex-shrink: 0; font-size: 13px; color: var(--muted); }
.hide-empty { padding: 18px 22px; font-size: 14px; color: var(--muted); }
.hide-search-bar { display: block; flex-shrink: 0; padding: 12px 22px; border-bottom: 1px solid var(--line); }
.hide-search { display: flex; align-items: center; gap: 10px; height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; background: var(--field); color: var(--muted); }
.hide-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }
.hide-search input { flex-grow: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 15px; color: var(--text); }
.hide-head { position: sticky; top: 0; z-index: 3; background: var(--card); display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px; gap: 12px; align-items: center; height: 42px; padding: 0 22px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }
.hide-head-kind { position: relative; }
.hide-kind-menu > summary { list-style: none; }
.hide-kind-menu > summary::-webkit-details-marker { display: none; }
.hide-kind-button { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.hide-kind-button.active { color: var(--accent-ink); }
.hide-kind-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hide-kind-list { top: 36px; left: 0; right: auto; text-transform: none; letter-spacing: normal; }
.hide-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 120px; gap: 12px; align-items: center; min-height: 52px; padding: 6px 22px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.hide-row-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hide-row-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hide-row-domains { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hide-row-kind { font-size: 14px; color: var(--muted); }
.hide-row-action { display: flex; justify-content: flex-end; }
.setting-multi.hide-add { width: 220px; }
.hide-all-name { font-size: 14px; font-weight: 700; flex-grow: 1; }
.hide-all-kind { font-size: 13px; color: var(--muted); }
.hide-all-empty { display: flex; align-items: center; min-height: 52px; padding: 0 22px; font-size: 14px; color: var(--muted); }
.toast.with-undo { padding: 12px 14px 12px 18px; }
.toast-undo { height: 32px; padding: 0 12px; border-radius: 9px; border: 0; background: transparent; color: var(--accent-soft); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.toast-undo:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
/* "Rückgängig" of the cases' toast (mockup Dashboard toast: 30 px, 14 px) */
.toast-undo.pf { height: 30px; font-size: 14px; }