:root{
    /* Design-Sprache aus dem Claude-Design-Mockup "UCC CRM.dc.html" */
    --bg:#F6F1EA; --surface:#FFFFFF; --surface-soft:#FBF7F1;
    --border:#EAE1D5; --border-soft:#F0E9DF;
    /* muted/muted-light gegenüber dem Mockup abgedunkelt (Mockup-Werte
       8A7A68/A89681 verfehlen 4.5:1 für Kleintext auf Weiss/Creme). muted-light
       war ursprünglich einen Schritt heller als muted, verfehlte damit aber
       selbst nach dem ersten Kontrast-Fix noch 4.5:1 auf --surface-soft (z.B.
       Kanban-Leerzustand, inaktive Mobile-Nav-Labels) - beide Tokens teilen sich
       jetzt denselben Wert; eine echte zweite, hellere Stufe würde die Grenze
       wieder reissen. */
    --ink:#2A2018; --muted:#7A6B58; --muted-light:#7A6B58;
    --roast:#7A4A2B; --roast-dark:#5A3620;
    --tan:#F1E7DA; --tan-border:#DCC7AC;
    --green:#3E6B4E; --green-dark:#2E5139;
    --danger:#B23A2E; --amber:#B07D2B; --amber-dark:#755C15;
    --radius:13px; --radius-lg:18px; --radius-md:13px;
    /* Einheitliche Abstands-Skala (4px-Basis) - ersetzt die bisherigen Ad-hoc-Werte
       (6px/10px/14px/18px/20px/28px/40px etc.) durchgängig im ganzen Stylesheet. */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:24px; --space-6:32px; --space-7:48px;
    /* Desktop-Seitenleiste (ab 900px, aus "UCC CRM Desktop.dc.html") */
    --sidebar-w:248px;
    --sidebar-grad-start:#3A2317; --sidebar-grad-end:#2C1A10;
    --sidebar-ink:rgba(255,255,255,.92); --sidebar-muted:rgba(255,255,255,.62);
    --sidebar-active-bg:rgba(255,255,255,.14); --sidebar-chip-bg:rgba(255,255,255,.05);
    /* Revenue-Hero/Monats-Balkendiagramm (dunkle + helle Variante, siehe
       DESIGN.md "Helles Tan"/"Helle Chart-Variante") - vorher an 7 Stellen als
       Literal wiederholt (teils mit leicht abweichenden, undokumentierten
       Alpha-Werten); jetzt eine Quelle pro Farbton/Zustand. */
    --hero-tan-light:#E4C9AE;
    --chart-bar-light:rgba(228,201,174,0.66); --chart-bar-light-hover:rgba(228,201,174,0.9);
    --chart-bar-light-vorjahr:rgba(228,201,174,0.24); --chart-bar-light-vorjahr-hover:rgba(228,201,174,0.4);
    --chart-bar-dark:rgba(107,66,38,0.32); --chart-bar-dark-vorjahr:rgba(107,66,38,0.13);
    /* Laufender (unvollständiger) Monat - eigene Farbe MIT eigenem Legendeneintrag */
    --chart-bar-current-light:#E3B062; --chart-bar-current-dark:rgba(176,125,43,0.75);
    --funnel-bar:rgba(107,66,38,0.45);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'IBM Plex Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
    /* Die fixe Mobile-Navigation darf weder Inhalt überdecken noch auf Geräten
       mit Home-Indikator zu dicht am unteren Rand sitzen. */
    padding-bottom:calc(84px + env(safe-area-inset-bottom));
    overflow-x:clip;
  }
  /* Eine einzige Schriftfamilie (IBM Plex Sans) für Überschriften, Body, Buttons
     und Daten - Plex Mono bleibt gezielt für Kundennummern/Code (echte
     Monospace-Funktion), keine separate Display-Serife mehr. */
  h1,h2,h3{ font-family:'IBM Plex Sans', sans-serif; font-weight:700; margin:0; letter-spacing:-0.01em; }

  /* Material Symbols Rounded (Icon-Font, wie im Design-Mockup) */
  .msi{
    font-family:'Material Symbols Rounded'; font-weight:400; font-style:normal;
    line-height:1; letter-spacing:normal; text-transform:none; white-space:nowrap;
    direction:ltr; -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
    display:inline-block; vertical-align:middle;
  }
  @keyframes barGrow{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
  @media (prefers-reduced-motion: reduce){
    .month-bar{ animation:none !important; }
  }

  header{
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--space-2) var(--space-4) var(--space-3); position:sticky; top:0; z-index:10;
  }
  .header-inner{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); max-width:640px; margin:0 auto; }
  .header-brand{ display:flex; align-items:center; gap:11px; min-width:0; }
  .nav-arrows{ display:flex; gap:2px; flex-shrink:0; }
  .nav-arrow{ width:32px; height:32px; min-height:0; padding:0; border:none; border-radius:9px; background:none; color:var(--roast-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .nav-arrow .msi{ font-size:21px; }
  .nav-arrow:hover:not(:disabled){ background:var(--tan); }
  .nav-arrow:disabled{ color:var(--border); cursor:default; }
  /* Schmale Handys: Logo in der Kopfzeile weglassen, damit Pfeile + Titel Platz haben */
  @media (max-width:479px){ .header-brand > .logo-chip{ display:none; } .header-brand{ gap:var(--space-2); } }
  .logo-chip{
    flex:0 0 auto; width:38px; height:38px; border-radius:11px;
    background:linear-gradient(150deg,var(--roast),var(--roast-dark)); color:#F6E9DA;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.15);
  }
  header h1{ font-size:1.02rem; color:var(--roast-dark); line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  /* Kundendetail: Kundennummer neben dem Namen in der Kopfzeile */
  .header-title-row{ display:flex; align-items:center; gap:var(--space-2); min-width:0; }
  .header-kdnr{ flex-shrink:0; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:600; color:var(--roast); background:var(--tan); border-radius:6px; padding:1px 6px; }
  /* Kundendetail: Kundennummer gross, antippen = kopieren */
  .detail-kdnr-btn{ display:flex; align-items:center; gap:var(--space-2); width:100%; margin:0 0 14px; padding:var(--space-2) var(--space-3);
    background:var(--tan); border:1px solid var(--tan-border); border-radius:var(--radius-md); color:var(--roast-dark); cursor:pointer; text-align:left; min-height:0; }
  .detail-kdnr-btn:hover{ background:#EADBC6; }
  .detail-kdnr-label{ font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); }
  .detail-kdnr-value{ font-family:'IBM Plex Mono', monospace; font-size:1.15rem; font-weight:700; letter-spacing:0.03em; }
  .detail-kdnr-btn .msi{ margin-left:auto; font-size:18px; color:var(--muted); }
  header p{ margin:0; font-size:0.72rem; color:var(--muted); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .header-actions{ display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
  /* 40px statt 34px - näher am 44px-Komfort-Tap-Target, ohne den Header spürbar
     höher zu machen (bleibt an logo-chip/avatar-chip ausgerichtet); volle 44px
     ab dem Desktop-Breakpoint (siehe @media min-width:900px unten). */
  .icon-btn{
    width:40px; height:40px; padding:0; border-radius:50%;
    background:transparent; color:var(--roast); border:none;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .icon-btn:hover{ background:var(--tan); }
  .icon-btn .msi{ font-size:20px; }
  .avatar-chip{
    flex:0 0 auto; width:38px; height:38px; border-radius:50%;
    background:var(--tan); color:var(--roast-dark);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem;
  }
  /* Eigenes Avatar-Chip ist klickbar (öffnet den Avatar-Wähler). */
  button.avatar-chip{ padding:0; border:none; cursor:pointer; font-family:inherit; }
  button.avatar-chip:hover{ box-shadow:0 0 0 2px var(--tan-border); }
  button.avatar-chip:focus-visible{ outline:2px solid var(--roast); outline-offset:2px; }
  .avatar-chip .msi{ font-size:21px; margin:0; }
  .avatar-chip svg{ width:21px; height:21px; display:block; }
  .avatar-chip.avatar-ucc{ font-size:0.62rem; letter-spacing:0.04em; }
  .avatar-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:var(--space-2); margin:var(--space-2) 0 var(--space-4); }
  .avatar-option{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:var(--space-3) var(--space-1); background:var(--surface-soft);
    border:2px solid transparent; border-radius:var(--radius-md);
    color:var(--ink); font-weight:500; font-size:0.74rem; line-height:1.2; text-align:center;
  }
  .avatar-option:hover{ background:var(--tan); }
  .avatar-option[aria-checked="true"]{ border-color:var(--roast); background:var(--tan); font-weight:700; }
  .avatar-option .avatar-chip{ width:48px; height:48px; font-size:0.95rem; box-shadow:inset 0 0 0 1px var(--tan-border); }
  .avatar-option .avatar-chip .msi{ font-size:26px; }
  .avatar-option .avatar-chip svg{ width:26px; height:26px; }
  .avatar-option .avatar-chip.avatar-ucc{ font-size:0.8rem; }
  /* App-Logo (app_settings.app_logo) - Glyphe wechselt, Röst-Verlauf bleibt. */
  .logo-chip .msi{ font-size:1.35em; margin:0; }
  .logo-chip svg{ width:1.35em; height:1.35em; display:block; }
  .logo-chip.logo-ucc{ font-size:0.62rem; font-weight:700; letter-spacing:0.04em; }
  .avatar-option .logo-chip{ width:48px; height:48px; border-radius:13px; font-size:1.2rem; }
  .avatar-option .logo-chip.logo-ucc{ font-size:0.8rem; }
  button.logo-chip{ padding:0; border:none; font-family:inherit; }
  button.logo-chip:disabled{ cursor:default; opacity:1; }
  button.logo-chip:not(:disabled){ cursor:pointer; }
  button.logo-chip:not(:disabled):hover{ box-shadow:0 0 0 2px var(--tan-border); }
  button.logo-chip:focus-visible{ outline:2px solid var(--roast); outline-offset:2px; }
  .avatar-section-title{ font-size:0.95rem; margin:var(--space-5) 0 var(--space-1); }

  main{ max-width:640px; margin:0 auto; padding:var(--space-4) var(--space-4) var(--space-7); }
  .view{ display:none; }
  .view.active{ display:block; }

  .card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:var(--space-4); margin-bottom:var(--space-4);
  }
  /* DealMaker: Der Editor muss auch zwischen 900 und 1200px funktionieren.
     Die Zusammenfassung wird daher erst neben das Formular gelegt, wenn die
     verbleibende Breite für echte Eingabefelder reicht – nicht nur für Grid-Zellen. */
  .quote-hero{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-4); }
  .quote-hero > *{ min-width:0; }
  .quote-hero p{ margin:var(--space-1) 0 0; color:var(--muted); font-size:0.86rem; line-height:1.45; max-width:62ch; }
  .quote-status{ display:inline-flex; align-items:center; flex:0 0 auto; border-radius:20px; padding:4px 9px; font-size:0.72rem; font-weight:700; white-space:nowrap; background:var(--tan); color:var(--roast-dark); }
  .quote-status.quote-submitted{ background:#F0E6CC; color:var(--amber-dark); }.quote-status.quote-approved,.quote-status.quote-accepted{ background:#E2EEE6; color:var(--green-dark); }.quote-status.quote-sent{ background:#EAE3F0; color:#5A4A78; }.quote-status.quote-rejected,.quote-status.quote-superseded{ background:#FBF3F2; color:var(--danger); }
  .quote-list{ padding:0; overflow:hidden; }.quote-list-row{ width:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-3); align-items:center; padding:var(--space-4); background:transparent; border-radius:0; border-bottom:1px solid var(--border-soft); color:var(--ink); text-align:left; }.quote-list-row:last-child{ border-bottom:0; }.quote-list-row:hover{ background:var(--surface-soft); }.quote-list-row strong,.quote-list-row span{ display:block; min-width:0; overflow-wrap:anywhere; }.quote-list-row .quote-status{ display:inline-flex; }.quote-list-row strong{ font-size:0.94rem; }.quote-list-row span:not(.quote-status){ margin-top:3px; color:var(--muted); font-size:0.78rem; font-weight:400; }.quote-list-row > div:last-child{ display:flex; flex-direction:column; align-items:flex-end; gap:var(--space-1); }.quote-list-row small{ color:var(--muted); font-size:0.72rem; }
  .quote-editor{ width:100%; max-width:1120px; }.quote-step{ margin-bottom:var(--space-4); }.quote-step > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-2); font-weight:700; }.quote-step > summary::-webkit-details-marker{ display:none; }.quote-step > summary .msi{ color:var(--roast); }.quote-step-content{ padding-top:var(--space-4); }
  .quote-grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--space-3); }.quote-grid > div{ min-width:0; grid-column:span 4; }.quote-grid .wide{ grid-column:1/-1; }
  .offer-subject-field{ position:relative; }.offer-native-subject{ position:absolute; width:1px !important; height:1px; opacity:0; pointer-events:none; }.offer-subject-results{ position:absolute; z-index:6; top:100%; left:0; right:0; max-height:216px; overflow:auto; margin-top:-8px; padding:var(--space-1); border:1px solid var(--tan-border); border-radius:var(--radius-md); background:var(--surface); box-shadow:0 12px 26px rgba(64,40,23,.14); display:none; }.offer-subject-results.has-results{ display:block; }.offer-subject-result{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; text-align:left; background:transparent; color:var(--ink); border-radius:8px; }.offer-subject-result:hover,.offer-subject-result:focus-visible{ background:var(--surface-soft); outline:none; }.offer-subject-result b{ font-size:0.88rem; }.offer-subject-result small{ color:var(--muted); font-size:0.76rem; }
  .offer-field-label{ display:block; color:var(--muted); font-size:0.78rem; font-weight:500; margin-bottom:var(--space-1); }.contract-type-picker{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2); }.contract-type-picker label{ display:block; min-width:0; margin:0; cursor:pointer; }.contract-type-picker input{ position:absolute; opacity:0; pointer-events:none; }.contract-type-picker span{ display:flex; flex-direction:column; min-height:76px; gap:4px; padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); color:var(--ink); transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease; }.contract-type-picker b{ font-size:0.88rem; }.contract-type-picker small{ color:var(--muted); font-size:0.75rem; line-height:1.3; }.contract-type-picker input:checked + span{ border-color:var(--roast); background:var(--tan); box-shadow:inset 0 0 0 1px var(--roast); }.contract-type-picker input:focus-visible + span{ outline:2px solid var(--roast); outline-offset:2px; }
  .quote-field-hint{ color:var(--muted); font-size:0.78rem; margin:var(--space-2) 0 var(--space-3); line-height:1.45; }
  .quote-line-builder{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); align-items:end; }.quote-line-builder > :first-child,.quote-line-builder button{ grid-column:1/-1; min-width:0; }.quote-line-builder select,.quote-line-builder input{ margin-bottom:0; }.quote-line-builder button{ min-height:44px; white-space:nowrap; }
  .quote-lines{ margin-top:var(--space-4); border-top:1px solid var(--border-soft); }.quote-line{ display:grid; grid-template-columns:minmax(0,1fr) minmax(104px,auto) 40px; gap:var(--space-2); align-items:center; padding:var(--space-3) 0; border-bottom:1px solid var(--border-soft); }.quote-line > div{ min-width:0; }.quote-line strong,.quote-line span{ display:block; overflow-wrap:anywhere; }.quote-line strong{ font-size:0.9rem; }.quote-line span{ color:var(--muted); font-size:0.78rem; margin-top:2px; }.quote-line > b{ font-size:0.84rem; text-align:right; white-space:nowrap; }.offer-line-remove{ color:var(--danger); border:1px solid #E3B8B0; }
  .quote-summary{ background:var(--surface-soft); border:1px solid var(--tan-border); border-radius:var(--radius-md); padding:var(--space-4); }.quote-summary h3{ margin-bottom:var(--space-3); }.quote-total-row{ display:flex; justify-content:space-between; gap:var(--space-3); padding:var(--space-2) 0; font-size:0.9rem; }.quote-total-row b{ text-align:right; white-space:nowrap; }.quote-total-row.total{ border-top:2px solid var(--roast); margin-top:var(--space-2); padding-top:var(--space-3); color:var(--roast-dark); font-weight:700; font-size:1rem; }.quote-internal{ margin-top:var(--space-3); border-top:1px solid var(--border); padding-top:var(--space-3); color:var(--green-dark); font-size:0.86rem; }.quote-internal strong,.quote-internal div{ display:block; }.quote-internal div{ display:flex; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-1); }
  .quote-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-4); }.quote-actions > *{ flex:1 1 150px; min-width:0; }.quote-actions .btn-save{ width:auto; }.quote-admin{ border-top:1px solid var(--border-soft); margin-top:var(--space-5); padding-top:var(--space-4); }.quote-admin input[type=file]{ width:100%; margin-bottom:var(--space-2); }
  @media (min-width:1200px){ .quote-editor{ margin:0 auto; }.quote-layout{ display:grid; grid-template-columns:minmax(0,1fr) 336px; gap:var(--space-5); align-items:start; }.quote-summary{ position:sticky; top:92px; }.quote-line-builder{ grid-template-columns:minmax(180px,2fr) minmax(130px,1fr) 88px 96px auto; gap:var(--space-2); }.quote-line-builder > :first-child,.quote-line-builder button{ grid-column:auto; }.quote-line-builder button{ min-width:118px; } }
  @media (max-width:699px){ .quote-grid{ grid-template-columns:1fr; }.quote-grid > div,.quote-grid .wide{ grid-column:auto; }.quote-hero{ display:block; }.quote-hero .btn-primary{ width:100%; margin-top:var(--space-3); }.quote-status{ margin-top:var(--space-2); }.quote-list-row{ padding:var(--space-3); }.quote-actions > *{ flex-basis:100%; }.quote-line{ grid-template-columns:minmax(0,1fr) 40px; }.quote-line > b{ grid-column:1; text-align:left; }.contract-type-picker{ grid-template-columns:1fr; }.offer-subject-results{ position:relative; margin-top:0; max-height:180px; } }

  /* Offerten v2: geführte Zubehör-/Bundle-Auswahl, individuelle Positionen,
     Kommentar-Thread und Katalog-Verwaltung. */
  .offer-accessory-picker,.offer-bundle-picker{ margin-top:var(--space-3); padding:var(--space-3); background:var(--surface-soft); border:1px solid var(--tan-border); border-radius:var(--radius-md); }
  .offer-accessory-picker h4,.offer-bundle-picker h4{ display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2); font-size:0.86rem; }
  .offer-accessory-list{ display:flex; flex-direction:column; gap:var(--space-1); max-height:280px; overflow:auto; margin-bottom:var(--space-2); }
  .offer-accessory-row{ display:grid; grid-template-columns:auto minmax(0,1fr) 84px; gap:var(--space-2); align-items:center; padding:var(--space-1) 0; }
  .offer-accessory-row label{ margin:0; font-size:0.84rem; overflow-wrap:anywhere; }
  .offer-accessory-row input[type=number]{ margin:0; }
  .offer-bundle-list{ display:flex; flex-direction:column; gap:var(--space-2); }
  .offer-bundle-card{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); }
  .offer-bundle-card strong{ display:block; font-size:0.88rem; }.offer-bundle-card span{ display:block; color:var(--muted); font-size:0.78rem; margin-top:2px; }
  .offer-custom-line{ margin:var(--space-3) 0; padding:var(--space-3); background:var(--surface-soft); border:1px solid var(--tan-border); border-radius:var(--radius-md); }
  .offer-custom-line > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:var(--space-2); font-weight:600; font-size:0.86rem; }.offer-custom-line > summary::-webkit-details-marker{ display:none; }
  .offer-comments{ display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-3); }
  .offer-comment{ padding:var(--space-3); background:var(--surface-soft); border:1px solid var(--tan-border); border-radius:var(--radius-md); }
  .offer-comment header{ display:flex; justify-content:space-between; gap:var(--space-2); color:var(--muted); font-size:0.76rem; margin-bottom:var(--space-1); }
  .offer-comment.resolved{ opacity:0.6; }
  .quote-line.offer-line-child{ margin-left:var(--space-4); border-left:2px solid var(--tan-border); padding-left:var(--space-3); }
  .quote-line .offer-line-review{ color:var(--danger); font-weight:600; }
  .catalog-admin-tree{ display:flex; flex-direction:column; gap:2px; max-height:520px; overflow:auto; }
  .catalog-admin-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--space-2); align-items:center; padding:var(--space-2) var(--space-3); border-radius:var(--radius-sm); background:transparent; text-align:left; }
  .catalog-admin-row:hover{ background:var(--surface-soft); }
  .catalog-admin-row.is-child{ margin-left:var(--space-5); }
  .catalog-admin-row strong{ font-size:0.86rem; overflow-wrap:anywhere; }.catalog-admin-row span{ color:var(--muted); font-size:0.76rem; }
  .catalog-admin-row.is-inactive{ opacity:0.55; }
  .catalog-rate-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)) 40px; gap:var(--space-2); align-items:center; padding:var(--space-2) 0; border-bottom:1px solid var(--border-soft); }
  .catalog-rate-row input,.catalog-rate-row select{ margin:0; }

  input[type=text], input[type=tel], input[type=email], input[type=url], input[type=search],
  input[type=number], input[type=date], input[type=time], input[type=month], input[type=password], select, textarea{
    width:100%; font-family:'IBM Plex Sans', sans-serif; font-size:0.92rem;
    padding:var(--space-3); border:1px solid var(--border); border-radius:var(--radius-md);
    background:var(--surface); color:var(--ink); margin-bottom:var(--space-3);
    line-height:1.2;
  }
  input:focus, select:focus, textarea:focus{ outline:2px solid var(--roast); outline-offset:1px; }
  input[type=date], input[type=time], input[type=month]{ min-width:0; max-width:100%; display:block; }
  /* iPhone/iPad (Safari): Datums-/Zeitfelder haben dort eine eigene Mindestbreite
     und ignorieren width:100% - in Dialogen und Filterleisten (Pendenzen,
     Berichte) ragten sie über den Rand bzw. ins Nachbarfeld.
     Ohne native Optik greift die Breite; Höhe und Ausrichtung wie die
     übrigen Felder (leere Felder fallen in Safari sonst zusammen). */
  input[type=date], input[type=time], input[type=month]{
    -webkit-appearance:none; appearance:none; line-height:1.2;
    /* gleiche Höhe wie die Textfelder daneben (Filterleisten): 1 Zeile + Polster + Rand */
    height:calc(1.2em + 2 * var(--space-3) + 2px);
  }
  input::-webkit-date-and-time-value{ text-align:left; }
  .modal-body{ overflow-wrap:anywhere; }
  .modal-body input, .modal-body select, .modal-body textarea{ max-width:100%; }
  /* iPhone zoomt beim Antippen in jedes Eingabefeld unter 16px hinein (und bleibt
     gezoomt). Auf Touch-Geräten deshalb 16px - besser als Zoomen ganz zu
     sperren, das würde Pinch-Zoom für sehschwache Nutzer mit abschalten. */
  @media (pointer:coarse), (max-width:699px){
    input, select, textarea{ font-size:16px !important; }
  }
  /* Sichtbarer Fokus-Indikator für die per Tastatur erreichbaren Listenzeilen
     (Kunden/Leads/Tasks/Historie/Berichte-Tabelle/Analyse-Zeilen/Monatsbalken/
     sortierbare Tabellenköpfe - siehe makeRowActivatable()) sowie für die
     nativ fokussierbaren <summary>-Klappen (Formularabschnitte + Karten) -
     beide hatten bisher nur den (browserabhängigen) Default-Fokusring. */
  .result:focus-visible, .lead-item:focus-visible, .task:focus-visible,
  .history-item:focus-visible, .reports-row:focus-visible,
  .analyse-row:focus-visible, .month-bar-wrap:focus-visible, th.sortable:focus-visible,
  summary.form-section:focus-visible, details.card > summary:focus-visible{
    outline:2px solid var(--roast); outline-offset:-2px;
  }
  label{ display:block; font-size:0.78rem; color:var(--muted); margin-bottom:var(--space-1); font-weight:500; }
  textarea{ min-height:80px; resize:vertical; }

  button{
    font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:0.9rem;
    border:none; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); cursor:pointer;
  }
  button .msi{ font-size:19px; margin-right:5px; }
  .btn-primary{ background:var(--roast); color:#fff; }
  .btn-primary:hover{ background:var(--roast-dark); }
  .btn-save{ background:var(--green); color:#fff; width:100%; }
  .btn-save:hover{ background:var(--green-dark); }
  .btn-order{
    background:var(--tan); color:var(--roast-dark); border:1px solid var(--tan-border);
    font-weight:600; border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); cursor:pointer;
    font-family:'IBM Plex Sans', sans-serif; font-size:0.9rem;
  }
  .btn-order:hover{ background:#E9DCC9; }
  .btn-ghost{ background:transparent; color:var(--roast); border:1px solid var(--tan-border); }
  .btn-ghost:hover{ background:var(--tan); }
  .btn-danger-ghost{ background:transparent; color:var(--danger); border:1px solid var(--danger); }
  .btn-small{ padding:var(--space-2) var(--space-3); font-size:0.78rem; }
  .btn-small .msi{ font-size:16px; margin-right:3px; }

  .empty{ text-align:center; color:var(--muted); padding:var(--space-6) var(--space-2); font-size:0.9rem; }
  /* Leere Bereiche auf dem Handy nicht so hoch - sonst besteht die Kundenseite
     grösstenteils aus "Keine …"-Flächen */
  @media (max-width:699px){ .empty{ padding:var(--space-3) var(--space-2); font-size:0.85rem; } }
  .result-count{
    font-size:0.74rem; color:var(--muted); font-weight:500;
    padding:2px var(--space-1) var(--space-2); margin-bottom:var(--space-1);
  }
  .loading-hint{ color:var(--muted); font-size:0.86rem; padding:var(--space-2) 0; }
  .app-version-footer{
    font-size:0.72rem; color:var(--muted); text-align:center;
    margin:var(--space-6) 0 var(--space-2); overflow-wrap:anywhere;
  }
  .item-icon-chip{
    flex:0 0 auto; width:38px; height:38px; border-radius:11px;
    background:var(--tan); color:var(--roast-dark);
    display:flex; align-items:center; justify-content:center;
  }
  .item-icon-chip .msi{ font-size:20px; }
  .machine-item{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--border-soft); }
  .machine-item:last-child{ border-bottom:none; }
  .machine-main{ flex:1; min-width:0; }
  .machine-head{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-2); }
  .machine-name{ font-weight:600; font-size:0.88rem; }
  .machine-status{ font-size:0.68rem; font-weight:600; padding:3px 9px; border-radius:20px; white-space:nowrap; }
  .msv-yes{ background:#DCEDE1; color:#2F5139; }
  .msv-no{ background:var(--border-soft); color:var(--muted); }
  .machine-detail{ font-size:0.76rem; color:var(--muted); margin-top:3px; }
  .machine-bemerkung{ font-size:0.76rem; color:var(--muted); margin-top:5px; white-space:pre-wrap; line-height:1.4; }
  .report-btn-row{ display:flex; gap:var(--space-2); margin-top:var(--space-2); flex-wrap:wrap; }
  .report-btn-row button{ flex:1; min-width:130px; }
  .success-box{
    background:#E2EEE6; border:1px solid #B9D4C2; border-radius:var(--radius-md);
    padding:var(--space-3); margin-top:var(--space-2);
  }
  .success-text{ color:var(--green-dark); font-weight:600; font-size:0.9rem; margin-bottom:var(--space-2); }
  .search-wrap{ position:relative; margin-bottom:var(--space-3); }
  .search-wrap .search-icon{
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--muted-light); font-size:20px; pointer-events:none;
  }
  .search-wrap input{ padding-left:44px; padding-right:38px; margin-bottom:0; border-radius:14px; }
  .search-clear{
    position:absolute; right:5px; top:50%; transform:translateY(-50%);
    background:none; border:none; color:var(--muted); font-size:1rem;
    width:32px; height:32px; padding:0; cursor:pointer; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  /* Visuelle Grösse bleibt 32px (passt kompakt ins Suchfeld), Tap-Fläche wird
     per Pseudo-Element unsichtbar auf 44px erweitert statt den Button selbst
     zu vergrössern - gleiche Technik wie bei anderen kleinen Icon-Buttons. */
  .search-clear::before{ content:''; position:absolute; inset:-6px; }
  .search-clear .msi{ font-size:18px; margin:0; }
  .search-clear:hover{ background:var(--border); color:var(--ink); }

  /* Einheitliche Optik für alle Kunden-Avatare (kein Zufalls-Hell/Dunkel mehr -
     das Icon selbst unterscheidet nach Kundengruppe, siehe customerGroupIcon()). */
  .avatar{
    flex:0 0 auto; width:44px; height:44px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:0.95rem;
  }
  .avatar-tan{ background:var(--tan); color:var(--roast-dark); }
  .avatar .msi{ font-size:22px; margin:0; }
  .result{
    display:flex; align-items:center; gap:13px;
    padding:var(--space-3) var(--space-1); border-bottom:1px solid var(--border-soft); cursor:pointer;
  }
  .result:last-child{ border-bottom:none; }
  .result:hover{ background:var(--surface-soft); }
  .result-main{ flex:1; min-width:0; }
  .result-name{ font-weight:600; font-size:0.94rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .result-sub{ font-size:0.78rem; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .result-zusatz{ font-size:0.8rem; color:var(--ink); margin-top:1px; }
  .result-chevron{ flex:0 0 auto; color:#C9B8A3; font-size:22px; }
  .address-suggestions{
    border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
    margin-top:calc(-1 * var(--space-2)); margin-bottom:var(--space-3); overflow:hidden;
  }
  .address-suggestion{
    width:100%; text-align:left; border:0; border-bottom:1px solid var(--border-soft);
    background:var(--surface); color:var(--ink); padding:var(--space-3);
    font-family:'IBM Plex Sans', sans-serif; font-size:0.88rem; cursor:pointer;
  }
  .address-suggestion:last-child{ border-bottom:0; }
  .address-suggestion:hover, .address-suggestion:focus-visible{ background:var(--surface-soft); outline:none; }
  .address-suggestion-main{ font-weight:600; }
  .address-suggestion-sub{ color:var(--muted); font-size:0.78rem; margin-top:2px; }
  /* Auswahl-Zustand (welcher Kunde gerade offen ist) - v.a. für die Desktop-
     Splitscreen-Ansicht relevant, in der Liste und Detail gleichzeitig sichtbar sind. */
  .result.is-selected{ background:var(--tan); box-shadow:inset 0 0 0 1px var(--tan-border); }
  .typ-badge{
    display:inline-block; font-size:0.7rem; font-weight:600;
    color:var(--roast-dark); background:var(--tan);
    padding:2px var(--space-2); border-radius:5px; margin-top:var(--space-1);
  }
  .badge{
    display:inline-block; font-family:'IBM Plex Mono', monospace;
    font-size:0.74rem; font-weight:600; color:var(--roast);
    background:var(--tan); border:1px dashed #D7BE9E;
    padding:4px var(--space-2); border-radius:7px; white-space:nowrap;
  }

  .history-item{
    border-top:1px solid var(--border-soft);
    padding:var(--space-3) var(--space-2); margin-bottom:var(--space-4);
  }
  .history-item:last-child{ margin-bottom:0; }
  .history-item[data-id]:hover{ background:var(--surface-soft); }
  .history-item.overdue{ background:#FBF3F2; }
  .history-item.followup-done{ background:#E2EEE6; }
  .history-top-row{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-1); flex-wrap:wrap; }
  .history-date{ font-size:0.8rem; font-weight:700; color:var(--roast-dark); }
  .history-meta{ font-size:0.76rem; color:var(--muted); margin-bottom:3px; }
  /* Kundendetail > Bestellungen: Karte pro Auftrag, Positionen untereinander
     (keine breite Tabelle - muss auf 360px-Handys ohne Querscrollen passen) */
  .order-card{ padding:var(--space-3) 0; }
  .order-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-2); }
  .order-date{ font-size:0.95rem; font-weight:700; color:var(--roast-dark); }
  .order-sub{ font-size:0.76rem; color:var(--muted); margin-top:2px; }
  .order-amount{ text-align:right; flex-shrink:0; }
  .order-amount b{ display:block; font-size:0.95rem; color:var(--ink); font-variant-numeric:tabular-nums; }
  .order-amount span{ display:block; font-size:0.72rem; color:var(--muted); }
  .order-items{ background:var(--surface-soft); border:1px solid var(--border-soft); border-radius:var(--radius); padding:0 var(--space-3); }
  .order-pos{ padding:var(--space-2) 0; border-top:1px solid var(--border-soft); }
  .order-pos:first-child{ border-top:none; }
  .order-pos-top{ display:flex; justify-content:space-between; gap:var(--space-3); align-items:baseline; }
  .order-pos-name{ font-size:0.88rem; font-weight:600; color:var(--ink); min-width:0; overflow-wrap:anywhere; }
  .order-pos-nr{ display:block; font-size:0.72rem; font-weight:400; color:var(--muted); }
  .order-pos-qty{ font-size:0.85rem; font-weight:600; color:var(--roast-dark); white-space:nowrap; }
  .order-price{ display:grid; grid-template-columns:52px 1fr auto; gap:var(--space-2); font-size:0.8rem; color:var(--muted); font-variant-numeric:tabular-nums; margin-top:2px; }
  .order-price b{ font-weight:600; color:var(--ink); }
  .order-price.is-netto, .order-price.is-netto b{ color:var(--green-dark); }
  .order-total{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-1) var(--space-3); padding:var(--space-2) 0; border-top:2px solid var(--border); font-size:0.8rem; color:var(--muted); }
  .order-total > span:first-child{ flex-basis:100%; font-weight:700; color:var(--ink); }
  .order-total b{ color:var(--ink); font-variant-numeric:tabular-nums; }
  .history-customer{ font-size:0.9rem; font-weight:600; margin-bottom:var(--space-1); }
  .history-art{
    display:inline-block; font-size:0.66rem; font-weight:600;
    color:var(--green-dark); background:#E2EEE6;
    padding:2px 7px; border-radius:5px;
  }
  .history-note{ font-size:0.86rem; line-height:1.4; white-space:pre-wrap; }
  .history-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-2); flex-wrap:wrap; gap:var(--space-2); }
  .history-employee{ font-size:0.72rem; color:var(--muted-light); }
  .history-actions{ display:flex; gap:var(--space-2); }
  /* --amber-dark statt --amber: 0.76rem/bold liegt unter der 14px-Bold-Grenze
     für "grosser Text", braucht also die vollen 4.5:1 (--amber allein reicht
     mit ~3.6:1 nicht). */
  .history-followup{ font-size:0.76rem; color:var(--amber-dark); font-weight:600; margin-top:var(--space-1); }
  .history-followup.done{ color:var(--green-dark); }
  .history-followup.overdue{ color:var(--danger); }

  /* Berichte-Tabelle (nur Desktop - siehe @media unten); mobil bleibt die Karten-Liste. */
  .reports-table{ display:none; margin-top:var(--space-4); }
  .reports-row{
    /* Feste Spalten nur für die kurzen Werte, Kunde/Notiz teilen sich den
       Rest - sonst ragt die Tabelle bei schmalem Fenster aus der Karte. Die
       Spalte Mitarbeiter erscheint erst ab 1280px (siehe @media unten). */
    display:grid; grid-template-columns:92px 84px 84px minmax(0,1.2fr) minmax(0,2fr) 86px; gap:var(--space-3);
    align-items:center; padding:var(--space-3) var(--space-2); border-bottom:1px solid var(--border-soft);
  }
  .reports-row:last-child{ border-bottom:none; }
  .reports-row-head{
    font-size:0.7rem; font-weight:600; color:var(--muted); text-transform:uppercase;
    letter-spacing:0.03em; border-bottom:1px solid var(--border); padding:0 var(--space-2) var(--space-2);
  }
  #all-reports-table-body .reports-row{ cursor:pointer; }
  #all-reports-table-body .reports-row:hover{ background:var(--surface-soft); }
  .reports-row .rr-date{ font-size:0.84rem; font-weight:700; color:var(--roast-dark); }
  .reports-row .rr-name{ font-size:0.84rem; font-weight:600; color:var(--ink); }
  .reports-row .rr-note{ font-size:0.84rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .reports-row .rr-by{ font-size:0.8rem; color:var(--muted); }
  .reports-row > :nth-child(6){ display:none; }
  @media (min-width:1280px){
    .reports-row{ grid-template-columns:92px 84px 84px minmax(0,1.2fr) minmax(0,2fr) minmax(0,1fr) 86px; }
    .reports-row > :nth-child(6){ display:block; }
  }
  @media (min-width:1400px){
    .sales-overview-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  }
  .reports-row > *{ min-width:0; }
  .reports-row .rr-name{ overflow-wrap:anywhere; }
  .reports-row-head > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .reports-row .rr-fu{ font-size:0.8rem; font-weight:600; }

  .customer-context{
    background:var(--tan); border:1px solid var(--tan-border);
    border-radius:var(--radius-md); padding:var(--space-3); margin-bottom:var(--space-4); font-size:0.86rem;
  }

  .stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
  .stat{
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:15px 10px; text-align:center;
  }
  .stat .num{ font-family:'IBM Plex Sans', sans-serif; font-size:1.7rem; font-weight:700; color:var(--roast-dark); letter-spacing:-0.02em; line-height:1; }
  .stat .lbl{ font-size:0.68rem; color:var(--muted); margin-top:5px; font-weight:500; }
  .stat.warn{ border-color:#F0DFBE; }
  .stat.warn .num{ color:var(--amber); }
  /* 4. KPI-Kachel (Umsatz YTD) + Icon-Chips: nur Desktop (siehe @media unten) -
     mobil bleibt es bei den bisherigen 3 Kacheln ohne Icons. */
  .kpi-icon{ display:none; }
  #stat-revenue-card{ display:none; }

  /* Pendenz-Karten sehen überall gleich aus (Dashboard, Kundendetail, Pendenzen-
     Tab) - dieselbe Karten-Optik wie Bericht-Karten (.history-item): Rahmen,
     farbiger linker Rand je nach Status, abgerundet. Vereinheitlicht, statt nur
     in #tasks-list eine Karte zu sein und sonst eine schlanke Zeile. */
  .task{
    display:flex; align-items:flex-start; gap:13px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:16px; padding:14px 16px; margin-bottom:10px;
  }
  .task:last-child{ margin-bottom:0; }
  .task:hover{ background:var(--surface-soft); }
  .task.overdue{ background:#FBF3F2; border-color:#E3B8B0; }
  .task.done{ background:#E2EEE6; border-color:#B9D4C2; }
  .task input[type=checkbox]{
    appearance:none; -webkit-appearance:none; flex-shrink:0; cursor:pointer;
    width:24px; height:24px; margin:1px 0 0; border:2px solid #C9B8A3; border-radius:7px;
    background:var(--surface); position:relative;
  }
  .task input[type=checkbox]:checked{ background:var(--green); border-color:var(--green); }
  .task input[type=checkbox]:checked::after{
    content:''; position:absolute; left:6px; top:2px; width:5px; height:10px;
    border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  }
  .task.overdue input[type=checkbox]{ border-color:var(--danger); }
  .task-main{ flex:1; min-width:0; }
  .task-top-row{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:3px; flex-wrap:wrap; }
  .task-date{ font-size:0.82rem; font-weight:700; color:var(--ink); }
  .task.overdue .task-date{ color:var(--danger); }
  .task.done .task-date{ color:var(--muted); font-weight:600; }
  .task-overdue-flag{
    display:inline-block; font-size:0.6rem; font-weight:700; text-transform:uppercase;
    letter-spacing:0.04em; color:#fff; background:var(--danger); padding:2px 7px; border-radius:20px;
  }
  .task-title{ font-size:0.9rem; font-weight:600; margin-bottom:2px; }
  .task.done .task-title{ text-decoration:line-through; color:var(--muted); font-weight:500; }
  .task-customer{ font-size:0.8rem; color:var(--muted); margin-bottom:var(--space-1); }
  .task-footer{ display:flex; align-items:center; gap:var(--space-2); font-size:0.72rem; color:var(--muted-light); flex-wrap:wrap; }
  /* Schnell verschieben (+1 Tag / +1 Woche) bei offenen, eigenen/Bericht-Pendenzen */
  .task-postpone{ display:inline-flex; gap:var(--space-1); margin-left:auto; }
  .task-postpone button{ background:none; border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:0.72rem; font-weight:600; color:var(--roast-dark); cursor:pointer; min-height:0; width:auto; }
  .task-postpone button:hover{ background:var(--tan); }
  .task-audit{ font-size:0.72rem; color:var(--muted); margin:2px 0 var(--space-1); }
  .tasks-toolbar{ display:flex; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
  .tasks-toolbar-left{ display:flex; gap:var(--space-2); flex-wrap:wrap; }
  #tasks-filter-nurmeine.active, #btn-task-reminders.active{ background:var(--roast); border-color:var(--roast); color:#fff; }

  .seg-tabs{ display:flex; gap:var(--space-2); margin-bottom:var(--space-4); }
  .seg-tab{
    flex:1; text-align:center; padding:10px 6px; border-radius:12px;
    font-size:0.8rem; font-weight:600; cursor:pointer;
    background:var(--surface); color:#7A6B58; border:1px solid var(--border);
  }
  .seg-tab.active{ background:var(--roast-dark); color:#F6E9DA; border-color:var(--roast-dark); }
  /* Liste/Board-Umschalter (Interessenten) - nur relevant/sichtbar am Desktop-
     Breakpoint, siehe @media unten; auf Mobile gibt es ohnehin nur die Liste. */
  .leads-view-toggle{ display:none; margin-bottom:0; }
  .leads-view-toggle .seg-tab{ flex:0 0 auto; padding:8px 12px; }
  #cust-sort-row{ flex-wrap:wrap; }
  #cust-sort-metric .seg-tab{ flex:0 0 auto; padding:8px 12px; }

  .detail-back{
    display:inline-flex; align-items:center; gap:4px;
    background:none; border:none; color:var(--roast); font-weight:600; font-size:0.86rem;
    padding:0 0 var(--space-3) 0; cursor:pointer;
  }
  .detail-back .msi{ font-size:19px; margin:0; }
  .detail-fields{ font-size:0.88rem; }
  .detail-group{ margin-bottom:var(--space-4); }
  .detail-group:last-child{ margin-bottom:0; }
  .detail-group-title{
    font-size:0.72rem; font-weight:700; color:var(--roast-dark);
    text-transform:uppercase; letter-spacing:0.05em;
    margin-bottom:var(--space-2);
  }
  .detail-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:var(--border-soft); border-radius:12px; overflow:hidden;
  }
  .detail-cell{ background:var(--surface-soft); padding:10px 12px; min-width:0; }
  .detail-cell .dl{ font-size:0.68rem; color:var(--muted); }
  .detail-cell .dv{ font-size:0.84rem; color:var(--ink); font-weight:500; word-break:break-word; }
  .artikel-infos{ margin-bottom:var(--space-4); }
  .detail-cell.wide{ grid-column:1 / -1; }
  .detail-grid > .detail-cell:last-child:nth-child(odd){ grid-column:1 / -1; }
  .order-stats{ margin-bottom:var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--border-soft); }
  .mini-stat-label{
    font-size:0.72rem; font-weight:700; color:var(--roast-dark);
    text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--space-1);
  }
  .stat-box-row{ display:flex; gap:10px; margin-bottom:14px; }
  .stat-box{
    flex:1; background:var(--surface-soft); border:1px solid #EEE4D6;
    border-radius:13px; padding:12px; min-width:0;
  }
  .stat-box .sb-label{ font-size:0.68rem; color:var(--muted); }
  .stat-box .sb-value{ font-size:1.2rem; font-weight:700; color:var(--roast-dark); letter-spacing:-0.01em; }
  /* Grün ist ausschliesslich fürs Speichern reserviert (siehe DESIGN.md) - ein
     Umsatzanstieg ist kein Erfolgszustand in diesem Sinn, darum roast-dark
     (= Standardfarbe für Kennzahlen) statt Grün; nur "down" bleibt Danger-Rot. */
  .stat-box .sb-value.up{ color:var(--roast-dark); }
  .stat-box .sb-value.down{ color:var(--danger); }
  .top-artikel-row{ display:flex; justify-content:space-between; gap:var(--space-3); padding:5px 0; font-size:0.84rem; border-bottom:1px solid var(--border-soft); }
  .top-artikel-row:last-child{ border-bottom:none; }
  .top-artikel-menge{ color:var(--muted); font-size:0.8rem; }
  /* ---------- Besuchsplanung (Pendenzen → Besuche) ---------- */
  .tasks-mode-tabs{ margin-bottom:var(--space-3); }
  .tasks-mode-tabs .seg-tab{ display:flex; align-items:center; justify-content:center; gap:6px; }
  .tasks-mode-tabs .seg-tab .msi{ font-size:18px; margin:0; }
  .visits-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
  .visits-week-nav{ display:flex; align-items:center; gap:2px; min-width:0; }
  .visits-week-label{ font-weight:700; font-size:0.9rem; color:var(--roast-dark); padding:0 var(--space-1); white-space:nowrap; }
  .visits-owner-wrap{ margin-bottom:var(--space-3); max-width:340px; }
  .pv-day{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); }
  .pv-day.today{ border-color:var(--roast); box-shadow:inset 0 0 0 1px var(--roast); }
  .pv-day.overdue-block{ border-color:#E3B8B0; background:#FBF3F2; }
  .pv-day-head{ display:flex; align-items:center; gap:var(--space-2); font-weight:700; font-size:0.86rem; color:var(--roast-dark); min-height:36px; }
  .pv-day-head > span:first-child{ flex:1; min-width:0; }
  .pv-day-count{ font-size:0.72rem; font-weight:700; color:var(--roast-dark); background:var(--tan); border-radius:20px; padding:2px 8px; }
  .pv-today-badge{ font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:#F6E9DA; background:var(--roast); border-radius:20px; padding:2px 7px; margin-left:4px; vertical-align:1px; }
  .pv-day-add{ width:34px; height:34px; }
  .pv-day-add .msi{ font-size:20px; }
  .pv-row{ display:flex; gap:var(--space-3); align-items:center; padding:var(--space-2) 0; border-top:1px solid var(--border-soft); cursor:pointer; }
  .pv-row:hover{ background:var(--surface-soft); }
  .pv-row:focus-visible{ outline:2px solid var(--roast); outline-offset:-2px; }
  .pv-main{ flex:1; min-width:0; }
  .pv-visit-time{ font-size:0.74rem; font-weight:700; color:var(--roast); }
  .pv-name{ display:block; background:none; border:none; padding:0; font:inherit; font-weight:600; font-size:0.92rem; color:var(--ink); text-align:left; overflow-wrap:anywhere; cursor:pointer; text-decoration:underline; text-decoration-color:var(--tan-border); text-underline-offset:3px; }
  .pv-name:hover{ color:var(--roast); text-decoration-color:currentColor; }
  .pv-addr{ font-size:0.78rem; color:var(--muted); overflow-wrap:anywhere; }
  .pv-visit-note{ font-size:0.8rem; color:var(--ink); margin-top:2px; overflow-wrap:anywhere; }
  .pv-meta{ display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center; margin-top:4px; font-size:0.72rem; }
  .pv-meta:empty{ display:none; }
  .pv-done-flag{ color:var(--green-dark); font-weight:600; display:inline-flex; align-items:center; gap:3px; }
  .pv-done-flag .msi{ font-size:15px; margin:0; }
  .pv-row.done .pv-name, .pv-row.done .pv-visit-time{ color:var(--muted); }
  .pv-actions{ display:flex; gap:var(--space-1); align-items:center; flex-shrink:0; }
  .pv-actions .btn-small{ white-space:nowrap; }
  .pv-empty{ font-size:0.8rem; color:var(--muted); padding:0 0 var(--space-2); }
  .pv-visit-customer-picked{ background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-3); margin-bottom:var(--space-3); }
  .pv-picked-name{ font-weight:700; }
  .pv-picked-sub{ font-size:0.78rem; color:var(--muted); overflow-wrap:anywhere; }
  .pv-visit-customer-results{ display:flex; flex-direction:column; gap:4px; margin:calc(-1 * var(--space-2)) 0 var(--space-3); }
  .pv-visit-customer-results:empty{ display:none; }
  .pv-customer-option{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; background:var(--surface-soft); border:1px solid var(--border); padding:var(--space-2) var(--space-3); color:var(--ink); }
  .pv-customer-option:hover{ background:var(--tan); }
  .pv-customer-option small{ font-weight:400; color:var(--muted); font-size:0.74rem; }
  .pv-customer-none{ font-size:0.8rem; color:var(--muted); }
  .pv-form-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-3); }
  .pv-form-row > div{ min-width:0; }
  /* iPhone/Safari gibt Datums-/Zeitfeldern eine feste Mindestbreite - nebeneinander
     ragten sie im Dialog "Besuch planen" über den Kartenrand. Auf schmalen
     Bildschirmen deshalb untereinander. */
  @media (max-width:520px){ .pv-form-row{ grid-template-columns:minmax(0,1fr); gap:0; } }
  .pv-visit-edit-actions{ display:flex; gap:var(--space-2); justify-content:space-between; margin-top:var(--space-3); flex-wrap:wrap; }
  #detail-visits .mini-stat-label{ margin-top:var(--space-3); }
  /* Kaffee-Fakt unter der Begrüssung: max. 2 Zeilen, mobil (schmal) bis 3. */
  #dash-fun-fact{
    font-size:0.82rem; color:var(--muted); font-style:italic; margin:0 0 var(--space-4); line-height:1.4;
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  /* Kundendetail "Umsatz & Analyse": Kopfzeilen der Untertabs bleiben einzeilig
     (Titel kürzt sich, Export-/Umschalt-Knopf rutscht nicht in eine eigene Zeile). */
  .toprow.detail-sub-head{ flex-wrap:nowrap; }
  .detail-sub-head > .mini-stat-label{ min-width:0; margin-bottom:0; }
  .detail-sub-head > .seg-tabs{ margin-bottom:0; flex:0 0 auto; }
  .detail-sub-head > .seg-tabs .seg-tab{ flex:0 0 auto; padding:6px 12px; }
  .seg-label-short{ display:none; }
  .artikel-sub{ display:block; font-size:0.72rem; font-weight:400; color:var(--muted); margin-top:1px; }
  .artikel-kg-inline{ display:none; }
  .top-artikel-row .artikel-sub{ font-size:0.74rem; }
  .umsatz-diff{ font-size:0.82rem; font-weight:600; margin-bottom:var(--space-2); }
  .umsatz-diff.up{ color:var(--roast-dark); } /* nicht Grün - siehe Kommentar bei .sb-value.up */
  .umsatz-diff.down{ color:var(--danger); }
  .stat-compare{ font-size:0.8rem; color:var(--muted); margin-bottom:var(--space-4); }
  .stat-compare:last-child{ margin-bottom:0; }

  /* Dunkle Umsatz-Hero-Karte (Dashboard, wie im Mockup) */
  .revenue-hero{
    background:linear-gradient(158deg,#6C4526 0%,#4A2C18 100%);
    border:none; border-radius:20px; padding:20px; margin-bottom:14px;
    color:#F6E9DA; box-shadow:0 18px 34px -18px rgba(74,44,24,0.7);
  }
  .revenue-hero .toprow{ align-items:flex-start; margin-bottom:14px; }
  .revenue-hero h2{ font-size:0.74rem; font-weight:500; color:var(--hero-tan-light); letter-spacing:0.02em; }
  .revenue-amount{ font-size:2rem; font-weight:700; letter-spacing:-0.02em; margin-top:2px; line-height:1; color:#F6E9DA; }
  .revenue-pill{
    background:rgba(255,255,255,0.14); border-radius:20px; padding:5px 10px;
    font-size:0.76rem; font-weight:600; display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
  }
  .revenue-pill .msi{ font-size:15px; margin:0; }
  .revenue-pill.down{ background:rgba(0,0,0,0.22); }
  /* Utility für Karten mit dunklem Hintergrund (aktuell nur .revenue-hero):
     Standardkomponenten (.seg-tab.active mit --roast-dark, Standard-Select mit
     heller Fläche, .icon-btn mit dunkelbraunem Icon) liegen farblich zu nah am
     Kartenhintergrund und wären darauf kaum lesbar/sichtbar - helle
     Transparenz-Varianten, gleiche Machart wie .revenue-pill. */
  .on-dark-card .seg-tab{ background:rgba(255,255,255,0.1); color:var(--hero-tan-light); border-color:rgba(255,255,255,0.18); }
  .on-dark-card .seg-tab.active{ background:rgba(255,255,255,0.92); color:var(--roast-dark); border-color:transparent; }
  /* Die allgemeine Filterleiste ist auf hellem Grund ausgelegt. In der
     dunklen Umsatzkarte bekommt sie deshalb eine eigene dunkle Fläche; sonst
     wäre der helle Select-Text auf dem hellen Panel kaum lesbar. */
  .on-dark-card .filter-panel{ background:rgba(42,32,24,0.22); border-color:rgba(255,255,255,0.18); }
  .on-dark-card .filter-panel-title{ color:#F6E9DA; }
  .on-dark-card .filter-summary,
  .on-dark-card .filter-field label{ color:var(--hero-tan-light); }
  .on-dark-card select{
    width:auto; flex:1; min-width:140px; margin-bottom:0; font-size:0.8rem; padding:8px 10px;
    background:rgba(255,255,255,0.1); color:#F6E9DA; border-color:rgba(255,255,255,0.18);
  }
  .on-dark-card select option{ color:var(--ink); }
  .on-dark-card .icon-btn{ color:var(--hero-tan-light); }
  .on-dark-card .icon-btn:hover{ background:rgba(255,255,255,0.14); }
  .revenue-foot{
    display:flex; justify-content:space-between; gap:var(--space-3); flex-wrap:wrap;
    border-top:1px solid rgba(255,255,255,0.14); padding-top:11px; margin-top:var(--space-2);
    font-size:0.74rem; color:var(--hero-tan-light);
  }
  /* Die Umsatzbalken haben zwei eindeutige, dokumentierte Rollen: das
     laufende Jahr ist hell, das Vorjahr zurückgenommen. Ein separater Akzent
     nur für den aktuellen Kalendermonat würde sonst wie eine dritte Datenreihe
     wirken und war die Ursache für die unklare Farbwirkung. */
  .month-chart-legend{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-3); color:#D8BC9C; font-size:0.68rem; font-weight:600; }
  .month-chart-legend span{ display:inline-flex; align-items:center; gap:5px; }
  .month-chart-legend i{ width:9px; height:9px; border-radius:3px; background:var(--chart-bar-light); }
  .month-chart-legend i.vorjahr{ background:var(--chart-bar-light-vorjahr); }
  .month-chart-legend i.current{ background:var(--chart-bar-current-light); }
  .month-chart{ display:flex; align-items:flex-end; gap:5px; height:74px; margin-top:var(--space-2); }
  .month-bar-wrap{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-end; height:100%; cursor:pointer; min-width:0; gap:5px;
  }
  /* Balkenzeile pro Monat: Vorjahres-Balken (falls Daten) links neben dem
     aktuellen - beide teilen sich die Breite des Wraps. */
  .month-bar-row{
    display:flex; align-items:flex-end; justify-content:center; gap:2px;
    width:100%; max-width:32px; height:100%;
  }
  .month-bar{
    flex:1; min-width:0; background:var(--chart-bar-light); border-radius:4px; min-height:3px;
    transform-origin:bottom; animation:barGrow 0.6s ease both;
  }
  .month-bar.vorjahr{ background:var(--chart-bar-light-vorjahr); }
  .no-anim .month-bar{ animation:none; }
  .month-bar-wrap:hover .month-bar{ background:var(--chart-bar-light-hover); }
  .month-bar-wrap:hover .month-bar.vorjahr{ background:var(--chart-bar-light-vorjahr-hover); }
  /* Laufender Monat: gleiche Balkenfarbe wie die Legende ("Monat") - früher
     cremeweiss, eine Farbe, die in der Legende nicht vorkam. Hervorgehoben
     wird stattdessen die Beschriftung. */
  .month-bar-wrap.is-current .month-bar-label{ color:#F6E9DA; font-weight:700; }
  .month-bar-wrap.is-current .month-bar:not(.vorjahr){ background:var(--chart-bar-current-light); }
  /* Platzhalter für einen fehlenden Balken (kommender Monat, kein Vorjahr):
     unsichtbar, hält aber die Position - Vorjahr links, laufendes Jahr rechts */
  .month-chart .month-bar-wrap .month-bar.leer{ background:transparent; box-shadow:none; }
  .month-bar-wrap.selected .month-bar:not(.vorjahr){ box-shadow:0 0 0 2px #F6E9DA; }
  /* Vorjahresbalken angetippt (.sel-vj): Ring wandert auf diesen Balken */
  .month-bar-wrap.selected.sel-vj .month-bar:not(.vorjahr){ box-shadow:none; }
  .month-bar-wrap.selected.sel-vj .month-bar.vorjahr{ box-shadow:0 0 0 2px #F6E9DA; }
  .month-bar-label{ font-size:0.56rem; color:#D8BC9C; font-weight:600; white-space:nowrap; }
  .month-bar-wrap.selected .month-bar-label{ color:#F6E9DA; }
  .month-detail{
    padding:var(--space-2) 0 0; margin-bottom:2px; font-size:0.8rem; color:var(--hero-tan-light);
  }
  .month-detail b{ color:#F6E9DA; }
  /* Light-Variante des Monatscharts fuer helle Karten (Analyse/Kundendetail) -
     gleiche Struktur, Balkenfarben aus der Roast-Palette statt Weiss-Transparenz. */
  .month-chart.on-light .month-bar{ background:var(--chart-bar-dark); }
  .month-chart.on-light .month-bar.vorjahr{ background:var(--chart-bar-dark-vorjahr); }
  .month-chart.on-light .month-bar-label{ color:var(--muted); }
  /* Infozeile zum angetippten Trend-Balken (Kundendetail), helles Gegenstück zu .month-detail */
  .trend-month-info{ margin-top:var(--space-2); font-size:0.82rem; color:var(--muted); }
  .trend-month-info b{ color:var(--ink); }
  .trend-brutto{ margin-top:2px; font-size:0.78rem; }
  /* Werte über den Balken (Kundendetail-Trend): Platz oben reservieren,
     Zahl sitzt über dem höheren Balken des Paars */
  .month-chart.with-values{ padding-top:14px; }
  .month-bar{ position:relative; }
  /* Wert nur über dem angetippten Balken (aktueller Monat bzw. Vorjahr) */
  .month-bar-value{ display:none; position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin-bottom:2px; font-size:0.62rem; font-weight:700; color:var(--roast-dark); white-space:nowrap; pointer-events:none; }
  .month-bar-wrap.selected:not(.sel-vj) .month-bar:not(.vorjahr) .month-bar-value,
  .month-bar-wrap.selected.sel-vj .month-bar.vorjahr .month-bar-value{ display:block; }
  /* Monat ohne Auftrag: kein Balken (eine eigene Farbe stünde nicht in der Legende) */
  .month-chart.on-light .month-bar.leer{ background:transparent; }
  .month-chart-legend.on-light{ color:var(--muted); }
  .month-chart-legend.on-light i{ background:var(--chart-bar-dark); }
  .month-chart-legend.on-light i.vorjahr{ background:var(--chart-bar-dark-vorjahr); }
  .month-chart-legend.on-light i.current{ background:var(--chart-bar-current-dark); }
  .month-chart.on-light .month-bar-wrap.is-current .month-bar:not(.vorjahr):not(.leer){ background:var(--chart-bar-current-dark); }
  .month-chart.on-light .month-bar-wrap.is-current .month-bar-label{ color:var(--amber-dark); font-weight:700; }
  .month-chart.on-light .month-bar-wrap{ cursor:default; }
  /* .selected auf dem dunklen Dashboard-Chart nutzt ein cremefarbenes Cream
     (#F6E9DA) - auf hellen Karten (Analyse/Kundendetail-Trend) wäre das
     unsichtbar, darum hier ein eigenes, dunkles Äquivalent. */
  .month-chart.on-light .month-bar-wrap.selected .month-bar:not(.vorjahr){ box-shadow:0 0 0 2px var(--roast-dark); }
  .month-chart.on-light .month-bar-wrap.selected.sel-vj .month-bar:not(.vorjahr){ box-shadow:none; }
  .month-chart.on-light .month-bar-wrap.selected.sel-vj .month-bar.vorjahr{ box-shadow:0 0 0 2px var(--roast-dark); }
  .month-chart.on-light .month-bar-wrap.selected .month-bar-label{ color:var(--roast-dark); font-weight:700; }

  /* Analyse-Unterseite */
  /* Kopfzeile mit 2-3 Headline-Zahlen: gibt der Seite einen klaren "das ist
     das Wichtigste"-Fokuspunkt, BEVOR die 7 gleichgewichtigen Detailkarten
     folgen - bewusst kein eigenes .card (sonst nur eine achte gleichrangige
     Fläche), sondern eine schlanke, randlose Zahlenreihe. */
  .analyse-headline{
    display:flex; flex-wrap:wrap; gap:var(--space-5); margin-bottom:var(--space-4);
    padding-bottom:var(--space-3); border-bottom:1px solid var(--border);
  }
  .analyse-headline:empty{ display:none; }
  .analyse-headline-item .num{
    font-family:'IBM Plex Sans', sans-serif; font-size:1.7rem; font-weight:700;
    color:var(--roast-dark); letter-spacing:-0.02em; line-height:1;
  }
  .analyse-headline-item .lbl{ font-size:0.7rem; color:var(--muted); margin-top:4px; font-weight:500; }
  .analyse-headline-item .num .pct{ font-size:0.95rem; font-weight:600; margin-left:4px; }
  .analyse-grid{ display:grid; gap:var(--space-4); grid-template-columns:1fr; }
  .analyse-sub{ font-size:0.72rem; font-weight:500; color:var(--muted); }
  /* Analyse: Sprungmarken, einklappbare Karten, Werkzeugzeile, Drilldown */
  .analyse-jump{ display:flex; gap:var(--space-2); overflow-x:auto; padding:2px 0 var(--space-3); scrollbar-width:none; }
  .analyse-jump::-webkit-scrollbar{ display:none; }
  .analyse-jump a{ flex:0 0 auto; padding:6px 12px; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--roast-dark); font-size:0.8rem; font-weight:600; text-decoration:none; white-space:nowrap; }
  .analyse-jump a:hover{ background:var(--tan); }
  details.analyse-card > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
  details.analyse-card > summary::-webkit-details-marker{ display:none; }
  details.analyse-card > summary::after{ content:'expand_more'; font-family:'Material Symbols Rounded'; font-feature-settings:'liga'; -webkit-font-feature-settings:'liga'; line-height:1; font-size:22px; color:var(--muted); transition:transform .15s; flex-shrink:0; }
  details.analyse-card[open] > summary::after{ transform:rotate(180deg); }
  details.analyse-card > summary h2{ font-size:1rem; color:var(--roast-dark); margin:0; }
  .analyse-card-tools{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); flex-wrap:wrap; margin:var(--space-3) 0 var(--space-2); }
  .analyse-card-tools .seg-tabs{ margin-bottom:0; }
  .analyse-kunden-hint{ margin-bottom:var(--space-2); }
  .analyse-verlauf-sum{ font-size:0.86rem; color:var(--muted); margin-bottom:var(--space-2); }
  .analyse-verlauf-sum b{ color:var(--roast-dark); font-size:1rem; }
  tr.analyse-drillable, tr.analyse-link-row{ cursor:pointer; }
  tr.analyse-link-row:hover{ background:var(--surface-soft); }
  tr.analyse-link-row > td:first-child::after{ content:' ›'; color:var(--muted); }
  /* Karten ohne Umschalter: Export-Knopf oben rechts neben den Titel statt eigener Zeile */
  details.analyse-card{ position:relative; }
  .analyse-card-tools.only-export{ position:absolute; top:10px; right:48px; margin:0; }
  details.analyse-card:has(.only-export) > summary h2{ margin-right:44px; }
  tr.analyse-drillable:hover, tr.analyse-drillable.drill-open{ background:var(--surface-soft); }
  tr.analyse-drillable > td:first-child::after{ content:' ›'; color:var(--muted); }
  tr.analyse-drillable.drill-open > td:first-child::after{ content:' ⌄'; }
  .analyse-drill-row > td{ padding:0 0 var(--space-2) !important; background:var(--surface-soft); }
  .analyse-drill{ padding:var(--space-2) var(--space-3); border-left:3px solid var(--amber); }
  .analyse-drill-head{ font-size:0.74rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:var(--space-1); }
  /* Handy: breite Analyse-Tabellen als Karten - jede Zeile ein Block, Spaltenkopf
     (data-label aus finishAnalyseTable) vor jedem Wert, erste Spalte als Titel. */
  @media (max-width:599px){
    .analyse-table thead{ display:none; }
    .analyse-table, .analyse-table tbody{ display:block; }
    .analyse-table tr{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:2px var(--space-3); padding:var(--space-2) 0; border-bottom:1px solid var(--border-soft); }
    .analyse-table td{ border:none !important; padding:0 !important; text-align:left !important; white-space:normal !important; }
    .analyse-table td:first-child{ grid-column:1 / -1; font-weight:700; font-size:0.9rem; }
    .analyse-table td[data-label]:not(:first-child)::before{ content:attr(data-label) ' '; color:var(--muted); font-size:0.72rem; font-weight:500; }
    .analyse-table tr.analyse-drill-row{ display:block; padding:0; }
    .analyse-table tr.analyse-drill-row > td{ display:block; }
  }
  /* Pendenzen + Historie (Kundendetail): bewusst Flexbox statt .analyse-grid -
     siehe Desktop-Override weiter unten für die Begründung. Mobil einfach
     gestapelt, Pendenzen zuerst (Reihenfolge im Markup). */
  .detail-top-row{ display:flex; flex-direction:column; gap:var(--space-4); }
  /* Zeitraum-Zeile: die Preset-Pills (.seg-tab, überall sonst kompakter) und
     die neu gestylten Monats-Inputs sassen bisher auf unterschiedlicher Höhe
     und -Ausrichtung (.seg-tabs hat einen eigenen margin-bottom, den die
     Inputs nicht haben) - hier beides aneinander angeglichen, ohne die
     globale .seg-tab-Grösse anzufassen (die wird an vielen anderen Stellen
     unverändert weiterverwendet). */
  #analyse-preset-toggle{ margin-bottom:0; }
  #analyse-preset-toggle .seg-tab{ padding:12px 14px; font-size:0.85rem; }
  .analyse-table{ width:100%; border-collapse:collapse; font-size:0.84rem; margin-top:var(--space-2); }
  .analyse-table th{
    text-align:left; font-size:0.66rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
    color:var(--muted); padding:6px 8px; border-bottom:1px solid rgba(0,0,0,0.08); white-space:nowrap;
  }
  .analyse-table td{ padding:7px 8px; border-bottom:1px solid rgba(0,0,0,0.05); }
  .analyse-table .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
  /* Artikel: Trefferliste und Kundenliste als Spalten-Raster */
  .artikel-zeitraum-tabs .seg-tab{ white-space:nowrap; }
  .artikel-grid{ display:grid; grid-template-columns:minmax(0,1fr) 80px 130px 140px 22px; align-items:center; gap:var(--space-3);
    width:100%; padding:var(--space-2) var(--space-1); border:none; border-top:1px solid var(--border-soft); background:none; color:var(--ink); text-align:left; font:inherit; min-height:0; font-size:0.88rem; }
  .artikel-kunden-grid{ grid-template-columns:minmax(0,1fr) 90px 100px 130px 130px; }
  .artikel-grid .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  .artikel-grid-head{ border-top:none; padding-top:0; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
  button.artikel-hit{ cursor:pointer; border-radius:0; }
  button.artikel-hit:hover{ background:var(--surface-soft); }
  .ag-main{ display:flex; flex-direction:column; min-width:0; }
  .ag-main b{ font-weight:600; overflow-wrap:anywhere; }
  .ag-main small{ font-size:0.74rem; color:var(--muted); margin-top:2px; }
  .ag-menge{ font-weight:600; }
  .ag-umsatz{ color:var(--ink); }
  .ag-chev{ color:var(--muted); font-size:20px; justify-self:end; }
  .ag-mobile{ display:none; }
  /* Handy: Name links, Menge + Umsatz rechts untereinander; Nebenspalten in die Unterzeile */
  @media (max-width:699px){
    .artikel-grid, .artikel-kunden-grid{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:'main menge' 'main umsatz'; gap:0 var(--space-3); }
    button.artikel-hit{ grid-template-columns:minmax(0,1fr) auto 18px; grid-template-areas:'main menge chev' 'main umsatz chev'; }
    .artikel-grid-head, .ag-kunden{ display:none; }
    .ag-main{ grid-area:main; } .ag-menge{ grid-area:menge; } .ag-umsatz{ grid-area:umsatz; font-size:0.76rem; color:var(--muted); }
    .ag-chev{ grid-area:chev; }
    .ag-mobile{ display:inline; }
  }
  .analyse-pct.up{ color:var(--roast-dark); font-weight:600; } /* nicht Grün - siehe Kommentar bei .sb-value.up */
  .analyse-pct.down{ color:var(--danger); font-weight:600; }
  .analyse-row{
    display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-2);
    padding:8px 4px; border-bottom:1px solid rgba(0,0,0,0.05); cursor:pointer; border-radius:6px;
  }
  .analyse-row:hover{ background:rgba(107,66,38,0.05); }
  .analyse-row .ar-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.86rem; }
  .analyse-row .ar-meta{ font-size:0.74rem; color:var(--muted); white-space:nowrap; }
  /* Importverlauf: Status ist stets als Text sichtbar, Farbe ergänzt nur die
     Bedeutung. Lange Dateinamen und Fehlermeldungen dürfen die Karte weder
     horizontal sprengen noch die wichtigste Information verdrängen. */
  .import-history-row{ align-items:flex-start; cursor:default; }
  .import-history-main{ min-width:0; display:flex; align-items:center; gap:var(--space-2); }
  .import-history-main .ar-name{ flex:1; }
  .import-status-badge{
    flex:0 0 auto; display:inline-flex; align-items:center; border-radius:20px;
    padding:2px var(--space-2); font-size:0.68rem; font-weight:700;
  }
  .import-status-badge.succeeded{ color:var(--green-dark); background:#E2EEE6; }
  .import-status-badge.started{ color:var(--amber-dark); background:#F0E6CC; }
  .import-status-badge.failed{ color:#8A342A; background:#EFDAD7; }
  .import-history-row .ar-meta{ max-width:54%; white-space:normal; text-align:right; overflow-wrap:anywhere; }
  @media (max-width:420px){
    .import-history-row{ flex-direction:column; gap:var(--space-1); }
    .import-history-row .ar-meta{ max-width:none; text-align:left; }
  }
  .import-section-title{ font-size:0.95rem; margin:0 0 var(--space-2); }
  .import-section{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--border); }
  .import-section input[type=file]{ margin-bottom:var(--space-3); }
  .import-section #btn-praxedo-prepare{ display:block; }
  .import-mode-picker{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  @media (max-width:699px){ .import-mode-picker{ grid-template-columns:1fr; } }
  /* "Weitere 100 laden" unter der Kunden-Trefferliste */
  .results-more{ display:flex; align-items:center; justify-content:center; gap:var(--space-3); flex-wrap:wrap; padding:var(--space-3) 0 var(--space-1); }
  /* ---------- Ketten (js/app/18-ketten.js) ---------- */
  .kette-code{ display:inline-block; font-size:0.7rem; font-weight:700; color:var(--roast-dark); background:var(--surface-soft); border:1px solid var(--border-soft); border-radius:6px; padding:1px 6px; vertical-align:middle; }
  .kette-kopf{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-3); }
  .kette-titel{ margin:0; }
  .kette-spez{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-3); }
  .kette-spez .seg-tab{ flex:0 0 auto; }
  .kette-spez-label{ font-size:0.75rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.05em; }
  .kette-n{ color:var(--muted); font-weight:500; margin-left:2px; }
  .kette-kpis{ flex-wrap:wrap; }
  .kette-kpis .stat-box{ min-width:150px; }
  .kette-kpi-sub{ font-size:0.72rem; color:var(--muted); margin-top:2px; }
  .kette-kpi-sub.down{ color:var(--danger); }
  .kette-grid{ display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--space-3); }
  .kette-grid > .card{ margin-bottom:0; }
  .kette-grid + .card{ margin-top:var(--space-3); }
  @media (max-width:899px){ .kette-grid{ grid-template-columns:1fr; } }
  .kette-hinweis{ font-size:0.75rem; margin-top:var(--space-2); }
  .kette-balken{ height:4px; background:var(--border-soft); border-radius:2px; margin-top:3px; min-width:60px; }
  .kette-balken i{ display:block; height:100%; background:var(--roast-dark); border-radius:2px; }
  .ketten-table tbody tr{ cursor:pointer; }
  .ketten-table tbody tr:hover td{ background:var(--surface-soft); }
  .kette-link{ display:inline-flex; align-items:center; gap:2px; text-align:left; }
  .kette-link .msi{ font-size:15px; }
  .import-abschluss{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-2); font-size:0.82rem; color:var(--muted); }
  .import-abschluss:empty{ display:none; }
  .import-abschluss .msi{ font-size:16px; }
  .import-abschluss-edit{ display:flex; align-items:center; gap:var(--space-2); }
  .import-abschluss-edit input{ width:auto; }
  .import-summary{ margin-top:var(--space-2); font-size:0.82rem; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px var(--space-3); }
  .import-summary dt{ color:var(--muted); }
  .import-summary dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }
  .action-link{ color:var(--roast); font-weight:600; text-decoration:none; }
  .action-link:hover{ text-decoration:underline; }
  .kdnr-link{ cursor:pointer; }
  .kdnr-link:hover{ background:#E9DCC9; }
  input[readonly]{ background:var(--tan); color:var(--muted); cursor:default; }
  button:disabled, select:disabled{ opacity:0.5; cursor:not-allowed; }

  nav.tabs{
    position:fixed; bottom:0; left:0; right:0;
    background:var(--surface); border-top:1px solid var(--border);
    display:flex; z-index:20; padding:6px 8px;
    box-shadow:0 -6px 20px -12px rgba(74,44,24,0.3);
  }
  /* Direktes-Kind-Selektor (>) statt Nachfahre - sonst würde dies auch das
     verschachtelte Zahnrad-Icon-Button im .sidebar-user-Chip mitstylen. */
  nav.tabs > button{
    flex:1; background:none; border-radius:0; color:var(--muted-light);
    font-size:0.62rem; font-weight:500; padding:5px 1px;
    display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  nav.tabs > button .msi{ font-size:25px; margin:0; }
  nav.tabs > button.active{ color:var(--roast); font-weight:700; }
  nav.tabs > button .tlabel{ display:block; }
  .desktop-nav-label{ display:none; }
  .tab-icon-wrap{ position:relative; display:inline-flex; }
  nav.tabs > button .tcount{
    position:absolute; top:-4px; right:-9px;
    display:inline-block; background:var(--amber); color:#fff;
    font-size:0.62rem; font-weight:700; border-radius:8px; padding:1px 6px;
    line-height:1.3;
  }
  /* Seitenleisten-Kopf/-Fuss: nur Bestandteil der Desktop-Sidebar, mobil ungenutzt. */
  .sidebar-brand, .sidebar-user{ display:none; }

  .mapping-row{ display:flex; align-items:center; gap:var(--space-3); margin-bottom:var(--space-2); font-size:0.85rem; }
  .mapping-row span{ flex:0 0 130px; color:var(--muted); }
  .mapping-row select{ margin-bottom:0; }

  .status{ font-size:0.8rem; color:var(--muted); margin-top:var(--space-2); }
  .status.err{ color:var(--danger); }
  .status.ok{ color:var(--green-dark); }
  .status.saving{ color:var(--roast-dark); }
  .status.offline{ color:var(--amber-dark); }

  /* Für Aktionen ohne eigenes Formular/Modal in der Nähe (Listen-Quick-Actions,
     seitenübergreifende Export-Guards, globaler Refresh) - gleiche Sprache wie
     .status.err, nur als kurz eingeblendeter Hinweis statt fester Textzeile. */
  .toast{
    position:fixed; left:50%; bottom:calc(72px + var(--space-4) + env(safe-area-inset-bottom, 0px));
    transform:translate(-50%, 8px); max-width:min(420px, calc(100vw - var(--space-4) * 2));
    background:var(--surface); color:var(--danger);
    border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
    font-size:0.85rem; line-height:1.4; box-shadow:0 10px 40px rgba(42,32,24,0.25);
    z-index:110; opacity:0; pointer-events:none;
    transition:opacity .2s cubic-bezier(.25,1,.5,1), transform .2s cubic-bezier(.25,1,.5,1);
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }
  @media (prefers-reduced-motion: reduce){
    .toast{ transition:opacity .01s linear; transform:translate(-50%, 0); }
  }
  .field-hint{ margin-top:calc(-1 * var(--space-2)); margin-bottom:var(--space-3); line-height:1.35; }
  .field-hint:empty{ display:none; }
  input[aria-invalid="true"]{ border-color:var(--danger); outline:2px solid var(--danger); outline-offset:1px; }

  .toprow{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--space-3); flex-wrap:wrap; gap:var(--space-2); }
  .toprow h2{ font-size:1.05rem; }
  .link-btn{ background:none; border:none; color:var(--roast); font-size:0.8rem; font-weight:600; text-decoration:underline; padding:var(--space-1); cursor:pointer; }
  .filter-row{ display:flex; gap:var(--space-2); }
  /* Einheitliche Filter-Sprache: jede Listen- und Auswertungsseite bündelt
     ihre Suche und Einschränkungen in derselben ruhigen Werkzeugleiste. */
  .filter-panel{
    background:var(--surface-soft); border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:var(--space-3); margin-bottom:var(--space-3);
  }
  .filter-panel .search-wrap:last-child,
  .filter-panel > input:last-child,
  .filter-panel .filter-row:last-child{ margin-bottom:0; }
  .filter-panel-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); margin-bottom:var(--space-2); }
  .filter-panel-title{ display:flex; align-items:center; gap:6px; color:var(--roast-dark); font-size:0.82rem; font-weight:700; }
  .filter-panel-title .msi{ font-size:18px; }
  .filter-summary{ color:var(--muted); font-size:0.74rem; min-height:1.1em; text-align:right; }
  .filter-fields{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:flex-end; }
  .filter-field{ display:flex; flex:1 1 150px; min-width:130px; flex-direction:column; gap:4px; }
  .filter-field label{ color:var(--muted); font-size:0.72rem; font-weight:600; }
  .filter-field input,.filter-field select{ width:100%; min-width:0; margin:0; }
  .filter-reset{ align-self:flex-end; flex:0 0 auto; }
  .filter-disclosure{ display:none; }
  @media (max-width:520px){
    .filter-panel{ padding:var(--space-3); }
    .filter-field{ flex-basis:calc(50% - var(--space-2)); }
    .filter-field.filter-field-wide{ flex-basis:100%; }
  }

  /* Lange Formulare (z.B. Interessent-Erfassung) werden als geführte Etappen
     gezeigt. So bleibt mobil immer nur eine Aufgabe sichtbar und jede Etappe
     kann vor dem Weitergehen validiert werden. */
  .lead-stepper{ display:flex; gap:var(--space-2); margin:0 0 var(--space-4); overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .lead-stepper::-webkit-scrollbar{ height:0; }
  .lead-step{
    flex:1 0 120px; min-width:0; border:1px solid var(--border); background:var(--surface-soft);
    color:var(--muted); border-radius:var(--radius-md); padding:var(--space-2); font-size:0.78rem; font-weight:600;
    display:flex; align-items:center; gap:var(--space-2);
  }
  .lead-step-num{
    width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
    background:var(--tan); color:var(--roast-dark); font-family:'IBM Plex Mono', monospace; font-size:0.75rem; flex:0 0 auto;
  }
  .lead-step.active{ border-color:var(--roast); background:var(--tan); color:var(--roast-dark); }
  .lead-step.done{ border-color:#B9D4C2; background:#E2EEE6; color:var(--green-dark); }
  .lead-step.active .lead-step-num{ background:var(--roast); color:#fff; }
  .lead-step.done .lead-step-num{ background:var(--green); color:#fff; }
  .lead-wizard-active .lead-section{ display:none; }
  .lead-wizard-active .lead-section.active{ display:block; }
  .lead-section{ margin:var(--space-4) 0; }
  .lead-section:first-of-type{ margin-top:var(--space-1); }
  .lead-section > summary.form-section{
    font-size:0.95rem; font-weight:700; color:var(--roast-dark);
    margin:0 0 var(--space-2); padding-bottom:var(--space-1); border-bottom:1px solid var(--border);
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  }
  .lead-section > summary.form-section::-webkit-details-marker{ display:none; }
  .lead-section > summary.form-section:hover{ color:var(--roast); }
  .lead-section > summary.form-section::after{
    content:'expand_more'; font-family:'Material Symbols Rounded'; font-weight:400;
    -webkit-font-feature-settings:'liga'; font-size:20px; color:var(--muted);
    transition:transform 0.15s ease;
  }
  .lead-section[open] > summary.form-section::after{ transform:rotate(180deg); }
  .lead-wizard-active .lead-section > summary.form-section{ cursor:default; pointer-events:none; }
  .lead-wizard-active .lead-section > summary.form-section::after{ content:''; }
  .lead-wizard-actions{ display:flex; gap:var(--space-2); margin-top:var(--space-4); }
  .lead-wizard-actions button{ flex:1; margin:0; }
  .lead-quick-save{ margin-top:var(--space-3); }
  .lead-quick-save .status{ margin:var(--space-2) 0 0; }
  .lead-address-fields{ margin:var(--space-4) 0; padding-top:var(--space-3); border-top:1px solid var(--border-soft); }
  .lead-address-fields-label{ color:var(--roast); font-size:0.84rem; font-weight:600; margin:0 0 var(--space-2); }
  .lead-quick-optional{ margin-top:var(--space-4); }
  .lead-quick-optional > summary{ color:var(--roast); font-size:0.86rem; font-weight:600; cursor:pointer; }
  /* Einklappbare Karten (<details class="card">: Analyse-Glossar, Kundendetail-
     Karten) - gleiches Chevron-/Hover-Muster wie .lead-section > summary.form-
     section oben, nur für ganze Kartenköpfe statt Formularabschnitte. Ohne
     diese Regel hatten die Summaries nur einen nackten cursor:pointer - kein
     sichtbarer Hinweis, dass der Kopf klickbar ist, keine Hover-Rückmeldung. */
  details.card > summary{
    cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  }
  details.card > summary::-webkit-details-marker{ display:none; }
  details.card > summary h2{ color:var(--roast-dark); }
  details.card > summary:hover{ color:var(--roast); }
  details.card > summary:hover h2{ color:var(--roast); }
  details.card > summary::after{
    content:'expand_more'; font-family:'Material Symbols Rounded'; font-weight:400;
    -webkit-font-feature-settings:'liga'; font-size:20px; color:var(--muted); flex-shrink:0;
    transition:transform 0.15s ease;
  }
  details.card[open] > summary::after{ transform:rotate(180deg); }
  /* Benutzerverwaltung: kompakte, aufklappbare Zeilen. */
  details.user-row{ border-bottom:1px solid var(--border-soft); }
  details.user-row > summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-3);
    padding:var(--space-3) var(--space-1); border-radius:var(--radius-md);
  }
  details.user-row > summary::-webkit-details-marker{ display:none; }
  details.user-row > summary:hover{ background:var(--surface-soft); }
  details.user-row > summary:focus-visible{ outline:2px solid var(--roast); outline-offset:-2px; }
  details.user-row > summary::after{
    content:'expand_more'; font-family:'Material Symbols Rounded'; font-weight:400;
    -webkit-font-feature-settings:'liga'; font-size:20px; color:var(--muted); flex-shrink:0; margin-left:auto;
    transition:transform 0.15s ease;
  }
  details.user-row[open] > summary::after{ transform:rotate(180deg); }
  @media (prefers-reduced-motion: reduce){ details.user-row > summary::after{ transition:none; } }
  .user-row-main{ min-width:0; flex:1; }
  .user-row-name{ font-weight:600; font-size:0.92rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-row-sub{ font-size:0.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .user-row-role{ flex-shrink:0; font-size:0.72rem; font-weight:600; color:var(--roast-dark); background:var(--tan); padding:3px var(--space-2); border-radius:20px; }
  .user-row-warn{ color:var(--amber-dark); font-weight:600; }
  .user-row-body{ padding:var(--space-1) var(--space-1) var(--space-4); }
  @media (prefers-reduced-motion: reduce){
    details.card > summary::after{ transition:none; }
  }
  .chip-group{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
  .chip{
    display:inline-flex; align-items:center; gap:var(--space-1);
    font-size:0.82rem; background:var(--surface); border:1px solid var(--border);
    border-radius:20px; padding:var(--space-2) var(--space-3); cursor:pointer; margin:0;
  }
  .chip input{ width:auto; margin:0; accent-color:var(--roast); }

  /* Horizontale Filter-Chip-Reihe (Kundenliste, wie im Mockup) */
  .filter-chips{
    display:flex; gap:var(--space-2); margin-bottom:var(--space-3);
    overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch;
  }
  .filter-chips::-webkit-scrollbar{ height:0; }
  .filter-chip{
    flex:0 0 auto; padding:8px 14px; border-radius:20px;
    font-size:0.8rem; font-weight:500; cursor:pointer;
    background:var(--surface); color:#7A6B58; border:1px solid var(--border);
  }
  .filter-chip.active{ background:var(--roast-dark); color:#F6E9DA; border-color:var(--roast-dark); font-weight:600; }

  /* Pipeline-Zusammenfassung (Interessenten, wie im Mockup) */
  .pipeline-row{
    display:flex; gap:var(--space-2); margin-bottom:var(--space-4);
    overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch;
  }
  .pipeline-row::-webkit-scrollbar{ height:0; }
  .pipeline-box{
    flex:0 0 auto; min-width:78px; background:var(--surface);
    border:1px solid var(--border); border-radius:14px; padding:11px 13px;
  }
  .pipeline-box .pl-count{ font-size:1.35rem; font-weight:700; letter-spacing:-0.02em; line-height:1; color:var(--roast); }
  .pipeline-box .pl-label{ font-size:0.7rem; color:var(--muted); margin-top:4px; font-weight:500; }

  /* Sales-Übersicht: bewusst eine kompakte, horizontal scrollbare Kennzahlenreihe
     für Mobile; am Desktop wird sie zum echten Raster (siehe @media unten). */
  .sales-overview{ margin-bottom:var(--space-4); }
  .sales-overview-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); margin:0 2px var(--space-2); }
  .sales-overview-head h2{ font-size:0.95rem; color:var(--roast-dark); }
  .sales-overview-head p{ margin:0; font-size:0.75rem; color:var(--muted); text-align:right; }
  .sales-overview-grid{ display:flex; gap:var(--space-2); overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch; }
  .sales-overview-grid::-webkit-scrollbar{ height:0; }
  .sales-metric{ flex:0 0 148px; min-height:92px; background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px 13px; }
  .sales-metric-label{ display:flex; align-items:center; gap:5px; font-size:0.7rem; line-height:1.25; color:var(--muted); min-width:0; overflow-wrap:anywhere; hyphens:auto; }
  .sales-metric-label .msi{ font-size:15px; color:var(--roast); margin:0; }
  .sales-metric-value{ font-size:1.16rem; font-weight:700; letter-spacing:-0.02em; line-height:1.1; color:var(--roast-dark); margin-top:9px; overflow-wrap:anywhere; }
  .sales-metric-sub{ font-size:0.7rem; line-height:1.25; color:var(--muted); margin-top:4px; }
  .sales-metric.overdue .sales-metric-value{ color:var(--danger); }
  /* Sales-Dashboard-Karten (Excel-Übernahme): das KPI-Grid bricht um statt zu
     scrollen - innerhalb einer aufgeklappten Karte ist vertikaler Platz da,
     horizontales Scrollen wäre dort nur versteckter Inhalt. */
  .sales-dash-card{ margin-bottom:var(--space-3); }
  .sales-dash-card > summary h2{ font-size:1rem; }
  /* Lead-Liste + Auswertungen; auf dem Handy rückt die Liste nach oben
     (siehe @media max-width:899px), am Desktop bleibt die Reihenfolge. */
  .leads-body{ display:flex; flex-direction:column; }
  .sales-kpi-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
    gap:var(--space-2); margin-top:var(--space-3);
  }
  .sales-kpi-grid .sales-metric{ flex:none; }
  .funnel-rows{ margin-top:var(--space-3); display:flex; flex-direction:column; gap:6px; }
  .funnel-row{ display:grid; grid-template-columns:118px 1fr 44px; align-items:center; gap:var(--space-2); }
  .funnel-row-label{ font-size:0.76rem; color:var(--roast-dark); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .funnel-bar-track{ background:var(--surface-soft); border-radius:6px; height:18px; overflow:hidden; }
  .funnel-bar{ height:100%; background:var(--funnel-bar); border-radius:6px; min-width:2px; }
  .funnel-row.won .funnel-bar{ background:var(--green); }
  .funnel-row-count{ font-size:0.78rem; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
  .risk-badge{
    display:inline-block; padding:2px 8px; border-radius:999px; font-size:0.68rem;
    font-weight:600; background:var(--surface-soft); color:var(--muted); white-space:nowrap;
  }
  .risk-badge.hoch, .risk-badge.ueberfaellig{ background:#F6E3E0; color:#8A342A; }
  .risk-badge.mittel, .risk-badge.heute{ background:#F4EBDD; color:#8A6D1F; }
  .lead-sales-fields{ margin-top:var(--space-3); border-top:1px solid var(--border-soft); padding-top:var(--space-3); }
  .lead-sales-fields-label{ color:var(--roast); font-size:0.84rem; font-weight:600; margin-bottom:var(--space-2); }
  .lead-sales-grid{ display:grid; gap:var(--space-2); }
  .lead-sales-probability{ background:var(--surface-soft); border:1px solid var(--border-soft); border-radius:var(--radius-md); padding:10px 12px; color:var(--muted); font-size:0.8rem; }
  .lead-sales-probability strong{ color:var(--roast-dark); }

  .lead-item{
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:14px 16px; margin-bottom:10px; cursor:pointer;
  }
  .lead-item:hover{ background:var(--surface-soft); }
  .lead-top-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; }
  .lead-name{ font-weight:600; font-size:0.94rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lead-sub{ font-size:0.78rem; color:var(--muted); margin-top:2px; }
  .lead-meta{ display:flex; align-items:center; gap:6px; font-size:0.76rem; color:#7A6B58; margin-top:8px; }
  .lead-meta .msi{ font-size:16px; color:var(--amber); margin:0; }
  .status-badge{
    display:inline-block; flex:0 0 auto; font-size:0.66rem; font-weight:600;
    padding:3px 9px; border-radius:20px; white-space:nowrap;
  }
  .st-Neu{ background:var(--tan); color:var(--roast); }
  .st-Kontaktiert{ background:#EAE3F0; color:#5A4A78; }
  .st-Termin{ background:#F0E6CC; color:var(--amber-dark); }
  .st-Angebot{ background:#F1E0CE; color:#9A5A22; }
  .st-Gewonnen{ background:#DCEDE1; color:#2F5139; }
  .st-Verloren{ background:#EFDAD7; color:#8A342A; }
  /* News-Kategorien - kategorial statt semantisch (siehe DESIGN.md Pipeline-
     Regel), Farben von bestehenden Familien wiederverwendet statt neu erfunden. */
  .news-cat-Ankündigung{ background:var(--tan); color:var(--roast); }
  .news-cat-Änderung{ background:#EAE3F0; color:#5A4A78; }
  .news-cat-Update{ background:#DCEDE1; color:#2F5139; }
  .news-cat-Wartung{ background:#F0E6CC; color:var(--amber-dark); }
  .news-item{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:10px; }
  .news-item-top{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-1); flex-wrap:wrap; }
  .news-item-title{ font-size:0.98rem; font-weight:700; color:var(--ink); margin:var(--space-1) 0 var(--space-1); }
  .news-item-meta{ font-size:0.74rem; color:var(--muted); }
  .news-item-content{ font-size:0.88rem; line-height:1.5; white-space:pre-wrap; margin-top:var(--space-1); }
  .news-item-actions{ display:flex; gap:var(--space-2); margin-top:var(--space-2); }
  .news-pin-icon{ color:var(--amber); font-size:18px; }
  .news-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--space-2); }
  .news-tags:empty{ display:none; }
  .news-tag{
    font:inherit; font-size:0.76rem; font-weight:600; color:var(--roast-dark); background:var(--tan);
    border:1px solid var(--tan-border); border-radius:14px; padding:3px 10px; cursor:pointer; max-width:100%; overflow-wrap:anywhere;
  }
  .news-tag:hover{ background:var(--hero-tan-light); }
  .news-tag.active{ background:var(--roast-dark); border-color:var(--roast-dark); color:#F6E9DA; }
  .news-tag-n{ font-weight:400; opacity:.75; }
  .news-tag-filter{ margin:var(--space-3) 0; }
  .news-tag-suggestions{ margin:calc(-1 * var(--space-2)) 0 var(--space-3); }
  .news-tag-suggestions .news-tag{ background:var(--surface-soft); border-style:dashed; font-weight:500; }

  .resource-cat-Preisliste{ background:var(--tan); color:var(--roast); }
  .resource-cat-Marketing{ background:#EAE3F0; color:#5A4A78; }
  .resource-cat-Schulung{ background:#DCEDE1; color:#2F5139; }
  .resource-cat-Vertrag{ background:#F0E6CC; color:var(--amber-dark); }
  .resource-cat-Sonstiges{ background:#E4ECF2; color:#2C4A66; }
  .resource-item{ background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:14px 16px; margin-bottom:10px; }
  .resource-item-top{ display:flex; align-items:center; gap:var(--space-2); margin-bottom:var(--space-1); flex-wrap:wrap; }
  .resource-item-title{ font-size:0.98rem; font-weight:700; color:var(--roast); margin:var(--space-1) 0 var(--space-1); display:flex; align-items:center; gap:6px; text-decoration:none; }
  .resource-item-title:hover{ text-decoration:underline; }
  .resource-item-title .msi{ font-size:16px; color:var(--muted); }
  .resource-item-meta{ font-size:0.74rem; color:var(--muted); }
  .resource-item-desc{ font-size:0.88rem; line-height:1.5; color:var(--ink); margin-top:var(--space-1); }
  .resource-item-actions{ display:flex; gap:var(--space-2); margin-top:var(--space-2); }
  /* Roast statt Grün: "Potenzial: Hoch" ist eine Einstufung, kein Erfolgs-/
     Speichern-Zustand - Grün bleibt exklusiv dafür reserviert. */
  .pot-hoch{ color:var(--roast-dark); font-weight:600; }
  .pot-mittel{ color:var(--amber-dark); font-weight:600; }
  .pot-niedrig{ color:var(--muted); }

  /* Kanban-Board (Interessenten, nur Desktop - siehe @media unten) */
  .kanban-board{ display:none; }
  .kanban-col{
    background:var(--surface-soft); border:1px solid var(--border-soft);
    border-radius:16px; padding:14px 12px; min-height:120px;
  }
  .kanban-col-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding:0 4px; }
  .kanban-col-title{ display:flex; align-items:center; gap:8px; font-size:0.86rem; font-weight:700; color:var(--roast-dark); }
  .kanban-col-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
  .kanban-col-count{ font-size:0.74rem; font-weight:600; color:var(--muted); background:var(--surface); border-radius:10px; padding:1px 8px; }
  .kanban-col .lead-item{ margin-bottom:10px; }
  .kanban-col .lead-item:last-child{ margin-bottom:0; }
  /* In den schmalen Kanban-Spalten sollen lange Firmennamen umbrechen statt
     abgeschnitten zu werden (in der Mobile-Liste bleibt die Ellipsis sinnvoll,
     da der Name dort neben dem Status-Badge in einer Zeile steht). */
  .kanban-col .lead-name{ white-space:normal; overflow:visible; text-overflow:clip; }
  .kanban-col-empty{ font-size:0.76rem; color:var(--muted-light); padding:var(--space-2) 4px; }

  .visit-form input, .visit-form select, .visit-form textarea{ margin-bottom:var(--space-2); }
  .visit-form textarea{ min-height:60px; }
  .visit-item{ border-top:1px solid var(--border-soft); padding:var(--space-3) 0; margin-bottom:var(--space-3); }
  .visit-meta{ font-size:0.76rem; color:var(--muted); margin-bottom:3px; }
  .visit-art{
    display:inline-block; font-size:0.66rem; font-weight:600;
    color:var(--green-dark); background:#E2EEE6; padding:2px 7px; border-radius:5px; margin-right:var(--space-2);
  }
  .visit-notiz{ font-size:0.86rem; line-height:1.4; white-space:pre-wrap; }

  #setup-overlay{
    position:fixed; inset:0; background:var(--bg); z-index:100;
    display:flex; align-items:center; justify-content:center; padding:var(--space-5);
  }
  #setup-overlay .card{ max-width:520px; }
  code{ font-family:'IBM Plex Mono', monospace; font-size:0.82rem; background:var(--tan); padding:1px var(--space-1); border-radius:4px; }

  #login-overlay{
    position:fixed; inset:0; background:var(--bg); z-index:101;
    display:none; align-items:center; justify-content:center; padding:var(--space-5);
  }
  #login-overlay .card{ max-width:380px; width:100%; }
  #no-scope-warning{ background:#FBF3F2; border-color:#E3B8B0; }

  #report-modal-overlay, #news-modal-overlay, #resource-modal-overlay, #note-modal-overlay, #catalog-item-modal-overlay, #catalog-bundle-modal-overlay, #avatar-modal-overlay, #pv-visit-modal-overlay, #task-modal-overlay, #outbox-modal-overlay, #conflict-modal-overlay, #calls-modal-overlay, #order-modal-overlay{
    position:fixed; inset:0; background:rgba(46,33,23,0.45); z-index:90;
    display:none; align-items:flex-start; justify-content:center;
    padding:var(--space-5) var(--space-3) var(--space-7); overflow-y:auto;
  }
  #catalog-item-modal-overlay .modal-box, #catalog-bundle-modal-overlay .modal-box{ max-width:680px; }
  .modal-box{
    background:var(--surface); border-radius:20px; max-width:520px; width:100%;
    margin-top:var(--space-5); box-shadow:0 10px 40px rgba(42,32,24,0.25);
  }
  .modal-header{
    display:flex; justify-content:space-between; align-items:center; gap:var(--space-3);
    padding:var(--space-4) var(--space-4) var(--space-3); border-bottom:1px solid var(--border);
  }
  .modal-header h2{ font-size:1.1rem; }
  .modal-close{
    background:none; border:none; color:var(--muted); font-size:1.4rem; line-height:1;
    padding:2px var(--space-2); cursor:pointer; border-radius:6px; flex-shrink:0;
  }
  .modal-close:hover{ background:var(--bg); color:var(--ink); }
  .modal-body{ padding:var(--space-4); }

  .more-admin-card{ display:none; }
  .more-analyse-card{ display:none; }
  @media (max-width:899px){ .more-analyse-card{ display:block; } }
  .more-calls-card{ display:none; }
  @media (max-width:899px){ .more-calls-card.is-office{ display:block; } }

  /* ---------- Mobile hardening ----------
     Lange Kunden-, Betriebs- und Artikelnamen sind im Aussendienst relevanter
     als eine kompakte, aber abgeschnittene Zeile. Auf schmalen Displays dürfen
     sie deshalb umbrechen; nur rein sekundäre Navigation bleibt einzeilig. */
  @media (max-width:520px){
    header{
      padding:
        max(var(--space-2), env(safe-area-inset-top))
        max(var(--space-3), env(safe-area-inset-right))
        var(--space-3)
        max(var(--space-3), env(safe-area-inset-left));
    }
    main{
      padding-left:max(var(--space-3), env(safe-area-inset-left));
      padding-right:max(var(--space-3), env(safe-area-inset-right));
    }
    .card{ padding:14px; }
    .toprow > *, .filter-panel-head > *, .machine-head > *,
    .top-artikel-row > *, .resource-item-title > *{ min-width:0; }

    .result{ align-items:flex-start; gap:10px; }
    .result-name, .result-sub,
    .lead-name,
    .analyse-row .ar-name{
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      overflow-wrap:anywhere;
    }
    .lead-name{ line-height:1.3; }
    .machine-head{ flex-wrap:wrap; }
    .machine-name, .task-title, .history-note,
    .news-item-title, .news-item-content,
    .resource-item-title, .resource-item-desc,
    .top-artikel-row > span{
      overflow-wrap:anywhere;
    }
    .resource-item-title{ align-items:flex-start; }
    .resource-item-title .msi{ flex:0 0 auto; margin-top:2px; }
    .top-artikel-row{ align-items:flex-start; }
    .top-artikel-row > b{ flex:0 0 auto; }

    .analyse-row{ align-items:flex-start; }
    .analyse-row .ar-meta{ max-width:46%; white-space:normal; text-align:right; overflow-wrap:anywhere; }

    .report-btn-row button{ flex-basis:calc(50% - var(--space-1)); min-width:0; }
    .report-btn-row button.btn-primary{ flex-basis:100%; }
    /* Besuchszeilen kompakt: Aktionen bleiben rechts, "Bericht" nur als Symbol. */
    .pv-actions{ gap:0; }
    .pv-report-btn{ width:44px; height:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
    .pv-report-btn .msi{ margin:0; font-size:21px; }
    .pv-report-label{ display:none; }
    .report-btn-row button{ white-space:nowrap; padding-left:var(--space-2); padding-right:var(--space-2); }
    .news-item-actions, .resource-item-actions{ flex-wrap:wrap; }

    /* Kategorien als gut treffbare Chips, die umbrechen - so sind alle
       sofort sichtbar statt hinter einem unsichtbaren Seitwärts-Scroll. */
    #news-category-tabs, #resources-category-tabs{
      flex-wrap:wrap;
      margin-bottom:0;
    }
    #news-category-tabs .seg-tab, #resources-category-tabs .seg-tab{
      flex:0 0 auto;
      padding-left:12px;
      padding-right:12px;
    }
    /* Kundendetail "Umsatz & Analyse": fünf Untertabs als kompakte
       Icon-Leiste in einer Zeile (wie die untere Navigation) statt zwei
       Reihen grosser Knöpfe. */
    #detail-analyse-subnav{ flex-wrap:nowrap; gap:4px; }
    #detail-analyse-subnav .seg-tab{
      flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
      padding:6px 2px; font-size:0.66rem; line-height:1.1;
    }
    #detail-analyse-subnav .seg-tab .msi{ margin:0; font-size:20px; }
    #detail-analyse-subnav .seg-label-long{ display:none; }
    #detail-analyse-subnav .seg-label-short{ display:inline; }
    /* Kennzahl-Kacheln: Beträge passen ohne Umbruch in die Kachel. */
    .stat-box-row{ gap:var(--space-2); }
    .stat-box{ padding:10px; }
    .stat-box .sb-value{ font-size:1.02rem; }
    /* Artikel-Tabelle: CHF/kg wandert in die Unterzeile des Artikels. */
    #detail-artikel-alle .analyse-table{ font-size:0.8rem; }
    #detail-artikel-alle .analyse-table th, #detail-artikel-alle .analyse-table td{ padding-left:4px; padding-right:4px; }
    #detail-artikel-alle .col-kg{ display:none; }
    #detail-artikel-alle .artikel-kg-inline{ display:inline; }
    /* Drei Kennzahlen nebeneinander sind mobil zu eng - als kompakte Liste
       (Bezeichnung links, Wert rechts) in einer gemeinsamen Box. */
    .stat-box-row-3{
      flex-direction:column; gap:0; background:var(--surface-soft);
      border:1px solid #EEE4D6; border-radius:13px; padding:2px 12px;
    }
    .stat-box-row-3 .stat-box{
      display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3);
      background:none; border:none; border-radius:0; padding:8px 0;
    }
    .stat-box-row-3 .stat-box + .stat-box{ border-top:1px solid var(--border-soft); }
    .stat-box-row-3 .sb-label{ font-size:0.78rem; }
    .stat-box-row-3 .sb-value{ font-size:0.95rem; white-space:nowrap; }
    /* Avatar-/Logo-Wähler kompakter: mehr Motive pro Zeile, weniger Scrollen. */
    .avatar-grid{ grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:6px; }
    .avatar-option{ padding:var(--space-2) 2px; font-size:0.7rem; }
    .avatar-option .avatar-chip, .avatar-option .logo-chip{ width:40px; height:40px; }

    #report-modal-overlay, #news-modal-overlay, #resource-modal-overlay, #note-modal-overlay, #catalog-item-modal-overlay, #catalog-bundle-modal-overlay, #avatar-modal-overlay, #pv-visit-modal-overlay, #task-modal-overlay, #outbox-modal-overlay, #conflict-modal-overlay, #calls-modal-overlay, #order-modal-overlay{
      padding-bottom:max(var(--space-7), env(safe-area-inset-bottom));
    }
  }

  @media (max-width:899px){
    #tab-users{ display:none !important; }
    /* Analyse: auf dem Handy kein eigener Tab (Leiste voll) - Karte unter "Mehr" */
    #tab-analyse{ display:none !important; }
    #tab-artikel{ display:none !important; }
    #tab-ketten{ display:none !important; }
    #tab-calls{ display:none !important; }
    #dash-fun-fact{ -webkit-line-clamp:3; line-clamp:3; }
    /* Lead-Liste vor die (zugeklappten) Auswertungs-Karten ziehen - sonst
       liegt die eigentliche Liste auf dem Handy erst unter fünf Karten. */
    .leads-body > .sales-dash-card{ order:1; }
    /* Sales-Kennzahlen umbrechen (2 Spalten) statt unsichtbar seitlich zu
       scrollen - vorher war ab der dritten Kachel alles abgeschnitten. */
    .sales-overview-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
    .sales-overview-grid .sales-metric{ min-width:0; }
    .sales-overview-grid .sales-metric:last-child:nth-child(odd){ grid-column:1 / -1; }
    .more-admin-card.is-admin{ display:block; }
    .icon-btn{ width:44px; height:44px; }
    .seg-tab{ min-height:44px; }
    nav.tabs > button{ min-height:56px; }
    .filter-panel:not(.filters-expanded) .filter-fields{ display:none; }
    .filter-disclosure{ display:block; width:100%; min-height:44px; margin-top:var(--space-2); }
  }

  @media (max-width:420px){
    /* Flex-Items haben sonst eine automatische Mindestbreite aus ihrem Label.
       Mit sechs (für Admins sieben) Tabs konnte das die komplette Seite
       horizontal verbreitern. Die Labels bleiben sichtbar, aber einzeilig. */
    nav.tabs{
      padding-bottom:max(6px, env(safe-area-inset-bottom));
      padding-left:max(6px, env(safe-area-inset-left));
      padding-right:max(6px, env(safe-area-inset-right));
    }
    nav.tabs > button{ min-width:0; }
    nav.tabs > button .tlabel{
      max-width:100%;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      font-size:0.58rem;
      line-height:1.1;
      letter-spacing:-0.015em;
    }
    nav.tabs > button .tcount{ right:-5px; }
  }

  /* ---------- Desktop / Tablet (Seitenleiste ab 900px, nach "UCC CRM Desktop.dc.html") ---------- */
  .dash-col{ display:contents; }
  @media (min-width:900px){
    body{ padding-bottom:0; }
    .toast{ bottom:var(--space-5); }

    /* B1: dunkle Seitenleiste statt heller Tan-Variante */
    nav.tabs{
      top:0; bottom:0; left:0; right:auto; width:var(--sidebar-w);
      background:linear-gradient(180deg,var(--sidebar-grad-start),var(--sidebar-grad-end));
      flex-direction:column; justify-content:flex-start; align-items:stretch; gap:3px;
      border-top:none; border-right:none; padding:22px 16px; box-shadow:none;
    }
    .sidebar-brand{
      display:flex; align-items:center; gap:12px; padding:6px 10px 22px;
    }
    .sidebar-brand-title{ font-size:1.02rem; font-weight:700; color:var(--sidebar-ink); letter-spacing:-0.01em; line-height:1.1; }
    .sidebar-brand-sub{ font-size:0.72rem; color:#B79576; }
    nav.tabs > button{
      flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:13px;
      width:100%; padding:12px 14px; border-radius:12px; font-size:0.9rem; color:var(--sidebar-muted);
    }
    nav.tabs > button .msi{ font-size:22px; }
    nav.tabs > button.active{ background:var(--sidebar-active-bg); color:var(--sidebar-ink); font-weight:700; }
    nav.tabs > button:hover:not(.active){ background:rgba(255,255,255,0.06); }
    nav.tabs > button .tlabel{ flex:1; text-align:left; }
    .mobile-nav-label{ display:none; }
    .desktop-nav-label{ display:inline; }
    nav.tabs > button .tcount{ position:static; margin-left:3px; }
    .sidebar-user{
      margin-top:auto; display:flex; align-items:center; gap:11px;
      padding:12px; background:var(--sidebar-chip-bg); border-radius:14px;
    }
    .sidebar-user .avatar-chip{ background:var(--tan); color:var(--roast-dark); }
    .sidebar-user-name{ font-size:0.85rem; font-weight:600; color:var(--sidebar-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sidebar-user-sub{ font-size:0.72rem; color:#B79576; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sidebar-user .icon-btn{ color:#B79576; }
    .sidebar-user .icon-btn:hover{ background:rgba(255,255,255,0.1); }

    /* Topbar bleibt inhaltlich gleich (Titel/Untertitel + Aktualisieren/Abmelden/Avatar),
       bekommt nur mehr Höhe/Abstand und rückt hinter die Seitenleiste. */
    header{ margin-left:var(--sidebar-w); height:72px; display:flex; align-items:center; padding-left:var(--space-6); padding-right:var(--space-6); }
    .header-inner{ max-width:none; margin:0; width:100%; }
    main{ margin-left:var(--sidebar-w); max-width:none; padding:var(--space-6) var(--space-6) var(--space-7); }
    main > .view{ max-width:none; }
    /* Pendenzen, Besuche, Infos und Benutzer nutzen die volle Breite wie die
       übrigen Seiten - statt einer überlangen Einspalten-Liste verteilen sich
       die Einträge auf ein Raster. Mobil bleibt alles untereinander. */
    #tasks-list:not(.empty), #news-list:not(.empty), #resources-list:not(.empty){
      display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
      gap:var(--space-3); align-items:start;
    }
    #tasks-list > .task, #news-list > .news-item, #resources-list > .resource-item{ margin-bottom:0; }
    #tasks-list > .result-count{ grid-column:1 / -1; }
    #news-list:not(.empty), #resources-list:not(.empty){ grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); }
    /* Benutzer: pro Abteilung zwei (oder mehr) Spalten; aufgeklappte Zeilen
       behalten dank Mindestbreite genug Platz fürs Formular. */
    #users-list .user-group{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr));
      column-gap:var(--space-6); align-items:start;
    }
    #users-list .user-group > .detail-group-title{ grid-column:1 / -1; }
    /* Besuche: Wochenplan als Kalender - ein Tag pro Spalte (Mo-Fr, Wochenende
       nur wenn Besuche), offene Besuche früherer Wochen über die ganze Breite. */
    #visits-list:not(.empty){
      display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
      gap:var(--space-3); align-items:stretch;
    }
    /* Ab 1200px genau eine Spalte pro angezeigtem Tag (--pv-days, 5-7). */
    @media (min-width:1200px){
      #visits-list:not(.empty){ grid-template-columns:repeat(var(--pv-days, 5), minmax(0, 1fr)); }
    }
    #visits-list > .pv-day{ margin-bottom:0; display:flex; flex-direction:column; }
    #visits-list > .pv-day.overdue-block{ grid-column:1 / -1; }
    #visits-list > .pv-day:not(.overdue-block) .pv-row{ flex-direction:column; align-items:stretch; gap:var(--space-2); }
    #visits-list > .pv-day:not(.overdue-block) .pv-actions{ justify-content:flex-start; }
    #visits-list > .pv-day:not(.overdue-block) .pv-day-count{ display:none; }
    #visits-list > .pv-day:not(.overdue-block) .pv-day-head > span:first-child{ white-space:nowrap; }
    /* Bewusst kein max-width mehr (nutzt die volle Breite wie der Rest der
       Desktop-Ansicht) - die Notiz-Spalte (1fr) kann dadurch auf sehr breiten
       Monitoren längere Zeilen zeigen, das ist hier ausdrücklich gewünscht. */

    /* B2: Dashboard - 4 KPI-Kacheln, volle Breite für die Umsatz-Hero-Karte,
       darunter 2 Spalten (Aktivitäten | Pendenzen). */
    .kpi-icon{
      display:flex; align-items:center; justify-content:center;
      width:36px; height:36px; border-radius:10px; margin-bottom:12px; font-size:20px;
    }
    .kpi-icon-tan{ background:var(--tan); color:var(--roast-dark); }
    .kpi-icon-green{ background:#E2EEE6; color:var(--green-dark); }
    .kpi-icon-amber{ background:#F5ECD5; color:var(--amber); }
    .stats{ grid-template-columns:repeat(4,1fr); gap:18px; }
    .stat{ text-align:left; padding:20px 22px; }
    .stat .num{ font-size:2.1rem; }
    #stat-revenue-card.has-revenue{ display:block; }
    /* Am Desktop ist die Umsatz-Hero-Karte (volle Grid-Breite) viel breiter als
       mobil - bei gleichbleibendem 32px-Deckel wirken die Balken dort verloren
       in ihrer Spalte, auf Mobile füllen sie die schmalere Spalte dagegen fast
       ganz aus. Deckel + Abstand hier gezielt vergrössern. */
    .month-chart{ height:130px; gap:8px; }
    .month-bar-row{ max-width:44px; }
    .analyse-grid{ grid-template-columns:1fr 1fr; align-items:start; }
    #view-dash.active{ display:grid; grid-template-columns:1.5fr 1fr; gap:var(--space-4); align-items:start; }
    #view-dash .dash-head, #view-dash .stats, #view-dash .revenue-hero{ grid-column:1 / -1; }
    #view-dash .dash-col{ display:block; min-width:0; }

    /* B3: Kundendetail - Kopfzeile (Avatar/Name + Aktionen) in einer Zeile,
       Info-Raster breiter, Historie zur vollen Breite. */
    .detail-head-card{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:var(--space-3) var(--space-5); }
    .detail-head-card .detail-head-row{ flex:1 1 320px; margin-bottom:0 !important; order:0; }
    .detail-head-card .report-btn-row{ flex:0 0 auto; margin-top:0 !important; order:1; }
    .detail-head-card .report-btn-row button{ flex:0 0 auto; }
    .detail-head-card .detail-fields{ flex:1 1 100%; order:2; }
    /* Kundennummer: auf dem Desktop kompakt neben dem Namen statt als breiter Balken */
    .detail-head-card .detail-kdnr-btn{ order:0; flex:0 0 auto; width:auto; margin:0; align-self:center; }
    /* Historie bekommt einen Lesbarkeits-Deckel - sonst werden die Notiz-Zeilen
       auf sehr breiten Monitoren unangenehm lang. */
    #detail-history{ max-width:900px; }
    /* Pendenzen + Historie nebeneinander, aber mit Flexbox statt Grid: Pendenzen
       zeigt nur offene Follow-ups (oft leer/kurz), Historie oft deutlich mehr
       Inhalt - CSS Grid würde die Zeile auf die höhere Karte strecken und
       darunter bei Pendenzen Leerraum lassen. Flexbox lässt jede Karte ihre
       eigene, unabhängige Höhe behalten, bei gleicher Spaltenbreite. */
    .detail-top-row{ flex-direction:row; align-items:flex-start; }
    .detail-top-row > details{ flex:1 1 0; min-width:0; }
    /* Maschinenübersicht als Karten-Grid statt schmaler Liste - jetzt, da die
       eigene View genug Breite bietet, zeigen mehrere Maschinen nebeneinander
       statt nur untereinander. Mobil bleibt die ursprüngliche Zeilen-Liste
       unverändert (Basisregeln bei .machine-item, hier nur überschrieben). */
    #detail-machines:not(.empty){ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--space-3); }
    #detail-machines .machine-item{
      display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2);
      border:1px solid var(--border-soft); border-radius:14px; padding:var(--space-3);
      background:var(--surface-soft);
    }
    #detail-machines .machine-main{ width:100%; }

    /* B4: Interessenten - Kanban-Board statt Liste, Pipeline-Leiste redundant */
    #leads-list{ display:none; }
    .kanban-board{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:var(--space-4); align-items:start; }
    .leads-view-toggle{ display:flex; }
    /* Liste/Board per Umschalter (siehe JS) - überschreibt den Desktop-Default (Board). */
    body.leads-mode-list #leads-list{ display:block; }
    body.leads-mode-list .kanban-board{ display:none; }
    #leads-pipeline{ display:none !important; }
    /* 6 Kacheln: 3 pro Zeile, ab breitem Fenster (siehe min-width:1400px) 6 -
       vorher fix 5, da ragten bei schmalem Fenster lange Bezeichnungen
       ("Maschinenpotenzial") aus der Karte und die 6. stand allein. */
    .sales-overview-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
    .sales-metric{ min-width:0; }
    .lead-sales-grid{ grid-template-columns:1fr 1fr; column-gap:var(--space-3); }
    .lead-sales-grid .lead-sales-probability{ grid-column:1 / -1; }

    /* B5: Berichte - Tabelle statt Karten-Liste */
    #all-reports-list{ display:none; }
    .reports-table{ display:block; }
  }

  .lead-customer-link{ display:flex; align-items:center; gap:4px; margin-top:4px; font-size:0.82rem; color:var(--green-dark); font-weight:600; flex-wrap:wrap; }
  .lead-customer-link .msi{ font-size:16px; }
  .lead-is-customer{ color:var(--green-dark); font-weight:600; }
  .provisional-old .ar-meta{ color:var(--danger); font-weight:600; }
  .lead-history-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-2); }
  .lead-history-meta{ font-size:0.8rem; color:var(--muted); }
  .lead-history-open{ white-space:nowrap; flex-shrink:0; }
  .provisional-hint{ background:#FBF3E4; border:1px solid var(--tan-border); color:var(--roast-dark); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); margin-bottom:var(--space-3); font-size:0.84rem; }

  /* Offline-Ausgang (js/app/13-sync.js) */
  .outbox-btn{ position:relative; color:var(--roast); }
  .outbox-btn .outbox-count{
    position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px;
    border-radius:8px; background:var(--green); color:#fff; font-size:10px; font-weight:700;
    line-height:16px; text-align:center;
  }
  .outbox-btn.has-error .outbox-count{ background:#B3412E; }
  .outbox-hint{ margin:0 0 var(--space-3); color:var(--muted); font-size:14px; }
  .outbox-item{ display:flex; gap:var(--space-2); align-items:flex-start; padding:var(--space-2) 0; border-bottom:1px solid var(--border-soft); }
  .outbox-item-main{ flex:1; min-width:0; }
  .outbox-item-title{ font-weight:600; overflow-wrap:anywhere; }
  .outbox-item-meta{ font-size:13px; color:var(--muted); }
  .outbox-item-error{ font-size:13px; color:#B3412E; margin-top:2px; }
  .outbox-item .btn-danger-ghost{ width:auto; flex-shrink:0; }
  #outbox-list{ margin-bottom:var(--space-3); }
  #conflict-modal-overlay{ z-index:120; }
  .conflict-btn{ width:100%; margin-top:var(--space-2); }

  /* ---------- Betreuungsanrufe (js/app/15-betreuungsanrufe.js) ----------
     Eigenes Präfix calls-, damit nichts mit bestehenden Klassen kollidiert.
     Mobil alles untereinander; ab 900px Anrufliste und Detail nebeneinander. */
  .calls-head .seg-tabs{ overflow-x:auto; scrollbar-width:none; }
  .calls-head .seg-tab{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:9px 12px; white-space:nowrap; }
  .calls-head .seg-tab .msi{ font-size:18px; }
  .calls-subcount{ background:var(--amber); color:#fff; border-radius:10px; font-size:0.7rem; padding:1px 7px; }
  #calls-body.is-busy{ opacity:.6; pointer-events:none; transition:opacity .15s; }
  #calls-body .card h2{ font-size:1rem; margin-bottom:var(--space-3); }
  .calls-muted{ color:var(--muted); font-size:0.8rem; }
  .calls-hint{ margin:calc(-1 * var(--space-2)) 0 var(--space-2); font-size:0.74rem; }
  .calls-label{ margin-top:var(--space-4); }

  .calls-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); margin-bottom:var(--space-4); }
  .calls-kpi{
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    padding:var(--space-3); text-align:left; font:inherit; color:var(--ink); cursor:pointer; min-width:0;
  }
  div.calls-kpi{ cursor:default; }
  .calls-kpi .n{ font-size:1.35rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
  .calls-kpi .l{ font-size:0.74rem; color:var(--muted); margin-top:2px; }
  .calls-kpi.r .n{ color:var(--danger); }
  .calls-kpi.y .n{ color:var(--amber-dark); }
  .calls-kpi.g .n{ color:var(--green-dark); }
  .calls-kpi.b .n{ color:var(--roast); }
  button.calls-kpi:hover{ background:var(--surface-soft); }
  .calls-prog{ height:6px; background:var(--border-soft); border-radius:3px; margin-top:var(--space-2); overflow:hidden; }
  .calls-prog i{ display:block; height:100%; background:var(--green); border-radius:3px; }

  .calls-split{ display:flex; flex-direction:column; gap:var(--space-4); }
  .calls-queue-card{ padding-bottom:var(--space-2); }
  .calls-queue-head{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-2); }
  .calls-queue-head h2{ margin:0 !important; }
  .calls-queue-head .calls-muted{ margin-left:auto; }
  .calls-toolbar{ display:flex; gap:var(--space-2); align-items:center; margin-bottom:var(--space-2); }
  .calls-toolbar.is-wrap{ flex-wrap:wrap; }
  .calls-toolbar input, .calls-toolbar select{ margin:0; width:auto; flex:1 1 140px; min-width:0; padding:var(--space-2) var(--space-3); }
  .calls-inline{ display:flex; align-items:center; gap:var(--space-1); margin:0; font-size:0.8rem; }
  .calls-inline input{ flex:0 0 auto; }
  .calls-queue{ max-height:60vh; overflow-y:auto; margin:0 calc(-1 * var(--space-2)); }
  .calls-qitem{
    display:flex; gap:var(--space-2); justify-content:space-between; align-items:flex-start; width:100%;
    text-align:left; font:inherit; color:var(--ink); background:none; border:0; border-bottom:1px solid var(--border-soft);
    padding:var(--space-2) var(--space-3); cursor:pointer; border-radius:10px;
  }
  .calls-qitem:hover{ background:var(--surface-soft); }
  .calls-qitem.is-on{ background:var(--tan); box-shadow:inset 3px 0 0 var(--roast); }
  .calls-qitem.is-done .calls-qname{ color:var(--muted); text-decoration:line-through; }
  .calls-qmain{ min-width:0; }
  .calls-qname{ font-weight:600; font-size:0.88rem; overflow-wrap:anywhere; }
  .calls-qsub{ font-size:0.74rem; color:var(--muted); }
  .calls-qsub.is-bestellt{ color:var(--green-dark); font-weight:600; }
  .calls-qrt{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex-shrink:0; }
  .calls-zeit{ font-weight:700; font-size:0.82rem; font-variant-numeric:tabular-nums; color:var(--roast-dark); }
  .calls-zeit.is-std{ color:var(--muted); font-weight:500; }
  .calls-zeit.is-spaeter{ color:var(--amber-dark); }

  .calls-pill{ display:inline-block; font-size:0.72rem; font-weight:600; padding:2px 8px; border-radius:10px; white-space:nowrap; }
  .calls-pill.gruen{ background:#E3EFE6; color:var(--green-dark); }
  .calls-pill.gelb{ background:#F6EBD4; color:var(--amber-dark); }
  .calls-pill.blau{ background:var(--tan); color:var(--roast-dark); }
  .calls-pill.rot{ background:#F6E1DE; color:var(--danger); }
  .calls-pill.grau{ background:var(--border-soft); color:var(--muted); }

  .calls-detail{ min-width:0; }
  .calls-dhead{ display:flex; gap:var(--space-3); align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
  .calls-dname{ font-size:1.15rem !important; margin:0 0 4px !important; overflow-wrap:anywhere; }
  .calls-dsub{ font-size:0.8rem; color:var(--muted); display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
  .calls-dhead-act{ display:flex; gap:var(--space-2); align-items:center; }
  .calls-tel{
    display:inline-flex; align-items:center; gap:var(--space-2); margin:var(--space-3) var(--space-3) var(--space-2) 0;
    font-size:1.25rem; font-weight:700; color:var(--roast-dark); background:var(--tan); border:1px solid var(--tan-border);
    border-radius:var(--radius-md); padding:var(--space-2) var(--space-4); text-decoration:none; font-variant-numeric:tabular-nums;
  }
  .calls-tel:hover{ background:var(--hero-tan-light); }
  .calls-tel.is-leer{ background:#F6E1DE; border-color:#E3B8B0; color:var(--danger); font-size:0.95rem; }
  .calls-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); margin:var(--space-3) 0; }
  .calls-grid.is-compact{ margin-top:0; }
  .calls-f{ min-width:0; }
  .calls-fl{ font-size:0.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:2px; }
  .calls-fv{ font-size:0.86rem; overflow-wrap:anywhere; }
  .calls-banner{ border-radius:var(--radius-md); padding:var(--space-3); margin:var(--space-3) 0; font-size:0.84rem; background:#F6EBD4; color:var(--amber-dark); }
  .calls-banner.gruen{ background:#E3EFE6; color:var(--green-dark); }
  .calls-banner.blau{ background:var(--tan); color:var(--roast-dark); }
  .calls-note{ white-space:pre-wrap; background:var(--surface-soft); border-left:3px solid var(--amber); border-radius:8px; padding:var(--space-2) var(--space-3); margin:var(--space-2) 0; font-size:0.84rem; }
  .calls-note.is-eigen{ border-left-color:var(--roast); }
  .calls-results{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-2) 0 var(--space-3); }
  .calls-rbtn{
    font:inherit; font-size:0.86rem; font-weight:600; padding:10px 14px; border-radius:12px; cursor:pointer;
    border:1px solid var(--border); background:var(--surface); color:var(--ink); display:inline-flex; align-items:center; gap:8px; min-height:44px;
  }
  .calls-rbtn kbd{ font:600 0.68rem/1 'IBM Plex Mono', monospace; background:rgba(0,0,0,0.06); border-radius:4px; padding:2px 5px; }
  .calls-rbtn.gruen{ background:#E3EFE6; border-color:#BFD7C6; color:var(--green-dark); }
  .calls-rbtn.gelb{ background:#F6EBD4; border-color:#E8D3A8; color:var(--amber-dark); }
  .calls-rbtn.blau{ background:var(--tan); border-color:var(--tan-border); color:var(--roast-dark); }
  .calls-rbtn.rot{ background:#F6E1DE; border-color:#E3B8B0; color:var(--danger); }
  .calls-rbtn:hover{ filter:brightness(0.97); }
  .calls-row{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-top:var(--space-3); }
  .calls-row label{ margin:0; }
  .calls-row input{ width:auto; margin:0; padding:var(--space-2); }
  .calls-bestell{ margin-top:var(--space-4); border-top:1px solid var(--border-soft); padding-top:var(--space-3); }
  .calls-bestell-leer{ margin-top:var(--space-4); }
  .calls-obtn{ display:flex; gap:var(--space-1); flex-wrap:wrap; margin:var(--space-2) 0; }
  .calls-obtn .seg-tab{ flex:0 0 auto; padding:5px 10px; font-size:0.74rem; }
  .calls-letzte{ margin-top:var(--space-4); }
  .calls-lzeile{ font-size:0.8rem; padding:var(--space-1) 0; border-bottom:1px solid var(--border-soft); }
  .calls-lnotiz{ padding-left:var(--space-1); white-space:pre-wrap; }

  .calls-tblwrap{ overflow:auto; max-height:65vh; margin:0 calc(-1 * var(--space-2)); }
  .calls-tblwrap.is-auto{ max-height:none; }
  .calls-table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
  .calls-table th{ position:sticky; top:0; background:var(--surface); text-align:left; font-size:0.7rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; padding:var(--space-2); border-bottom:1px solid var(--border); white-space:nowrap; z-index:1; }
  .calls-table th.is-sortable{ cursor:pointer; }
  .calls-table th.is-sortable:hover{ color:var(--ink); }
  .calls-table td{ padding:var(--space-2); border-bottom:1px solid var(--border-soft); vertical-align:middle; }
  .calls-table td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }
  .calls-table td.nm{ font-weight:600; }
  .calls-table td.is-center{ text-align:center; }
  .calls-table td input, .calls-table td select{ margin:0; padding:var(--space-2); }
  .calls-table tbody tr:hover{ background:var(--surface-soft); }
  .calls-tact{ white-space:nowrap; text-align:right; }
  .calls-tact .icon-btn{ display:inline-flex; width:36px; height:36px; }
  .calls-table td.is-nowrap{ white-space:nowrap; }
  .calls-tnotiz{ max-width:320px; overflow-wrap:anywhere; }

  .calls-bars{ display:flex; align-items:flex-end; gap:5px; height:150px; padding:18px 0 22px; }
  .calls-bar{ flex:1; background:var(--chart-bar-dark); border-radius:4px 4px 0 0; min-height:2px; position:relative; }
  .calls-bar i, .calls-bar em{ position:absolute; left:0; right:0; text-align:center; font-size:0.68rem; font-style:normal; color:var(--muted); }
  .calls-bar i{ top:-16px; }
  .calls-bar em{ bottom:-19px; }

  .calls-settings{ max-width:940px; }
  .calls-srow{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-bottom:var(--space-3); }
  .calls-srow > label:first-child, .calls-slabel{ flex:0 0 240px; margin:0; font-size:0.84rem; color:var(--muted); }
  .calls-srow input[type=number], .calls-srow input[type=time], .calls-srow input[type=date], .calls-srow input[type=text], .calls-srow select{ width:auto; margin:0; padding:var(--space-2); }
  .calls-srow input[type=text]{ flex:1 1 220px; }
  .calls-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
  .calls-chk{ display:inline-flex; align-items:center; gap:6px; margin:0; font-size:0.84rem; color:var(--ink); font-weight:500; }
  .calls-chk input{ width:auto; margin:0; }
  .calls-chip{ display:inline-flex; align-items:center; gap:6px; background:var(--border-soft); border:1px solid var(--border); border-radius:14px; padding:3px 10px; font-size:0.78rem; }
  .calls-chip button{ background:none; border:0; cursor:pointer; color:var(--muted); padding:0; }

  #calls-modal-overlay .modal-box{ max-width:620px; }
  .calls-modal-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:flex-end; padding:0 var(--space-4) var(--space-4); }
  .calls-modal-actions .btn-danger-ghost{ margin-right:auto; }
  #calls-modal-body .calls-chk{ display:flex; margin:var(--space-2) 0; }

  .calls-toast{
    position:fixed; left:var(--space-4); right:var(--space-4); margin:0 auto; width:fit-content; max-width:520px;
    bottom:calc(72px + var(--space-4) + env(safe-area-inset-bottom, 0px)); transform:translateY(8px);
    background:var(--ink); color:var(--bg); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4);
    font-size:0.85rem; display:flex; gap:var(--space-3); align-items:center; z-index:111;
    box-shadow:0 10px 40px rgba(42,32,24,0.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s;
  }
  .calls-toast.show{ opacity:1; transform:none; pointer-events:auto; }
  .calls-toast button{ background:none; border:0; color:inherit; font:inherit; font-weight:700; text-decoration:underline; cursor:pointer; white-space:nowrap; }
  @media (prefers-reduced-motion: reduce){ .calls-toast{ transition:none; } }

  @media (max-width:520px){
    .calls-grid{ grid-template-columns:minmax(0,1fr); }
    .calls-srow > label:first-child, .calls-slabel{ flex-basis:100%; }
  }
  @media (min-width:700px){
    .calls-kpis{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  }
  @media (min-width:900px){
    .calls-toast{ bottom:var(--space-5); }
    .calls-split{ display:grid; grid-template-columns:minmax(300px,380px) minmax(0,1fr); align-items:start; }
    .calls-split.is-even{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .calls-queue{ max-height:calc(100vh - 360px); min-height:240px; }
    .calls-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  }

  /* ---------- Bestellung (js/app/16-bestellung.js) ---------- */
  #order-modal-overlay .modal-box{ max-width:640px; }
  #order-customer{ margin-bottom:var(--space-3); }
  #order-mode .seg-tab{ display:inline-flex; align-items:center; justify-content:center; gap:6px; }
  #order-mode .seg-tab .msi{ font-size:18px; }
  .order-hint{ font-size:0.8rem; color:var(--muted); margin-bottom:var(--space-2); }
  .order-sub{ font-size:0.72rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:0.03em; margin:var(--space-3) 0 var(--space-2); }
  .order-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:var(--space-2); }
  .order-chips .seg-tab{ flex:0 0 auto; padding:6px 10px; font-size:0.76rem; }
  .order-hits{ display:flex; flex-direction:column; gap:4px; margin:calc(-1 * var(--space-2)) 0 var(--space-2); }
  .order-hits:empty{ display:none; }
  .order-line{ display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; justify-content:space-between; padding:var(--space-2) 0; border-bottom:1px solid var(--border-soft); }
  .order-line-name{ flex:1 1 220px; min-width:0; font-size:0.86rem; font-weight:600; overflow-wrap:anywhere; }
  .order-line-name .order-pos-nr{ display:block; font-weight:400; }
  .order-line-qty{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
  .order-line-qty input{ width:72px; margin:0; padding:var(--space-2); text-align:right; }
  .order-line-qty .icon-btn{ width:36px; height:36px; }
  .order-line-unit{ font-size:0.78rem; color:var(--muted); min-width:24px; }
  .order-actions{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-2); }
  .order-actions > button{ display:inline-flex; align-items:center; gap:6px; }
  @media (max-width:520px){ .order-actions > button{ flex:1 1 100%; justify-content:center; } }