.customer-workspace { min-width:0; font-size:13px; }
.customer-workspace .detail-tab-bar { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:22px; }
.customer-workspace .det-tab { font-size:12px; padding:9px 10px; }
.customer-section-select { display:none; }
.customer-panel[hidden] { display:none!important; }
.customer-kicker,.customer-muted { color:var(--muted);font-size:12px;line-height:1.65; }
.customer-contact,.customer-actions,.customer-section-heading { display:flex;flex-wrap:wrap;gap:12px;align-items:center; }
.customer-contact { margin:12px 0 18px;overflow-wrap:anywhere; }
.customer-section { border-top:1px solid var(--border);padding:20px 0;margin-top:18px; }
.customer-section h3,.customer-section-heading h3 { margin:0 0 10px;font-size:16px;font-weight:500; }
.customer-section summary { font-size:14px;cursor:pointer;font-weight:500; }
.customer-section-heading { justify-content:space-between; }
.customer-master { border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;margin:14px 0 18px; }
.customer-master h3 { margin:0;font-size:15px;font-weight:500; }
.customer-master dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:12px 0 0; }
.customer-master dt { font-size:12px;color:var(--muted);margin:0 0 2px; }
.customer-master dd { margin:0;font-size:14px;line-height:1.5;overflow-wrap:anywhere; }
.customer-master a { color:var(--primary);text-decoration:none; }
.customer-notice { border-left:3px solid var(--primary);padding:12px 16px;background:var(--bg);border-radius:var(--radius);line-height:1.65;margin:16px 0; }
.customer-metrics { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px 0;border-bottom:1px solid var(--border); }
.customer-metrics span { display:block;color:var(--muted);font-size:12px; }
.customer-metrics strong { display:block;font-size:20px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums; }
.customer-work-row { border-bottom:1px solid var(--border);padding:12px 0; }
.customer-work-row h4 { margin:0;font-size:15px; }
.customer-work-task { display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0; }
.customer-work-task small { display:block;color:var(--muted);line-height:1.7; }
.customer-invoice-actions { display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;flex-shrink:0; } /* "Rechnung öffnen" plus "Senden" (16.10.2026) */
.customer-workspace [id^="lead-financials-"] { border:0!important;padding:0!important;background:none!important; }
.customer-task-dialog { padding:24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);width:min(460px,calc(100vw - 24px));max-height:90dvh; }
.customer-task-dialog::backdrop { background:rgba(0,0,0,.45); }
.customer-task-dialog header { display:flex;justify-content:space-between;align-items:center;margin-bottom:18px; }
.customer-task-dialog h2 { font-size:20px;margin:0; }
.customer-task-dialog label { display:flex;flex-direction:column;gap:6px;margin:14px 0; }
.customer-task-dialog input,.customer-task-dialog select,.customer-section-select select { width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:var(--radius);padding:10px;background:var(--bg);color:var(--text);font:inherit; }
.customer-task-dialog .customer-check { flex-direction:row;align-items:center; }.customer-check input { width:auto; }
@media(max-width:600px){
 .customer-workspace .detail-tab-bar { display:none!important; }
 .customer-section-select { display:flex!important;flex-direction:column!important;gap:6px!important;margin:0 0 20px!important;color:var(--muted)!important;font-size:12px!important; }
 .customer-workspace,.customer-panel,.customer-workspace .detail-grid { min-width:0!important;max-width:100%!important;overflow-wrap:anywhere!important; }
 .customer-metrics { grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 10px!important; }
 .customer-metrics strong { font-size:20px!important; }
 .customer-workspace .lead-task-create-fields { flex-direction:column!important; }
 .customer-workspace .lead-task-create-fields>* { min-width:0!important;width:100%!important;flex:auto!important; }
 .customer-workspace input,.customer-workspace select { min-width:0!important;max-width:100%!important; }
 .customer-workspace .btn-flat { min-height:40px!important;white-space:normal!important; }
 .customer-work-task { align-items:flex-start!important;flex-wrap:wrap!important; }
 .customer-task-dialog { padding:18px!important; }
}

.customer-contact a { color:var(--primary);text-decoration:none; }
@media(max-width:600px){
.customer-master dl { grid-template-columns:minmax(0,1fr); }
}
/* Deal block (pipeline package step 3): same colour as the overdue close date badge on the board. */
.customer-deal-overdue { color:var(--pipe-danger,#b42318);font-weight:500; }

/* Notes per tab (spec "Notizzettel je Reiter", 13.10.2026; calmer list 30.10.2026): same box as the Stammdaten
   (.customer-master). Each note is a row with a round check button in front, text, and one muted 12 px meta line.
   "Löschen" appears on hover or keyboard focus, on touch devices always. The notes panel for Kundenbereich and
   Onboarding sits before the module panel. */
.customer-notes-panel:not([hidden]) { display:block; }
.customer-notes .customer-notes-count { display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--bg);color:var(--muted);font-size:12px;line-height:20px;text-align:center;font-weight:500;vertical-align:2px; }
.customer-notes-list { list-style:none;margin:6px 0 0;padding:0; }
.customer-notes-list li { margin:0;padding:0; }
.customer-notes-list .customer-note { display:grid;grid-template-columns:22px minmax(0,1fr) auto;column-gap:12px;align-items:start;padding:12px 8px;margin:0 -8px;border-radius:var(--radius-sm);transition:background-color .15s ease; }
.customer-notes-list .customer-note[hidden] { display:none; }
.customer-notes-list .customer-note + .customer-note { border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent); }
.customer-note:hover { background:color-mix(in srgb,var(--bg) 70%,transparent); }
.customer-note-body { min-width:0; }
.customer-note-text { margin:0;font-size:14px;line-height:1.55;color:var(--text);overflow-wrap:anywhere;white-space:normal; }
.customer-note-link { color:var(--primary);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--primary) 30%,transparent); }
.customer-note-link:hover { border-bottom-color:var(--primary); }
.customer-note-meta { display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:3px 0 0;color:var(--muted);font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums; }
.customer-note-meta > span + span::before { content:"·";margin:0 7px;color:color-mix(in srgb,var(--muted) 60%,transparent); }
.customer-notes-empty { margin:8px 0 0; }
/* Round check: 20 px circle inside a 22 px column, the hit area grows to 32 px through padding (44 px on touch below).
   crm-workspace.css gives every button inside .modal a 38 px control height through a long :is() selector; #detail-body
   (the card always lives there) outranks it without !important. */
#detail-body .customer-note-check,.customer-notes .customer-note-check { display:grid;place-items:center;width:32px;height:32px;min-height:0;margin:-5px 0 0 -5px;padding:0;background:none;border:0;border-radius:50%;cursor:pointer; }
.customer-note-check svg { width:20px;height:20px;box-sizing:border-box;padding:3px;border:1.5px solid color-mix(in srgb,var(--muted) 55%,transparent);border-radius:50%;fill:none;stroke:transparent;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:border-color .15s ease,background-color .15s ease,stroke .15s ease; }
.customer-note-check:hover svg { border-color:var(--primary);stroke:color-mix(in srgb,var(--primary) 45%,transparent); }
.customer-note-check:focus-visible { outline:2px solid var(--primary);outline-offset:1px; }
.customer-note-check[aria-pressed=true] svg { border-color:var(--primary);background:var(--primary);stroke:#fff; }
.customer-note[data-due-state=done] .customer-note-text { color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--muted) 70%,transparent); }
#detail-body .customer-note-delete,.customer-notes .customer-note-delete { align-self:start;min-height:0;padding:0 2px;background:none;border:0;color:var(--muted);font-size:12px;line-height:1.5;cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease; }
.customer-note:hover .customer-note-delete,.customer-note:focus-within .customer-note-delete { opacity:1; }
#detail-body .customer-note-delete:hover,.customer-notes .customer-note-delete:hover { color:var(--pipe-danger,#b42318); }
@media (hover:none) { #detail-body .customer-note-delete,.customer-notes .customer-note-delete { opacity:1; } }
#detail-body .customer-notes-toggle,.customer-notes .customer-notes-toggle { display:inline-block;min-height:0;margin:8px 0 0;padding:4px 0;background:none;border:0;color:var(--primary);font-size:13px;line-height:1.5;cursor:pointer; }
/* Due date as a small pill in the meta line */
.customer-note-due { display:inline-flex;align-items:center;white-space:nowrap;margin-right:8px;padding:0 8px;border-radius:999px;background:var(--bg);color:var(--text);font-weight:500;line-height:20px; }
.customer-note-meta > .customer-note-due + span::before { content:none; }
.customer-note-due[data-due-state=today] { color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent); }
.customer-note-due[data-due-state=overdue] { color:var(--pipe-danger,#b42318);background:color-mix(in srgb,var(--pipe-danger,#b42318) 10%,transparent); }
.customer-note-due[data-due-state=done] { color:var(--muted);font-weight:400; }
/* Attachments: square thumbnails, files as one quiet row each */
.customer-note-files { display:flex;flex-direction:column;gap:6px;margin:8px 0 2px; }
.customer-note-thumbs { display:flex;flex-wrap:wrap;gap:6px; }
#detail-body .customer-note-thumb,.customer-notes .customer-note-thumb { display:block;width:84px;height:84px;min-height:0;padding:0;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);cursor:zoom-in; }
.customer-note-thumb img { display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease; }
.customer-note-thumb:hover img { transform:scale(1.03); }
.customer-note-thumb img:not([src]) { visibility:hidden; }
#detail-body .customer-note-file,.customer-notes .customer-note-file { display:flex;align-items:baseline;gap:10px;width:100%;max-width:420px;min-height:0;padding:7px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--text);font-size:13px;line-height:1.5;text-align:left;cursor:pointer; }
.customer-note-file span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.customer-note-file small { margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap; }
#detail-body .customer-note-file:hover,.customer-notes .customer-note-file:hover { border-color:var(--primary); }
/* Composer: one framed field with the input on top and a quiet toolbar below (attach, due date, save). */
.customer-notes-form { margin-top:14px; }
.customer-notes-composer { border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);transition:border-color .15s ease,box-shadow .15s ease; }
.customer-notes-composer:focus-within { border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 12%,transparent); }
#detail-body .customer-notes-form .customer-notes-input,.customer-notes-form .customer-notes-input { display:block;width:100%;box-sizing:border-box;min-height:44px;padding:11px 12px 6px;border:0;border-radius:var(--radius) var(--radius) 0 0;background:transparent;color:var(--text);font:inherit;font-size:16px;box-shadow:none;outline:none; }
.customer-notes-toolbar { display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px 6px 6px; }
#detail-body .customer-notes-tool,.customer-notes .customer-notes-tool { display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0;padding:0 10px;background:none;border:0;border-radius:999px;color:var(--muted);font-size:13px;line-height:1;font-weight:500;cursor:pointer;transition:background-color .15s ease,color .15s ease; }
#detail-body .customer-notes-tool:hover,.customer-notes .customer-notes-tool:hover,.customer-notes .customer-notes-due:focus-within { background:var(--surface,#fff);color:var(--text); }
.customer-notes-tool svg { width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round; }
.customer-notes-due { position:relative; }
/* The date input lies invisible over the "Fällig" pill (tap opens the picker, showPicker on desktop); the pill shows the date. */
#detail-body .customer-notes-due input,.customer-notes-due input { position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer;font-size:16px; }
.customer-notes-due[data-has-date] { color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,transparent); }
#detail-body .customer-notes-save,.customer-notes .customer-notes-save { margin-left:auto;min-height:34px;padding:0 16px;border-radius:999px; }
.customer-notes-pending { list-style:none;margin:0;padding:0 12px 4px; }
.customer-notes-pending li { display:flex;align-items:baseline;gap:10px;padding:3px 0;font-size:13px;line-height:1.5; }
.customer-notes-pending li span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.customer-notes-pending small { color:var(--muted);font-variant-numeric:tabular-nums; }
#detail-body .customer-notes-pending button,.customer-notes .customer-notes-pending button { margin-left:auto;min-height:0;padding:0;background:none;border:0;color:var(--muted);font-size:12px;cursor:pointer; }
.customer-notes-status { margin:6px 0 0;color:var(--muted);font-size:12px; }
.customer-notes-status:empty { display:none; }
/* Overview: the newest notes of all areas, one row per note, chip with the area, click opens that tab. */
#detail-body .customer-notes-recent-row,.customer-notes-recent .customer-notes-recent-row { display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;width:100%;min-height:0;margin:0;padding:10px 0;background:none;border:0;border-top:1px solid var(--border);border-radius:0;color:var(--text);font:inherit;text-align:left;cursor:pointer; }
#detail-body .customer-notes-recent .customer-notes-recent-row { font-size:14px;line-height:1.55; }
.customer-notes-recent li:first-child .customer-notes-recent-row { border-top:0;padding-top:2px; }
.customer-notes-recent .customer-notes-recent-row:hover .customer-note-chip { border-color:var(--primary);color:var(--primary); }
.customer-note-chip { display:inline-flex;align-items:center;padding:1px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--muted);font-size:12px;line-height:1.5;font-weight:500;white-space:nowrap; }
.customer-notes-recent .customer-note-text { flex:1 1 220px;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.customer-notes-recent .customer-note-meta { flex:0 0 auto;margin:0; }
@media(max-width:600px){
#detail-body .customer-notes-tool,.customer-notes .customer-notes-tool { min-height:44px; }
#detail-body .customer-notes-save,.customer-notes .customer-notes-save { flex:1 0 100%;min-height:44px;margin-left:0; }
#detail-body .customer-note-check,.customer-notes .customer-note-check { width:44px;height:44px;margin:-11px 0 0 -11px; }
/* Phone: "Löschen" sits at the right end of the meta line instead of taking a column from the text */
.customer-notes-list .customer-note { grid-template-columns:22px minmax(0,1fr);position:relative; }
#detail-body .customer-note-delete,.customer-notes .customer-note-delete { position:absolute;right:8px;bottom:3px;min-height:32px;padding:0 0 0 12px; }
.customer-note-meta { row-gap:4px;padding-right:56px; }
.customer-note-meta > span + span::before { margin:0 5px; }
#detail-body .customer-note-delete,.customer-notes .customer-note-delete { padding-left:8px; }
.customer-notes-recent .customer-note-text { flex-basis:100%; }
}

/* Fixed card height ("CRM flüssig" step 2, 14.10.2026): the dialog no longer follows the height of the active tab, so a
   tab switch or a loading line inside never moves it. Desktop: 92vh, the max-height from crm-style.css. Phone: the sheet
   fills the screen up to the max-height of crm-shell.css; same selector depth as its rule body .modal-overlay .modal.
   Only the customer card; the other modals keep their content height. */
#detail-modal .modal { height:92vh; }
@media (max-width:768px) {
 body #detail-modal .modal { height:calc(100vh - 8px);height:calc(100dvh - 8px); }
}
.customer-payments-heading { margin-top:8px;border-top:1px solid var(--border);padding-top:20px; }

/* Kundenakte-Navigation (02.11.2026)
   1) Fester Kopf: Name und Status stehen über dem Inhalt, nur #detail-body scrollt. Vorher scrollte die ganze .modal
      und der sticky Kopf war im Liquid-Design durchsichtig, der Inhalt lief sichtbar darunter durch.
   2) Desktop: Bereiche als ruhige Leiste links in drei Gruppen, der Inhalt rechts. 601-900 px: eine Zeile, seitlich
      wischbar. Handy (bis 600 px): unverändert die Auswahlliste „Bereich“. */
#detail-modal .modal { display:flex;flex-direction:column;overflow:hidden; }
#detail-modal .modal-header { position:relative;flex:none;z-index:2; }
#detail-modal #detail-body { flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain; }
html.liquid #detail-modal .modal-header { border-bottom:1px solid var(--lq-linie,var(--border))!important; }
#detail-modal .modal-header h2 { display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-width:0; }
#detail-modal .detail-won-badge { display:inline;background:none!important;border:0!important;color:var(--muted)!important;font:400 14px/1.3 var(--app-font)!important;padding:0!important;margin:0!important;box-shadow:none!important;letter-spacing:0!important; }
#detail-modal .detail-won-badge i { display:none; }

.customer-workspace .cc-nav-group { display:none; }
.customer-workspace .detail-tab-bar [data-section="info"] { order:1; }
.customer-workspace .detail-tab-bar [data-section="history"] { order:2; }
.customer-workspace .detail-tab-bar [data-section="mails"] { order:3; }
.customer-workspace .detail-tab-bar [data-section="tasks"] { order:11; }
.customer-workspace .detail-tab-bar [data-section="pipelines"] { order:12; }
.customer-workspace .detail-tab-bar [data-section="onboarding"] { order:13; }
.customer-workspace .detail-tab-bar [data-section="portal"] { order:14; }
.customer-workspace .detail-tab-bar [data-section="documents"] { order:21; }
.customer-workspace .detail-tab-bar [data-section="zugang"] { order:22; }
.customer-workspace .cc-nav-group[data-group="kunde"] { order:0; }
.customer-workspace .cc-nav-group[data-group="projekt"] { order:10; }
.customer-workspace .cc-nav-group[data-group="unterlagen"] { order:20; }
#detail-modal .customer-workspace .det-tab .pf-anz { margin-left:auto;padding-left:10px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;background:none!important;border:0!important; }

/* Desktop (02.11.2026, 2. Fassung auf Yuriys Wunsch): Bereichsleiste wie die Hauptnavigation – schwebende Glasleiste mit
   runden Icon-Knöpfen. Eingeklappt nur Icons mit Tooltip, ausgeklappt mit Beschriftung und Gruppen. Pfeil am Rand,
   Zustand je Gerät in localStorage „crm_akte_nav_open“ (Standard: ausgeklappt), Klasse html.cc-nav-zu. */
.customer-workspace .detail-tab-bar [data-section="info"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%223%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%227%22%20height%3D%227%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="history"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="mails"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m3%207%209%206%209-6%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="tasks"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223.5%22%20y%3D%223.5%22%20width%3D%2217%22%20height%3D%2217%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m8%2012%203%203%205-6%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="pipelines"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%229.5%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2211%22%20rx%3D%221.5%22%2F%3E%3Crect%20x%3D%2216%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2213%22%20rx%3D%221.5%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="onboarding"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021V4h11l-2%204%202%204H5%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="portal"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M7%206.5h.01M10%206.5h.01%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="documents"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%207a2%202%200%200%201%202-2h4l2%202h8a2%202%200%200%201%202%202v8a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E"); }
.customer-workspace .detail-tab-bar [data-section="zugang"] { --cc-ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.65%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m11%2012%209-9m-3%203%203%203m-6%200%202%202%22%2F%3E%3C%2Fsvg%3E"); }
@media (min-width:901px){
 #detail-modal .modal.modal-wide { max-width:1240px; }
 #detail-modal #detail-body.customer-workspace { display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);column-gap:32px;align-items:start;padding-top:0!important;padding-left:14px!important; }
 #detail-modal .customer-workspace > .customer-section-select { display:none!important; }
 /* Inhalt fließt in Spalte 2 untereinander (03.11.2026): Onboarding und Kundenbereich zeigen zwei Panels (Notizen + Modul),
    die vorher beide in Zeile 1 lagen und sich überdeckten. Die Leiste läuft über alle Zeilen. */
 #detail-modal .customer-workspace > :not(.detail-tab-bar) { grid-column:2;grid-row:auto;min-width:0;padding-top:22px; }
 #detail-modal .customer-workspace > .customer-notes-panel:not([hidden]) + :not([hidden]) { padding-top:0; }
 #detail-modal .customer-workspace > .detail-tab-bar { grid-column:1;grid-row:1/-1;position:sticky;top:14px;display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;width:232px;box-sizing:border-box;margin:14px 0 14px!important;padding:10px!important;border:1px solid var(--gn-rand)!important;border-radius:22px!important;background:var(--gn-glas)!important;box-shadow:inset 0 1px 0 var(--gn-licht),var(--gn-schatten)!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);transition:width var(--motion-panel,.22s) var(--ease-standard,ease); }
 #detail-modal .customer-workspace .cc-nav-group { display:block;margin:12px 10px 4px;color:var(--gn-text-leise);font:500 11.5px/1.4 var(--app-font);letter-spacing:0;white-space:nowrap;overflow:hidden; }
 #detail-modal .customer-workspace .cc-nav-group[data-group="kunde"] { margin-top:2px; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab { position:relative;display:flex!important;align-items:center;gap:11px;width:100%;min-height:38px!important;margin:0!important;padding:6px 12px!important;border:1px solid transparent!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:var(--gn-text)!important;font:450 13px/1.35 var(--app-font)!important;text-align:left;white-space:nowrap;overflow:hidden;transition:background-color .12s ease,color .12s ease; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab::before { content:'';flex:0 0 18px;width:18px;height:18px;background:currentColor;-webkit-mask:var(--cc-ico) center/18px 18px no-repeat;mask:var(--cc-ico) center/18px 18px no-repeat; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab:hover { color:var(--gn-text-stark)!important;background:var(--gn-hover)!important; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab.det-tab-active { color:var(--gn-text-stark)!important;font-weight:500!important;background:var(--gn-aktiv)!important;border-color:var(--gn-aktiv-rand)!important;box-shadow:var(--gn-aktiv-schatten)!important; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab.det-tab-active::before { background:var(--primary); }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab:focus-visible { outline:2px solid var(--primary);outline-offset:1px; }
 #detail-modal .cc-nav-schalter { display:grid;place-items:center;position:absolute;top:16px;right:-11px;z-index:2;width:22px;height:22px;min-height:0!important;padding:0!important;border-radius:50%!important;cursor:pointer;border:1px solid var(--gn-rand)!important;background:var(--gn-pop)!important;color:var(--gn-text-stark)!important;box-shadow:0 2px 8px -2px rgba(15,23,42,.25)!important; }
 #detail-modal .cc-nav-schalter:hover { color:var(--primary); }
 #detail-modal .cc-nav-schalter svg { width:12px;height:12px;transform:rotate(180deg);transition:transform var(--motion-panel,.22s) var(--ease-standard,ease); }
 html.cc-nav-zu #detail-modal .cc-nav-schalter svg { transform:none; }
 /* Eingeklappt: 60 px, runde Icon-Knöpfe, Gruppen als feine Linie */
 html.cc-nav-zu #detail-modal .customer-workspace > .detail-tab-bar { width:60px;align-items:center;padding:10px 0!important;border-radius:30px!important; }
 html.cc-nav-zu #detail-modal .customer-workspace .cc-nav-group { width:24px;height:1px;margin:8px auto;padding:0;font-size:0;background:var(--gn-linie); }
 html.cc-nav-zu #detail-modal .customer-workspace .cc-nav-group[data-group="kunde"] { display:none; }
 html.cc-nav-zu #detail-modal .customer-workspace .detail-tab-bar .det-tab { width:40px;height:40px;min-height:40px!important;padding:0!important;justify-content:center;gap:0;border-radius:50%!important;font-size:0!important; }
 html.cc-nav-zu #detail-modal .customer-workspace .detail-tab-bar .det-tab .pf-anz { display:none; }
 html.cc-nav-zu #detail-modal .customer-workspace .detail-tab-bar .det-tab::before { flex-basis:19px;width:19px;height:19px;-webkit-mask-size:19px 19px;mask-size:19px 19px; }
}
.cc-nav-tipp { z-index:100000; }
@media (max-width:900px){ .cc-nav-schalter { display:none; } }
@media (prefers-reduced-motion:reduce){ #detail-modal .customer-workspace > .detail-tab-bar, #detail-modal .cc-nav-schalter svg { transition:none; } }
@media (min-width:601px) and (max-width:900px){
 #detail-modal .customer-workspace > .detail-tab-bar { flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;gap:2px!important; }
 #detail-modal .customer-workspace > .detail-tab-bar::-webkit-scrollbar { display:none; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab { flex:none;white-space:nowrap; }
 #detail-modal .customer-workspace .detail-tab-bar .det-tab.det-tab-active { box-shadow:inset 0 -2px 0 var(--primary)!important; }
}