/*
 * Portal styles, built from the vengine UI design system's components (bundle.css and the
 * component READMEs). Each block names the vengine component it follows; values are the
 * system's tokens. The portal keeps its own class names, so the templates did not change.
 * Rules carried over: one weight (Moderat Regular), hierarchy by size and colour; white and
 * space carry the page; Galaxy only for states; no red, no green (status by text and icon);
 * hover in the environment is `hover` grey; rows hover without radius.
 * Page titles use h2 (32 px), not display: the system's open proposal of 02.11.2026 for
 * working tools ("Groß, wo man ankommt, kompakt, wo man arbeitet"). Display is kept for the
 * login pages, where a person arrives.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--text-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, b, strong, th { font-weight: 400; }
a { color: inherit; }
a:not([class]):hover { color: var(--text-accent); }
button, input, select, textarea { font: inherit; color: inherit; }
/* Fokus: 2 px focus, 3 px Abstand, durchgezogen, für jedes Bedienelement. */
:focus-visible { outline: var(--border-strong) solid var(--focus); outline-offset: 3px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.kk-icon { display: inline-flex; flex: none; line-height: 0; }
.muted { color: var(--text-muted); }
.error-text { color: var(--text-accent); }

/* ---------------------------------------------------------------- page frame */
/* Content at most size-content wide, page margin clamp(20px, 4.4vw, 64px); the header aligns
   its edges with the content column. */
:root { --page: clamp(20px, 4.4vw, 64px); --page-l: var(--page); --page-r: var(--page); --app-header: var(--size-header); }
main { max-width: calc(var(--size-content) + 2 * var(--page)); margin-inline: auto; }

/* ---------------------------------------------------------------- Header and Logo */
/* Header size-header on surface: left the Logo (mark in currentColor, word mark in lead, the
   area in text-subtle), then the navigation, the profile button right. */
.app-header {
  display: flex; align-items: center; gap: var(--spacing-24);
  height: var(--size-header); padding: 0 max(var(--page), calc((100% - var(--size-content)) / 2));
  background: var(--surface); color: var(--text); border-bottom: var(--border-hairline) solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
.app-header .home, .vu-logo {
  display: inline-flex; align-items: center; gap: var(--spacing-12); flex: none;
  font: var(--text-lead); color: var(--text); text-decoration: none;
}
.home-mark { display: block; width: 30px; height: 26px; }
.home-area { color: var(--text-subtle); }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-control-md); height: var(--size-control-md); border-radius: var(--radius-pill);
  background: var(--surface-inverse); color: var(--text-inverse); font: var(--text-label);
  transition: background-color var(--duration-fast) ease;
}
.avatar-btn { flex: none; margin-left: auto; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer; }
.avatar-btn:hover .avatar { background: var(--action-hover); }

/* Navigation in the header: 44 px pills, hover `hover`, the current page text-accent on
   surface-accent (as in Menu). Verwaltung's sub pages link to each other on the page itself;
   Verwaltung stays marked on them. */
.main-nav { display: flex; align-items: center; gap: var(--spacing-4); min-width: 0; }
.menu-tile {
  display: inline-flex; align-items: center; height: var(--size-control-sm); padding: 0 18px;
  border-radius: var(--radius-pill); color: var(--text); text-decoration: none; white-space: nowrap;
  font: var(--text-label); transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.menu-tile .kk-icon, .menu-tile-sub { display: none; }
.menu-tile:hover { background: var(--hover); }
.menu-tile[aria-current="page"],
.main-nav:has(.menu-tile-sub[aria-current="page"]) .menu-tile[href="/admin"] { background: var(--surface-accent); color: var(--text-accent); }

/* Menu (the profile menu): 360 px, radius-menu, line contour, shadow-menu; name on top, a
   hairline, then the items (radius-md, hover `hover`). Fixed under the header's right edge. */
.profile-menu {
  inset: calc(var(--app-header-bar, var(--size-header)) + var(--spacing-8)) max(var(--page), calc((100% - var(--size-content)) / 2)) auto auto; margin: 0;
  width: 360px; max-width: calc(100vw - 40px); padding: var(--spacing-8);
  border: var(--border-hairline) solid var(--line); border-radius: var(--radius-menu);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-menu);
}
.profile-menu:popover-open { display: grid; }
.profile-name {
  margin: 0 0 var(--spacing-8); padding: 14px 14px 18px; border-bottom: var(--border-hairline) solid var(--line);
  font: var(--text-body); overflow-wrap: anywhere;
}
.profile-menu .profile-logout {
  justify-content: flex-start; gap: 14px; width: 100%; min-height: 0; padding: var(--spacing-12) 14px;
  border-radius: var(--radius-md); box-shadow: none; background: transparent; color: var(--text); font: var(--text-body);
}
.profile-menu .profile-logout:hover { background: var(--hover); }
.profile-menu .profile-logout .kk-icon svg { width: 20px; height: 20px; }
/* Browsers before the Popover API (Safari before 17): no profile menu, Abmelden sits in the bar. */
@supports not selector(:popover-open) {
  .avatar-btn, .profile-name { display: none; }
  .profile-menu { display: flex; position: static; width: auto; margin-left: auto; padding: 0; border: 0; background: none; box-shadow: none; }
}

/* ---------------------------------------------------------------- Button */
/* Pills. primary in action (hover action-hover), the one action a view is for; secondary
   with a line contour (hover `hover`); text underlined for ways back (hover text-accent).
   lg 56 px (default here), sm 44 px. Disabled: space-100 with text-muted. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-8);
  min-height: var(--size-control-lg); padding: 0 28px;
  border: 0; border-radius: var(--radius-pill); cursor: pointer; text-decoration: none; text-align: center;
  font: var(--text-label); background: var(--action); color: var(--text-inverse);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.btn:hover { background: var(--action-hover); }
.btn .kk-icon svg { width: 20px; height: 20px; }
.btn-s { min-height: var(--size-control-sm); padding: 0 18px; }
.btn-primary { background: var(--action); color: var(--text-inverse); }
.btn-secondary { background: transparent; color: var(--text); box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }
.btn-secondary:hover { background: var(--hover); }
.btn-text {
  min-height: var(--size-control-sm); padding: 0 var(--spacing-8); background: transparent; color: var(--text);
  text-decoration: underline; text-underline-offset: 4px; line-height: 1.4;
}
.btn-text:hover { background: transparent; color: var(--text-accent); }
.btn-ghost { min-height: var(--size-control-sm); padding: 0 var(--spacing-12); background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--hover); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--space-100); color: var(--text-muted); box-shadow: none; cursor: not-allowed; }
.btn-stretched { width: 100%; }

/* ---------------------------------------------------------------- Field, Checkbox, RadioGroup */
/* Field: an underline without a box. Label meta/text-muted, value lead/text, line `line`;
   in focus a 2 px accent line. Errors in text-accent, as an instruction. */
.field { display: grid; gap: 10px; margin-bottom: var(--spacing-24); font: var(--text-meta); color: var(--text-muted); }
.field input:not([type="checkbox"], [type="radio"]), .field select, .search select, .date-form input {
  min-height: var(--size-control-sm); padding: 0 0 var(--spacing-8);
  border: 0; border-bottom: var(--border-hairline) solid var(--line); border-radius: 0; background: transparent;
  color: var(--text); font: var(--text-lead);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.field input:not([type="checkbox"], [type="radio"]):focus-visible, .field select:focus-visible,
.search select:focus-visible, .date-form input:focus-visible {
  outline: none; border-bottom-color: var(--accent); box-shadow: 0 var(--border-hairline) 0 0 var(--accent);
}
.field select, .search select {
  appearance: none; padding-right: 32px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256' fill='%23000015'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") right 4px center / 20px 20px no-repeat;
}
fieldset.field { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: var(--spacing-8); }
fieldset.field .radio { color: var(--text); }
/* Checkbox: 24 px, radius-xs, contour space-300; on: accent with a white tick; hover: accent
   contour; disabled: space-100, checked galaxy-200. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border-radius: var(--radius-xs); background: transparent; box-shadow: inset 0 0 0 1.5px var(--space-300); cursor: pointer;
  transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
input[type="checkbox"]:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
input[type="checkbox"]:checked {
  box-shadow: inset 0 0 0 1.5px var(--accent);
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256' fill='%23ffffff'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
input[type="checkbox"]:disabled { box-shadow: inset 0 0 0 1.5px var(--space-100); cursor: not-allowed; }
input[type="checkbox"]:disabled:checked { background-color: var(--galaxy-200); box-shadow: inset 0 0 0 1.5px var(--galaxy-200); }
/* RadioGroup list: 24 px circle, contour space-300, chosen accent with a white core. */
input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--space-300); cursor: pointer;
  transition: box-shadow var(--duration-fast) ease;
}
input[type="radio"]:hover { box-shadow: inset 0 0 0 1.5px var(--accent); }
input[type="radio"]:checked, input[type="radio"]:checked:hover { box-shadow: inset 0 0 0 7px var(--accent); }
.radio { display: flex; align-items: center; gap: 14px; min-height: var(--size-control-sm); padding: 10px 0; font: var(--text-body); line-height: 1.4; cursor: pointer; }

/* ---------------------------------------------------------------- simple pages */
.page-narrow { max-width: calc(40rem + var(--page-l) + var(--page-r)); padding: var(--spacing-40) var(--page-r) var(--spacing-48) var(--page-l); }
.page-narrow h1, .page-wide h1 { margin: 0 0 var(--spacing-32); font: var(--text-h2); letter-spacing: -0.02em; }
.page-narrow .back-link { margin-bottom: var(--spacing-24); }
.persona-list { display: grid; gap: var(--spacing-8); margin: var(--spacing-24) 0 0; padding: 0; list-style: none; }
.persona-list .btn { width: 100%; justify-content: flex-start; }
.page-wide { margin: var(--spacing-40) 0 var(--spacing-64); padding: 0 var(--page-r) 0 var(--page-l); }
.page-wide h2 { margin: var(--spacing-40) 0 var(--spacing-16); font: var(--text-h3); letter-spacing: -0.02em; }
/* Table: meta (14 px) throughout, head text-muted over a line-strong rule, rows with a `line`
   hairline, hover `hover` without radius. Wide tables scroll in their box. */
.page-wide table { border-collapse: collapse; width: 100%; font: var(--text-meta); }
.page-wide th {
  padding: var(--spacing-12); text-align: left; vertical-align: bottom; white-space: nowrap;
  color: var(--text-muted); border-bottom: var(--border-hairline) solid var(--line-strong);
}
.page-wide td { padding: var(--spacing-12); border-bottom: var(--border-hairline) solid var(--line); vertical-align: middle; }
.page-wide tbody tr { transition: background-color var(--duration-fast) ease; }
.page-wide tbody tr:hover { background: var(--hover); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-12) var(--spacing-32); margin: 0; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; }

/* Login: a flow step. The content left, at the right a window with the brand gradient
   (radius-xl, at most the viewport high, standing while the page scrolls); below 900 px the
   window goes. The horizontal logo on top, the title in display. */
.login-page {
  min-height: 100vh; padding: var(--page);
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
}
.login-card { width: min(560px, 100%); padding: var(--spacing-40) 0; }
.login-mark { display: block; width: 160px; max-width: 100%; height: auto; }
.login-card h1 { margin: var(--spacing-64) 0 var(--spacing-32); font: var(--text-display); letter-spacing: -0.02em; }
.login-card p { margin: 0 0 var(--spacing-16); font: var(--text-lead); color: var(--text-muted); }
.login-card form, .login-card > .btn { margin-top: var(--spacing-48); }
.login-card .persona-list { margin-top: 0; }
@media (min-width: 900px) {
  .login-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing-48); align-items: start; }
  .login-card { align-self: center; }
  .login-page::after {
    content: ""; position: sticky; top: var(--page); height: calc(100vh - 2 * var(--page));
    border-radius: var(--radius-xl); background: var(--surface-inverse) url("/static/brand/vengine-gradient.jpg") center / cover no-repeat;
  }
}

/* ---------------------------------------------------------------- page head */
.page-head {
  padding: var(--spacing-40) var(--page-r) 0 var(--page-l);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-12) var(--spacing-24);
}
.page-head h1 { margin: 0; font: var(--text-h2); letter-spacing: -0.02em; }
.page-head .meta { display: flex; align-items: center; gap: var(--spacing-12); font: var(--text-meta); color: var(--text-muted); }

/* ---------------------------------------------------------------- Chip (sm, status) */
/* 28 px pill in meta. The plain tag is the `active` tone: a line contour, nothing to do. */
.tag {
  display: inline-flex; align-items: center; gap: var(--spacing-4); height: var(--size-chip-sm); padding: 0 12px;
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border-hairline) var(--line);
  font: var(--text-meta); line-height: 1; color: var(--text); white-space: nowrap;
}

/* ---------------------------------------------------------------- team funnel (Stats) */
/* Number in kpi, label below in text-muted, a line-strong rule on top. No tiles. */
.funnel-band { background: none; }
.funnel {
  margin: var(--spacing-24) var(--page-r) 0 var(--page-l); border-top: var(--border-hairline) solid var(--line-strong);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 var(--spacing-16);
}
.funnel-lane { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-24) var(--spacing-24) 0 0; }
.funnel-count { order: 1; font: var(--text-kpi); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.funnel-label { order: 2; color: var(--text-muted); }
.funnel-value { order: 3; font: var(--text-meta); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- search and filters */
.search {
  padding: var(--spacing-32) var(--page-r) 0 var(--page-l);
  display: flex; flex-wrap: wrap; gap: var(--spacing-24) var(--spacing-40); align-items: flex-end;
}
.search-field { position: relative; flex: 1 1 24rem; }
.search-field .kk-icon { position: absolute; left: 0; top: 10px; pointer-events: none; color: var(--text-muted); }
.search-field .kk-icon svg { width: 24px; height: 24px; }
.search input[type="search"] {
  width: 100%; height: var(--size-control-lg); padding: 0 0 0 36px;
  border: 0; border-bottom: var(--border-hairline) solid var(--line); border-radius: 0; background: transparent;
  font: var(--text-item); color: var(--text);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.search input[type="search"]::placeholder { color: var(--text-muted); }
.search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin-left: var(--spacing-8); cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 256 256' fill='%23000015'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}
/* Nothing to clear while the placeholder shows: the button takes no room, the placeholder all of it. */
.search input[type="search"]:placeholder-shown::-webkit-search-cancel-button { display: none; }
.search input[type="search"]:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 var(--border-hairline) 0 0 var(--accent); }
.search select { height: var(--size-control-lg); flex: 0 1 20rem; }
#filter-state { display: none; }  /* hidden inputs only; still submitted */

/* Pipeline and Verkäufer menus (team scope): the summary reads like a select field, the
   checkboxes open in a Dropdown menu (surface, line contour, radius-menu, shadow-menu). */
.filter-menus { display: flex; gap: var(--spacing-40); flex: 0 1 32rem; }
.filter-menu { position: relative; flex: 1 1 0; }
.filter-menu summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-8);
  height: var(--size-control-lg); padding: 0; list-style: none; cursor: pointer;
  border-bottom: var(--border-hairline) solid var(--line); font: var(--text-lead);
}
.filter-menu summary::-webkit-details-marker { display: none; }
.filter-menu summary .kk-icon svg { width: 20px; height: 20px; }
.filter-menu summary .kk-icon { transition: transform var(--duration-base) var(--easing-out); }
.filter-menu[open] summary .kk-icon { transform: rotate(180deg); }
.filter-menu fieldset {
  position: absolute; z-index: 10; top: calc(100% + var(--spacing-8)); left: 0; min-width: max(100%, 240px);
  max-height: 24rem; overflow-y: auto; margin: 0; padding: var(--spacing-8);
  border: var(--border-hairline) solid var(--line); border-radius: var(--radius-menu); background: var(--surface);
  box-shadow: var(--shadow-menu);
}
.filter-menu label {
  display: flex; align-items: center; gap: 14px; padding: var(--spacing-12) 14px; border-radius: var(--radius-md);
  white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) ease;
}
.filter-menu label:hover { background: var(--hover); }

/* ---------------------------------------------------------------- board */
.board { padding: var(--spacing-32) var(--page-r) var(--spacing-64) var(--page-l); }

/* FilterToggle: 44 px pill with a line contour; on: surface-accent, contour line-open-hover,
   text-accent and a tick. Never in space, so the view's one main action stays clear. */
.heute, .filter-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); padding-bottom: var(--spacing-16); }
.filter-chips { border-bottom: var(--border-hairline) solid var(--line); margin-bottom: var(--spacing-24); }
.heute-chip, .filter-chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--spacing-8);
  height: var(--size-control-sm); padding: 0 18px;
  border: 0; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border-hairline) var(--line);
  background: var(--surface); text-decoration: none; white-space: nowrap; cursor: pointer;
  font: var(--text-label); color: var(--text);
  transition: background-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease, color var(--duration-fast) ease;
}
.heute-chip:hover, .filter-chip:hover { background: var(--hover); }
.heute-chip[aria-pressed="true"], .filter-chip[aria-pressed="true"] {
  background: var(--surface-accent); color: var(--text-accent); box-shadow: inset 0 0 0 var(--border-hairline) var(--line-open-hover);
}
.heute-chip[aria-pressed="true"]::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.heute-chip .count { font: var(--text-meta); color: var(--text-muted); }
.heute-chip[aria-pressed="true"] .count { color: inherit; }
.filter-chip .kk-icon svg { width: 16px; height: 16px; }
.reset { align-self: center; padding: 0 var(--spacing-8); text-decoration: underline; text-underline-offset: 4px; }
.reset:hover { color: var(--text-accent); }
.empty { color: var(--text-muted); padding: var(--spacing-16) 0; }

/* Lanes are panels (surface-subtle, radius-lg); cards are tiles on them that lift on hover. */
.row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-16); align-items: start; }
.row-closed-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--spacing-16); }
.lane { background: var(--surface-subtle); border-radius: var(--radius-lg); padding: var(--spacing-12); min-height: 8rem; }
.lane h2 { display: flex; gap: var(--spacing-8); align-items: baseline; margin: var(--spacing-8) var(--spacing-8) var(--spacing-16); font: var(--text-item); letter-spacing: -0.01em; }
.lane-count { font: var(--text-meta); color: var(--text-muted); }
.lane-cards { display: grid; gap: var(--spacing-8); }
.lane-empty { color: var(--text-muted); margin: 0; padding: var(--spacing-16); text-align: center; }
.lane-tabs { display: none; }

.card {
  display: grid; gap: var(--spacing-8); padding: var(--spacing-16);
  background: var(--surface); border-radius: var(--radius-md); cursor: pointer;
  transition: box-shadow var(--duration-fast) ease;
}
.card:hover { box-shadow: var(--shadow-lift); }
.card p { margin: 0; }
/* min-width 0: a grid item that only clips (no scroll container) would otherwise be as wide as
   the whole name, and the cards would push the board sideways. */
.card-firma { font: var(--text-lead); min-width: 0; overflow-x: clip; text-overflow: ellipsis; white-space: nowrap; }
/* F5: the customer name opens the customer page. 44 px tall to tap, by padding with an equal
   negative margin, so the card keeps its height (the line clips sideways only). Not positioned:
   the title line below stays on top, so a tap on the deal title still opens the card. */
.card-customer { display: inline-block; max-width: 100%; min-width: 44px; vertical-align: top;
  padding-block: 11px; margin-block: -11px; overflow-x: clip; text-overflow: ellipsis; white-space: nowrap;
  color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease; }
.card-customer:hover { color: var(--text-accent); text-decoration-color: currentColor; }
/* Browsers without overflow: clip (Safari before 16) clip as before; the tap area is then the line. */
@supports not (overflow: clip) { .card-firma, .card-customer { overflow: hidden; } }
.detail-customer { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.detail-customer:hover { color: var(--text-accent); }
.card-firma.muted { color: var(--text-muted); }
.card-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-12); font: var(--text-meta); }
.value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.due { display: inline-flex; align-items: center; gap: var(--spacing-4); }
.due .kk-icon svg { width: 16px; height: 16px; }
.due-overdue { color: var(--text-accent); }
.due-none, .due-closed { color: var(--text-muted); }
.card-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.card-closed { background: var(--surface); }
.card-move { display: none; }

.row-closed { margin-top: var(--spacing-24); border-top: var(--border-hairline) solid var(--line); padding-top: var(--spacing-16); }
.closed-bar {
  display: inline-flex; align-items: center; gap: var(--spacing-8); min-height: var(--size-control-sm);
  text-decoration: none; font: var(--text-label); transition: color var(--duration-fast) ease;
}
.closed-bar:hover { color: var(--text-accent); }
.closed-count { white-space: nowrap; color: var(--text-muted); }

/* ---------------------------------------------------------------- Toast */
/* Bottom centre, a pill in surface-inverse, the tick on accent, shadow-toast; it rises in. */
.toasts { position: fixed; left: 50%; bottom: var(--spacing-32); transform: translateX(-50%); display: grid; justify-items: center; gap: var(--spacing-8); z-index: 50; width: max-content; max-width: calc(100vw - 2 * var(--spacing-16)); }
.toast {
  display: inline-flex; align-items: center; gap: var(--spacing-12); margin: 0;
  padding: 14px 20px 14px 14px; border-radius: var(--radius-pill);
  background: var(--surface-inverse); color: var(--text-inverse); box-shadow: var(--shadow-toast);
  font: var(--text-body); line-height: 1.4;
  animation: toast-in var(--duration-base) var(--easing-out) both;
}
.toast .kk-icon { width: var(--size-chip-sm); height: var(--size-chip-sm); align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--accent); }
.toast .kk-icon svg { width: 16px; height: 16px; }
.toast-alert:not(:has(.kk-icon)) { padding-left: 20px; }
@keyframes toast-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- card panel (native <dialog>) */
/* A side panel (shadow-panel) over Space at 48 %; title h3, sections divided by hairlines. */
.sheet {
  margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(560px, 100vw);
  border: 0; padding: 0; background: var(--surface); color: var(--text); box-shadow: var(--shadow-panel);
}
.sheet:modal { overscroll-behavior: contain; }
.sheet::backdrop { background: var(--overlay); overflow: hidden; overscroll-behavior: contain; }
.detail { display: grid; gap: var(--spacing-24); padding: var(--spacing-32) var(--spacing-40) var(--spacing-48); }
.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-16); }
.detail-head h2 { margin: 0; font: var(--text-h3); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.detail-head form { margin: 0; }
.detail-title { margin: 0; color: var(--text-muted); font: var(--text-lead); }
.detail-section { padding-top: var(--spacing-24); border-top: var(--border-hairline) solid var(--line); }
.detail-section h3 { margin: 0 0 var(--spacing-16); font: var(--text-item); letter-spacing: -0.01em; }
.detail-section p { margin: 0 0 var(--spacing-12); }
.detail-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-8); }
.detail-actions form { margin: 0; }
.date-form { display: flex; align-items: flex-end; gap: var(--spacing-12); }
.close-form { margin-bottom: var(--spacing-12); }
.close-form summary { list-style: none; }
.close-form summary::-webkit-details-marker { display: none; }
.close-form form { padding: var(--spacing-16) 0; display: grid; gap: var(--spacing-16); }
.close-form fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing-4) var(--spacing-24); }
.close-form legend { color: var(--text-muted); font: var(--text-meta); margin-bottom: var(--spacing-8); }
.lost-form:invalid button, .assign-form:invalid button { background: var(--space-100); color: var(--text-muted); pointer-events: none; }
/* The assign panel: one radio per Verkäufer, the team label (Vertriebsleitung) at the right; the
   button stays disabled until one is picked, as in the lost form. */
.assign-form { display: grid; gap: var(--spacing-16); margin: 0; }
.assign-team { margin-left: auto; color: var(--text-muted); font: var(--text-meta); }
.assign-form button { position: sticky; bottom: var(--spacing-16); }  /* a long list scrolls under the button, not away from it */
.sheet-lanes { display: grid; gap: var(--spacing-8); }
.sheet-lanes form { margin: 0; }
.sheet-lane { width: 100%; }
/* Notes (CRM-16): a Textarea (underline, lead, at least four lines), then the notes newest
   first between hairlines. A note keeps its line breaks and breaks a long word, not the panel. */
.note-form { display: grid; gap: 10px; margin-bottom: var(--spacing-24); }
.note-form label { font: var(--text-meta); color: var(--text-muted); }
.note-form textarea {
  width: 100%; min-height: 96px; padding: 0 0 var(--spacing-12);
  border: 0; border-bottom: var(--border-hairline) solid var(--line); border-radius: 0; background: transparent;
  color: var(--text); font: var(--text-lead); line-height: 1.45; resize: vertical;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
.note-form textarea:focus-visible { outline: none; border-bottom-color: var(--accent); box-shadow: 0 var(--border-hairline) 0 0 var(--accent); }
.note-form button { justify-self: start; }
.note-form .note-hint { margin: 0; font: var(--text-meta); color: var(--text-muted); }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-16); }
.notes li { padding-top: var(--spacing-16); border-top: var(--border-hairline) solid var(--line); }
.notes li:first-child { padding-top: 0; border-top: 0; }
.note-text { white-space: pre-line; overflow-wrap: anywhere; }
.notes .note-text { margin: 0 0 var(--spacing-4); }
.notes .note-meta { margin: 0; font: var(--text-meta); color: var(--text-muted); }

/* ---------------------------------------------------------------- contact persons (customer page) */
.contact-rows { list-style: none; margin: 0; padding: 0; max-width: 48rem; border-top: var(--border-hairline) solid var(--line); }
.contact-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-12); align-items: start;
  padding: var(--spacing-16) 0; border-bottom: var(--border-hairline) solid var(--line);
}
/* The opened channels use the whole row; the call and mail buttons sit over its top right. */
.contact { grid-column: 1 / -1; grid-row: 1; }
.contact-actions { grid-column: 2; grid-row: 1; display: flex; gap: var(--spacing-8); }
.contact summary {
  display: grid; gap: 2px; padding: var(--spacing-4) 0; cursor: pointer; list-style: none;
  min-height: var(--size-control-sm); padding-right: calc(2 * var(--size-control-sm) + var(--spacing-8) + var(--spacing-12));
}
.contact summary::-webkit-details-marker { display: none; }
.contact-name, .contact-firma { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-name { font: var(--text-lead); }
.contact-firma { color: var(--text-muted); }
.contact-channels { display: grid; grid-template-columns: max-content 1fr; gap: var(--spacing-8) var(--spacing-16); margin: var(--spacing-16) 0 var(--spacing-4); }
.contact-channels dt { color: var(--text-muted); }
.contact-channels dd { margin: 0; overflow-wrap: anywhere; }
.contact-channels dd.muted { grid-column: 1 / -1; }
/* Icon button: 44 px circle, hover `hover`. Here with the secondary line contour: on a phone
   there is no hover to show the row's call and mail targets. */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--size-control-sm); height: var(--size-control-sm); border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--border-hairline) var(--line); color: var(--text); text-decoration: none;
  transition: background-color var(--duration-fast) ease;
}
.icon-btn:hover { background: var(--hover); }
.icon-btn .kk-icon svg { width: 20px; height: 20px; }
/* Back link: a text button (underlined, hover text-accent) with the 16 px arrow. */
.back-link {
  display: inline-flex; align-items: center; gap: var(--spacing-8); min-height: var(--size-control-sm);
  font: var(--text-label); color: var(--text); text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--duration-fast) ease;
}
.back-link:hover { color: var(--text-accent); }

/* ---------------------------------------------------------------- Meine Kunden */
/* ListRows: the whole row leads on, title lead, description text-muted, hover `hover` over the
   full width without radius. The lake figures in one right-aligned column of tabular numbers. */
.customers, .customer-page { padding: var(--spacing-32) var(--page-r) var(--spacing-64) var(--page-l); }
.customers-search .search-field { flex: 0 1 60rem; }
.page-head.customer-head { justify-content: flex-start; }
.customers-count { margin: 0 0 var(--spacing-16); color: var(--text-muted); }
.customers .empty { padding-bottom: var(--spacing-8); color: var(--text); font: var(--text-item); }
.customers .empty + .muted { margin-top: 0; max-width: 40rem; }
.customer-rows { list-style: none; margin: 0; padding: 0; max-width: 60rem; border-top: var(--border-hairline) solid var(--line); }
.customer-row { border-bottom: var(--border-hairline) solid var(--line); }
.customer-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name figures" "meta figures";
  column-gap: var(--spacing-24); row-gap: var(--spacing-4); align-items: start;
  padding: var(--spacing-16); color: inherit; text-decoration: none;
  transition: background-color 400ms var(--easing-out);
}
.customer-link:hover { background: var(--hover); }
.customer-name { grid-area: name; font: var(--text-lead); overflow-wrap: anywhere; }
.customer-meta { grid-area: meta; color: var(--text-muted); overflow-wrap: anywhere; }
.customer-figures { grid-area: figures; display: grid; justify-items: end; align-content: start; gap: var(--spacing-4); }
.customer-revenue, .figure-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.customer-revenue { font: var(--text-lead); }
.customer-more { list-style: none; padding: var(--spacing-24) 0; }
/* Change against the prior year as a status chip (sm). No green, no red: up is the `on` tone
   (surface-accent, text-accent), down `neutral` (surface-subtle), ± 0 % and "neu" `active`
   (line contour). The sign and the word carry the meaning, never the colour alone. */
.delta {
  display: inline-flex; align-items: center; height: var(--size-chip-sm); padding: 0 12px; border-radius: var(--radius-pill);
  font: var(--text-meta); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text);
}
.delta-up { background: var(--surface-accent); color: var(--text-accent); }
.delta-down { background: var(--surface-subtle); }
.delta-flat, .delta-new { box-shadow: inset 0 0 0 var(--border-hairline) var(--line); }
/* Sperre: a chip in text-accent on surface-accent with the warning icon. Not a status of the
   table's tones but a warning on the customer, so it carries the Hint's colours and icon. */
.tag-blocked {
  background: var(--surface-accent); color: var(--text-accent); box-shadow: none;
  margin-left: var(--spacing-4); vertical-align: 2px;
}
.tag-blocked::before {
  content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* An old lake run: a Hint (accent), icon in text-accent. */
.stale-note {
  flex-basis: 100%; display: flex; align-items: flex-start; gap: var(--spacing-12); margin: 0;
  padding: var(--spacing-16) var(--spacing-24); border-radius: var(--radius-md); background: var(--surface-accent); color: var(--text);
}
.stale-note .kk-icon { color: var(--text-accent); }
.stale-note .kk-icon svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- Kundenseite (F2) */
.customer-title { flex-direction: column; align-items: flex-start; gap: var(--spacing-8); }
.customer-title .back-link { margin-bottom: var(--spacing-8); }
.customer-title h1 { overflow-wrap: anywhere; }
.customer-title .tag-blocked { vertical-align: 6px; }
.customer-line { margin: 0; color: var(--text-muted); font: var(--text-lead); }
.customer-title .stale-note { align-self: stretch; margin-top: var(--spacing-12); }
.customer-page {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--spacing-64);
  padding-top: var(--spacing-8);
}
.customer-section { padding: var(--spacing-32) 0; border-top: var(--border-hairline) solid var(--line); }
.customer-facts { container: facts / inline-size; }
.customer-facts > .customer-section:first-child { border-top: 0; padding-top: var(--spacing-24); }
.customer-section h2 { margin: 0; font: var(--text-h3); letter-spacing: -0.02em; }
.customer-section h3 { margin: var(--spacing-32) 0 var(--spacing-12); font: var(--text-item); letter-spacing: -0.01em; }
.customer-section h2 + h3 { margin-top: var(--spacing-24); }
.section-sub { margin: var(--spacing-8) 0 0; color: var(--text-muted); }
.customer-section .empty { padding: var(--spacing-12) 0 0; }
.figures-unavailable { color: var(--text); font: var(--text-item); }

/* Kennzahlen as Stats: the number in kpi, the label below in text-muted, a line-strong rule
   on top. No tiles, no dark block. */
.figures {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--spacing-16);
  margin: var(--spacing-24) 0 0; border-top: var(--border-hairline) solid var(--line-strong);
}
.figure { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-24) var(--spacing-16) 0 0; }
.figure dt { order: 2; color: var(--text-muted); }
.figure dd { margin: 0; }
.figure-value { order: 1; font: var(--text-kpi); letter-spacing: -0.02em; }
.figure-delta { order: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4) var(--spacing-8); font: var(--text-meta); color: var(--text-muted); }

/* Sparten: tiles (radius-lg). Active: surface-subtle with the check in text-accent and the
   amount. Without turnover: open, so a dashed line-open contour and the text in text-muted. */
.line-tiles { list-style: none; margin: var(--spacing-24) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--spacing-12); }
.line-tile { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-16) var(--spacing-16) var(--spacing-24); border: var(--border-hairline) solid transparent; border-radius: var(--radius-lg); background: var(--surface-subtle); }
.line-value { display: inline-flex; align-items: center; gap: var(--spacing-8); font: var(--text-lead); font-variant-numeric: tabular-nums; }
.line-value .kk-icon { color: var(--text-accent); }
.line-value .kk-icon svg { width: 20px; height: 20px; }
.line-off { background: transparent; border: var(--border-hairline) dashed var(--line-open); }
.line-off .line-name, .line-off .line-value, .line-off .line-value .kk-icon { color: var(--text-muted); }
.line-off .line-value { font: var(--text-body); }

/* Orders: rows between hairlines, the amount right in tabular numbers. */
.order-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: var(--border-hairline) solid var(--line); }
.order-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc end" "meta end";
  gap: var(--spacing-4) var(--spacing-16); align-items: center;
  padding: var(--spacing-16) 0; border-bottom: var(--border-hairline) solid var(--line);
}
.order-desc { grid-area: desc; overflow-wrap: anywhere; }
.order-meta { grid-area: meta; color: var(--text-muted); font: var(--text-meta); }
.order-end { grid-area: end; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-open:not(.order-delivery) .order-end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-4); }
.order-none { padding: var(--spacing-16) 0; color: var(--text-muted); list-style: none; }
/* Miete as one info line on top of the orders (Fabian, 31 Oct): a neutral Hint, not an order
   and not a link. */
.rent-line {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--spacing-4) var(--spacing-16);
  margin: var(--spacing-16) 0 0; padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--radius-md); background: var(--surface-subtle);
}
.rent-value { white-space: nowrap; font-variant-numeric: tabular-nums; }
.orders-page .rent-line { margin: var(--spacing-8) 0 0; }
.more-link {
  display: inline-flex; align-items: center; gap: var(--spacing-4); min-height: var(--size-control-sm); margin-top: var(--spacing-16);
  font: var(--text-label); color: var(--text); text-decoration: underline; text-underline-offset: 4px;
  transition: color var(--duration-fast) ease;
}
.more-link:hover { color: var(--text-accent); }

/* Maschinenbestand: one tile across the column; the whole tile leads on, the arrow circle
   shows it (48 px, action; on hover it rises to -45° and turns accent). */
.link-tile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); margin: 0;
  padding: var(--spacing-24) var(--spacing-24) var(--spacing-24) var(--spacing-28);
  border: var(--border-hairline) solid transparent; border-radius: var(--radius-lg); background: var(--surface-subtle); color: var(--text); text-decoration: none;
}
.link-tile > .kk-icon {
  width: var(--size-control-md); height: var(--size-control-md); align-items: center; justify-content: center;
  border-radius: var(--radius-pill); background: var(--action); color: var(--text-inverse);
  transition: transform var(--duration-base) var(--easing-out), background-color var(--duration-fast) ease;
}
.link-tile > .kk-icon svg { width: 20px; height: 20px; }
.link-tile:hover > .kk-icon, .link-tile:focus-visible > .kk-icon { transform: rotate(-45deg); background: var(--accent); }
.link-tile-text { display: grid; gap: var(--spacing-4); }
.link-tile-title { font: var(--text-item); letter-spacing: -0.01em; }
.link-tile-sub { color: var(--text-muted); }
.link-tile-off { background: transparent; border: var(--border-hairline) dashed var(--line-open); }

/* Deals: ListRows between hairlines, hover `hover` without radius. */
.deal-rows { list-style: none; margin: var(--spacing-12) 0 0; padding: 0; border-top: var(--border-hairline) solid var(--line); }
.deal-row { border-bottom: var(--border-hairline) solid var(--line); }
.deal-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title value" "meta value";
  gap: var(--spacing-4) var(--spacing-16); align-items: center; padding: var(--spacing-16) var(--spacing-12);
  color: inherit; text-decoration: none; transition: background-color 400ms var(--easing-out);
}
.deal-link:hover { background: var(--hover); }
.deal-title { grid-area: title; font: var(--text-lead); overflow-wrap: anywhere; }
.deal-meta { grid-area: meta; color: var(--text-muted); font: var(--text-meta); }
.deal-value { grid-area: value; white-space: nowrap; font-variant-numeric: tabular-nums; }
.customer-crm .call-main { margin: var(--spacing-16) 0 var(--spacing-8); white-space: nowrap; }
.customer-crm .contact-rows { max-width: none; margin-top: var(--spacing-8); }

@media (min-width: 1024px) {
  .customer-page { grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); }
  .customer-crm > .customer-section:first-child { border-top: 0; padding-top: var(--spacing-24); }
}

/* ---------------------------------------------------------------- Alle Aufträge (F3) */
/* The year choice as Tabs (page mode): 44 px pills with a line contour, the current one in
   action. */
.chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin: var(--spacing-16) 0 var(--spacing-24); }
.chip {
  display: inline-flex; align-items: center; height: var(--size-control-sm); padding: 0 20px;
  border-radius: var(--radius-pill); box-shadow: inset 0 0 0 var(--border-hairline) var(--line);
  font: var(--text-label); color: var(--text); text-decoration: none; white-space: nowrap;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
.chip:hover { background: var(--hover); }
.chip[aria-current="true"] { background: var(--action); color: var(--text-inverse); box-shadow: none; }
/* F3 and F4 keep the page column; their content is 60rem wide. */
.orders-page, .machines-page { display: block; }
.orders-page > *, .machines-page > * { max-width: 60rem; }
.order-years { border-top: var(--border-hairline) solid var(--line); }
.order-year { border-bottom: var(--border-hairline) solid var(--line); }
.order-year summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16); min-height: 64px;
  cursor: pointer; list-style: none; font: var(--text-lead);
}
.order-year summary::-webkit-details-marker { display: none; }
.order-year summary .kk-icon { transition: transform var(--duration-base) var(--easing-out); }
.order-year[open] summary .kk-icon { transform: rotate(180deg); }
.order-year .order-rows { border-top: 0; padding-bottom: var(--spacing-16); }
.order-year .order-rows:empty { padding: 0; }

/* ---------------------------------------------------------------- Maschinenbestand (F4) */
.machine-rows { list-style: none; margin: 0; padding: 0; border-top: var(--border-hairline) solid var(--line); }
.machine-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name tag" "meta tag";
  gap: var(--spacing-4) var(--spacing-16); align-items: center; padding: var(--spacing-16) 0;
  border-bottom: var(--border-hairline) solid var(--line);
}
.machine-name { grid-area: name; font: var(--text-lead); overflow-wrap: anywhere; }
.machine-meta { grid-area: meta; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.machine-row .tag { grid-area: tag; }

/* ---------------------------------------------------------------- Ansprechpartner bearbeiten */
/* A neutral Hint: surface-subtle, radius-md. */
.notice { max-width: 48rem; margin: 0 0 var(--spacing-24); padding: var(--spacing-16) var(--spacing-24);
  border-radius: var(--radius-md); background: var(--surface-subtle); }
.customer-crm .notice { margin: var(--spacing-16) 0 0; }
.customer-crm .add-contact { margin-top: var(--spacing-16); }
.contact-page { display: block; }

/* Contact form: one column, full width on a phone */
.contact-form { display: grid; gap: var(--spacing-4); max-width: 32rem; }
.contact-form .field input[aria-invalid="true"] { border-bottom-color: var(--text-accent); }
.field-error { color: var(--text-accent); font: var(--text-meta); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-16) var(--spacing-24); margin-top: var(--spacing-16); }

/* ---------------------------------------------------------------- phone */
/* Below 1024 px the header keeps the logo and the profile button in a 64 px row; the
   navigation moves to a second row under it (116 px with the hairline) and scrolls sideways
   if it must. */
@media (max-width: 1023px) {
  :root { --app-header-bar: 64px; --app-header: 64px; }
  :root:has(.main-nav) { --app-header: 116px; }
  .app-header { flex-wrap: wrap; height: auto; min-height: 64px; column-gap: var(--spacing-16); row-gap: 0; }
  .app-header .home { height: 64px; }
  .app-header .avatar-btn { order: 2; }
  .main-nav {
    order: 3; flex: 1 0 100%; height: 51px; padding-bottom: var(--spacing-8);
    margin-inline: calc(-1 * var(--page)); padding-inline: var(--page);
    overflow-x: auto; scrollbar-width: none;
  }
}

@media (max-width: 768px) {
  .app-header .avatar { width: var(--size-control-sm); height: var(--size-control-sm); }
  .page-head { padding: var(--spacing-24) var(--page-r) 0 var(--page-l); }
  .customers, .customer-page { padding: var(--spacing-16) var(--page-r) var(--spacing-48) var(--page-l); }
  .customer-link { padding-inline: 0; }
  .customer-link:hover { background: transparent; }
  .figures, .line-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-row, .rent-line { padding-inline: 0; }
  .rent-line { padding: var(--spacing-12) var(--spacing-16); }
  /* In delivery: description, order date and delivery date stacked, so none of them wraps. */
  .order-delivery { grid-template-columns: minmax(0, 1fr); grid-template-areas: "desc" "meta" "end"; }
  .order-delivery .order-end { text-align: left; }
  .funnel { grid-template-columns: repeat(5, minmax(7rem, 1fr)); overflow-x: auto; scrollbar-width: none; }
  .search { padding: var(--spacing-16) var(--page-r) 0 var(--page-l); }
  .search input[type="search"] { font: var(--text-lead); }
  .search select { flex: 1 1 100%; }
  .filter-menus { flex: 1 1 100%; gap: var(--spacing-24); }
  .filter-menu { position: static; }
  .filter-menu fieldset { left: var(--page-l); right: var(--page-r); min-width: 0; }
  .search { position: relative; }
  .board { padding: var(--spacing-16) var(--page-r) var(--spacing-48) var(--page-l); }
  .heute, .filter-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--page)); padding-inline: var(--page); scrollbar-width: none; }
  /* Lane switch as Tabs (panel mode): pills sharing the width, the chosen one in action. */
  .lane-tabs {
    display: flex; gap: var(--spacing-8); position: sticky; top: var(--app-header); z-index: 5;
    background: var(--surface); margin: 0 calc(-1 * var(--page)) var(--spacing-16); padding: var(--spacing-8) var(--page);
  }
  .lane-tab {
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-4);
    height: var(--size-control-sm); padding: 0 var(--spacing-8); border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 var(--border-hairline) var(--line); text-decoration: none; font: var(--text-label); color: var(--text);
  }
  .lane-tab .count { color: var(--text-muted); font: var(--text-meta); }
  .lane-tab[aria-pressed="true"] { background: var(--action); color: var(--text-inverse); box-shadow: none; }
  .lane-tab[aria-pressed="true"] .count { color: var(--text-inverse-muted); }
  .row-active { grid-template-columns: 1fr; }
  .row-active .lane { display: none; }
  .row-active[data-active-lane="NEU"] .lane[data-lane="NEU"],
  .row-active[data-active-lane="IN_ARBEIT"] .lane[data-lane="IN_ARBEIT"],
  .row-active[data-active-lane="ANGEBOT"] .lane[data-lane="ANGEBOT"] { display: block; }
  .row-active .lane h2 { display: none; }
  .row-closed-lanes { grid-template-columns: 1fr; }
  .card-move { display: inline-flex; justify-self: start; }
  .sheet { margin: auto 0 0; width: 100vw; max-width: none; height: 92dvh; max-height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-menu); }
  .sheet:has(.sheet-move, .sheet-assign) { height: fit-content; }
  .detail { padding: var(--spacing-24) var(--page) var(--spacing-32); }
  .close-form fieldset { grid-template-columns: 1fr; }
  .toasts { bottom: var(--spacing-16); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation: none !important; }
}

/* Meine Kunden on the desktop: a Table head (text-muted, meta, over a line-strong rule) above
   the ListRows, turnover and change in two aligned, right-aligned columns. The phone keeps the
   ruled list. */
.list-head { display: none; }
@media (min-width: 769px) {
  .list-head {
    display: grid; grid-template-columns: minmax(0, 1fr) 8rem 6rem; column-gap: var(--spacing-24); align-items: end;
    max-width: 60rem; padding: var(--spacing-12) var(--spacing-16);
    border-bottom: var(--border-hairline) solid var(--line-strong); color: var(--text-muted); font: var(--text-meta);
  }
  .list-head span + span { text-align: right; }
  .customer-rows { border-top: 0; }
  .customer-link { grid-template-areas: "name figures" "meta figures"; align-items: center; }
  .customer-figures { grid-auto-flow: column; grid-template-columns: 8rem 6rem; align-items: center; gap: var(--spacing-24); }
  .customer-figures > :only-child.customer-revenue { grid-column: 1; }
}

/* Kennzahlen and Sparten in a narrow column: two by two, so a date or an amount in kpi never
   leaves its column. */
@container facts (max-width: 56rem) {
  .figures, .line-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures { row-gap: var(--spacing-24); }
}

/* Staging host (ENV_LABEL): one band above everything, on every page. */
.env-band {
  background: var(--galaxy-400);
  color: var(--text-inverse);
  text-align: center;
  padding: var(--spacing-4) var(--spacing-16);
}