/* ============================================================
   Brand Palace — App (Login + Angebots-Generator)
   Loaded in addition to styles.css (shares :root tokens + fonts)
   ============================================================ */

/* ---------- APPLE-STYLE FOUNDATION (Backend only) ---------- */
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,'Segoe UI',sans-serif;
}
/* System font + layered off-white canvas for every backend page (login + tool).
   Marketing pages (no .app-topbar, no .auth-wrap) stay on the original styles.css look. */
body:has(.app-topbar),body:has(.auth-wrap){font-family:var(--font-ui);background:var(--ivory);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body:has(.app-topbar) .in,body:has(.app-topbar) input,body:has(.app-topbar) select,body:has(.app-topbar) textarea,body:has(.app-topbar) button,
body:has(.auth-wrap) .in,body:has(.auth-wrap) input,body:has(.auth-wrap) button{font-family:var(--font-ui);}
body:has(.app-topbar) .in:focus,body:has(.app-topbar) input:focus,body:has(.app-topbar) select:focus,body:has(.app-topbar) textarea:focus{border-color:var(--slate-35);box-shadow:0 0 0 3px var(--slate-06);outline:none;}
/* Brand-tint native controls (date picker, checkboxes, dropdowns) — replaces the system blue. */
body:has(.app-topbar) input,body:has(.app-topbar) select,body:has(.app-topbar) textarea,body:has(.auth-wrap) input{accent-color:var(--slate);}
/* Hide the native (blue, OS-controlled) date popup; we use our own calendar instead. */
body:has(.app-topbar) input[type="date"]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none;}
body:has(.app-topbar) input.bp-date{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16' fill='none' stroke='%237b8893' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:38px;}

/* custom date picker popup */
.bp-dp{position:absolute;z-index:100000;width:268px;background:#fff;border:0.5px solid rgba(47,58,68,0.12);border-radius:14px;box-shadow:0 16px 48px rgba(47,58,68,0.20);padding:12px;font-family:var(--font-ui);}
.bp-dp[hidden]{display:none;}
.bp-dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.bp-dp-title{font-size:13.5px;font-weight:600;color:var(--slate);letter-spacing:-0.2px;}
.bp-dp-nav{width:30px;height:30px;border:none;background:transparent;border-radius:8px;font-size:18px;line-height:1;color:var(--slate-35);cursor:pointer;transition:background .12s,color .12s;}
.bp-dp-nav:hover{background:var(--slate-06);color:var(--slate);}
.bp-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.bp-dp-wd span{font-size:10.5px;color:var(--slate-35);text-align:center;padding:6px 0 4px;font-weight:600;}
.bp-dp-day{height:32px;border:none;background:transparent;border-radius:8px;font-size:12.5px;color:var(--slate);cursor:pointer;font-family:var(--font-ui);font-variant-numeric:tabular-nums;transition:background .12s,color .12s;}
.bp-dp-day:hover{background:var(--slate-06);}
.bp-dp-day.today{box-shadow:inset 0 0 0 1px var(--taupe);}
.bp-dp-day.sel{background:var(--slate);color:#fff;}
.bp-dp-day.sel:hover{background:#3a4752;}
.bp-dp-empty{height:32px;}
.bp-dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:0.5px solid var(--slate-06);}
.bp-dp-link{border:none;background:transparent;font-size:12px;color:var(--taupe);cursor:pointer;font-family:var(--font-ui);font-weight:500;padding:4px 6px;border-radius:6px;}
.bp-dp-link:hover{background:var(--slate-06);color:var(--slate);}

/* ---------- LOGIN ---------- */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ivory);padding:40px 20px;position:relative;overflow:hidden;}
.auth-wrap::before{content:'';position:absolute;inset:0;background:radial-gradient(115% 70% at 50% -6%,#ffffff 0%,#F2EEE8 60%);z-index:0;}
.auth-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--white);border:0.5px solid var(--slate-10);border-radius:20px;box-shadow:0 34px 90px rgba(47,58,68,0.13);padding:48px 42px 40px;}
.auth-card .in{border-radius:11px;padding:14px 16px;transition:border-color .2s,box-shadow .2s;}
.auth-card .in:focus{border-color:var(--taupe);box-shadow:0 0 0 3px rgba(169,155,136,.16);outline:none;}
.auth-btn{border-radius:11px;}
.auth-logo{display:flex;justify-content:center;margin-bottom:28px;}
.auth-logo img{height:72px;border-radius:6px;box-shadow:0 8px 24px rgba(47,58,68,0.08);}
.auth-eyebrow{text-align:center;font-size:10px;letter-spacing:4px;text-transform:uppercase;color:var(--taupe);margin-bottom:12px;}
.auth-title{text-align:center;font-family:var(--font-ui);font-size:27px;font-weight:600;letter-spacing:-0.6px;color:var(--slate);margin-bottom:6px;}
.auth-sub{text-align:center;font-size:13px;color:var(--slate-35);font-weight:300;margin-bottom:32px;}
.lbl{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--taupe);margin-bottom:7px;font-weight:500;}
.in{width:100%;background:var(--white);border:0.5px solid var(--slate-10);color:var(--slate);padding:13px 15px;font-size:14px;font-family:'Inter',sans-serif;font-weight:300;outline:none;border-radius:10px;transition:border .2s;}
.in:focus{border-color:var(--taupe);}
.in::placeholder{color:var(--slate-20);}
/* Auswahl-Dropdowns im Apple-Look: nativen OS-Pfeil entfernen und eigenen Chevron zeichnen. */
body:has(.app-topbar) select.in,body:has(.auth-wrap) select.in{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232F3A44' stroke-opacity='0.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px;}
body:has(.app-topbar) select.in::-ms-expand{display:none;}
.field{margin-bottom:18px;}
.auth-btn{width:100%;margin-top:6px;}
.auth-error{display:none;background:rgba(180,60,60,0.06);border:0.5px solid rgba(180,60,60,0.3);color:#9c3b3b;font-size:12.5px;padding:11px 14px;margin-bottom:18px;}
.auth-error.show{display:block;}
.auth-hint{margin-top:24px;padding-top:20px;border-top:0.5px solid var(--slate-06);font-size:12px;color:var(--slate-35);line-height:1.7;text-align:center;}
.auth-hint code{font-family:ui-monospace,Menlo,monospace;color:var(--slate);background:var(--ivory);padding:2px 7px;border-radius:3px;font-size:11.5px;}
.auth-back{display:block;text-align:center;margin-top:22px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate-20);text-decoration:none;}
.auth-back:hover{color:var(--slate-35);}

/* ---------- APP SHELL ---------- */
.app-topbar{position:fixed;top:0;left:0;bottom:0;z-index:50;width:228px;display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:22px 16px;background:rgba(255,255,255,0.72);backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-right:0.5px solid rgba(47,58,68,0.08);overflow-y:auto;}
body:has(.app-topbar){padding-left:228px;}
.app-actions{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:16px;border-top:0.5px solid var(--slate-10);}
.app-actions #userEmail{text-align:center;margin-bottom:2px;}
.app-topbar .btn-ghost,.app-topbar .btn-dark{padding:10px 14px;letter-spacing:-0.1px;justify-content:center;}
.app-brand{display:flex;align-items:center;gap:11px;padding:2px 6px 14px;}
.app-brand img{height:40px;border-radius:4px;}
.app-brand .t{font-family:var(--font-ui);font-size:16px;font-weight:600;letter-spacing:-0.3px;color:var(--slate);}
.app-brand .s{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--taupe);}
.app-spacer{flex:1;}
.btn-ghost{padding:9px 16px;border:0.5px solid transparent;border-radius:9px;background:var(--slate-06);color:var(--slate);font-size:13px;letter-spacing:-0.1px;font-weight:500;text-transform:none;font-family:var(--font-ui);cursor:pointer;transition:background .15s,transform .04s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.btn-ghost:hover{background:var(--slate-10);}
.btn-ghost:active{transform:scale(0.98);}
.btn-dark{padding:9px 18px;background:var(--slate);color:var(--white);border:0.5px solid var(--slate);border-radius:9px;font-size:13px;letter-spacing:-0.1px;font-weight:500;text-transform:none;font-family:var(--font-ui);cursor:pointer;transition:background .15s,transform .04s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.btn-dark:hover{background:#3a4752;}
.btn-dark:active{transform:scale(0.98);}
.btn-ghost[hidden],.btn-dark[hidden]{display:none !important;}
.btn-ghost:disabled,.btn-dark:disabled{opacity:.5;cursor:default;}

/* ---------- SAVE STATE ---------- */
.save-state{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate-20);flex:0 0 auto;white-space:nowrap;}
.save-state.dirty{color:var(--taupe);}
.save-state.saved{color:#3b7a4b;}
.save-state.error{color:#9c3b3b;}

/* ---------- OFFERS DRAWER ---------- */
.offers-overlay{position:fixed;inset:0;z-index:100;background:rgba(47,58,68,0.32);display:flex;justify-content:flex-end;}
.offers-overlay[hidden]{display:none;}
.offers-panel{width:100%;max-width:440px;height:100%;background:var(--white);box-shadow:-24px 0 60px rgba(47,58,68,0.12);display:flex;flex-direction:column;animation:offers-in .22s ease;}
@keyframes offers-in{from{transform:translateX(30px);opacity:0;}to{transform:none;opacity:1;}}
.offers-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:0.5px solid var(--slate-10);}
.offers-title{font-family:var(--font-ui);font-size:20px;font-weight:600;letter-spacing:-0.4px;color:var(--slate);}
.offers-close{background:none;border:none;font-size:26px;line-height:1;color:var(--slate-35);cursor:pointer;padding:0 4px;}
.offers-close:hover{color:var(--slate);}
.offers-list{flex:1;overflow-y:auto;padding:12px 0;}
.offers-filter{display:flex;flex-wrap:wrap;gap:8px;padding:6px 28px 16px;border-bottom:0.5px solid var(--slate-06);margin-bottom:6px;}
.offers-chip{display:inline-flex;align-items:center;gap:6px;font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.5px;color:var(--slate-35);background:var(--ivory);border:0.5px solid var(--slate-10);border-radius:8px;padding:8px 14px;cursor:pointer;transition:all .15s;}
.offers-chip:hover{border-color:var(--taupe);color:var(--slate);}
.offers-chip.active{background:var(--slate);border-color:var(--slate);color:#fff;}
.offers-chip-n{font-size:10px;font-weight:600;opacity:.7;}
.offers-chip.active .offers-chip-n{opacity:.85;}
.offers-chip.arch-chip{margin-left:auto;}
.offers-empty{padding:40px 28px;text-align:center;font-size:13px;color:var(--slate-35);font-weight:300;}
.offer-item{display:flex;align-items:center;gap:14px;padding:16px 28px;border-bottom:0.5px solid var(--slate-06);cursor:pointer;transition:background .15s;}
.offer-item:hover{background:var(--ivory);}
.offer-item.active{background:var(--ivory);box-shadow:inset 3px 0 0 var(--taupe);}
.offer-main{flex:1;min-width:0;}
.offer-num{font-size:13px;color:var(--slate);font-weight:500;}
.offer-badge{display:inline-block;font-size:9px;letter-spacing:1px;text-transform:uppercase;font-weight:500;padding:2px 7px;border-radius:10px;margin-left:6px;vertical-align:middle;}
.offer-badge.st-draft{background:var(--slate-06);color:var(--slate-35);}
.offer-badge.st-sent{background:rgba(120,140,170,0.16);color:#566b8a;}
.offer-badge.st-accepted{background:rgba(59,122,75,0.14);color:#3b7a4b;}
.offer-badge.st-declined{background:rgba(156,59,59,0.12);color:#9c3b3b;}
/* Belegart und Herkunft sind KEIN Status: eigene, ruhige Farben. Ohne eine
   dieser Klassen hätte ein Abzeichen gar keinen Hintergrund und stünde als
   nackter Großbuchstabentext neben den echten Abzeichen. */
.offer-badge.bg-art{background:rgba(169,155,136,0.20);color:#7d7160;}
.offer-badge.bg-quelle{background:var(--slate-06);color:var(--slate-35);}
.offer-cust{font-size:12px;color:var(--slate-35);font-weight:300;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.offer-meta{font-size:11px;color:var(--slate-20);margin-top:2px;}
.offer-total{font-size:13px;color:var(--slate);font-weight:500;white-space:nowrap;}
/* Angebote-Übersicht: die Nummernspalte darf die Tabelle nicht auffressen,
   Status/Datum/Summe brechen nie um, und die Aktionsspalte bleibt einzeilig
   (ein Hauptknopf + Menü statt fünf nebeneinander). */
.off-table .off-cell-nr{width:34%;max-width:0;}
.off-table .off-cell-nr .art-desc{max-width:100%;}
.off-table .off-cell-nr b{white-space:nowrap;}   /* die Belegnummer bricht nie um */
.off-table .off-cell-kunde{min-width:120px;}
.off-act{white-space:nowrap;text-align:right;}
.off-act .art-mini{margin-right:2px;}
@media(max-width:900px){
  .off-table .off-cell-nr{width:auto;max-width:none;}
  .off-table .off-cell-nr .art-desc{max-width:200px;}
}
/* Handy: aus jeder Tabellenzeile wird eine Karte. Sechs Spalten passen auf
   375 Pixel nicht nebeneinander; vorher musste man waagerecht wischen, um
   Kunde, Summe und den Aktionsknopf überhaupt zu sehen. */
/* Doppelte Klasse (.art-table.off-table), damit diese Regeln die allgemeinen
   Tabellenregeln überstimmen — sonst zeichnet `.art-table td` seine
   Trennlinien quer durch die Karte. */
@media(max-width:760px){
  .art-table.off-table{min-width:0;}
  .art-table.off-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .art-table.off-table tbody,.art-table.off-table td{display:block;width:auto;}
  /* Kopf über die volle Breite, Aktion am Fuß: bei hochgeladenen Katalogen ist
     der lange Titel die EINZIGE Unterscheidung zwischen zwei Zeilen. In einer
     schmalen linken Spalte neben dem Knopf wurde er gekappt, und zwei Kataloge
     sahen völlig gleich aus. */
  .art-table.off-table tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:center;
    grid-template-areas:"nr nr" "kunde summe" "status datum" "act act";
    border:0.5px solid var(--slate-10);border-radius:12px;padding:12px;margin-bottom:9px;
  }
  .art-table.off-table td{border:0;padding:0;}
  .art-table.off-table .off-cell-nr{grid-area:nr;max-width:none;width:auto;}
  .art-table.off-table .off-cell-nr .art-desc{max-width:100%;white-space:normal;overflow-wrap:anywhere;}
  .art-table.off-table .off-act{grid-area:act;justify-self:end;margin-top:3px;padding-top:9px;
    border-top:0.5px solid var(--slate-06);width:100%;}
  .art-table.off-table .off-cell-kunde{grid-area:kunde;font-size:13px;color:var(--slate);overflow-wrap:anywhere;}
  .art-table.off-table .off-cell-summe{grid-area:summe;font-weight:500;color:var(--slate);}
  .art-table.off-table .off-cell-status{grid-area:status;}
  .art-table.off-table .off-cell-datum{grid-area:datum;text-align:right;}
  .off-act .art-mini,.off-act .row-menu-btn{padding:6px 10px;height:auto;}
}

.offer-del{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:none;border:0.5px solid transparent;border-radius:8px;color:var(--slate-20);font-size:18px;cursor:pointer;line-height:1;transition:all .15s;vertical-align:middle;}
.offer-del:hover{color:#9c3b3b;border-color:rgba(156,59,59,.25);background:rgba(156,59,59,.06);}

/* ---------- SEND DIALOG ---------- */
.send-overlay{position:fixed;inset:0;z-index:120;background:rgba(47,58,68,0.32);display:flex;align-items:center;justify-content:center;padding:24px;}
.send-overlay[hidden]{display:none;}
.send-panel{width:100%;max-width:520px;background:var(--white);border-radius:14px;box-shadow:0 24px 70px rgba(47,58,68,0.22);display:flex;flex-direction:column;animation:send-in .2s ease;overflow:hidden;}
@keyframes send-in{from{transform:translateY(12px);opacity:0;}to{transform:none;opacity:1;}}
.send-head{display:flex;align-items:center;justify-content:space-between;padding:22px 26px;border-bottom:0.5px solid var(--slate-10);}
.send-title{font-family:var(--font-ui);font-size:19px;font-weight:600;letter-spacing:-0.4px;color:var(--slate);}
.send-body{padding:22px 26px;display:flex;flex-direction:column;gap:14px;}
.send-note{font-size:11.5px;color:var(--slate-35);font-weight:300;line-height:1.5;}
.send-status{font-size:12.5px;line-height:1.5;min-height:18px;color:var(--slate-35);}
.send-status.error{color:#9c3b3b;}
.send-status.ok{color:#3b7a4b;}
.send-status a{color:inherit;text-decoration:underline;}
.send-foot{display:flex;justify-content:flex-end;gap:10px;padding:18px 26px;border-top:0.5px solid var(--slate-10);background:var(--ivory);}

/* ---------- CUSTOMER PICKER + DRAWER ---------- */
.cust-pick{display:flex;gap:8px;align-items:center;}
.cust-pick select{flex:1;min-width:0;}
.cust-pick .btn-ghost{white-space:nowrap;}
.art-pick{display:flex;gap:8px;align-items:center;margin-bottom:12px;}
.art-pick #f-article-pick{flex:1;min-width:0;}
.art-pick .btn-ghost{white-space:nowrap;}
.margin-field{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--slate-35);white-space:nowrap;}
.margin-field input{width:58px;text-align:right;}
.calc-info{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--ivory);border:0.5px solid var(--slate-10);font-size:12.5px;color:var(--slate-35);line-height:1.5;}
.calc-info b{color:var(--slate);font-weight:600;}
.calc-info span{opacity:.8;}
.calc-info.good{background:rgba(59,122,75,.08);border-color:rgba(59,122,75,.22);color:#3b7a4b;}
.calc-info.good b{color:#3b7a4b;}
.calc-info.warn{background:rgba(169,155,136,.14);border-color:rgba(169,155,136,.35);color:#8a7a5c;}
.calc-info.warn b{color:#8a7a5c;}
.calc-info.bad{background:rgba(156,59,59,.07);border-color:rgba(156,59,59,.22);color:#9c3b3b;}
.calc-info.bad b{color:#9c3b3b;}
.cust-panel{max-width:480px;}
.cust-scroll{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-height:0;}
.cust-list{padding:6px 0 28px;}
.cust-formwrap{padding:18px 28px;border-bottom:0.5px solid var(--slate-10);background:var(--ivory);display:flex;flex-direction:column;gap:12px;flex:none;}
.cust-form-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--slate);font-weight:600;}
.cust-form-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:2px;}
.cust-list-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--slate-35);font-weight:600;padding:16px 28px 4px;}
.cust-use{display:inline-flex;align-items:center;height:30px;background:none;border:0.5px solid var(--slate-20);border-radius:8px;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--slate);padding:0 14px;cursor:pointer;white-space:nowrap;transition:all .15s;}
.cust-use:hover{background:var(--slate);border-color:var(--slate);color:#fff;}

/* ---------- BUILDER LAYOUT ---------- */
/* Aktionsleiste über dem Angebot: klebt oben fest, damit Speichern, Senden und
   PDF nie hinter der Navigation verschwinden. */
.bx-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 20px;background:rgba(255,255,255,0.86);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom:0.5px solid var(--slate-10);}
.bx-doc{font-family:var(--font-ui);font-size:14px;font-weight:600;letter-spacing:-0.2px;color:var(--slate);}
.bx-spacer{flex:1;}
.bx-sep{width:1px;height:22px;background:var(--slate-10);margin:0 4px;}
.bx-bar .btn-ghost,.bx-bar .btn-dark{padding:8px 13px;font-size:12.5px;}
.builder{display:grid;grid-template-columns:480px 1fr;min-height:calc(100vh - 57px);}
.editor{padding:28px 28px 80px;border-right:0.5px solid var(--slate-10);overflow-y:auto;max-height:calc(100vh - 57px);}
.ed-group{margin-bottom:34px;}
.ed-group-title{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--slate);font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:0.5px solid var(--slate-10);}
.ed-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.in-sm{padding:10px 12px;font-size:13px;}
textarea.in{resize:vertical;min-height:70px;line-height:1.6;}

/* line items */
.li-head,.li-row{display:grid;grid-template-columns:1fr 54px 70px 56px 56px 30px;gap:8px;align-items:center;}
.li-head{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);margin-bottom:8px;padding:0 2px;}
.li-head span:nth-child(n+2){text-align:right;}
.li-item{margin-bottom:12px;}
.li-row .in{padding:9px 10px;font-size:12.5px;}
.li-row .in.num{text-align:right;}
/* ---------- Artikel-Detailseite (PIM) ---------- */
.ad-grid{display:grid;grid-template-columns:1fr 360px;gap:18px;align-items:start;}
@media (max-width:980px){ .ad-grid{grid-template-columns:1fr;} }
.ad-grid > div > .art-card{margin-bottom:18px;}
.ad-bild{display:flex;align-items:center;justify-content:center;min-height:180px;border:0.5px solid var(--slate-10);border-radius:12px;background:#fff;overflow:hidden;}
.ad-bild img{max-width:100%;max-height:230px;object-fit:contain;}
.ad-bild-leer{color:var(--slate-50,#9aa3ab);font-size:13px;}
.ad-q-balken{height:8px;border-radius:999px;background:var(--mist,#f1efe9);overflow:hidden;margin:2px 0 12px;}
.ad-q-fuellung{height:100%;border-radius:999px;transition:width .3s;}
.ad-q-fuellung.gut{background:#2e7d52;} .ad-q-fuellung.mittel{background:#c99a3a;} .ad-q-fuellung.schlecht{background:#b0483d;}
.ad-q-liste{list-style:none;margin:0;padding:0;font-size:12.5px;line-height:2;color:var(--slate-35,#5b6570);}
.ad-q-liste li{padding-left:20px;position:relative;}
.ad-q-liste li::before{content:'○';position:absolute;left:2px;color:var(--slate-20);}
.ad-q-liste li.pflicht::before{content:'●';color:#b0483d;}
.ad-q-liste li.ok::before{content:'✓';color:#2e7d52;}
.ad-q-liste li span{color:var(--slate-50,#9aa3ab);font-size:11px;}
/* Statuspunkte in der Artikelliste */
/* Verkaufspreis mit Marge und Aufschlagsrechner direkt am Feld. */
.vk-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;}
.vk-marge{font-size:11.5px;color:var(--slate-35);font-variant-numeric:tabular-nums;}
.vk-marge.gut{color:#3b7a4b;}
.vk-marge.schwach{color:#b6794e;}
.vk-marge.verlust{color:#b53d2e;font-weight:600;}
.vk-rechner{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--slate-35);margin-left:auto;}
.vk-rechner .in{width:58px;padding:4px 7px;font-size:12px;}

/* ---------- GÄSTELISTE (Online-Termine) ---------- */
/* Eine Zeile je Gast statt eines Sammelfelds: so ist auf einen Blick klar,
   wer eingeladen wird, und niemand geht in einer langen Zeichenkette unter. */
.gast-zeilen{display:flex;flex-direction:column;gap:7px;padding:3px 0 2px;}
.gast-zeile{display:flex;gap:7px;align-items:center;}
.gast-zeile .gast-mail{flex:1 1 260px;min-width:0;}
.gast-zeile .gast-name{flex:0 1 200px;min-width:0;}
.gast-weg{flex:none;background:none;border:0;cursor:pointer;color:var(--slate-20);font-size:17px;line-height:1;padding:4px 7px;border-radius:7px;}
.gast-weg:hover{background:var(--slate-06);color:#9c3b3b;}
.gast-weg[disabled]{opacity:.3;cursor:default;}
.gast-weg[disabled]:hover{background:none;color:var(--slate-20);}
.gast-fuss{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;}
.gast-zeile .in.fehler{border-color:#b53d2e;}
.gast-hint{font-size:11.5px;color:#b53d2e;margin-top:3px;}
@media(max-width:640px){
  .gast-zeile{flex-wrap:wrap;}
  .gast-zeile .gast-mail,.gast-zeile .gast-name{flex:1 1 100%;}
}

/* ---------- DOKUMENTENABLAGE ---------- */
/* Bausteine lagen bisher inline auf dokumente.html; hier stehen sie zentral,
   damit Detailseiten und Auswertungen dieselbe Optik erben. */
.doc-cat{display:inline-block;font-size:10px;letter-spacing:0.5px;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:#eef1f3;color:#5b6570;font-weight:600;}
.doc-search-hint{font-size:12px;color:var(--taupe,#8a8172);background:var(--mist,#f4f2ee);border-radius:8px;padding:8px 12px;margin:2px 0 10px;}
.doc-search-hint[hidden]{display:none;}
.doc-folder{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--taupe,#8a8172);background:var(--mist,#f1efe9);border-radius:6px;padding:2px 7px;}
.doc-badge{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.3px;border-radius:6px;padding:2px 7px;}
.doc-badge-lock{color:#8a5a2f;background:#f6efe6;}
.doc-badge-priv{color:#3a5a86;background:#eaf1f8;}
.doc-badge-frist{color:#8a6d18;background:#f6efe6;}
.doc-badge-frist.overdue{color:#a8443a;background:#f6e6e6;}
.doc-badge-frist.soon{color:#8a5a2f;background:#f6efe6;}
.doc-check,#docSelAll{width:16px;height:16px;cursor:pointer;accent-color:var(--slate);flex:none;}

/* Dateiliste: eine Zeile je Dokument, gleiche Bauform auf Schreibtisch und
   Handy. Die frühere Tabelle brach die Herkunft in vier Zeilen um, machte
   jede Zeile über 100 Pixel hoch und schob die Aktionen aus dem Bild. */
.doc-list-tools{display:flex;align-items:center;gap:8px;padding:0 2px 9px;border-bottom:0.5px solid var(--slate-10);}
.doc-list-tools[hidden]{display:none;}
.doc-list-tools label{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;color:var(--slate-35);cursor:pointer;font-family:var(--font-ui);}
.doc-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:0.5px solid var(--slate-06);}
.doc-row:last-child{border-bottom:none;}
.doc-ico{flex:none;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:8.5px;font-weight:700;letter-spacing:.4px;background:var(--slate-06);color:var(--slate-35);}
.doc-ico-pdf{background:#f6e8e5;color:#a8503f;}
.doc-ico-doc{background:#e7eef7;color:#3a5a86;}
.doc-ico-xls{background:#e5efe7;color:#3f7350;}
.doc-ico-ppt{background:#f8ede1;color:#a8713f;}
.doc-ico-img{background:#efeaf6;color:#6d548e;}
.doc-main{flex:1;min-width:0;}
.doc-name-line{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap;}
.doc-name{font-size:13.5px;font-weight:500;color:var(--slate);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;min-width:0;}
.doc-name:hover{text-decoration:underline;text-underline-offset:2px;}
.doc-info{font-size:11.5px;color:var(--slate-50,#9aa3ab);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-act{flex:none;display:flex;align-items:center;gap:2px;}
.doc-star{background:none;border:0;cursor:pointer;font-size:15px;line-height:1;color:var(--slate-20);padding:4px 7px;border-radius:6px;}
.doc-star:hover{background:var(--slate-06);color:var(--slate);}
.doc-star.on{color:#A98D2E;}
.doc-back{background:none;border:0;cursor:pointer;font-family:var(--font-ui);font-size:11.5px;color:var(--slate-35);
  margin-left:8px;padding:3px 9px;border-radius:999px;background:var(--slate-06);vertical-align:2px;}
.doc-back:hover{background:var(--slate-10);color:var(--slate);}
.doc-card-foot{margin-top:14px;padding-top:12px;border-top:0.5px solid rgba(47,58,68,0.08);}
.doc-foot-link{background:none;border:0;cursor:pointer;font-family:var(--font-ui);font-size:11.5px;color:var(--slate-35);
  padding:0;text-decoration:underline;text-underline-offset:2px;}
.doc-foot-link:hover{color:var(--slate);}

/* Ordnerspalte: gruppiert, damit 14 Ordner überschaubar bleiben. */
.doc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px;}
.doc-nav-card{padding:16px 4px 12px;position:sticky;top:18px;}
.doc-nav{display:flex;flex-direction:column;align-items:stretch;max-height:66vh;overflow-y:auto;padding:0;}
.doc-nav-gruppe{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-20);padding:12px 16px 5px;}
.doc-nav-gruppe:first-child{padding-top:2px;}
.doc-nav-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:7px 16px;font-family:var(--font-ui);font-size:13px;color:var(--slate);border-radius:8px;transition:background .14s;}
.doc-nav-row:hover{background:var(--slate-06);}
.doc-nav-row.active{background:rgba(203,187,163,0.20);font-weight:550;}
.doc-nav-row.leer{color:var(--slate-20);}
.doc-nav-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.doc-nav-count{flex:none;font-size:11.5px;color:var(--slate-35);font-variant-numeric:tabular-nums;}
.doc-nav-row.leer .doc-nav-count{color:var(--slate-20);}
.doc-nav-toggle{margin:8px 16px 0;padding:6px 0;background:none;border:0;cursor:pointer;
  text-align:left;font-family:var(--font-ui);font-size:11.5px;color:var(--slate-35);
  text-decoration:underline;text-underline-offset:2px;}
.doc-nav-toggle:hover{color:var(--slate);}

/* Die Ablage-Karte steht in der schmaleren Spalte: Titel links, Suche rechts. */
.doc-layout .art-card-head{flex-wrap:nowrap;align-items:center;margin-bottom:14px;}
.doc-head-titel{min-width:0;}
.doc-layout .art-head-actions{flex:1;justify-content:flex-end;}
.doc-layout .art-head-actions .in-sm{min-width:0;}
.doc-layout .art-head-actions #docSearch{flex:1;min-width:150px;max-width:340px;}

/* Zeilenaktionen: nur das Nötigste sichtbar, der Rest in einem Menü. */
.row-menu-btn{background:none;border:0;cursor:pointer;font-size:16px;line-height:1;color:var(--slate-35);padding:3px 7px;border-radius:6px;}
.row-menu-btn:hover{background:var(--slate-06);color:var(--slate);}
.row-menu{position:fixed;z-index:70;min-width:196px;background:var(--white);border:0.5px solid rgba(47,58,68,0.14);border-radius:12px;
  box-shadow:0 14px 40px rgba(47,58,68,0.18);padding:6px;display:flex;flex-direction:column;}
.row-menu button,.row-menu a{background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font-ui);font-size:13px;color:var(--slate);
  padding:8px 10px;border-radius:8px;text-decoration:none;display:block;}
.row-menu button:hover,.row-menu a:hover{background:var(--slate-06);}
.row-menu button.danger{color:#9c3b3b;}
.row-menu button[disabled]{color:var(--slate-20);cursor:default;}
.row-menu button[disabled]:hover{background:none;}
.row-menu-trenner{height:1px;background:rgba(47,58,68,0.08);margin:5px 6px;}
.row-menu-titel{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-20);padding:6px 10px 3px;}
.row-menu select{width:100%;font-size:12.5px;}

/* Schwebende Auswahlleiste, gleiche Optik wie im Artikelbereich. */
.doc-bulk{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--slate);color:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 12px 34px rgba(47,58,68,0.28);min-width:min(520px,92vw);}
.doc-bulk[hidden]{display:none;}
.doc-bulk-n{font-size:12.5px;color:rgba(255,255,255,0.82);white-space:nowrap;}
.doc-bulk .art-mini{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);color:#fff;}
.doc-bulk .art-mini:hover{background:rgba(255,255,255,0.18);}
.doc-bulk .art-spacer{flex:1;}

/* Fristenliste */
.dl-row{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:0.5px solid rgba(47,58,68,0.08);}
.dl-row:last-child{border-bottom:none;}
.dl-when{font-size:12px;font-weight:600;min-width:150px;flex:none;font-variant-numeric:tabular-nums;}
.dl-when.overdue{color:#b53d2e;} .dl-when.soon{color:#b6794e;} .dl-when.ok{color:var(--slate-35);}
.dl-name{flex:1;min-width:0;font-size:13.5px;}
.dl-note{font-size:12px;color:var(--slate-50,#9aa3ab);}

@media(max-width:1100px){
  .doc-layout{grid-template-columns:minmax(0,1fr);gap:12px;}
  /* Die Ordnerspalte wird EINE seitlich rollbare Chip-Zeile. Die frühere
     Pill-Wolke aus 13 umbrechenden Chips füllte auf dem Handy den halben
     Bildschirm, bevor das erste Dokument zu sehen war. */
  .doc-nav-card{position:static;padding:10px 12px;}
  .doc-nav-card .kat-nav-head{display:none;}
  .doc-nav{max-height:none;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:7px;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .doc-nav::-webkit-scrollbar{display:none;}
  .doc-nav-gruppe{display:none;}
  .doc-nav-row{width:auto;flex:none;padding:7px 13px;border-radius:999px;white-space:nowrap;
    border:0.5px solid var(--slate-10);background:var(--white);}
  .doc-nav-row.active{border-color:transparent;}
  .doc-nav-toggle{flex:none;width:auto;white-space:nowrap;margin:0 4px;}
}

/* ---- Handy: dieselbe Liste, nur enger. ---- */
@media(max-width:720px){
  .doc-layout .art-card-head{flex-wrap:wrap;align-items:flex-start;}
  .doc-layout .art-head-actions{flex:none;width:100%;}
  .doc-layout .art-head-actions #docSearch{max-width:none;}
  .doc-row{gap:10px;align-items:flex-start;}
  .doc-row .doc-check{margin-top:10px;}
  .doc-ico{width:34px;height:34px;font-size:8px;}
  /* Lange Dateinamen: zwei Zeilen statt Abschneiden — auf 375 Pixel steckt
     das Unterscheidende oft am Ende des Namens. */
  .doc-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow-wrap:anywhere;}
  /* Statt „375 K…" darf die Infozeile zwei Zeilen lang werden. */
  .doc-info{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow-wrap:anywhere;}
  .doc-star,.row-menu-btn{padding:7px 9px;font-size:16px;}   /* Trefferfläche für den Finger */
  /* Auswahlleiste: volle Breite mit Rand, Knöpfe dürfen umbrechen —
     mittig zentriert lief sie auf 375 Pixel über den Bildschirmrand. */
  .doc-bulk{left:10px;right:10px;transform:none;min-width:0;flex-wrap:wrap;gap:8px;}
  .doc-bulk .art-mini{margin-right:0;}
  .dl-row{flex-wrap:wrap;gap:3px 12px;}
  .dl-when{min-width:0;}
  /* Langer Dateiname ohne Umbruchstelle lief sonst über den Kartenrand. */
  .dl-name{flex-basis:100%;overflow-wrap:anywhere;}
  .dl-note{overflow-wrap:anywhere;}
}

/* ---------- ARTIKELÜBERSICHT: WARENGRUPPEN, KACHELN, SAMMELLEISTE ---------- */
/* Zweispaltig: Warengruppen bleiben stehen, die Liste daneben wechselt. */
/* minmax(0,1fr): ohne das setzt die breite Artikeltabelle die Mindestbreite
   der Spalte und sprengt das Raster, statt in ihrem eigenen Rahmen zu rollen. */
.kat-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:18px;}
.kat-nav-card{padding:16px 4px 10px;position:sticky;top:18px;}
.kat-nav-head{padding:0 16px 10px;}
.kat-nav-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-35);}
.kat-nav-sub{font-size:11.5px;color:var(--slate-35);margin-top:4px;}
/* Bewusst kein <nav>: die öffentliche Website hat eine globale nav-Regel mit
   eigener Polsterung und Ausrichtung, die diese Liste sonst zusammenstaucht. */
.kat-nav{display:flex;flex-direction:column;align-items:stretch;max-height:60vh;overflow-y:auto;padding:0;}
.kat-nav-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:8px 16px;font-family:var(--font-ui);font-size:13px;color:var(--slate);border-radius:8px;transition:background .14s;}
.kat-nav-row:hover{background:var(--slate-06);}
.kat-nav-row.active{background:rgba(203,187,163,0.20);color:var(--slate);font-weight:550;}
.kat-nav-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kat-nav-count{flex:none;font-size:11.5px;color:var(--slate-35);font-variant-numeric:tabular-nums;}
.kat-nav-row.active .kat-nav-count{color:var(--slate);}
.kat-nav-dot{width:6px;height:6px;border-radius:50%;flex:none;}
.kat-nav-dot.gut{background:#3b7a4b;}
.kat-nav-dot.mittel{background:#b6794e;}
.kat-nav-dot.schlecht{background:#b53d2e;}
.kat-nav-leer{padding:10px 16px;font-size:12.5px;color:var(--slate-35);}

/* Kennzahlen als Filterknöpfe: gleiche Optik wie die Karten, aber klickbar. */
.art-kpi{cursor:pointer;text-align:left;font-family:var(--font-ui);border:0.5px solid rgba(47,58,68,0.08);}
.art-kpi.active{background:linear-gradient(160deg,#39444e 0%,#2F3A44 100%);border-color:transparent;}
.art-kpi.active .dash-kpi-num{color:#fff;}
.art-kpi.active .dash-kpi-lbl{color:rgba(255,255,255,0.62);}

/* Die Katalogkarte steht in der schmaleren Spalte: Suche darf schrumpfen,
   damit Statuswahl, Umschalter und Knopf in einer Zeile bleiben. */
.kat-layout .art-card-head{flex-wrap:nowrap;align-items:center;}
.kat-layout .art-head-actions{flex:1;justify-content:flex-end;}
.kat-layout .art-head-actions .in-sm{min-width:0;}
.kat-layout .art-head-actions #catSearch{flex:1;min-width:130px;max-width:290px;}
.kat-layout .art-head-actions #catStatus{width:auto;flex:none;}
@media(max-width:1240px){
  .kat-layout .art-card-head{flex-wrap:wrap;align-items:flex-start;}
  .kat-layout .art-head-actions{flex:none;}
}

/* In der schmaleren Katalogspalte stapeln sich die Zeilenaktionen sonst
   untereinander und blähen jede Zeile auf 160px auf. Hier bleiben sie in einer
   Zeile, die Tabelle rollt stattdessen in ihrem eigenen Rahmen. */
.kat-layout .art-row-actions{flex-wrap:nowrap;white-space:nowrap;}
.kat-layout .art-table{min-width:920px;}

/* Aktiver Warengruppenfilter über der Liste, mit Rückweg an derselben Stelle. */
.kat-filterbar{display:flex;align-items:center;gap:8px;padding:2px 0 12px;}
.kat-filterlbl{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-35);}
.kat-filterbar .art-cat-tag{margin-left:0;font-size:12px;padding:4px 10px;display:inline-flex;align-items:center;gap:8px;}
.kat-filterbar .art-cat-tag button{background:none;border:0;cursor:pointer;color:var(--slate-35);font-size:14px;line-height:1;padding:0;}
.kat-filterbar .art-cat-tag button:hover{color:var(--slate);}

/* Umschalter Liste / Kacheln */
.art-viewswitch{display:inline-flex;background:var(--slate-06);border-radius:9px;padding:2px;}
.art-viewbtn{background:none;border:0;cursor:pointer;font-family:var(--font-ui);font-size:12px;color:var(--slate-35);padding:5px 11px;border-radius:7px;}
.art-viewbtn.active{background:var(--white);color:var(--slate);box-shadow:0 1px 2px rgba(47,58,68,0.08);}

/* Kachelansicht: Bild zuerst, darunter die Arbeitsangaben. */
.art-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding:4px 0 2px;}
.art-tile{background:var(--white);border:0.5px solid rgba(47,58,68,0.10);border-radius:14px;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease;text-decoration:none;color:inherit;}
.art-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(47,58,68,0.10);}
.art-tile-img{aspect-ratio:4/3;background:var(--ivory);display:grid;place-items:center;overflow:hidden;}
.art-tile-img img{width:100%;height:100%;object-fit:cover;}
.art-tile-img span{font-size:11px;color:var(--slate-20);}
.art-tile-img{position:relative;}
.art-tile-check{position:absolute;top:8px;left:8px;cursor:pointer;width:16px;height:16px;
  accent-color:var(--slate);background:var(--white);border-radius:4px;}
.art-tile-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:5px;}
.art-tile-name{font-size:13px;font-weight:550;letter-spacing:-.01em;line-height:1.3;}
.art-tile-meta{font-size:11px;color:var(--slate-35);font-variant-numeric:tabular-nums;}
.art-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;}
.art-tile-preis{font-size:13px;font-weight:550;font-variant-numeric:tabular-nums;}

/* Seitenweise blättern */
.art-pager{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px 0 4px;}
.art-pager-info{font-size:12.5px;color:var(--slate-35);font-variant-numeric:tabular-nums;}
.art-card-foot{display:flex;align-items:center;gap:10px;padding-top:14px;margin-top:6px;border-top:0.5px solid rgba(47,58,68,0.08);}

/* Auswahl und Sammelleiste */
.art-checkcell{width:34px;}
.art-table td.art-checkcell input,.art-table th.art-checkcell input{cursor:pointer;}
.art-bulkbar{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;
  background:var(--slate);color:#fff;border-radius:14px;padding:10px 14px;box-shadow:0 12px 34px rgba(47,58,68,0.28);min-width:min(560px,92vw);}
.art-bulk-count{font-size:12.5px;color:rgba(255,255,255,0.82);font-variant-numeric:tabular-nums;white-space:nowrap;}
.art-bulkbar .btn-ghost{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.22);color:#fff;}
.art-bulkbar .btn-ghost:hover{background:rgba(255,255,255,0.18);}

/* Auswertungskarten unter dem Katalog */
.kat-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.kat-hbars .hbar-row{cursor:pointer;border-radius:8px;padding-left:6px;padding-right:6px;}
.kat-hbars .hbar-row:hover{background:var(--slate-06);}
.kat-todo{display:flex;flex-direction:column;}
.kat-todo-row{display:flex;align-items:center;gap:11px;padding:9px 2px;border-top:0.5px solid rgba(47,58,68,0.08);text-decoration:none;color:inherit;}
.kat-todo-row:first-child{border-top:0;}
.kat-todo-row:hover{background:var(--slate-06);border-radius:8px;}
.kat-todo-img{width:36px;height:36px;border-radius:8px;flex:none;background:var(--ivory);display:grid;place-items:center;overflow:hidden;}
.kat-todo-img img{width:100%;height:100%;object-fit:cover;}
.kat-todo-main{flex:1;min-width:0;}
.kat-todo-name{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.kat-todo-fehlt{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px;}
.kat-todo-tag{font-size:10px;color:var(--slate-35);background:var(--slate-06);border-radius:5px;padding:1px 6px;}
.kat-todo-val{flex:none;}
.kat-todo-leer{padding:14px 2px;font-size:13px;color:var(--slate-35);}

/* display: … schlägt das hidden-Attribut, deshalb hier ausdrücklich zurücknehmen.
   Sonst stehen Filterleiste und Auswahlleiste dauerhaft auf dem Schirm. */
.kat-filterbar[hidden],.art-bulkbar[hidden],.art-tiles[hidden],.art-pager[hidden],.art-table-wrap[hidden]{display:none;}

@media(max-width:1100px){
  /* Auch einspaltig braucht es minmax(0,…): sonst setzt die breite Tabelle
     wieder die Mindestbreite und die ganze Seite läuft seitlich über. */
  .kat-layout{grid-template-columns:minmax(0,1fr);}
  .kat-nav-card{position:static;}
  .kat-nav{max-height:none;flex-direction:row;flex-wrap:wrap;overflow-x:auto;}
  .kat-nav-row{width:auto;flex:none;}
  .kat-cols{grid-template-columns:1fr;}
}

/* Verlauf auf der Artikel-Detailseite: dieselben Regeln wie im Dokumente-Protokoll,
   dort liegen sie nur inline auf der Seite und erreichen die Detailseite nicht. */
.doc-log-list{max-height:52vh;overflow-y:auto;margin:4px 0 2px;text-align:left;}
.doc-log-row{padding:9px 2px;border-bottom:1px solid var(--line,#eee7db);}
.doc-log-row:last-child{border-bottom:none;}
.doc-log-title{font-size:13.5px;color:var(--ink,#22242a);}
.doc-log-meta{font-size:11.5px;color:var(--slate-50,#9aa3ab);margin-top:2px;}
.doc-log-empty{padding:14px 2px;color:var(--slate-50,#9aa3ab);font-size:13px;}

.art-status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;}
.art-status-dot.draft{background:#c99a3a;} .art-status-dot.review{background:#3a6ea5;} .art-status-dot.live{background:#2e7d52;}

/* Zweite Zeile je Position: EAN, VE und Staffelpreise (reine Angebotsangaben). */
.li-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:5px;padding-left:2px;}
.li-sub .in{padding:6px 8px;font-size:11.5px;}
.li-sub-lbl{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--taupe);flex:0 0 auto;}
.li-sub .it-ean{width:128px;}
.li-sub .it-ve{width:104px;}
.li-sub-pair{display:flex;gap:4px;}
.li-sub-pair .in{width:74px;text-align:right;}
/* Schalter, welche optionalen Angaben im fertigen Angebot erscheinen. */
.fx-toggles{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:12px;padding:9px 11px;background:var(--mist,#f4f2ee);border-radius:8px;}
.fx-toggles label{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--slate-35,#5b6570);cursor:pointer;}
.fx-toggles input{accent-color:var(--navy,#2f3b52);}
.fx-toggles-lbl{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--taupe);margin-right:2px;}
.ed-hint{font-size:11.5px;color:var(--slate-50,#9aa3ab);line-height:1.5;margin-top:6px;}
/* Warnung, wenn ein Staffelpreis unter dem Einkauf liegt. */
.calc-warn{margin-top:10px;padding:10px 12px;border-radius:9px;background:#fbf1f1;color:#9c3b3b;font-size:12px;line-height:1.65;}
.calc-warn b{color:#8a2f2f;}
.li-del{width:30px;height:30px;border:0.5px solid var(--slate-10);background:transparent;color:var(--slate-20);cursor:pointer;font-size:15px;line-height:1;transition:all .2s;}
.li-del:hover{border-color:#9c3b3b;color:#9c3b3b;}
.li-add{margin-top:6px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);background:none;border:0.5px dashed var(--slate-10);padding:11px;width:100%;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;}
.li-add:hover{border-color:var(--taupe);color:var(--slate);}

/* ---------- PDF PREVIEW (A4) ---------- */
.pdf-stage{background:#e7e3dd;padding:36px;overflow-y:auto;max-height:calc(100vh - 57px);display:flex;justify-content:center;align-items:flex-start;}
.pdf-page{background:#fff;width:760px;min-height:1074px;box-shadow:0 12px 48px rgba(47,58,68,0.18);padding:64px 60px;color:var(--slate);font-size:12.5px;}
.pdf-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;}
.pdf-logo{display:flex;align-items:center;}
.pdf-logo-img{height:84px;width:auto;border-radius:8px;display:block;}
.pdf-meta{text-align:right;font-size:12px;line-height:1.7;color:var(--slate-35);}
.pdf-meta .big{font-family:'Playfair Display',serif;font-size:30px;font-weight:300;color:var(--slate);margin-bottom:8px;}
.pdf-parties{display:flex;justify-content:space-between;gap:40px;margin-bottom:28px;font-size:12px;line-height:1.65;}
.pdf-parties .lbl2{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--taupe);margin-bottom:6px;}
.pdf-intro{font-size:12.5px;line-height:1.7;color:var(--slate);margin:6px 0 22px;white-space:pre-line;}
.pdf-table{width:100%;border-collapse:collapse;margin-bottom:20px;}
.pdf-table th{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);text-align:left;padding:0 8px 10px;border-bottom:1px solid var(--slate);font-weight:600;}
.pdf-table th.r,.pdf-table td.r{text-align:right;}
.pdf-table td{padding:11px 8px;border-bottom:0.5px solid var(--slate-10);vertical-align:top;font-size:12px;line-height:1.5;}
.pdf-table .desc b{font-weight:500;}
.pdf-table .desc span{color:var(--slate-20);font-size:11px;}
.pdf-tot{margin-left:auto;width:300px;font-size:12.5px;}
.pdf-tot .row{display:flex;justify-content:space-between;padding:7px 0;color:var(--slate-35);}
.pdf-tot .row.grand{border-top:1px solid var(--slate);margin-top:6px;padding-top:12px;font-family:'Inter',sans-serif;font-size:17px;font-weight:600;color:var(--slate);}
.pdf-terms{margin-top:36px;padding-top:18px;border-top:0.5px solid var(--slate-10);font-size:11px;line-height:1.7;color:var(--slate-35);}
/* Fußzeile: Firmen-, Register- und Bankdaten, dreispaltig wie im Geschäftsbrief. */
.pdf-foot{display:flex;gap:26px;margin-top:30px;padding-top:12px;border-top:0.5px solid var(--slate-10);
  font-size:8.5px;line-height:1.6;color:var(--slate-35);}
.pdf-foot-col{flex:1;min-width:0;}
.pdf-foot-col span{color:var(--taupe);}
.pdf-foot b{color:var(--slate);font-weight:600;}
.sx-foot{margin-top:auto;}
.sx-cardpage,.sx-final{display:flex;flex-direction:column;}
.pdf-tiers{color:var(--taupe);font-size:9.5px;}
.pdf-igl{margin-top:10px;font-size:10.5px;color:var(--slate-35);font-style:italic;text-align:right;}
/* Katalog: Aufforderung zur Auswahl anstelle der Gesamtsumme. */
.pdf-auswahl{margin-top:26px;padding:14px 16px;background:var(--mist,#f4f2ee);border-radius:10px;font-size:11.5px;line-height:1.7;color:var(--slate-35);}
.pdf-auswahl b{color:var(--slate);}

/* ---------- Mehrseitige Angebote (Sortiment-Modus) ---------- */
#pdfDoc{display:flex;flex-direction:column;gap:28px;align-items:center;}
#pdfDoc.pdf-export{gap:0;}
/* Während des PDF-Exports gelten immer die A4-Maße — auch wenn der Bildschirm
   schmal ist und die Mobil-Regeln die Vorschau gerade verkleinert haben. */
#pdfDoc.pdf-export .pdf-page{width:760px;min-height:1074px;padding:64px 60px;}
.pdf-page-brk{page-break-after:always;break-after:page;}
/* Produktbild in der klassischen Tabelle */
.pdf-desc-flex{display:flex;gap:10px;align-items:flex-start;}
.pdf-item-img{width:46px;height:46px;object-fit:contain;border:0.5px solid var(--slate-10);border-radius:6px;background:#fff;flex:0 0 auto;}
/* Bild-Hinweis in der Positionszeile des Editors */
.li-thumb{width:30px;height:30px;object-fit:contain;border:0.5px solid var(--slate-10);border-radius:6px;background:#fff;flex:0 0 auto;}
/* Produktbild-Spalte im Artikelkatalog */
.art-thumb-cell{width:44px;}
.art-thumb{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;object-fit:contain;border:0.5px solid var(--slate-10);border-radius:7px;background:#fff;}
.art-thumb-empty{color:var(--slate-20);font-size:13px;background:var(--mist,#f4f2ee);}

/* Sortiment: Titelblatt */
.sx-cover{display:flex;flex-direction:column;justify-content:space-between;}
.sx-cover-top{display:flex;}
.sx-eyebrow{font-size:10px;letter-spacing:2.5px;text-transform:uppercase;color:var(--taupe);margin-bottom:18px;}
.sx-title{font-family:'Playfair Display',serif;font-size:40px;line-height:1.15;font-weight:400;color:var(--slate);margin-bottom:14px;}
.sx-cover-contact{font-size:13px;color:var(--slate-35);margin-bottom:4px;}
.sx-cover-meta{font-size:11.5px;color:var(--taupe);margin-bottom:26px;}
.sx-cover-intro{font-size:12.5px;line-height:1.75;color:var(--slate-35);max-width:480px;}
.sx-cover-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;font-size:11px;color:var(--slate-35);border-top:0.5px solid var(--slate-10);padding-top:16px;}
.sx-claim{font-family:'Playfair Display',serif;font-style:italic;font-size:14px;color:var(--taupe);}

/* Sortiment: Kartenseiten */
.sx-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px;}
.sx-head .pdf-logo-img{height:44px;border-radius:6px;}
.sx-head-meta{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);}
.sx-card{border:0.5px solid var(--slate-10);border-radius:12px;padding:22px;margin-bottom:22px;page-break-inside:avoid;break-inside:avoid;}
.sx-card-head{display:flex;gap:20px;align-items:flex-start;}
.sx-card-img{flex:0 0 168px;height:168px;border:0.5px solid var(--slate-10);border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.sx-card-img img{max-width:100%;max-height:100%;object-fit:contain;}
.sx-card-body{flex:1;min-width:0;}
.sx-card-pos{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--taupe);margin-bottom:6px;}
.sx-card-title{font-family:'Playfair Display',serif;font-size:19px;line-height:1.25;color:var(--slate);margin-bottom:6px;}
.sx-card-detail{font-size:11px;line-height:1.6;color:var(--slate-35);margin-bottom:14px;}
.sx-card-price{display:flex;gap:34px;align-items:flex-end;}
.sx-lbl{display:block;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);margin-bottom:3px;}
.sx-price{font-size:19px;font-weight:600;color:var(--slate);}
.sx-price-note{display:block;font-size:9.5px;color:var(--taupe);margin-top:2px;}
.sx-qty{font-size:14px;color:var(--slate);}
.sx-card-boxes{display:flex;gap:14px;margin-top:16px;}
.sx-box{flex:1;background:var(--mist,#f4f2ee);border-radius:9px;padding:12px 14px;}
.sx-box-t{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--taupe);margin-bottom:7px;}
.sx-box-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--slate);padding:2px 0;}

/* Sortiment: Abschlussseite */
.sx-final-title{font-family:'Playfair Display',serif;font-size:26px;color:var(--slate);margin-bottom:18px;}
.sx-recap{margin-bottom:0;}
.sx-cta{margin-top:34px;background:var(--mist,#f4f2ee);border-radius:12px;padding:20px 22px;display:flex;flex-direction:column;gap:6px;}
.sx-cta-t{font-family:'Playfair Display',serif;font-size:17px;color:var(--slate);}
.sx-cta-body{font-size:11.5px;line-height:1.7;color:var(--slate-35);}
.sx-cta .sx-claim{margin-top:6px;}
.pdf-sign{display:flex;gap:40px;margin-top:48px;}
.pdf-sign .box{flex:1;border-top:0.5px solid var(--slate-20);padding-top:8px;font-size:10px;color:var(--slate-20);letter-spacing:0.5px;}
.pdf-sign .box .nm{color:var(--slate);font-style:italic;font-family:'Playfair Display',serif;font-size:15px;}

/* ---------- RESPONSIVE ---------- */
/* hamburger (only mobile) */
.app-burger{display:none;width:38px;height:38px;border:0.5px solid var(--slate-10);border-radius:9px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;padding:0;}
.app-burger span{display:block;width:18px;height:1.8px;background:var(--slate);border-radius:2px;transition:transform .2s,opacity .2s;}
body.nav-open .app-burger span:nth-child(1){transform:translateY(5.8px) rotate(45deg);}
body.nav-open .app-burger span:nth-child(2){opacity:0;}
body.nav-open .app-burger span:nth-child(3){transform:translateY(-5.8px) rotate(-45deg);}

@media (max-width: 980px){
  body:has(.app-topbar){padding-left:0;}
  .app-topbar{position:sticky;top:0;left:auto;bottom:auto;width:auto;height:auto;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:10px 16px;border-right:none;border-bottom:0.5px solid rgba(47,58,68,0.08);box-shadow:0 2px 12px rgba(47,58,68,0.05);overflow:visible;}
  .app-brand{padding:0;order:1;}
  .app-brand img{height:34px;}
  .app-burger{display:inline-flex;order:2;margin-left:auto;}
  .app-topbar .app-nav{order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:2px;margin-top:6px;display:none;}
  .app-actions{order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:8px;margin-top:4px;padding-top:10px;border-top:0.5px solid var(--slate-06);display:none;}
  .app-actions #userEmail{margin-bottom:2px;text-align:left;}
  body.nav-open .app-topbar .app-nav{display:flex;}
  body.nav-open .app-actions{display:flex;}
  /* Menü offen: vollflächiges, in sich scrollbares Overlay. Sonst bleibt der sticky-Balken
     oben angepinnt und der untere Teil (Finanzen/System + Abmelden) ist nicht erreichbar,
     wenn das Menü höher als der Bildschirm ist. */
  body.nav-open{overflow:hidden;}
  body.nav-open .app-topbar{
    position:fixed;inset:0;
    height:100vh;height:100dvh;max-height:100dvh;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    align-content:flex-start;
    background:#fff;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  /* Schließen-Button bleibt beim Scrollen oben rechts erreichbar */
  body.nav-open .app-burger{position:fixed;top:14px;right:16px;z-index:5;box-shadow:0 1px 6px rgba(47,58,68,0.12);}
  .app-nav a{padding:11px 12px;font-size:13.5px;}
  .builder{grid-template-columns:1fr;min-height:auto;}
  .editor{max-height:none;border-right:none;border-bottom:0.5px solid var(--slate-10);}
  .pdf-stage{max-height:none;padding:20px;}
  .pdf-page{width:100%;min-height:auto;padding:32px 24px;}
}
/* general mobile tweaks */
@media (max-width: 560px){
  .art-wrap{padding:20px 14px 64px;gap:18px;}
  .dash-hero{padding:0;}
  .dash-title{font-size:24px;letter-spacing:-0.5px;}
  .art-card{padding:18px 16px 16px;border-radius:14px;}
  .art-card-head{margin-bottom:16px;gap:12px;}
  .art-head-actions{width:100%;}
  .art-head-actions .in-sm{min-width:0;width:100%;}
  .ed-row,.inv-grid,.cust-grid,.sk-grid,.dash-cols{grid-template-columns:1fr;}
  .art-modal{width:94vw;max-height:90vh;}
  .art-modal-body{padding:18px 16px 20px;}
  .pc-foot,.art-import-bar{flex-wrap:wrap;}
  .dash-kpi-num{font-size:26px;}
}
@media (max-width: 560px){
  .app-topbar{padding:12px 16px;flex-wrap:wrap;gap:10px;}
  .app-brand .s{display:none;}
  .li-head,.li-row{grid-template-columns:1fr 40px 52px 42px 42px 24px;gap:4px;}
  .li-row .in,.li-sub .in{font-size:16px;min-width:0;padding:8px 6px;}
  .li-del{width:24px;height:24px;font-size:13px;}
  .ed-row{grid-template-columns:1fr;}
}

/* ---------- BACKEND NAV ---------- */
.app-nav{display:flex;flex-direction:column;gap:3px;align-items:stretch;margin-top:6px;background:transparent;padding:0;border:0;position:static;backdrop-filter:none;}
.app-nav a{font-size:13.5px;letter-spacing:-0.2px;text-transform:none;font-weight:500;color:var(--slate-35);text-decoration:none;padding:9px 12px;border-radius:8px;transition:background .15s,color .15s;}
.app-nav a:hover{color:var(--slate);background:var(--slate-06);}
.app-nav a.active{color:#fff;background:var(--slate);font-weight:600;box-shadow:0 1px 3px rgba(47,58,68,0.18);}
.app-nav-group{display:flex;flex-direction:column;gap:3px;}
.app-nav-group + .app-nav-group{margin-top:15px;}
.app-nav-label{font-size:10px;font-weight:600;letter-spacing:0.7px;text-transform:uppercase;color:var(--slate-20);padding:0 12px 5px;}
.app-nav-label.bpc-collapsible{display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:pointer;user-select:none;padding-top:4px;padding-bottom:6px;border-radius:6px;transition:color .15s,background .15s;}
.app-nav-label.bpc-collapsible:hover{color:var(--slate-35);background:var(--slate-06);}
.app-nav-chev{width:11px;height:11px;flex-shrink:0;opacity:.65;transition:transform .2s var(--ease);}
.app-nav-group.collapsed .app-nav-chev{transform:rotate(-90deg);}
.app-nav-group.collapsed > a{display:none;}
.dash-hero-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.dash-hero-btn{flex:none;}
/* ---------- LAGER / BESTAND ---------- */
.st-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;}
.st-green{background:#5a9b6b;}
.st-amber{background:#c9a23f;}
.st-red{background:#c0564b;}
.st-inline{font-weight:500;color:var(--slate);}
.st-inline.low{color:#c0564b;font-weight:600;}
.stk-stats{display:flex;gap:10px;margin-bottom:18px;}
.stk-stat{flex:1;background:var(--ivory);border:0.5px solid rgba(47,58,68,0.08);border-radius:12px;padding:13px 14px;text-align:center;}
.stk-stat-num{font-family:'Inter',sans-serif;font-size:24px;font-weight:600;color:var(--slate);letter-spacing:-0.5px;}
.stk-stat-lbl{font-size:10.5px;color:var(--slate-35);text-transform:uppercase;letter-spacing:0.5px;margin-top:3px;}
.stk-stat.accent{background:var(--slate);border-color:var(--slate);}
.stk-stat.accent .stk-stat-num{color:#fff;}
.stk-stat.accent .stk-stat-lbl{color:rgba(255,255,255,0.7);}

/* ---------- ARTICLE IMPORT PAGE ---------- */
.art-wrap{max-width:1080px;margin:0 auto;padding:32px 28px 80px;display:flex;flex-direction:column;gap:28px;}
.art-card{background:var(--white);border:0.5px solid rgba(47,58,68,0.08);border-radius:18px;padding:28px 28px 26px;box-shadow:0 1px 2px rgba(47,58,68,0.04),0 10px 34px rgba(47,58,68,0.05);}
.art-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px;}
.art-h1{font-family:'Inter',sans-serif;font-weight:500;font-size:16px;letter-spacing:-0.1px;color:var(--slate);margin:0 0 5px;}
.art-sub{font-size:13px;color:var(--slate-35);line-height:1.6;font-weight:300;margin:0;max-width:560px;}
.art-count{font-family:'Inter',sans-serif;font-size:13px;color:var(--taupe);font-weight:500;margin-left:4px;}
.art-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.art-head-actions .in-sm{min-width:220px;}

.art-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:38px 24px;border:1.5px dashed var(--slate-20);border-radius:14px;background:var(--ivory);color:var(--slate-35);cursor:pointer;transition:all .18s;}
.art-drop:hover,.art-drop.drag{border-color:var(--taupe);background:#fff;color:var(--slate);}
.art-drop svg{color:var(--taupe);}
.art-drop-main{font-size:14px;color:var(--slate);}
.art-drop-main span{color:var(--taupe);text-decoration:underline;}
.art-drop-sub{font-size:11.5px;color:var(--slate-35);}
.art-filehint{font-size:12.5px;color:var(--slate-35);margin-top:12px;min-height:16px;}
.art-drop-sm{padding:20px 18px;border-radius:12px;gap:6px;}
.art-drop-sm svg{color:var(--taupe);}
.ct-file{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:11px 14px;border:0.5px solid rgba(47,58,68,0.12);border-radius:11px;background:var(--ivory);margin-bottom:10px;}
.ct-file svg{color:var(--taupe);flex:none;}
.ct-file-name{flex:1 1 160px;min-width:0;font-size:13px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ct-doc-link{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--taupe);text-decoration:none;font-weight:500;}
.ct-doc-link:hover{text-decoration:underline;}
.ct-doc-link svg{flex:none;}
.att-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.att-item{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:9px 12px;border:0.5px solid rgba(47,58,68,0.12);border-radius:10px;background:var(--ivory);}
.att-item svg{color:var(--taupe);flex:none;}
.att-item.pending{opacity:0.75;}
.att-name{flex:1 1 150px;min-width:0;font-size:13px;color:var(--slate);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ---------- BESTELLWESEN ---------- */
.art-modal.art-modal-wide{width:680px;max-width:94vw;}
.po-badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:0.2px;}
.po-draft{background:var(--slate-06);color:var(--slate-35);}
.po-ordered{background:rgba(47,58,68,0.12);color:var(--slate);}
.po-partial{background:rgba(201,162,63,0.18);color:#8a6d18;}
.po-received{background:rgba(90,155,107,0.18);color:#3f6b4d;}
.po-cancelled{background:rgba(192,86,75,0.14);color:#a8443a;}
/* Auftrags-Status: bisher ohne Farbe (fielen als nackter Text durch) */
.po-confirmed{background:rgba(47,58,68,0.12);color:var(--slate);}
.po-shipped{background:rgba(90,155,107,0.18);color:#3f6b4d;}
.po-items{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;}
.po-item{display:flex;gap:8px;align-items:center;}
.po-i-name{flex:1;min-width:0;}
.po-i-qty{width:62px;flex:none;}
.po-i-ek{width:92px;flex:none;}
.po-i-sum{width:88px;flex:none;text-align:right;font-size:13px;color:var(--slate);}
.po-i-del{border:0;background:transparent;color:var(--slate-35);font-size:20px;line-height:1;cursor:pointer;width:24px;flex:none;border-radius:6px;}
.po-i-del:hover{color:#c0564b;background:var(--slate-06);}
.po-recv{font-size:11px;color:var(--taupe);font-weight:600;white-space:nowrap;}
.po-additem{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.po-additem .in-sm{max-width:240px;}
.po-net{font-size:14px;color:var(--slate);}
/* ---------- MARKTPLÄTZE / CHANNELS ---------- */
.ch-cards{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px;}
.ch-card{text-align:left;background:#fff;border:0.5px solid rgba(47,58,68,0.10);border-radius:14px;padding:14px 16px;min-width:220px;cursor:pointer;transition:box-shadow .15s,border-color .15s;font-family:'Inter',sans-serif;}
.ch-card:hover{box-shadow:0 6px 18px rgba(47,58,68,0.08);}
.ch-card.active{border-color:var(--slate);box-shadow:0 1px 3px rgba(47,58,68,0.18);}
.ch-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.ch-name{font-size:14px;font-weight:600;color:var(--slate);}
.ch-type{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;padding:2px 7px;border-radius:999px;background:var(--slate-06);color:var(--slate-35);white-space:nowrap;}
.ch-type-mock{background:rgba(140,130,117,0.16);color:var(--taupe);}
.ch-card-stats{display:flex;gap:14px;font-size:12.5px;color:var(--slate-35);margin-bottom:6px;}
.ch-card-sync{font-size:11px;color:var(--slate-20);}
.ch-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
/* ---------- FINANZPLANUNG ---------- */
.dev-pos{color:#3f6b4d;font-weight:500;}
.dev-neg{color:#c0564b;font-weight:500;}
.pa-current td{background:var(--ivory);}
.liq-start td{background:var(--ivory);}
.liq-neg td:last-child{background:rgba(192,86,75,0.06);}
.liq-chart{display:flex;align-items:flex-end;gap:6px;height:150px;margin:8px 0 22px;}
.liq-col{flex:1;display:flex;flex-direction:column;align-items:stretch;height:100%;min-width:0;}
.liq-bar-wrap{flex:1;display:flex;align-items:flex-end;}
.liq-bar{width:62%;margin:0 auto;background:var(--slate);border-radius:3px 3px 0 0;min-height:2px;transition:height .2s;}
.liq-bar.neg{background:#c0564b;border-radius:0 0 3px 3px;}
.liq-lbl{font-size:10px;color:var(--slate-35);text-align:center;margin-top:5px;height:13px;overflow:hidden;}
.pl-in{background:var(--white);}
/* Liquiditäts-Sparkline (Szenarien) */
.liq-chart{display:block;height:auto;margin:10px 0 6px;}
.liq-l-base{fill:none;stroke:var(--slate);stroke-width:2;vector-effect:non-scaling-stroke;}
.liq-l-best{fill:none;stroke:#5a9b6b;stroke-width:1.3;opacity:0.65;vector-effect:non-scaling-stroke;}
.liq-l-worst{fill:none;stroke:#c0564b;stroke-width:1.3;opacity:0.65;vector-effect:non-scaling-stroke;}
.liq-warn{stroke:#c9a23f;stroke-width:1;stroke-dasharray:5 3;vector-effect:non-scaling-stroke;}
.liq-zeroline{stroke:var(--slate-20);stroke-width:1;vector-effect:non-scaling-stroke;}
.liq-xlabels{display:flex;justify-content:space-between;font-size:9.5px;color:var(--slate-35);margin-top:2px;}
.liq-xlabels span{flex:1;text-align:center;}
.liq-legend{display:flex;gap:16px;font-size:11px;color:var(--slate-35);margin:4px 0 18px;}
.liq-legend .lg{display:flex;align-items:center;gap:5px;}
.liq-legend .lg::before{content:"";width:14px;height:2px;border-radius:2px;display:inline-block;}
.lg-base::before{background:var(--slate);height:3px;}
.lg-best::before{background:#5a9b6b;}
.lg-worst::before{background:#c0564b;}
.lg-warn::before{background:#c9a23f;height:0;border-top:2px dashed #c9a23f;}

/* Kostenarten — „Wofür geht das Geld?" */
.cat-split{display:flex;gap:30px;flex-wrap:wrap;margin-top:6px;}
.cat-col{flex:1;min-width:250px;}
.cat-col-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--slate);font-weight:600;border-bottom:0.5px solid var(--slate-10);padding-bottom:7px;margin-bottom:13px;}
.cat-col-total{font-weight:400;letter-spacing:0;text-transform:none;font-size:11.5px;color:var(--slate-20);}
.cat-list{display:flex;flex-direction:column;gap:13px;}
.cat-row-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px;color:var(--slate);}
.cat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52%;}
.cat-val{white-space:nowrap;font-variant-numeric:tabular-nums;}
.cat-avg{color:var(--slate-20);font-size:11px;}
.cat-bar{position:relative;height:7px;background:var(--slate-06);border-radius:4px;margin-top:5px;overflow:hidden;}
.cat-bar-fill{position:absolute;left:0;top:0;height:100%;border-radius:4px;min-width:2px;}
.cat-bar-fill.cat-cost{background:#b9786e;}
.cat-bar-fill.cat-income{background:#5a9b6b;}
.cat-share{font-size:10px;color:var(--slate-20);margin-top:2px;text-align:right;}
.cat-empty{font-size:12.5px;color:var(--slate-20);font-weight:300;padding:10px 0;}
.cat-inline{max-width:158px;font-size:12px;padding-top:5px;padding-bottom:5px;}
@media (max-width:640px){ .cat-name{max-width:46%;} }

/* USt im Cashflow */
.vat-col{display:none;}
.art-table.vat-on .vat-col{display:table-cell;}
.vat-info{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin:2px 0 14px;}
.vat-next{font-size:12.5px;color:var(--slate);font-weight:500;}
.vat-next b{font-weight:600;}
.vat-help{flex-basis:100%;font-size:11px;color:var(--slate-20);font-weight:300;line-height:1.55;}

.art-section-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--slate);font-weight:600;margin:24px 0 12px;}
.art-muted{color:var(--slate-35);font-weight:400;letter-spacing:0;text-transform:none;font-size:12px;}
.art-map{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 18px;}
.art-map-row{display:flex;flex-direction:column;gap:5px;}
.art-map-row .lbl{font-size:11px;letter-spacing:.5px;color:var(--slate-35);}

.art-preview-wrap{overflow-x:auto;border:0.5px solid var(--slate-10);border-radius:10px;}
.art-preview{width:100%;border-collapse:collapse;font-size:12.5px;}
.art-preview th{text-align:left;padding:9px 12px;background:var(--ivory);color:var(--slate);font-weight:600;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;border-bottom:0.5px solid var(--slate-10);white-space:nowrap;}
.art-preview td{padding:8px 12px;border-bottom:0.5px solid var(--slate-06);color:var(--slate-35);max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.art-import-bar{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap;}
.art-check{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--slate-35);cursor:pointer;}
.art-spacer{flex:1;}

.art-table-wrap{overflow-x:auto;}
.art-table{width:100%;border-collapse:collapse;font-size:13px;}
.art-table th{text-align:left;padding:11px 12px;color:var(--slate);font-weight:600;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;border-bottom:0.5px solid var(--slate-10);}
.art-table th.r,.art-table td.r{text-align:right;}
.art-table td{padding:11px 12px;border-bottom:0.5px solid var(--slate-06);color:var(--slate-35);vertical-align:top;}
.art-table td b{color:var(--slate);font-weight:500;}
.art-table .mono{font-variant-numeric:tabular-nums;font-size:12px;color:var(--slate-35);}
.art-desc{font-size:11.5px;color:var(--slate-20);margin-top:2px;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.art-cat-tag{display:inline-block;font-size:10.5px;font-weight:500;color:var(--slate-35);background:var(--sand,#F4F1EA);border:1px solid var(--line,#E7E2D6);border-radius:6px;padding:1px 7px;margin-left:6px;vertical-align:middle;letter-spacing:.02em;}
.due-badge{display:inline-block;font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 7px;margin-left:4px;vertical-align:middle;white-space:nowrap;letter-spacing:.01em;}
.due-badge.due-overdue{color:#a8443a;background:#fbeceb;border:1px solid #f0cfcb;}
.due-badge.due-soon{color:#8a6516;background:#fbf3e2;border:1px solid #eeddb9;}
.due-badge.due-ok{color:var(--slate-35);background:var(--sand,#F4F1EA);border:1px solid var(--line,#E7E2D6);}
.due-badge.due-paid{color:#3b7a4b;background:#e9f4ec;border:1px solid #c8e4d1;}
.due-badge.due-part{color:#5a6572;background:#eef1f4;border:1px solid #dbe1e7;}
/* Zahlweg. Der Einzug ist bewusst ruhig gehalten (blau, nicht rot): dort ist
   nichts zu tun, es muss nur Deckung da sein. Rot bleibt der Überweisung
   vorbehalten, denn nur die verlangt eine Handlung. */
.due-badge.due-einzug{color:#31597d;background:#eaf1f8;border:1px solid #cadcec;}
.due-badge.due-unklar{color:#7a5c1c;background:#fbf6e8;border:1px solid #e8dcbd;}
.pay-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.pay-split h3{font-size:13px;font-weight:600;color:var(--slate);margin:0 0 2px;letter-spacing:.01em;}
.pay-split .pay-col-sub{font-size:11.5px;color:var(--slate-20);margin:0 0 10px;font-weight:300;}
.pay-col-sum{font-size:12.5px;color:var(--slate-35);margin-bottom:8px;}
.pay-col-sum b{font-weight:600;}
@media (max-width:820px){.pay-split{grid-template-columns:1fr;gap:24px;}}
/* Marktplatz-Dashboard */
.mp-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px;}
/* Das Demo-Banner ist absichtlich laut. Es konkurriert nicht mit dem Inhalt,
   es bewacht ihn: niemand soll erfundene Zahlen für echte halten. */
.mp-demo-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px;padding:10px 14px;border-radius:10px;font-size:13px;color:#7a5c1c;background:#fbf3e2;border:1px solid #eeddb9;}
.mp-demo-banner b{letter-spacing:.02em;}
body.mp-demo .dash-title::after{content:" · Demo";font-size:.55em;color:#8a6516;vertical-align:middle;letter-spacing:.04em;}
.mp-chart{overflow-x:auto;}
.mp-chart svg text{font-family:Inter,system-ui,sans-serif;}
/* PDF geht über den Druckdialog: Navigation und Bedienelemente haben auf
   Papier nichts verloren, die Zahlen schon. */
@media print{
  .app-topbar,.mp-filter,.art-head-actions,.feed-hero-actions,#warnCard .art-mini{display:none !important;}
  .art-wrap{margin:0;padding:0;max-width:none;}
  .art-card{break-inside:avoid;box-shadow:none;border:0.5px solid #ddd;}
}
.art-empty{padding:36px;text-align:center;font-size:13px;color:var(--slate-35);font-weight:300;}
.btn-ghost.danger{color:#c0392b;background:rgba(192,57,43,.08);border-color:transparent;}
.btn-ghost.danger:hover{background:rgba(192,57,43,.14);}
/* Genutzt von Radar, Archiv, Feed und Eingangsrechnungen. Angebote und
   Dokumente haben stattdessen einen Hauptknopf + .row-menu, weil dort ab
   vier Aktionen jede Zeile in zwei Reihen umbrach. */
.art-row-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;align-items:center;}
.art-row-actions .art-mini{margin:0;}
.nowrap{white-space:nowrap;}
.art-mini{display:inline-flex;align-items:center;height:30px;font-family:'Inter',sans-serif;font-size:10px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;color:var(--slate);background:none;border:0.5px solid var(--slate-20);border-radius:8px;padding:0 11px;cursor:pointer;margin-right:8px;transition:all .15s;}
.art-mini:hover{background:var(--slate);border-color:var(--slate);color:#fff;}
.art-mini.danger{color:#9c3b3b;border-color:rgba(156,59,59,.35);}
.art-mini.danger:hover{background:#9c3b3b;border-color:#9c3b3b;color:#fff;}

/* price analysis modal */
.art-overlay{position:fixed;inset:0;z-index:120;background:rgba(47,58,68,0.32);display:flex;align-items:center;justify-content:center;padding:24px;}
.art-overlay[hidden]{display:none;}
.art-modal{width:100%;max-width:520px;background:var(--white);border-radius:16px;box-shadow:0 24px 70px rgba(47,58,68,0.22);overflow:hidden;animation:send-in .2s ease;}
.art-modal-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:0.5px solid var(--slate-10);}
.art-modal-title{font-family:var(--font-ui);font-size:18px;font-weight:600;letter-spacing:-0.3px;color:var(--slate);}
.art-modal-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px;}
.pc-article{font-size:13px;color:var(--slate-35);line-height:1.5;}
.pc-article b{color:var(--slate);font-weight:500;}
.pc-search{display:flex;gap:8px;}
.pc-search input{flex:1;min-width:0;}
.pc-search .btn-dark{white-space:nowrap;}
.pc-hint{font-size:11.5px;color:var(--slate-35);margin-top:6px;line-height:1.5;}
.pc-grid{display:grid;grid-template-columns:1fr 1fr 80px;gap:12px;}
.pc-result{border-radius:12px;padding:16px;background:var(--ivory);border:0.5px solid var(--slate-10);}
.pc-placeholder{font-size:12.5px;color:var(--slate-35);text-align:center;padding:6px;}
.pc-verdict{font-family:var(--font-ui);font-size:19px;font-weight:600;letter-spacing:-0.3px;margin-bottom:12px;}
.pc-verdict span{font-family:'Inter',sans-serif;font-size:12px;font-weight:500;letter-spacing:1px;opacity:.8;margin-left:6px;}
.pc-result.good{background:rgba(59,122,75,.08);border-color:rgba(59,122,75,.25);} .pc-result.good .pc-verdict{color:#3b7a4b;}
.pc-result.warn{background:rgba(169,155,136,.12);border-color:rgba(169,155,136,.4);} .pc-result.warn .pc-verdict{color:#8a7a5c;}
.pc-result.bad{background:rgba(156,59,59,.07);border-color:rgba(156,59,59,.25);} .pc-result.bad .pc-verdict{color:#9c3b3b;}
.pc-rows{display:flex;flex-direction:column;gap:6px;}
.pc-row{display:flex;justify-content:space-between;font-size:13px;color:var(--slate-35);}
.pc-row span:last-child{color:var(--slate);font-variant-numeric:tabular-nums;}
.pc-row.strong{padding-top:6px;border-top:0.5px solid var(--slate-10);margin-top:2px;font-weight:500;}
.pc-row.strong span{color:var(--slate);font-size:14px;}
.pc-note{font-size:11px;color:var(--slate-35);line-height:1.5;margin-top:12px;}

/* ---------- INVOICES ---------- */
.seg{display:inline-flex;border:0.5px solid var(--slate-20);border-radius:8px;overflow:hidden;}
.seg button{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--slate-35);background:transparent;border:none;padding:9px 16px;cursor:pointer;transition:all .15s;}
.seg button.active{background:var(--slate);color:#fff;}
.inv-dir{display:inline-block;font-size:10px;letter-spacing:.5px;padding:3px 9px;border-radius:8px;border:0.5px solid var(--slate-10);color:var(--slate-35);}
.inv-dir.outgoing{background:rgba(120,140,170,0.10);color:#566b8a;border-color:rgba(120,140,170,0.2);}
.inv-modal{max-width:940px;}
.inv-pdf{width:100%;height:min(70vh,640px);border:0.5px solid var(--slate-10);border-radius:10px;background:var(--ivory);}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.inv-dup{background:#f6e7c8;color:#8a5a12;border:0.5px solid rgba(138,90,18,0.25);}
.inv-appr{background:#e7eef6;color:#3a5a85;border:0.5px solid rgba(58,90,133,0.25);}
.inv-einv{background:#e9f4ec;color:#2f6b40;border:0.5px solid rgba(47,107,64,0.25);}
.iv-appr-note{font-size:12px;color:#7a5210;background:#f6ecd6;border:0.5px solid rgba(138,90,18,0.28);border-radius:9px;padding:9px 12px;margin-bottom:10px;line-height:1.45;}
#bp-toast-root{position:fixed;top:18px;right:18px;z-index:100000;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.bp-toast{background:var(--slate);color:#fff;font-size:13px;font-weight:500;padding:11px 16px;border-radius:10px;box-shadow:0 8px 28px rgba(47,58,68,0.28);opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s;max-width:340px;}
.bp-toast.show{opacity:1;transform:translateY(0);}
.bp-toast.error{background:#9c3b3b;}
.inv-meta{font-size:11.5px;color:var(--slate-35);line-height:1.6;margin-top:12px;border-top:0.5px solid var(--slate-06);padding-top:10px;}
@media (max-width:560px){ .inv-grid{grid-template-columns:1fr;} }

/* ---------- CONFIRM DIALOG (bpConfirm) ---------- */
.bp-confirm-overlay{position:fixed;inset:0;z-index:200;background:rgba(47,58,68,0.38);display:flex;align-items:center;justify-content:center;padding:24px;animation:bpc-fade .15s ease;}
.bp-confirm-overlay.closing{opacity:0;transition:opacity .12s ease;}
.bp-confirm{width:100%;max-width:380px;background:var(--white);border-radius:16px;box-shadow:0 30px 80px rgba(47,58,68,0.25);padding:28px 28px 22px;animation:send-in .2s ease;}
.bp-confirm-title{font-family:var(--font-ui);font-size:18px;font-weight:600;letter-spacing:-0.3px;color:var(--slate);margin-bottom:8px;}
.bp-confirm-msg{font-size:13.5px;color:var(--slate-35);line-height:1.6;margin-bottom:24px;}
.bp-prompt-input{width:100%;box-sizing:border-box;margin:0 0 20px;}
.dv-konten{margin-top:6px;border-top:0.5px solid var(--line,#e7e9ec);padding-top:10px;}
.dv-konten>summary{cursor:pointer;font-size:12.5px;color:var(--slate-35);list-style:none;user-select:none;}
.dv-konten>summary::-webkit-details-marker{display:none;}
.dv-konten>summary::before{content:'▸ ';color:var(--slate-50,#9aa3ab);}
.dv-konten[open]>summary::before{content:'▾ ';}
.bp-confirm-foot{display:flex;justify-content:flex-end;gap:10px;}
.bp-confirm-danger{padding:11px 22px;border:0.5px solid #9c3b3b;border-radius:8px;background:#9c3b3b;color:#fff;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-family:'Inter',sans-serif;cursor:pointer;transition:background .2s;}
.bp-confirm-danger:hover{background:#812f2f;}
@keyframes bpc-fade{from{opacity:0}to{opacity:1}}

/* ---------- FINANCE ---------- */
.dash-kpis.fin-kpis{grid-template-columns:repeat(4,1fr);}
.dash-kpi-num.pos{color:#3b7a4b;}
.dash-kpi-num.neg{color:#9c3b3b;}
.fin-mlbl{text-transform:none;letter-spacing:0;font-weight:400;color:var(--slate-20);}
.fin-table td{font-variant-numeric:tabular-nums;}
.fin-cost{color:#9c3b3b;}
.fin-bal{font-weight:500;}
.fin-bal.pos{color:#3b7a4b;} .fin-bal.neg{color:#9c3b3b;}
.fin-open{color:var(--taupe);}
.fin-sources{font-size:11.5px;color:var(--slate-35);line-height:1.6;padding-top:14px;margin-top:14px;border-top:0.5px solid var(--slate-06);}
.fin-book .skr-cell{min-width:250px;}
.skr-sel{width:100%;font-size:12px;padding:8px 10px;}
.skr-sel.set{border-color:rgba(59,122,75,.45);background:rgba(59,122,75,.04);}
.fin-tag{display:inline-block;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--taupe);border:0.5px solid var(--taupe-30,rgba(169,155,136,.4));border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:middle;}

/* ---------- ARCHIVE TABS ---------- */
.arch-tabs{display:flex;gap:2px;border-bottom:0.5px solid var(--slate-10);margin-bottom:18px;flex-wrap:wrap;}
.arch-tab{font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--slate-35);background:none;border:none;padding:13px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;}
.arch-tab:hover{color:var(--slate);}
.arch-tab.active{color:var(--slate);border-bottom-color:var(--taupe);font-weight:500;}
.arch-tab .n{font-size:10px;color:var(--taupe);margin-left:5px;font-weight:600;}
@media (max-width:900px){ .fin-kpis{grid-template-columns:repeat(2,1fr);} }
.pc-foot{display:flex;align-items:center;gap:10px;margin-top:4px;}
.pc-savehint{flex:1;font-size:11px;color:var(--slate-35);line-height:1.4;}
.art-sortable{cursor:pointer;user-select:none;transition:color .15s;}
.art-sortable:hover{color:var(--taupe);}
.art-sortable.active{color:var(--taupe);}
.art-marge-empty{color:var(--slate-20);}
.art-marge-pill{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;font-variant-numeric:tabular-nums;}
.art-marge-pill.good{background:rgba(59,122,75,.14);color:#3b7a4b;}
.art-marge-pill.warn{background:rgba(169,155,136,.18);color:#8a7a5c;}
.art-marge-pill.bad{background:rgba(156,59,59,.12);color:#9c3b3b;}
.art-marge-pill.neutral{background:var(--slate-06);color:var(--slate-35);}
.art-clickrow{cursor:pointer;}
.art-clickrow:hover{background:var(--ivory);}

/* ---------- DASHBOARD ---------- */
.dash-hero{padding:2px 0 0;}
.dash-eyebrow{font-size:11px;letter-spacing:0.6px;text-transform:uppercase;color:var(--taupe);font-weight:600;margin-bottom:9px;}
.dash-title{font-family:var(--font-ui);font-weight:600;font-size:30px;letter-spacing:-0.7px;color:var(--slate);margin:0;}
.dash-title em{font-style:normal;font-weight:600;color:var(--taupe);}
.dash-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:28px;}
.dash-kpis--4{grid-template-columns:repeat(4,1fr);} /* Seiten mit genau 4 Kennzahlen (Feed-Dashboard/-Monitoring) */
.dash-kpi{background:var(--white);border:0.5px solid rgba(47,58,68,0.08);border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:0 1px 2px rgba(47,58,68,0.04),0 8px 22px rgba(47,58,68,0.04);transition:transform .16s ease,box-shadow .16s ease;}
.dash-kpi:hover{transform:translateY(-2px);box-shadow:0 2px 6px rgba(47,58,68,0.05),0 16px 38px rgba(47,58,68,0.09);}
.dash-kpi-ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:rgba(169,155,136,0.16);color:#8a7c63;flex:none;}
.dash-kpi-ic svg{width:18px;height:18px;}
.dash-kpi--accent{background:linear-gradient(160deg,#39444e 0%,#2F3A44 100%);border-color:transparent;box-shadow:0 1px 2px rgba(47,58,68,0.10),0 12px 30px rgba(47,58,68,0.18);}
.dash-kpi--accent .dash-kpi-ic{background:rgba(255,255,255,0.14);color:#fff;}
.dash-kpi--accent .dash-kpi-num{color:#fff;}
.dash-kpi--accent .dash-kpi-lbl{color:rgba(255,255,255,0.62);}
.dash-kpi-num{font-family:var(--font-ui);font-size:28px;font-weight:600;letter-spacing:-1px;color:var(--slate);line-height:1;font-variant-numeric:tabular-nums;}
.dash-kpi-lbl{font-size:12px;letter-spacing:-0.1px;text-transform:none;color:var(--slate-35);margin-top:0;font-weight:500;line-height:1.35;}
.kpi-trend{font-size:11px;font-weight:600;letter-spacing:-0.1px;line-height:1.2;margin-top:-6px;display:flex;align-items:center;gap:4px;}
.kpi-trend:empty{display:none;}
.kpi-trend.up{color:#3b7a4b;}
.kpi-trend.down{color:#9c3b3b;}
.kpi-trend.flat{color:var(--slate-35);}
.act-feed{display:flex;flex-direction:column;}
.act-item{display:flex;gap:12px;padding:11px 2px;border-top:0.5px solid rgba(47,58,68,0.08);}
.act-item:first-child{border-top:0;}
.act-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--taupe);}
.act-dot.green{background:#3b7a4b;}
.act-dot.red{background:#9c3b3b;}
.act-dot.blue{background:#3a6ea5;}
.act-dot.grey{background:#9aa3ab;}
.act-main{min-width:0;}
.act-title{font-size:13px;color:var(--slate);font-weight:500;line-height:1.4;}
.act-meta{font-size:11px;color:var(--slate-35);margin-top:1px;}
.dash-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start;}
.dash-actions-card{display:flex;flex-direction:column;gap:12px;}
.dash-action{display:flex;flex-direction:column;gap:3px;padding:15px 16px;border:0.5px solid transparent;border-radius:12px;text-decoration:none;transition:background .15s,transform .04s;background:var(--slate-06);}
.dash-action:hover{background:var(--slate-10);}
.dash-action:active{transform:scale(0.99);}
.dash-action span{font-size:14px;color:var(--slate);font-weight:600;letter-spacing:-0.2px;}
.dash-action small{font-size:12px;color:var(--slate-35);font-weight:300;}
@media (max-width:900px){
  .dash-kpis{grid-template-columns:repeat(3,1fr);}
  .dash-cols{grid-template-columns:1fr;}
}
@media (max-width:560px){ .dash-kpis{grid-template-columns:repeat(2,1fr);} }

@media (max-width:680px){
  .art-map{grid-template-columns:1fr;}
  .art-head-actions .in-sm{min-width:0;width:100%;}
}

/* ---------- PRINT: only the A4 page ---------- */
@media print{
  @page{size:A4;margin:14mm;}
  body{background:#fff !important;}
  body:has(.app-topbar){padding-left:0 !important;}
  .app-topbar,.editor,.no-print{display:none !important;}
  .builder{display:block !important;}
  .pdf-stage{background:#fff !important;padding:0 !important;display:block !important;max-height:none !important;overflow:visible !important;}
  .pdf-page{box-shadow:none !important;width:100% !important;min-height:auto !important;padding:0 !important;}
  /* Sortiment: Titelblatt behält im Druck seine volle Höhe, damit der Fuß unten sitzt. */
  .sx-cover{min-height:250mm !important;}
  #pdfDoc{display:block !important;}
}

/* ---------- PROJEKTE / KANBAN BOARD ---------- */
.kb-wrap{max-width:1340px;}
/* PROJEKTE / KANBAN — filter toolbar (.kb-toolbar). Apple-look, alle Regeln
   unter .kb-toolbar gescoped, damit globale .in/.in-sm/select/.art-spacer
   unangetastet bleiben. */
.kb-toolbar{
  display:flex;
  align-items:center;
  column-gap:10px;
  row-gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.kb-toolbar #kbSummary{ flex:0 0 auto; margin-right:2px; white-space:nowrap; }
/* Überschreibt das eckige globale .in NUR in der Toolbar (Spezifität (0,2,0) > (0,1,0)). */
.kb-toolbar .in{
  width:auto;                       /* hebt globales .in{width:100%} auf — Ursache der 4 Zeilen */
  border-radius:var(--radius-sm);
  min-height:36px;
  box-sizing:border-box;
  transition:border-color .18s;
}
.kb-toolbar .in:hover{ border-color:var(--slate-20); }
/* Fokus bewusst nicht neu deklariert: der globale Ring (app.css oben) gewinnt per Spezifität. */
.kb-toolbar #projSearch { flex:0 1 190px; max-width:190px; min-width:130px; }
.kb-toolbar #ownerFilter{ flex:0 1 210px; max-width:210px; min-width:150px; }
.kb-toolbar #sortMode   { flex:0 1 230px; max-width:230px; min-width:160px; }
.kb-toolbar .kb-tagfilter{ flex:0 1 170px; max-width:170px; min-width:130px; }
/* Eigener Chevron — appearance:none entfernt den nativen Pfeil, also selbst zeichnen. */
.kb-toolbar select.in{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%232F3A44' stroke-opacity='0.55' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
}
.kb-toolbar select.in::-ms-expand{ display:none; }
.kb-toolbar input[type="search"].in{ background-image:none; }
/* Archiv-Button nach rechts — nur in der Toolbar, globales .art-spacer bleibt. */
.kb-toolbar .art-spacer{ flex:1 1 auto; }
@media (max-width:900px){
  .kb-toolbar{ column-gap:8px; }
  .kb-toolbar #kbSummary{ flex:1 1 100%; margin-right:0; margin-bottom:2px; }
  .kb-toolbar #projSearch,
  .kb-toolbar #ownerFilter,
  .kb-toolbar #sortMode,
  .kb-toolbar .kb-tagfilter{ flex:1 1 160px; max-width:none; }
  .kb-toolbar .art-spacer{ flex-basis:100%; height:0; }
  .kb-toolbar #btnToggleArchive{ margin-left:auto; }
}
@media (max-width:560px){
  .kb-toolbar #projSearch,
  .kb-toolbar #ownerFilter,
  .kb-toolbar #sortMode,
  .kb-toolbar .kb-tagfilter{ flex:1 1 100%; }
}
.kb-board{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:start;}
.kb-col{background:rgba(47,58,68,0.035);border:0.5px solid rgba(47,58,68,0.08);border-radius:16px;padding:12px 12px 14px;}
.kb-col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 12px;}
.kb-col-title{font-size:11.5px;font-weight:600;letter-spacing:0.4px;color:var(--slate);text-transform:uppercase;}
.kb-col-count{font-size:11px;font-weight:600;color:var(--slate-35);background:#fff;border:0.5px solid var(--slate-10);border-radius:999px;min-width:22px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px;}
.kb-cards{display:flex;flex-direction:column;gap:10px;min-height:48px;border-radius:10px;transition:background .15s,outline-color .15s;}
.kb-cards.drop-active{background:rgba(169,155,136,0.12);outline:1.5px dashed var(--taupe);outline-offset:2px;}
.kb-card{background:#fff;border:0.5px solid rgba(47,58,68,0.10);border-radius:12px;padding:12px 13px;box-shadow:0 1px 2px rgba(47,58,68,0.04),0 6px 16px rgba(47,58,68,0.04);cursor:pointer;transition:box-shadow .15s,transform .08s;}
.kb-card:hover{box-shadow:0 2px 6px rgba(47,58,68,0.06),0 12px 26px rgba(47,58,68,0.09);}
.kb-card.dragging{opacity:.45;cursor:grabbing;}
.kb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
.kb-card-title{font-size:13.5px;font-weight:500;color:var(--slate);line-height:1.35;letter-spacing:-0.1px;}
.kb-card-foot{margin-top:11px;}
.kb-owner{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--slate-35);}
.kb-avatar{width:18px;height:18px;border-radius:50%;background:var(--taupe);color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.kb-due{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--slate-35);white-space:nowrap;}
.kb-due.over{color:#c0392b;font-weight:600;}
.kb-impact{display:inline-flex;gap:3px;align-items:center;}
.kb-impact i{width:6px;height:6px;border-radius:50%;background:var(--slate-10);display:inline-block;}
.kb-impact i.on{background:var(--taupe);}
.kb-impact.i-4 i.on,.kb-impact.i-5 i.on{background:#b6794e;}
.impact-pick{display:flex;align-items:center;gap:8px;padding-top:4px;}
.imp-dot{width:20px;height:20px;border-radius:50%;border:1px solid var(--slate-20);background:#fff;cursor:pointer;padding:0;transition:all .12s;}
.imp-dot.on{background:var(--taupe);border-color:var(--taupe);}
.imp-label{font-size:12px;color:var(--slate-35);margin-left:4px;}
/* tags (cards + modal) — muted, brand-friendly palette */
.kb-tag,.tag-chip{font-size:10px;font-weight:600;letter-spacing:.2px;border-radius:999px;}
.kb-tag{padding:2px 8px;}
.tag-c0{background:rgba(169,155,136,0.22);color:#7e7059;}
.tag-c1{background:rgba(47,58,68,0.10);color:var(--slate);}
.tag-c2{background:rgba(75,122,75,0.16);color:#3b7a4b;}
.tag-c3{background:rgba(176,121,78,0.18);color:#8a5630;}
.tag-c4{background:rgba(86,107,138,0.16);color:#4a5a78;}
.kb-card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px;}
.kb-progress{margin-top:11px;}
.kb-progress-bar{height:5px;background:var(--slate-06);border-radius:99px;overflow:hidden;}
.kb-progress-bar span{display:block;height:100%;background:var(--slate);border-radius:99px;transition:width .25s;}
.kb-progress-bar span.full{background:#3b7a4b;}
.kb-progress-lbl{display:flex;justify-content:space-between;font-size:10.5px;color:var(--slate-35);margin-top:4px;}
.tag-edit{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.tag-edit:empty{display:none;}
.tag-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 6px 3px 10px;}
.tag-chip button{border:none;background:transparent;cursor:pointer;font-size:14px;line-height:1;color:inherit;opacity:.55;padding:0;}
.tag-chip button:hover{opacity:1;}
.ck-progresslabel{font-weight:400;color:var(--slate-35);letter-spacing:0;text-transform:none;font-size:11px;margin-left:6px;}
.ck-bar{height:6px;background:var(--slate-06);border-radius:99px;overflow:hidden;margin:0 0 10px;}
.ck-bar span{display:block;height:100%;width:0;background:var(--slate);border-radius:99px;transition:width .25s;}
.ck-bar span.full{background:#3b7a4b;}
.ck-list{display:flex;flex-direction:column;gap:7px;margin-bottom:8px;}
.ck-list:empty{margin-bottom:0;}
.ck-item{display:flex;align-items:center;gap:9px;}
.ck-item input[type=checkbox]{width:16px;height:16px;flex:none;cursor:pointer;accent-color:var(--slate);}
.ck-item .ck-text{flex:1;font-size:13px;color:var(--slate);line-height:1.4;}
.ck-item.done .ck-text{text-decoration:line-through;color:var(--slate-35);}
.ck-del{border:none;background:transparent;color:var(--slate-20);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px;border-radius:6px;}
.ck-del:hover{color:#c0392b;background:rgba(192,57,43,0.08);}
.art-modal{max-height:92vh;overflow-y:auto;}

.kb-add{display:block;width:100%;margin-top:8px;padding:9px 12px;border:none;background:transparent;color:var(--slate-35);font-family:var(--font-ui);font-size:12.5px;font-weight:500;text-align:left;border-radius:9px;cursor:pointer;transition:background .15s,color .15s;}
.kb-add:hover{background:rgba(47,58,68,0.05);color:var(--slate);}
.kb-composer{margin-top:8px;display:flex;flex-direction:column;gap:10px;background:#fff;border:0.5px solid rgba(47,58,68,0.10);border-radius:12px;padding:11px 12px 12px;box-shadow:0 1px 2px rgba(47,58,68,0.04),0 8px 20px rgba(47,58,68,0.06);}
.kb-composer[hidden],.kb-add[hidden]{display:none !important;}
.kb-composer .kb-comp-input{min-height:46px;border:0;padding:2px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--slate);background:transparent;resize:none;}
body:has(.app-topbar) .kb-composer .kb-comp-input:focus{box-shadow:none;border:0;}
.kb-composer-foot{display:flex;gap:8px;align-items:center;}
.kb-composer-foot .btn-dark{padding:8px 16px;}
.kb-composer-foot .btn-ghost{padding:8px 14px;}
.kb-archive{margin-top:10px;}
/* .kb-tagfilter width is handled by the scoped .kb-toolbar .kb-tagfilter rule above */
/* people stack on a card (owner + members) */
.kb-people{display:flex;align-items:center;margin-top:11px;}
.kb-people .kb-avatar{margin-right:-6px;border:1.5px solid #fff;background:var(--slate-20);}
.kb-people .kb-avatar.lead{background:var(--taupe);}
.kb-people-name{margin-left:12px;font-size:11.5px;color:var(--slate-35);}
/* member chips in the modal */
.mem-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 8px 3px 4px;border-radius:999px;background:var(--slate-06);font-size:11.5px;color:var(--slate);}
.mem-chip .mem-ava{width:18px;height:18px;border-radius:50%;background:var(--taupe);color:#fff;font-size:10px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.mem-chip button{border:none;background:transparent;cursor:pointer;color:var(--slate-35);font-size:14px;line-height:1;padding:0 2px;}
.mem-chip button:hover{color:#c0392b;}
@media (max-width:1100px){ .kb-board{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .kb-board{grid-template-columns:1fr;} }

/* dashboard: wichtigste Projekte */
.dash-proj{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:0.5px solid var(--slate-06);text-decoration:none;}
.dash-proj:last-child{border-bottom:none;}
.dash-proj-main{flex:1;min-width:0;}
.dash-proj-title{font-size:13.5px;color:var(--slate);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-proj-meta{font-size:11.5px;color:var(--slate-35);margin-top:2px;}

/* ---------- EINSTELLUNGEN / TEAM ---------- */
.set-form{max-width:660px;}
.role-badge{font-size:10px;font-weight:600;padding:2px 9px;border-radius:999px;background:var(--slate-06);color:var(--slate-35);}
.role-badge.admin{background:rgba(47,58,68,0.10);color:var(--slate);}
.set-tips{margin:0;padding-left:18px;font-size:13px;color:var(--slate-35);line-height:1.85;}
.set-tips b{color:var(--slate);}

/* ---------- AUSWERTUNGEN / CHARTS ---------- */
.chart-bars{display:flex;align-items:flex-end;gap:8px;height:210px;}
.chart-bar{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;}
.chart-bar-fill{width:62%;max-width:38px;background:linear-gradient(180deg,#3a4752,#2F3A44);border-radius:6px 6px 0 0;transition:height .3s;}
.chart-bar:hover .chart-bar-fill{background:linear-gradient(180deg,#4a5862,#39444e);}
.chart-bar-val{font-size:9.5px;color:var(--slate-35);margin-bottom:4px;font-variant-numeric:tabular-nums;white-space:nowrap;}
.chart-xlabels{display:flex;gap:8px;margin-top:8px;}
.chart-xlabels span{flex:1;text-align:center;font-size:10px;color:var(--slate-35);}
.hbar-row{display:flex;align-items:center;gap:12px;padding:7px 0;}
.hbar-label{width:150px;flex:none;font-size:13px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hbar-track{flex:1;height:10px;background:var(--slate-06);border-radius:99px;overflow:hidden;}
.hbar-fill{height:100%;border-radius:99px;background:var(--taupe);transition:width .3s;}
.hbar-val{width:96px;flex:none;text-align:right;font-size:12.5px;color:var(--slate);font-weight:500;font-variant-numeric:tabular-nums;}
.hbar-fill.c-slate{background:var(--slate);}
.hbar-fill.c-taupe{background:var(--taupe);}
.hbar-fill.c-green{background:#3b7a4b;}
.hbar-fill.c-red{background:#b53d2e;}
.hbar-fill.c-amber{background:#b6794e;}
.hbar-fill.c-grey{background:var(--slate-20);}
@media(max-width:560px){ .hbar-label{width:96px;} .hbar-val{width:72px;} }

/* ---------- LIEFERANTEN / SKONTO-RECHNER ---------- */
.sk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;}
.sk-result{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:var(--ivory);border:0.5px solid rgba(47,58,68,0.08);border-radius:14px;padding:20px 24px;}
.sk-res-main{display:flex;align-items:center;justify-content:space-between;gap:16px;}
.sk-res-lbl{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--slate-35);}
.sk-res-amount{font-family:var(--font-ui);font-size:30px;font-weight:600;letter-spacing:-1px;color:var(--slate);font-variant-numeric:tabular-nums;margin-top:4px;}
.sk-res-badge{font-size:11.5px;font-weight:600;padding:6px 12px;border-radius:999px;white-space:nowrap;text-align:center;}
.sk-res-badge.ok{background:rgba(75,122,75,.16);color:#3b7a4b;}
.sk-res-badge.no{background:rgba(192,57,43,.12);color:#b53d2e;}
.sk-res-badge.neutral{background:var(--slate-06);color:var(--slate-35);}
.sk-res-rows{display:flex;flex-direction:column;gap:8px;}
.sk-res-row{display:flex;justify-content:space-between;font-size:13px;color:var(--slate-35);}
.sk-res-row span:last-child{color:var(--slate);font-weight:500;font-variant-numeric:tabular-nums;}
.sup-rating-todo{font-size:11.5px;color:var(--slate-20);}
.back-link{color:var(--taupe);text-decoration:none;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
.back-link:hover{text-decoration:underline;}
.cond-preview{margin-top:4px;}
.cond-line{display:flex;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:0.5px solid var(--slate-06);font-size:13px;color:var(--slate);line-height:1.4;}
.cond-line.head{color:var(--slate-35);}
.cond-line.total{border-bottom:none;border-top:1px solid var(--slate-10);margin-top:4px;font-weight:600;font-size:15px;}
.cond-formula{font-size:11.5px;color:var(--slate-35);}
.cond-amt{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:500;}
.cond-amt.neg{color:#3b7a4b;}
.cond-amt.pos{color:#b53d2e;}
.cond-notes{margin-top:12px;font-size:12px;color:var(--slate-35);background:var(--ivory);border-radius:10px;padding:12px 14px;line-height:1.6;}
.cd-inactive{opacity:.55;}
.cd-off{font-size:10px;color:var(--slate-20);border:0.5px solid var(--slate-10);border-radius:4px;padding:1px 5px;margin-left:6px;}
/* Zahlung & Skonto (Eingangsrechnung) */
.iv-pay{margin-top:18px;padding-top:16px;border-top:0.5px solid var(--slate-10);}
.iv-skonto-info{font-size:12.5px;color:var(--slate-35);line-height:1.6;background:var(--ivory);border-radius:10px;padding:12px 14px;margin-bottom:12px;}
.iv-skonto-info b{color:var(--slate);}
.iv-pay .sk-res-badge{display:inline-block;}
.pay-check{display:flex;align-items:center;gap:8px;min-height:38px;font-size:13px;color:var(--slate);}
.iv-pay-foot{display:flex;align-items:center;gap:12px;margin-top:6px;}
.iv-pay-hint{font-size:12px;color:var(--slate-35);}
.iv-pay-title{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--slate-35);margin:16px 0 6px;font-weight:600;}
.iv-pay-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:0.5px solid var(--slate-06);font-size:13px;color:var(--slate);}
.iv-audit{font-size:11px;color:var(--slate-35);margin-top:3px;}
/* Lieferantenbewertung */
.rt-score-head{display:flex;align-items:center;gap:18px;background:var(--ivory);border-radius:12px;padding:14px 18px;margin-bottom:14px;}
.rt-score-box{text-align:center;}
.rt-score-num{font-family:var(--font-ui);font-size:30px;font-weight:600;letter-spacing:-1px;color:var(--slate);line-height:1;font-variant-numeric:tabular-nums;}
.rt-score-lbl{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--slate-35);margin-top:3px;}
.rt-class-badge{font-size:18px;font-weight:700;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--slate-06);color:var(--slate-35);}
.rt-class-badge.class-a{background:rgba(75,122,75,.18);color:#3b7a4b;}
.rt-class-badge.class-b{background:rgba(169,155,136,.24);color:#7e7059;}
.rt-class-badge.class-c{background:rgba(176,121,78,.20);color:#8a5630;}
.rt-class-badge.class-d{background:rgba(192,57,43,.15);color:#b53d2e;}
.rt-weightsum{margin-left:auto;font-size:12px;color:var(--slate-35);}
.rt-weightsum.warn{color:#b07d1e;font-weight:600;}
.rt-crit-head{display:grid;grid-template-columns:1.4fr auto 70px 116px;gap:10px;font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--slate-35);padding:0 2px 8px;}
.rt-criteria{display:flex;flex-direction:column;gap:12px;margin-bottom:14px;}
.rt-crit{display:grid;grid-template-columns:1.4fr auto 70px 116px;gap:10px;align-items:center;}
.rt-crit-name{font-size:13px;color:var(--slate);font-weight:500;}
.rt-crit-dots{display:inline-flex;gap:4px;}
.rt-dot{width:26px;height:26px;border-radius:7px;border:0.5px solid var(--slate-20);background:#fff;color:var(--slate-35);font-size:11px;cursor:pointer;font-family:var(--font-ui);transition:all .12s;}
.rt-dot:hover{border-color:var(--slate-35);}
.rt-dot.on{background:var(--slate);border-color:var(--slate);color:#fff;}
.rt-crit-cmt{grid-column:1 / -1;}
@media(max-width:640px){ .rt-crit,.rt-crit-head{grid-template-columns:1fr;} .rt-crit-head{display:none;} }
/* Angebotsliste: der Pfeil zeigt, dass die Zeile weiterführt (die ganze Zeile
   ist anklickbar). Ersetzt den dunklen „Öffnen"-Knopf, der in jeder Zeile stand. */
.off-chevron{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;
  font-size:19px;line-height:1;color:var(--slate-20);transition:color .14s,transform .14s;}
.art-clickrow:hover .off-chevron{color:var(--slate-35);transform:translateX(2px);}

.class-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:6px;letter-spacing:.3px;}
.class-a{background:rgba(75,122,75,.16);color:#3b7a4b;}
.class-b{background:rgba(169,155,136,.22);color:#7e7059;}
.class-c{background:rgba(176,121,78,.18);color:#8a5630;}
.class-d{background:rgba(192,57,43,.13);color:#b53d2e;}
@media(max-width:820px){ .sk-grid{grid-template-columns:1fr 1fr;} }
@media(max-width:680px){ .sk-result{grid-template-columns:1fr;gap:18px;} .sk-grid{grid-template-columns:1fr;} }

/* ---------- INVOICE PDF PAYMENT BLOCK ---------- */
.pdf-pay{margin-top:24px;padding:14px 16px;border:0.5px solid var(--slate-10);border-radius:8px;font-size:11px;line-height:1.7;color:var(--slate);}
.pdf-pay b{color:var(--slate);font-weight:600;}
.pdf-pay-bank{margin-top:8px;font-size:11px;color:var(--slate-35);}
.pdf-pay-agb{margin-top:8px;font-size:10px;color:var(--slate-20);}

/* doc-type tab on the Angebote page */
.doc-seg{margin-bottom:18px;}
.art-mini.accent{background:var(--slate);border-color:var(--slate);color:#fff;}
.art-mini.accent:hover{background:#3a4752;border-color:#3a4752;color:#fff;}
.offer-sub{font-size:11px;color:var(--slate-35);margin-top:2px;font-weight:400;}
/* invoice payment status */
.offer-badge.pay-open{background:rgba(176,121,78,0.16);color:#8a5630;}
.offer-badge.pay-overdue{background:rgba(192,57,43,0.13);color:#b53d2e;}
.offer-badge.pay-paid{background:rgba(75,122,75,0.16);color:#3b7a4b;}
.art-mini.pay{background:#3b7a4b;border-color:#3b7a4b;color:#fff;}
.art-mini.pay:hover{background:#336b41;border-color:#336b41;color:#fff;}
.sum-over{color:#b53d2e;font-weight:600;}

/* ---------- KUNDEN & PARTNER ---------- */
.cust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px;align-items:start;}
.cust-grid-wide{grid-column:1 / -1;}
/* Abschnitte mit feiner Linie: das Formular hat drei Sinnabschnitte
   (Kontakt, Anschrift und Register, Intern). Ohne diese Gliederung war es
   ein Block aus zehn gleich aussehenden Feldern. */
.cust-sec{grid-column:1 / -1;display:flex;align-items:center;gap:12px;margin:10px 0 14px;}
.cust-sec:first-child{margin-top:0;}
.cust-sec-t{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-20);}
.cust-sec-l{flex:1;height:1px;background:rgba(47,58,68,0.08);}
/* Hilfsknöpfe stehen auf der Beschriftungszeile statt neben dem Feld. Neben
   dem Feld machten sie jede Eingabezeile unterschiedlich breit, sodass keine
   zwei Felder auf einer Flucht standen und rechts ein Loch blieb. */
.cust-lblrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.cust-lblrow .lbl{margin-bottom:7px;}
.cust-hilf{border:0;background:none;cursor:pointer;font-family:var(--font-ui);font-size:11.5px;font-weight:500;
  color:var(--taupe);padding:2px 6px;margin:0 -6px 4px 0;border-radius:7px;white-space:nowrap;
  transition:background .14s,color .14s;}
.cust-hilf:hover{background:rgba(47,58,68,0.05);color:var(--slate);}
.cust-hilf:disabled{color:var(--slate-20);cursor:default;background:none;}
.cust-adr{min-height:82px;resize:vertical;}
.cust-tag{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:0.2px;padding:3px 10px;border-radius:999px;white-space:nowrap;}
.cust-tag.k-kunde{background:rgba(47,58,68,0.09);color:var(--slate);}
.cust-tag.k-partner{background:rgba(169,155,136,0.20);color:#7e7059;}
.cust-tag.k-lieferant{background:rgba(47,58,68,0.05);color:var(--slate-35);}
.cust-firma{font-weight:600;color:var(--slate);letter-spacing:-0.1px;white-space:nowrap;}
.cust-link{color:var(--slate);text-decoration:none;}
.cust-link:hover{color:var(--taupe);text-decoration:underline;}
.cust-actions{white-space:nowrap;text-align:right;}
.cust-actions .art-mini{margin-right:0;margin-left:8px;}
@media (max-width:760px){ .cust-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .cust-grid{grid-template-columns:1fr;} }

/* ===================== FEED ENGINE ===================== */
.feed-health{background:var(--ivory);border-radius:14px;padding:16px 18px;margin-bottom:16px;}
.feed-health-score{font-size:13px;color:var(--slate);}
.feed-health-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;}
.feed-health-list li{font-size:12.5px;color:var(--slate-35);display:flex;align-items:center;gap:8px;}
/* mapping grid */
.feed-map{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.feed-map-row{display:grid;grid-template-columns:1fr 28px 1.2fr;align-items:center;gap:10px;}
.feed-map-target{font-size:13px;color:var(--slate);font-weight:500;}
.feed-map-key{font-size:10.5px;color:var(--slate-20);font-variant-numeric:tabular-nums;}
.feed-map-arrow{text-align:center;color:var(--slate-20);font-size:14px;}
.feed-req{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:#a8443a;font-weight:600;}
.feed-rec{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:#8a6d18;font-weight:600;}
/* rules */
.feed-rule{display:flex;align-items:center;gap:12px;padding:11px 12px;border:0.5px solid var(--slate-06);border-radius:12px;margin-bottom:8px;background:var(--white);}
.feed-rule-off{opacity:.5;}
.feed-rule-ord{width:22px;height:22px;flex:0 0 auto;border-radius:50%;background:var(--slate-06);color:var(--slate-35);font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:600;}
.feed-rule-sum{flex:1;font-size:13px;color:var(--slate-35);line-height:1.5;}
.feed-rule-sum b{color:var(--slate);font-weight:500;}
.feed-rule-actions{display:flex;align-items:center;gap:4px;}
.feed-mini{width:28px;height:28px;border:0.5px solid var(--slate-10);background:var(--white);border-radius:8px;color:var(--slate-35);cursor:pointer;font-size:13px;line-height:1;transition:background .15s;}
.feed-mini:hover{background:var(--slate-06);}
.feed-mini:disabled{opacity:.35;cursor:default;}
.feed-preview{margin-top:14px;background:var(--ivory);border-radius:14px;padding:14px 16px;}
.feed-prev-title{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--taupe);font-weight:600;margin-bottom:8px;}
.feed-prev-table{font-size:12.5px;}
.feed-prev-table td{vertical-align:top;}
/* export */
.feed-dl{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.feed-public{border-top:0.5px solid var(--slate-06);padding-top:14px;}
.feed-url-row{display:flex;align-items:center;gap:8px;margin-top:10px;flex-wrap:wrap;}
.feed-url-row .in{max-width:440px;font-size:12px;}
.feed-warn{margin-top:14px;font-size:12.5px;color:var(--slate-35);}
.feed-warn-title{font-weight:500;color:var(--slate);margin-bottom:6px;}
.feed-warn ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;}
.dash-hero-btn{align-self:flex-end;}
/* feed rule suggestions */
.feed-suggest{margin-bottom:14px;background:rgba(169,155,136,0.08);border:0.5px solid var(--taupe-30);border-radius:14px;padding:14px 16px;}
.feed-suggest-title{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--taupe);font-weight:600;margin-bottom:8px;}
.feed-suggest-row{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:0.5px solid var(--slate-06);}
.feed-suggest-row:first-of-type{border-top:none;}
.feed-suggest-msg{flex:1;font-size:13px;color:var(--slate);line-height:1.5;}
.feed-suggest-apply{flex:0 0 auto;}
.feed-suggest-empty{font-size:13px;color:var(--slate-35);}

/* Feed scheduler */
.feed-sched{display:flex;flex-direction:column;gap:12px;margin-bottom:6px;}
.feed-sched-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.feed-sched-label{font-size:13px;color:var(--slate);font-weight:500;min-width:230px;}
.feed-sched-status{font-size:12px;color:var(--slate-20);}
@media (max-width:640px){ .feed-sched-label{min-width:0;flex-basis:100%;} }
/* Zeitplan-Konfigurator (statt rohem Cron) */
.cron-builder{flex-basis:100%;}
.cron-b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--ivory);border:0.5px solid var(--slate-06);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;color:var(--slate-35);}
.cron-b select{max-width:160px;}
.cron-b .cb-part{display:inline-flex;align-items:center;gap:6px;}
.cron-b .cb-preview{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--slate-20);margin-left:6px;}

/* Feed FTP / SFTP */
.feed-ftp-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin-bottom:6px;}
.feed-ftp-grid .field{margin-bottom:12px;}
.feed-ftp-grid .in{width:100%;max-width:none;}
.feed-ftp-grid .field.narrow{max-width:160px;}
.feed-ftp-ss{margin:4px 0 14px;font-size:12px;}
.feed-ftp-fp{font-size:11.5px;color:var(--slate-35);background:rgba(169,155,136,0.08);border:0.5px solid var(--taupe-30);border-radius:10px;padding:8px 12px;margin-bottom:12px;line-height:1.5;word-break:break-all;}
.feed-ftp-fp.warn{background:rgba(176,82,82,0.08);border-color:rgba(176,82,82,0.35);color:#9c3b3b;}
.feed-ftp-fp .mono{font-family:ui-monospace,Menlo,monospace;}
.feed-ftp-export{border-top:0.5px solid var(--slate-06);margin-top:18px;padding-top:16px;}
.feed-sub-h{font-size:13px;font-weight:600;color:var(--slate);margin:0 0 10px;}
@media (max-width:640px){ .feed-ftp-grid{grid-template-columns:1fr;} }

/* Feed Engine: Statusband im Arbeitsbereich (Quelle → … → Export) */
.feed-pipeline{display:flex;align-items:stretch;gap:4px;flex-wrap:wrap;margin:0 0 22px;}
.fp-step{display:flex;align-items:center;gap:10px;background:var(--white);border:0.5px solid var(--slate-06);border-radius:var(--radius-sm);padding:10px 14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .15s var(--ease),box-shadow .15s var(--ease);}
.fp-step:hover{transform:translateY(-1px);box-shadow:var(--shadow);}
.fp-dot{width:8px;height:8px;border-radius:50%;background:var(--mist);flex:none;}
.fp-step.done .fp-dot{background:#1d9e75;}
.fp-text{display:flex;flex-direction:column;line-height:1.25;text-align:left;}
.fp-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--taupe);font-weight:500;}
.fp-val{font-size:13px;color:var(--slate);font-weight:500;white-space:nowrap;}
.fp-arrow{display:flex;align-items:center;color:var(--slate-20);font-size:18px;padding:0 2px;}
@media (max-width:760px){ .fp-arrow{display:none;} .fp-step{flex:1 1 44%;} .fp-val{white-space:normal;} }

/* Feed Engine: Bereichs-Umschalter oben rechts */
.feed-hero-actions{display:flex;align-items:center;gap:14px;}
.feed-tabs{display:inline-flex;background:var(--ivory);border:0.5px solid var(--slate-06);border-radius:var(--radius-pill);padding:3px;gap:2px;}
.feed-tabs a{padding:7px 15px;border-radius:var(--radius-pill);font-size:12.5px;line-height:1;color:var(--slate-35);text-decoration:none;font-weight:500;white-space:nowrap;transition:background .15s var(--ease),color .15s var(--ease);}
.feed-tabs a:hover{color:var(--slate);}
.feed-tabs a.active{background:var(--white);color:var(--slate);box-shadow:var(--shadow-sm);}
@media (max-width:640px){ .feed-hero-actions{flex-wrap:wrap;} .feed-tabs{flex-wrap:wrap;justify-content:center;} }

/* Finanzen: Verlauf-Diagramm */
.fin-chart{margin:0 0 18px;}
.fin-chart-cap{font-size:11.5px;color:var(--slate-20);margin-top:6px;}

/* Company switcher + Firmen & Team */
/* Firmenwechsler (Dropdown, immer sichtbar oben rechts auf Feed-Seiten) */
.company-switcher{position:relative;display:flex;align-items:center;}
.cosw-btn{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;background:#fff;border:0.5px solid var(--slate-10);border-radius:999px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--slate);box-shadow:0 1px 3px rgba(47,58,68,0.06);transition:box-shadow .15s,border-color .15s;}
.cosw-btn:hover{border-color:var(--slate-20);box-shadow:0 2px 8px rgba(47,58,68,0.1);}
.cosw-avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--slate);color:#fff;font-size:11.5px;font-weight:600;flex:none;}
.cosw-avatar.sm{width:20px;height:20px;font-size:10px;}
.cosw-name{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cosw-role{font-size:10px;font-weight:600;letter-spacing:0.4px;text-transform:uppercase;color:var(--slate-35);background:var(--slate-06);border-radius:999px;padding:2px 7px;flex:none;}
.cosw-chev{color:var(--slate-35);flex:none;}
.cosw-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:60;min-width:240px;max-width:320px;background:#fff;border:0.5px solid rgba(47,58,68,0.1);border-radius:14px;box-shadow:0 4px 12px rgba(47,58,68,0.08),0 16px 48px rgba(47,58,68,0.14);padding:6px;max-height:min(420px,70vh);overflow-y:auto;}
.cosw-menu-label{font-size:10px;font-weight:600;letter-spacing:0.7px;text-transform:uppercase;color:var(--slate-20);padding:7px 10px 5px;}
.cosw-item{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;background:transparent;border:0;border-radius:9px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;color:var(--slate);text-align:left;text-decoration:none;transition:background .12s;}
.cosw-item:hover{background:var(--slate-06);}
.cosw-item.current{font-weight:600;}
.cosw-item.current svg{margin-left:auto;color:var(--slate);flex:none;}
.cosw-item-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cosw-item.action{color:var(--slate-35);font-weight:500;}
.cosw-item.action:hover{color:var(--slate);}
.cosw-sep{height:0.5px;background:rgba(47,58,68,0.08);margin:5px 8px;}
@media (max-width:560px){ .cosw-name{max-width:110px;} .cosw-role{display:none;} }
/* Feed-Dashboard: Vorlagen-Chips */
.fdash-tpls{display:flex;flex-wrap:wrap;gap:8px;}
.fdash-tpl{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:var(--ivory);border:0.5px solid rgba(47,58,68,0.08);border-radius:999px;font-size:12.5px;color:var(--slate);}
.fdash-tpl b{font-weight:600;}
.fdash-tpl i{font-style:normal;font-size:10.5px;color:var(--slate-35);}
.fdash-copy{padding:5px 10px;font-size:11.5px;}
/* Firmen & Team: Abrechnungs-Karte — 3 Spalten, damit Felder auf breiten
   Bildschirmen nicht überdehnt wirken; Checkbox auf Feldhöhe ausgerichtet. */
.bill-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;}
.bill-grid .bill-grid-wide{grid-column:1/-1;}
.bill-grid .pay-check{min-height:38px;}
@media (max-width:980px){ .bill-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .bill-grid{grid-template-columns:1fr;} }
/* Firmen & Team: Onboarding-Box für neue Nutzer */
.fdash-newuser{background:var(--ivory);border:0.5px solid rgba(47,58,68,0.08);border-radius:14px;padding:16px 16px 14px;margin-bottom:14px;}
.fdash-cred{background:#fff;border:0.5px dashed rgba(47,58,68,0.25);border-radius:12px;padding:13px 14px;margin-top:12px;}
.fdash-cred-title{font-size:11.5px;font-weight:600;color:var(--slate);margin-bottom:8px;}
.fdash-cred-row{display:flex;gap:10px;font-size:12.5px;padding:2px 0;}
.fdash-cred-row span{width:110px;color:var(--slate-35);flex:none;}
.fdash-cred-row b{font-weight:600;color:var(--slate);word-break:break-all;}
.co-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:0.5px solid var(--slate-06);}
.co-row:last-child{border-bottom:none;}
.co-main{flex:1;min-width:0;}
.co-name{font-size:14px;color:var(--slate);display:flex;align-items:center;gap:8px;}
.co-url{font-size:11.5px;color:var(--slate-20);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.co-url .mono{font-size:11px;}
.co-url i{color:var(--slate-20);font-style:italic;}
.co-actions{display:flex;align-items:center;gap:6px;flex:none;}
.co-actions .btn-ghost{padding:6px 11px;font-size:12px;}
@media (max-width:760px){ .co-row{flex-wrap:wrap;} .co-url{white-space:normal;} .co-actions{flex-wrap:wrap;} }
/* Kartenkopf: Eingabe + Button bleiben nebeneinander (mobil wieder umbruchfähig) */
.art-card-head .po-additem{flex-wrap:nowrap;margin-bottom:0;}
.po-additem .btn-dark,.po-additem .btn-ghost{white-space:nowrap;flex:none;}
@media (max-width:560px){ .art-card-head .po-additem{flex-wrap:wrap;} }
/* Betrachter (Viewer): Schreib-Aktionen ausblenden (Server erzwingt zusätzlich) */
body.feed-ro .btn-dark,
body.feed-ro .btn-ghost.danger,
body.feed-ro .feed-mini,
body.feed-ro .offer-del,
body.feed-ro #dropZone,
body.feed-ro #btnAddRule,
body.feed-ro #btnSuggest{ display:none !important; }

/* Website-Zugriffe: Balkenverlauf */
.wt-chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.wt-legend{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--slate-35);}
.wt-dot{display:inline-block;width:9px;height:9px;border-radius:2px;vertical-align:middle;}
.wt-dot-v{background:#2F3A44;} .wt-dot-u{background:#CBBBA3;}
.wt-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 2px 0;border-bottom:1px solid var(--slate-10);}
.wt-col{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;height:100%;}
.wt-bars{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:3px;}
.wt-bar{width:38%;max-width:16px;min-height:2px;border-radius:3px 3px 0 0;transition:height .5s var(--ease);}
.wt-bar-v{background:#2F3A44;} .wt-bar-u{background:#CBBBA3;}
.wt-x{font-size:10px;color:var(--taupe);white-space:nowrap;transform:translateY(2px);}
@media (max-width:640px){ .wt-x{font-size:9px;} .wt-chart{gap:3px;} .wt-bar{gap:2px;} }

/* ---------- Interner Chat (schwebendes Widget) ---------- */
/* z-index bewusst UNTER den App-Overlays (Drawer 100, Modals 120, Dialog 200),
   damit Chat diese nicht überlagert; Toasts (100000) bleiben über allem. */
#bp-chat{position:fixed;z-index:90;}
#bp-chat [hidden]{display:none !important;} /* sonst überschreibt display:flex das hidden-Attribut */
body.nav-open #bp-chat{display:none !important;} /* nicht über dem offenen Mobil-Menü schweben */
.bpc-fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;border:0;background:var(--slate);color:#fff;box-shadow:0 6px 22px rgba(47,58,68,0.30);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .18s var(--ease),box-shadow .18s var(--ease);}
.bpc-fab:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(47,58,68,0.38);}
.bpc-fab.open{transform:scale(0.96);}
.bpc-fab .bpc-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#c9503f;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--ivory);}
.bpc-panel{position:fixed;bottom:92px;right:24px;width:380px;max-width:calc(100vw - 32px);height:min(620px,72vh);background:var(--white);border:0.5px solid rgba(47,58,68,0.12);border-radius:20px;box-shadow:0 24px 60px rgba(47,58,68,0.22),0 2px 8px rgba(47,58,68,0.08);display:flex;flex-direction:column;overflow:hidden;}
/* Kopfzeile durchscheinend mit Weichzeichner: der Inhalt schimmert beim Rollen
   durch, wie in den Apple-Programmen. Die Hintergrundfarbe steht als voller
   Wert daneben, falls der Browser backdrop-filter nicht kann. */
.bpc-head{display:flex;align-items:center;gap:2px;padding:10px 10px 10px 16px;flex-shrink:0;
  background:rgba(255,255,255,0.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 0.5px 0 rgba(47,58,68,0.10);position:relative;z-index:2;}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .bpc-head{background:var(--white);} }
.bpc-title{flex:1;font-weight:600;font-size:16px;letter-spacing:-0.2px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:6px;}
/* Ein Raster fuer alle Kopfknoepfe: gleiche Flaeche, gleiche Ecken, gleicher Ton. */
.bpc-back,.bpc-bell,.bpc-close{border:0;background:transparent;color:var(--slate-20);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s,transform .1s;}
.bpc-back:hover,.bpc-bell:hover,.bpc-close:hover{background:rgba(47,58,68,0.06);color:var(--slate);}
.bpc-back:active,.bpc-bell:active,.bpc-close:active{transform:scale(0.92);}
.bpc-bell.on{color:var(--slate);}
/* Der Videotermin ist die einzige Haupthandlung hier oben und bleibt deshalb
   gefuellt (ein blasses Symbol war Frederic zu unscheinbar). Als Kreis statt
   als Kachel wirkt es gewollt und nicht wie ein hervorgehobener Fremdkoerper. */
.bpc-bell.bpc-act-primary{background:var(--taupe);color:#fff;box-shadow:0 1px 3px rgba(169,155,136,0.45);}
.bpc-bell.bpc-act-primary:hover{background:#9c8e7b;color:#fff;}
.bpc-body{flex:1;overflow-y:auto;background:var(--white);overscroll-behavior:contain;padding-bottom:8px;}
.bpc-empty{padding:28px 20px;text-align:center;color:var(--slate-35);font-size:13px;line-height:1.7;}
/* Kontaktliste */
/* Trennlinie beginnt erst beim Text, nicht unter dem Bildzeichen. Durchgehende
   Linien zerschneiden die Liste optisch in Streifen; eingerueckt lesen sich die
   Zeilen als zusammengehoerige Gruppe. */
.bpc-row{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:9px 14px;border:0;background:transparent;cursor:pointer;text-align:left;
  transition:background .12s;-webkit-tap-highlight-color:transparent;}
.bpc-row::after{content:"";position:absolute;left:61px;right:0;bottom:0;height:1px;background:rgba(47,58,68,0.07);}
.bpc-row:last-child::after{display:none;}
.bpc-row:hover{background:rgba(47,58,68,0.035);}
.bpc-row:active{background:rgba(47,58,68,0.07);}
/* Weich getoentes Bildzeichen statt einer fast schwarzen Scheibe: die Kreise
   waren bisher das Lauteste im ganzen Fenster und zogen alle Aufmerksamkeit
   auf sich, obwohl der Name die Information traegt. */
.bpc-ava{width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,#efe9e1,#ded5c8);color:#7b6f5e;
  font-size:14.5px;font-weight:600;letter-spacing:-0.2px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bpc-ava.raum{border-radius:11px;background:linear-gradient(160deg,#e6e9ec,#d4dade);color:#5d6a76;font-size:16px;}
.bpc-row-main{flex:1;min-width:0;}
.bpc-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.bpc-row-name{font-weight:600;font-size:14.5px;letter-spacing:-0.2px;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Zeitangaben sind Beiwerk und bekommen deshalb ein neutrales Grau statt der
   Markenfarbe: in Taupe lasen sie sich wie eine Auszeichnung. */
.bpc-row-time{font-size:11.5px;color:var(--slate-20);flex-shrink:0;font-variant-numeric:tabular-nums;}
.bpc-row-sub{display:block;font-size:12.5px;line-height:1.4;color:var(--slate-20);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.bpc-row-badge{min-width:19px;height:19px;padding:0 6px;border-radius:10px;background:#e0483a;color:#fff;font-size:11px;font-weight:600;line-height:19px;text-align:center;flex-shrink:0;}

/* Abschnitte in der Liste, gleiche Schrift wie die Ordnerspalte der Ablage. */
.bpc-sec{display:flex;align-items:center;gap:8px;padding:14px 16px 5px;}
.bpc-sec-title{flex:1;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-20);}
.bpc-sec-btn{border:0;background:transparent;cursor:pointer;font:inherit;font-size:12.5px;color:var(--taupe);padding:2px 6px;margin-right:-6px;border-radius:7px;transition:background .14s,color .14s;}
.bpc-sec-btn:hover{background:rgba(47,58,68,0.05);color:var(--slate);}
.bpc-sec-empty{padding:2px 16px 10px;font-size:12.5px;line-height:1.5;color:var(--slate-20);}
/* Unterhaltung */
.bpc-thread{display:flex;flex-direction:column;gap:8px;padding:14px 14px 6px;}
.bpc-msg{display:flex;flex-direction:column;max-width:82%;}
.bpc-msg.me{align-self:flex-end;align-items:flex-end;}
.bpc-msg.them{align-self:flex-start;align-items:flex-start;}
.bpc-bubble{padding:8px 13px;border-radius:17px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word;}
.bpc-msg.me .bpc-bubble{background:var(--slate);color:#fff;border-bottom-right-radius:6px;}
/* Eingehende Blase mit weicher Fuellung statt weiss mit Rahmen: seit die
   Flaeche dahinter weiss ist, war eine weisse Blase nur noch an ihrer
   Haarlinie zu erkennen. Gefuellt liest sie sich sofort als Gegenstueck. */
.bpc-msg.them .bpc-bubble{background:#efedea;color:var(--slate);border:0;border-bottom-left-radius:6px;}
.bpc-msg-time{font-size:10.5px;color:var(--slate-20);margin-top:3px;padding:0 5px;}
/* Eingabe */
.bpc-compose{display:flex;align-items:flex-end;gap:8px;padding:10px 12px;border-top:0.5px solid rgba(47,58,68,0.10);background:var(--white);flex-shrink:0;}
.bpc-compose textarea{flex:1;resize:none;border:0.5px solid rgba(47,58,68,0.16);border-radius:18px;padding:9px 14px;font:inherit;font-size:14px;line-height:1.4;max-height:120px;background:var(--white);color:var(--slate);}
.bpc-compose textarea:focus{outline:none;border-color:var(--taupe);background:var(--white);}
.bpc-send{width:36px;height:36px;border-radius:50%;border:0;background:var(--slate);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s,transform .1s;}
.bpc-send:active{transform:scale(0.92);}
.bpc-send:hover{opacity:0.88;}
/* Tab-Leiste (Nachrichten | News) */
/* Segmentwahl statt unterstrichener Reiter: ein Schieber mit weissem Feld ist
   die Form, die man aus den Apple-Programmen kennt, und sie kommt ohne die
   harte Trennlinie unter der Kopfzeile aus. */
.bpc-tabs{display:flex;gap:2px;margin:9px 12px 7px;padding:2px;background:rgba(47,58,68,0.06);border-radius:10px;flex-shrink:0;}
.bpc-tab{flex:1;position:relative;border:0;background:transparent;padding:6px 10px;font:inherit;font-size:12.5px;font-weight:500;letter-spacing:-0.1px;
  color:var(--slate-35);cursor:pointer;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .18s var(--ease,ease),color .18s,box-shadow .18s;}
.bpc-tab:hover:not(.active){color:var(--slate);}
.bpc-tab.active{color:var(--slate);font-weight:600;background:var(--white);box-shadow:0 1px 3px rgba(47,58,68,0.12),0 0 0 0.5px rgba(47,58,68,0.04);}
.bpc-tab-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0483a;margin-left:5px;vertical-align:middle;}
/* News-Ansicht */
.bpc-news{padding:0;}
.bpc-news-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 8px;}
.bpc-news-day{font-size:12px;letter-spacing:.3px;text-transform:uppercase;color:var(--taupe);font-weight:600;}
.bpc-news-refresh{border:1px solid var(--slate-10);background:var(--white);color:var(--slate);border-radius:9px;padding:5px 11px;font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background .15s;}
.bpc-news-refresh:hover:not(:disabled){background:var(--mist);}
.bpc-news-refresh:disabled{opacity:.6;cursor:default;}
.bpc-news-briefing{margin:0 16px 12px;padding:12px 14px;background:var(--white);border:1px solid var(--slate-10);border-radius:12px;font-size:13.5px;line-height:1.65;color:var(--slate);white-space:pre-wrap;}
.bpc-news-briefing.muted{color:var(--slate-35);font-size:12.5px;}
.bpc-news-list{padding:0 6px 8px;}
.bpc-news-item{padding:11px 10px;border-bottom:1px solid rgba(47,58,68,0.07);}
.bpc-news-item:last-child{border-bottom:0;}
.bpc-news-title{display:block;font-size:14px;font-weight:500;color:var(--slate);text-decoration:none;line-height:1.4;}
a.bpc-news-title:hover{text-decoration:underline;color:#2F3A44;}
.bpc-news-meta{font-size:11.5px;color:var(--taupe);margin-top:3px;}
/* Am Rechner lässt sich das Chat-Fenster am Kopf verschieben und an der Ecke
   unten rechts in der Größe ändern (Lage merkt sich chat.js). So verdeckt es
   nicht mehr fest die Ecke unten rechts. */
@media (min-width:561px){
  .bpc-panel{resize:both;min-width:320px;min-height:360px;max-height:calc(100vh - 16px);}
  .bpc-head{cursor:grab;user-select:none;-webkit-user-select:none;}
  .bpc-panel.ziehen{box-shadow:0 30px 70px rgba(47,58,68,0.30),0 2px 8px rgba(47,58,68,0.10);}
  .bpc-panel.ziehen .bpc-head{cursor:grabbing;}
}
/* Eigenes Browserfenster (chat-fenster.html): der Chat füllt das ganze Fenster,
   ohne Knopf, ohne Rundung, ohne Schatten. */
body.bpc-standalone{margin:0;background:var(--white);}
body.bpc-standalone .bpc-fab{display:none;}
body.bpc-standalone .bpc-panel{position:fixed;left:0;top:0;right:0;bottom:0;width:auto;height:auto;max-width:none;max-height:none;min-width:0;min-height:0;border:0;border-radius:0;box-shadow:none;resize:none;}
@media (max-width:560px){
  .bpc-fab{bottom:calc(18px + env(safe-area-inset-bottom));right:18px;}
  /* Auf dem Handy als bodenständiges Sheet; die Höhe/Position über der Tastatur
     regelt fitPanel() in chat.js (visualViewport). dvh statt vh berücksichtigt
     die ein-/ausblendende Safari-Leiste. */
  .bpc-panel{right:8px;left:8px;bottom:8px;top:auto;width:auto;max-width:none;height:min(82dvh,640px);}
  .bpc-compose{padding:9px 10px calc(9px + env(safe-area-inset-bottom));}
  /* 16px verhindert das automatische Hineinzoomen von iOS beim Antippen des Feldes */
  .bpc-compose textarea{font-size:16px;padding:9px 12px;}
  .bpc-send{width:40px;height:40px;}
}

/* News-Rubriken: Recht steht vor Handel, damit Pflichten nicht zwischen
   Marktmeldungen untergehen. Der Quellenstand liegt eingeklappt darunter. */
.bpc-news-gruppe{
  padding:12px 16px 5px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--stone);font-weight:600;
}
.bpc-news-gruppe:first-of-type{padding-top:6px;}
.bpc-news-quellen{margin:8px 6px 14px;font-size:12px;color:var(--stone);}
.bpc-news-quellen summary{
  cursor:pointer;padding:8px 10px;border-top:1px solid var(--slate-06);
  list-style:none;
}
.bpc-news-quellen summary::-webkit-details-marker{display:none;}
.bpc-news-quellen summary::before{content:"▸ ";}
.bpc-news-quellen[open] summary::before{content:"▾ ";}
.bpc-news-quelle{
  display:flex;justify-content:space-between;gap:12px;
  padding:5px 10px;line-height:1.35;
}
.bpc-news-quelle.still{color:#a8443a;}

/* 2FA-Einrichtung: QR-Code neben den Daten zum Abtippen. Auf schmalen
   Bildschirmen untereinander, damit der Code groß genug zum Scannen bleibt. */
.totp-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.totp-qr svg {
  display: block;
  border-radius: 8px;
  border: 1px solid var(--slate-06);
  background: #fff;
}
.totp-qr-hint {
  margin: 0;
  font-size: 12px;
  color: var(--stone);
  text-align: center;
  max-width: 208px;
}
.totp-daten { flex: 1 1 260px; min-width: 0; }
#totpSecretBox {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 560px) {
  #totpSecretBox { gap: 14px; }
  .totp-daten { flex-basis: 100%; }
}

/* ---------- Terminkalender (BP intern + Übersicht) ---------- */
.tk-flex{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;}
.tk-kal{flex:0 0 264px;max-width:100%;}
.tk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.tk-monat{font-size:13.5px;font-weight:600;color:var(--ink,#22242a);}
.tk-nav{border:0;background:var(--mist,#f1efe9);color:var(--slate,#2F3A44);width:26px;height:26px;border-radius:8px;cursor:pointer;font-size:15px;line-height:1;}
.tk-nav:hover{background:#e7e3db;}
.tk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.tk-dows{margin-bottom:2px;}
.tk-dow{font-size:10px;letter-spacing:.6px;text-transform:uppercase;color:#8a939b;text-align:center;padding:2px 0;}
.tk-tag{position:relative;border:0;background:transparent;font-size:12.5px;color:var(--ink,#22242a);aspect-ratio:1;border-radius:9px;cursor:default;display:flex;align-items:center;justify-content:center;font-family:inherit;}
.tk-tag.aus{color:#c3c9ce;}
.tk-tag.heute{box-shadow:inset 0 0 0 1.5px var(--taupe,#A99B88);}
.tk-tag.hat{cursor:pointer;font-weight:600;}
.tk-tag.hat::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--taupe,#A99B88);}
.tk-tag.hat:hover{background:var(--mist,#f1efe9);}
.tk-tag.aktiv{background:var(--slate,#2F3A44);color:#fff;}
.tk-tag.aktiv::after{background:#fff;}
.tk-alle{margin-top:8px;border:0;background:none;cursor:pointer;font-size:12px;color:var(--taupe,#8a8172);text-decoration:underline;padding:0;}
.tk-liste{flex:1;min-width:250px;}
.tk-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:0.5px solid rgba(47,58,68,.08);flex-wrap:wrap;}
.tk-row:last-child{border-bottom:none;}
.tk-wann{flex:0 0 auto;font-size:12px;color:#8a939b;white-space:nowrap;}
.tk-haupt{flex:1;min-width:150px;display:flex;flex-direction:column;gap:1px;}
.tk-titel{font-size:13.5px;font-weight:600;color:var(--ink,#22242a);}
.tk-mit{font-size:11.5px;color:#8a939b;}
/* Rückmeldungen zum Termin: ein Punkt je Person, dahinter die Zusammenfassung. */
.tk-antw{display:flex;align-items:center;gap:6px;margin-top:3px;flex-wrap:wrap;}
.tk-antw-p{width:7px;height:7px;border-radius:50%;flex:none;background:var(--slate-20);}
.tk-antw-p.ja{background:#3b7a4b;}
.tk-antw-p.nein{background:#b53d2e;}
.tk-antw-t{font-size:11px;color:var(--slate-35);font-variant-numeric:tabular-nums;}
.tk-tun{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tk-video{display:inline-block;background:var(--slate,#2F3A44);color:#fff;text-decoration:none;font-size:12px;border-radius:8px;padding:6px 11px;}
.tk-video:hover{opacity:.92;}
.tk-mehr{padding-top:9px;font-size:12.5px;}
.tk-mehr a{color:var(--taupe,#8a8172);}
.tk-neu{display:block;width:100%;box-sizing:border-box;margin-top:10px;border:0;background:var(--slate,#2F3A44);color:#fff;font-size:12.5px;font-family:inherit;border-radius:9px;padding:8px 12px;cursor:pointer;text-align:center;text-decoration:none;}
.tk-neu:hover{opacity:.92;}

/* ---------- Mobil-Härtung (Prüfung 2026-08-19) ----------
   Raster- und Flex-Kinder dürfen schrumpfen, sonst schiebt eine innen
   scrollbare Tabelle die GANZE Seite breit (so gefunden auf Rechnungen). */
.pay-split > div{min-width:0;}
.art-desc{max-width:min(380px,100%);}
.co-url .mono{word-break:break-all;}
@media (max-width:560px){
  /* iOS zoomt in Eingabefelder mit Schrift unter 16px hinein und wieder
     heraus; 16px auf dem Handy beendet das Gezoome ein für alle Mal. */
  .in,select.in,textarea.in,#bpcInput{font-size:16px;}
  /* Fingerfreundlichere Knöpfe in Tabellenzeilen */
  .art-mini{padding:7px 11px;font-size:12.5px;}
  .co-actions{width:100%;justify-content:flex-start;}
  /* Kalender: volle Breite, Liste darunter */
  .tk-kal{flex:1 1 100%;}
}

/* ---------- Angebot aus PDF einlesen ---------- */
/* Die Vorschau zeigt jede erkannte Position, bevor irgendetwas angelegt wird.
   Deshalb darf der Dialog breiter sein als die übrigen: hier wird geprüft. */
.ai-modal { max-width: 1080px; width: min(1080px, 96vw); }
.ai-kopf { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 12px 14px; margin-bottom: 12px;
  background: #f7f6f4; border: 1px solid #e6e3dd; border-radius: 8px; font-size: 13px; }
.ai-kopf b { display: block; font-weight: 500; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: #8a857c; margin-bottom: 2px; }
.ai-warn { padding: 10px 12px; margin-bottom: 12px; border-radius: 8px; font-size: 13px; line-height: 1.5;
  background: #fdf6e6; border: 1px solid #e8d9a8; color: #6b5518; }
.ai-warn ul { margin: 6px 0 0; padding-left: 18px; }
.ai-tabelle { max-height: 46vh; overflow: auto; border: 1px solid #e6e3dd; border-radius: 8px; }
table.ai-pos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.ai-pos th { position: sticky; top: 0; z-index: 1; background: #f7f6f4; text-align: left;
  font-weight: 500; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8a857c;
  padding: 8px 10px; border-bottom: 1px solid #e6e3dd; white-space: nowrap; }
table.ai-pos td { padding: 7px 10px; border-bottom: 1px solid #f0eeea; vertical-align: top; }
table.ai-pos tr:last-child td { border-bottom: 0; }
table.ai-pos .r { text-align: right; white-space: nowrap; }
table.ai-pos .ai-detail { display: block; color: #8a857c; font-size: 12px; margin-top: 1px; }
table.ai-pos .ai-mono { font-variant-numeric: tabular-nums; color: #6b675f; }
.ai-tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; white-space: nowrap; }
.ai-tag.ok { background: #eaf3ec; color: #2f6b41; }
.ai-tag.neu { background: #f0eeea; color: #8a857c; }
.ai-tag.pruef { background: #fdf6e6; color: #8a6d1d; }
@media (max-width: 760px) {
  .ai-tabelle { max-height: 40vh; }
  table.ai-pos th:nth-child(3), table.ai-pos td:nth-child(3),
  table.ai-pos th:nth-child(4), table.ai-pos td:nth-child(4) { display: none; }
}
/* Während gelesen wird, bleibt der Auswahlbereich sichtbar, nimmt aber nichts
   Neues an: sonst überholen sich zwei Dateien gegenseitig. */
.art-drop.busy { opacity: .55; pointer-events: none; }

/* ---------- Sendungen eines Auftrags ---------- */
/* Je Warenausgang eine Zeile mit eigener Lieferscheinnummer: nur so lässt sich
   ein Lieferschein später wieder genau so nachdrucken, wie er im Paket lag. */
.so-ships { margin: 14px 0 4px; }
.so-ship-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border: 1px solid #e6e3dd; border-radius: 7px; margin-bottom: 6px;
  font-size: 13px; background: #fbfaf8; }
.so-ship-row span { color: #4a5560; }

/* ---------- Merkliste (projekte.html) ---------- */
/* Vier Teile je Zeile: Punkt, Mitte, Meta, Löschen. Auf breiten Bildschirmen
   eine Zeile; auf dem Handy bricht die Meta-Gruppe als Ganzes unter den Titel,
   der Löschknopf bleibt oben rechts. Die alte einzeilige Bauform quetschte den
   Titel auf ein Zeichen je Zeile und schob die Frist aus dem Bild. */
.todo-zeile { display: flex; align-items: flex-start; gap: 11px; padding: 9px 2px;
  border-bottom: 0.5px solid rgba(47,58,68,.08); }
.todo-zeile.pflicht { background: #fdf7f6; }
.todo-dot { flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%;
  cursor: pointer; background: transparent; border: 1.5px solid rgba(47,58,68,.30);
  color: #fff; font-size: 11px; line-height: 1; padding: 0; }
.todo-dot.done { background: var(--slate); border-color: var(--slate); }
.todo-mitte { flex: 1; min-width: 0; }
.todo-titel { cursor: text; font-size: 14px; color: var(--slate); word-break: break-word; }
.todo-zeile.erledigt .todo-titel { color: #9aa1a8; text-decoration: line-through; }
.todo-notiz { font-size: 12.5px; color: #8a939b; white-space: pre-wrap; margin-top: 2px; }
.todo-meta { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap;
  justify-content: flex-end; max-width: 52%; }
.todo-who { width: auto; max-width: 150px; font-size: 12px; padding: 3px 6px; border-radius: 7px;
  border: 0.5px solid rgba(47,58,68,.16); background: transparent; color: #9aa1a8; }
.todo-who.belegt { background: var(--slate-06); color: var(--slate); }
.todo-kat { flex: none; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--slate-06); color: #5c6771; white-space: nowrap; }
.todo-pflicht-badge { flex: none; font-size: 10.5px; font-weight: 600; letter-spacing: .4px;
  padding: 3px 8px; border-radius: 999px; background: #f6e8e6; color: #a8443a; white-space: nowrap; }
.todo-frist { flex: none; font-size: 11.5px; color: #8a939b; white-space: nowrap; }
.todo-frist.warn { color: #8a6116; }
.todo-frist.alert { color: #a8443a; }
.todo-del { flex: none; padding: 4px 9px; font-size: 12px; }

@media (max-width: 760px) {
  .todo-zeile { flex-wrap: wrap; }
  /* Erste Zeile: Punkt, Titel, Löschen. Zweite Zeile: die Meta-Gruppe,
     eingerückt auf die Höhe des Titeltexts. */
  .todo-dot { order: 0; }
  .todo-mitte { order: 1; }
  .todo-del { order: 2; }
  .todo-meta { order: 3; flex-basis: 100%; max-width: none; justify-content: flex-start;
    margin-left: 30px; row-gap: 6px; }
  /* Eingabezeile: Titel volle Breite, die übrigen Felder teilen sich die Reihe. */
  .todo-neu { row-gap: 8px; }
  .todo-neu #todoNew { flex-basis: 100%; }
  .todo-neu #todoCat, .todo-neu #todoWho { flex: 1 1 40%; width: auto; }
  .todo-neu #todoDue { flex: 1 1 40%; width: auto; }
  .todo-neu #todoAdd { flex: 1 1 30%; }
}

/* ---------- Kontierungsvorschläge (Finanzen) ---------- */
/* Der Vorschlag steht unter dem Auswahlfeld: Konto fett, Grund grau, ein Knopf.
   Die Sicherheit ist ehrlich beschriftet — „unsicher" heißt genau das. */
.skr-vorschlag { margin-top: 5px; font-size: 12px; color: #5c6771; display: flex; align-items: center;
  gap: 7px; flex-wrap: wrap; }
.skr-vorschlag .skr-v-grund { color: #8a939b; }
.skr-v-hoch, .skr-v-mittel, .skr-v-niedrig { flex: none; font-size: 10px; letter-spacing: .5px;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.skr-v-hoch { background: #eaf3ec; color: #2f6b41; }
.skr-v-mittel { background: #fdf6e6; color: #8a6d1d; }
.skr-v-niedrig { background: #f0eeea; color: #8a939b; }

/* ---------- LEISTUNGSKATALOG (Beratungsmandate) ---------- */
/* Die interne Preisempfehlung wird bewusst anders gesetzt als alles andere:
   gedämpft, kursiv, mit Rahmen. Sie darf im Editor nie wie Kundentext
   aussehen, damit niemand sie versehentlich abtippt. */
.lk-intern{display:block;margin-top:5px;padding:4px 8px;font-size:10.5px;font-style:italic;line-height:1.5;
  color:var(--taupe,#8a8172);background:var(--mist,#f4f2ee);border-left:2px solid var(--taupe,#a99b88);border-radius:0 6px 6px 0;}
.lk-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;margin:10px 0 4px;}
.lk-modlist{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.lk-mod{display:flex;align-items:flex-start;gap:10px;padding:9px 11px;cursor:pointer;
  border:0.5px solid var(--slate-10);border-radius:10px;background:var(--white);transition:border-color .14s,background .14s;}
.lk-mod:hover{border-color:var(--taupe,#a99b88);}
.lk-mod.an{background:rgba(203,187,163,0.13);border-color:rgba(203,187,163,0.5);}
.lk-mod input{margin-top:3px;flex:none;accent-color:var(--slate);}
.lk-mod-kz{flex:none;width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:var(--slate-35);background:var(--slate-06);}
.lk-mod.an .lk-mod-kz{background:var(--slate);color:#fff;}
.lk-mod-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.45;}
.lk-mod-sub{display:block;font-size:11px;color:var(--slate-35);}
.lk-mod-art{display:block;font-size:10.5px;letter-spacing:.3px;text-transform:uppercase;color:var(--taupe,#8a8172);margin-top:2px;}
.lk-bklist{display:flex;flex-direction:column;gap:6px;padding:4px 0 20px;}
.lk-bkrow{display:flex;align-items:flex-start;gap:10px;padding:9px 2px;border-bottom:0.5px solid var(--slate-06);}
.lk-bkrow .art-mini{flex:none;margin-right:0;}
.lk-bkrow .art-mini.danger{color:#9c3b3b;border-color:rgba(156,59,59,0.35);}
.lk-bkrow .art-mini.danger:hover{background:#9c3b3b;border-color:#9c3b3b;color:#fff;}

/* Moduldetails auf der PDF-Seite */
.lk-det{margin-bottom:22px;padding-bottom:18px;border-bottom:0.5px solid var(--slate-10);}
.lk-det:last-child{border-bottom:none;}
.lk-det-head{font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--slate);margin-bottom:10px;}
.lk-det-row{display:flex;gap:14px;margin-bottom:7px;font-size:11.5px;line-height:1.6;}
.lk-det-lbl{flex:0 0 128px;color:var(--taupe,#8a8172);font-size:9px;letter-spacing:1.4px;text-transform:uppercase;padding-top:2px;}
.lk-det-val{flex:1;min-width:0;color:var(--slate-35);}
/* Abgrenzung: wer macht was */
.lk-abgrenz{display:flex;gap:32px;margin-bottom:8px;}
.lk-abgrenz > div{flex:1;min-width:0;}
.lk-abgrenz-h{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--taupe,#8a8172);
  padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--slate);}
.lk-abgrenz ul{margin:0;padding-left:16px;font-size:11.5px;line-height:1.7;color:var(--slate-35);}
.lk-abgrenz li{margin-bottom:5px;}
.lk-abgrenz b{color:var(--slate);font-weight:600;}
@media(max-width:720px){
  .lk-det-row{flex-direction:column;gap:2px;}
  .lk-det-lbl{flex:none;}
  .lk-abgrenz{flex-direction:column;gap:20px;}
}

/* Zeitraum-Paar für den Steuerberater-Export der Bankbuchungen. */
.fin-zeitraum{display:inline-flex;align-items:center;gap:6px;}
.fin-zeitraum .in-sm{min-width:0;width:142px;}
.fin-zeitraum-bis{font-size:12px;color:var(--slate-20);}
@media(max-width:640px){ .fin-zeitraum{width:100%;} .fin-zeitraum .in-sm{flex:1;width:auto;} }

/* Beleg zur Bankbuchung: kein Beleg = ruhiger Zufügen-Knopf, Beleg = Verweis
   mit Klammer und einem Kreuz zum Entfernen. */
.fin-beleg-cell{white-space:nowrap;}
.fin-beleg{display:inline-flex;align-items:center;gap:2px;max-width:190px;}
.fin-beleg-link{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:var(--slate);
  text-decoration:none;padding:3px 7px;border-radius:7px;background:var(--slate-06);transition:background .14s;}
.fin-beleg-link:hover{background:var(--slate-10);text-decoration:underline;text-underline-offset:2px;}
.fin-beleg-clip{color:var(--taupe);font-size:12px;}
.fin-beleg-weg{border:0;background:none;cursor:pointer;font-size:15px;line-height:1;color:var(--slate-20);padding:2px 5px;border-radius:6px;}
.fin-beleg-weg:hover{color:#9c3b3b;background:rgba(156,59,59,0.08);}
.fin-beleg-add{border:0.5px dashed var(--slate-20);background:none;cursor:pointer;font-family:var(--font-ui);
  font-size:11.5px;color:var(--slate-35);padding:4px 10px;border-radius:8px;white-space:nowrap;transition:all .14s;}
.fin-beleg-add:hover{border-color:var(--taupe);border-style:solid;color:var(--slate);background:var(--slate-06);}

/* ---------- ABGLEICH RECHNUNGEN GEGEN KONTO ---------- */
/* Farbe trägt die Dringlichkeit: rot = kostet Geld (Betrag stimmt nicht),
   gelb = noch zu klären, grün = nichts zu tun. */
.abg-block{border:0.5px solid var(--slate-10);border-radius:14px;margin-bottom:12px;overflow:hidden;background:var(--white);}
.abg-block.abg-rot{border-color:rgba(181,61,46,0.35);}
.abg-block.abg-gelb{border-color:rgba(169,155,136,0.55);}
.abg-block.abg-gruen{border-color:rgba(75,122,75,0.40);}
.abg-head{padding:12px 16px;border-bottom:0.5px solid var(--slate-06);font-size:13.5px;color:var(--slate);}
.abg-block.abg-rot .abg-head{background:rgba(181,61,46,0.06);}
.abg-block.abg-gelb .abg-head{background:rgba(169,155,136,0.10);}
.abg-block.abg-gruen .abg-head{background:rgba(75,122,75,0.07);border-bottom:0;}
.abg-head span{color:var(--taupe);font-weight:600;}
.abg-sub{margin-top:3px;font-size:12px;line-height:1.55;color:var(--slate-35);font-weight:400;}
.abg-row{display:flex;align-items:flex-start;gap:14px;padding:10px 16px;border-bottom:0.5px solid var(--slate-06);font-size:13px;}
.abg-row:last-child{border-bottom:none;}
.abg-when{flex:0 0 92px;color:var(--slate-35);font-size:12.5px;font-variant-numeric:tabular-nums;padding-top:1px;}
.abg-what{flex:1;min-width:0;color:var(--slate);line-height:1.45;}
.abg-note{font-size:12px;color:var(--slate-35);margin-top:2px;line-height:1.5;}
.abg-amount{flex:0 0 auto;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:1px;}
.abg-diff{color:#b53d2e;}
@media(max-width:640px){
  .abg-row{flex-wrap:wrap;gap:4px 12px;}
  .abg-when{flex:0 0 auto;}
  .abg-what{flex-basis:100%;order:3;}
}
.abg-mehr{padding:9px 16px;font-size:12px;color:var(--slate-35);background:var(--slate-06);}