/* ═══════════════════════════════════════════════════════════════════════
   VAL Group · Portal · zentrales Brand-Stylesheet
   Quelle: Brand Guide v1.4 (abavia.ch/valgroupbrandguideV2), Sektionen 17–19, 22–36
   Regel: Farben und Masse nur über Variablen. Wer eine Farbe braucht,
   die hier nicht steht, braucht sie nicht.
   Aufbau: Tokens · Grundfläche · Seitenleiste · Seitenkopf · Flächen · Formulare (B)
           · Knöpfe (A) · Links/Avatar (I) · Badges/Chips/Zustände (C) · Karten/Listen (D)
           · Dateien (E) · KI (F) · Dialog/Alert (G) · Timeline/Stepper/Kalender (H)
           · Kompatibilität Altseiten · Mobile
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften (Subsets aus dem Brand Guide) ─────────────────────────── */
@font-face{font-family:'Roca';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/roca-light.woff') format('woff')}
@font-face{font-family:'Roca';font-weight:300;font-style:italic;font-display:swap;src:url('fonts/roca-light-italic.woff') format('woff')}
@font-face{font-family:'Roca';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/roca-demibold.woff') format('woff')}
@font-face{font-family:'Mundial';font-weight:300;font-style:normal;font-display:swap;src:url('fonts/mundial-light.woff') format('woff')}
@font-face{font-family:'Mundial';font-weight:300;font-style:italic;font-display:swap;src:url('fonts/mundial-light-italic.woff') format('woff')}
@font-face{font-family:'Mundial';font-weight:600;font-style:normal;font-display:swap;src:url('fonts/mundial-demibold.woff') format('woff')}

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root{
  --val-gruen:#578F6E; --val-petrol:#024555; --val-lind:#B9D083;
  --val-schwarz:#1C1C1C; --val-grau:#5E625C; --val-beige:#F6F4F0; --val-weiss:#FFFFFF;
  --val-linie:#E3E0D8; --val-zebra:#FBFAF7;
  --val-petrol-hover:#01323D; --val-gruen-hover:#4A7B5E;

  --val-serif:'Roca',Georgia,serif;
  --val-sans:'Mundial','Segoe UI',Arial,sans-serif;
  --val-mono:ui-monospace,'Cascadia Mono',Consolas,monospace;
  --val-w-light:300; --val-w-demi:600;

  --val-s-1:4px; --val-s-2:8px; --val-s-3:12px; --val-s-4:16px; --val-s-5:24px;
  --val-s-6:32px; --val-s-7:48px; --val-s-8:64px;
  --val-r-sm:6px; --val-r-md:10px; --val-r-lg:14px; --val-r-pill:999px;
  --val-sh-1:0 1px 2px rgba(28,28,28,.04); --val-sh-2:0 2px 10px rgba(28,28,28,.06);
  --val-sh-dlg:0 2px 10px rgba(28,28,28,.06),0 12px 40px rgba(28,28,28,.18);
  --val-focus:2px solid var(--val-lind); --val-focus-offset:2px; --val-dur:.15s;

  /* Anwendungen / Dashboard (Sektion 22) */
  --val-ok-bg:#EEF4EF; --val-ok-line:#578F6E; --val-ok-text:#2F6146;
  --val-warn-bg:#FDF3E7; --val-warn-line:#E8CFA8; --val-warn-text:#8A5A18;
  --val-err-bg:#FBF1EF; --val-err-line:#C9705C; --val-err-text:#A4442F;
  --val-info-bg:#E8EEF0; --val-info-line:#BFD2D8; --val-info-text:#024555;
  --val-danger:#A4442F; --val-danger-hover:#8A3625;
  --val-ki-bg:#F4F8E9; --val-ki-line:#B9D083; --val-ki-text:#5C6B2E; --val-ki-bg-hover:#EAF1D9;   /* v1.4 neuer Token */
  --val-sidebar:#024555; --val-sidebar-w:210px;
  --val-sidebar-link:rgba(255,255,255,.72); --val-sidebar-hover:rgba(255,255,255,.08);
  --val-sidebar-active:rgba(255,255,255,.12); --val-sidebar-line:rgba(255,255,255,.12);
  --val-d-title:1.625rem; --val-d-h:0.9375rem; --val-d-body:0.845rem;
  --val-d-ui:0.8125rem; --val-d-small:0.75rem; --val-d-label:0.6875rem; --val-d-lh:1.45;

  /* Phasen-Zustände (Sektion 22) */
  --val-ph-done-bg:#EEF4EF; --val-ph-done-line:#CDE0D3; --val-ph-done-text:#2F6146;
  --val-ph-now-bg:#024555;  --val-ph-now-text:#FFFFFF;
  --val-ph-open-bg:#FFFFFF; --val-ph-open-line:#E3E0D8; --val-ph-open-text:#5E625C;

  /* Diagramm- und Quellenreihen (Sektion 25 / C.2) */
  --val-ch-1:#0E5A6E; --val-ch-2:#578F6E; --val-ch-3:#A0B85A; --val-ch-4:#6B7280;
}

/* ── Grundfläche ─────────────────────────────────────────────────────── */
body{font-family:var(--val-sans);font-weight:var(--val-w-light);font-size:var(--val-d-body);line-height:var(--val-d-lh);
     background:var(--val-beige);color:var(--val-schwarz);-webkit-font-smoothing:antialiased}
strong,b{font-weight:var(--val-w-demi)}
a{color:var(--val-petrol)}
::selection{background:var(--val-lind);color:var(--val-schwarz)}
*:focus-visible{outline:var(--val-focus);outline-offset:var(--val-focus-offset)}
.ico{display:inline-block;vertical-align:-.15em;flex-shrink:0}
.num,.e-zeit,.tnum{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Seitenleiste (Sektion 22) ───────────────────────────────────────── */
.sidebar{width:var(--val-sidebar-w);min-height:100vh;background:var(--val-sidebar);display:flex;flex-direction:column;
         padding:var(--val-s-5) var(--val-s-4) var(--val-s-4);flex-shrink:0;color:#fff}
.s-logo{display:block;margin:0 0 6px;line-height:0;border-radius:var(--val-r-sm)}
.s-logo img,.s-logo svg{height:22px;width:auto;display:block}   /* I.3: 22 px */
.s-logo-fallback{font-family:var(--val-serif);font-weight:300;font-size:22px;color:#fff;letter-spacing:.02em;line-height:1}
.s-sub{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
       color:var(--val-lind);margin:0 0 var(--val-s-4);padding-bottom:var(--val-s-4);border-bottom:1px solid var(--val-sidebar-line)}
.s-grp{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:var(--val-s-4) 0 var(--val-s-1);padding:0 var(--val-s-3)}
.s-nav a{display:flex;align-items:center;gap:10px;font-family:var(--val-sans);font-weight:var(--val-w-light);font-size:13.5px;letter-spacing:0;text-transform:none;
         color:var(--val-sidebar-link);text-decoration:none;padding:7px var(--val-s-3);border:0;border-radius:var(--val-r-sm);
         border-left:3px solid transparent;margin:1px 0;transition:background var(--val-dur),color var(--val-dur)}
.s-nav a .ico{width:20px;height:20px;opacity:.85}
.s-nav a:hover{color:#fff;background:var(--val-sidebar-hover)}
.s-nav a.active{color:#fff;font-weight:var(--val-w-demi);background:var(--val-sidebar-active);border-left-color:var(--val-lind)}
.s-nav a .cnt{margin-left:auto}
.s-bottom{margin-top:auto;padding-top:var(--val-s-4);border-top:1px solid var(--val-sidebar-line);font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.6}
.s-bottom strong{color:#fff;font-weight:var(--val-w-demi)}
.s-bottom a{color:var(--val-lind);text-decoration:none}
.s-bottom a:hover{text-decoration:underline}
.s-user{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.s-user .s-name{font-weight:var(--val-w-demi);color:#fff;display:block;line-height:1.2}
.s-user .s-role{font-size:11px;color:var(--val-lind);display:block}

/* ── Seitenkopf (Sektion 24 Nr. 1) ───────────────────────────────────── */
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--val-s-4);margin-bottom:var(--val-s-5)}
.page-head .acts{display:flex;gap:8px;align-items:center;flex-shrink:0}
.page-title{font-family:var(--val-serif);font-weight:300;font-size:var(--val-d-title);line-height:1.2;color:var(--val-schwarz);margin-bottom:2px;display:flex;align-items:center;gap:12px}
.page-sub{font-family:var(--val-sans);font-size:var(--val-d-ui);letter-spacing:0;text-transform:none;color:var(--val-grau);font-weight:var(--val-w-light)}

/* ── Flächen ─────────────────────────────────────────────────────────── */
.box,.k-card{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-lg);box-shadow:var(--val-sh-1);padding:var(--val-s-5)}
.k-card-title{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-h);color:var(--val-schwarz);margin-bottom:var(--val-s-4)}
.k-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:var(--val-s-3)}
.card-in{background:var(--val-zebra);border:1px solid var(--val-linie);border-radius:var(--val-r-md);padding:var(--val-s-4);box-shadow:none}   /* D.3 verschachtelt */
.card-in .k-card-title{font-size:var(--val-d-h)}
.hint,.f-help{font-size:var(--val-d-small);color:var(--val-grau);line-height:1.55}
.sect-title{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-label);letter-spacing:.12em;text-transform:uppercase;color:var(--val-grau);padding-bottom:6px;border-bottom:1px solid var(--val-linie);margin:0 0 12px}   /* B.2 Abschnitt */
.sect-title+.sect-title,.sect-gap{margin-top:32px}
.sep-line{display:flex;align-items:center;gap:12px;font-size:var(--val-d-label);letter-spacing:.12em;text-transform:uppercase;color:var(--val-grau);font-weight:var(--val-w-demi);margin:12px 0}   /* D.8 Trenner */
.sep-line::before,.sep-line::after{content:'';flex:1;height:1px;background:var(--val-linie)}

/* ── Formulare (Sektion 18, B.1–B.13) ────────────────────────────────── */
label,.f-label{display:block;font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-ui);letter-spacing:0;text-transform:none;color:var(--val-petrol);margin-bottom:6px}   /* B.1: keine Versalien, Petrol */
.f-help{margin-top:4px}
.f-input,select,textarea,input[type=text],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=number],input[type=date],input[type=time],input[type=search],.k-search{
  width:100%;font-family:var(--val-sans);font-weight:var(--val-w-light);font-size:var(--val-d-body);color:var(--val-schwarz);
  background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-sm);padding:8px 10px;outline:none;
  transition:border-color var(--val-dur),box-shadow var(--val-dur)}
.f-input:focus,select:focus,textarea:focus,input:focus,.k-search:focus{border-color:var(--val-petrol);box-shadow:0 0 0 1px var(--val-petrol)}
.f-input::placeholder,input::placeholder,textarea::placeholder{color:#9A9E98}
.f-input:disabled,input:disabled,select:disabled{opacity:.55;background:var(--val-beige);cursor:not-allowed}
.f-input.fehler,input.fehler,select.fehler,textarea.fehler{border-color:var(--val-err-line);background:var(--val-err-bg)}   /* B.10 */
.f-err{display:flex;align-items:center;gap:6px;font-size:var(--val-d-small);color:var(--val-err-text);margin-top:4px}
textarea.f-input,textarea{resize:vertical;min-height:80px;line-height:1.5}
.f-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}   /* B.2 Raster */
.f-grid>*{grid-column:span 12}
.f-4{grid-column:span 4!important}.f-6{grid-column:span 6!important}.f-8{grid-column:span 8!important}.f-12{grid-column:span 12!important}
.f-num{position:relative}   /* B.3 Zahlenfeld */
.f-num input{text-align:right;font-variant-numeric:tabular-nums;padding-right:44px}
.f-num .suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:var(--val-d-small);color:var(--val-grau);pointer-events:none}
input[type=checkbox],input[type=radio]{accent-color:var(--val-petrol);width:18px;height:18px;margin:0;vertical-align:middle}   /* B.5 */
.chk-row{display:flex;align-items:center;gap:8px;font-size:var(--val-d-body);cursor:pointer;margin:0;text-transform:none;letter-spacing:0;color:var(--val-schwarz);font-weight:var(--val-w-light)}
.f-view{display:grid;grid-template-columns:1fr 1fr;gap:16px}   /* B.8 Anzeigefeld */
.f-view .lbl{font-size:var(--val-d-label);letter-spacing:.08em;text-transform:uppercase;color:var(--val-grau);font-weight:var(--val-w-demi)}
.f-view .val{font-size:var(--val-d-body);color:var(--val-schwarz);margin-top:2px}
.f-view .val:empty::before{content:'–';color:var(--val-grau)}
.f-code{font-size:20px;font-weight:var(--val-w-demi);letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums;width:160px}   /* B.12 */
.f-mask{font-variant-numeric:tabular-nums;letter-spacing:.08em}   /* B.11 */
.f-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── Knöpfe (Sektion 18, A.1–A.12) ───────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-ui);
     letter-spacing:0;text-transform:none;height:36px;padding:0 16px;border:1px solid transparent;border-radius:var(--val-r-md);cursor:pointer;
     text-decoration:none;white-space:nowrap;line-height:1;
     transition:background var(--val-dur),color var(--val-dur),border-color var(--val-dur),transform var(--val-dur)}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn.disabled{opacity:.45;cursor:not-allowed;transform:none;pointer-events:none}
.btn-lg{height:44px;padding:0 22px;font-size:var(--val-d-body)}          /* A.1 gross */
.btn-sm{height:28px;padding:0 10px;font-size:var(--val-d-small);border-radius:var(--val-r-sm);gap:6px}   /* A.1 kompakt */
.btn-sm .ico{width:14px;height:14px}
.btn-primary,.btn.primary{background:var(--val-petrol);color:#fff}
.btn-primary:hover,.btn.primary:hover{background:var(--val-petrol-hover);color:#fff}
.btn-outline,.btn.sec,.btn-secondary{background:transparent;color:var(--val-petrol);border-color:var(--val-petrol)}
.btn-outline:hover,.btn.sec:hover,.btn-secondary:hover{background:var(--val-info-bg)}
.btn-ghost{background:transparent;color:var(--val-petrol)}
.btn-ghost:hover{background:var(--val-info-bg)}
.btn-danger{background:transparent;color:var(--val-danger);border-color:var(--val-danger)}   /* A.6 Outline */
.btn-danger:hover{background:var(--val-err-bg)}
.btn-danger.fill{background:var(--val-danger);color:#fff}   /* nur im Dialog */
.btn-danger.fill:hover{background:var(--val-danger-hover)}
.btn-gold,.btn-ki{background:var(--val-ki-bg);color:var(--val-ki-text);border:1.5px solid var(--val-ki-line)}   /* A.4 */
.btn-gold:hover,.btn-ki:hover{background:var(--val-ki-bg-hover)}
.btn-block{width:100%}   /* A.8 nur Auth-Karten */
.btn.busy{pointer-events:none;opacity:.8}
.btn.busy .ico{animation:val-spin 1s linear infinite}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:var(--val-r-md);border:1px solid transparent;
      background:transparent;color:var(--val-petrol);cursor:pointer;flex-shrink:0;transition:background var(--val-dur),border-color var(--val-dur)}   /* A.2 Icon-Button */
.ibtn:hover{background:var(--val-info-bg)}
.ibtn.sm{width:28px;height:28px;border-radius:var(--val-r-sm)}
.ibtn.sec{border-color:var(--val-linie)}
.ibtn.danger{color:var(--val-danger)}
.ibtn.danger:hover{background:var(--val-err-bg)}
.ibtn.on{background:var(--val-info-bg);border-color:var(--val-petrol)}
.ibtn.ki{color:var(--val-ki-text)}
.ibtn.ki:hover{background:var(--val-ki-bg)}
.ibtn:disabled{opacity:.45;cursor:not-allowed}
.ibtn.primary{background:var(--val-petrol);color:#fff}
.ibtn.primary:hover{background:var(--val-petrol-hover)}
.acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}   /* A.5 Aktionsgruppe */
.acts .btn-danger,.acts .ibtn.danger{margin-left:8px}
.actbar{position:sticky;bottom:0;height:64px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;
        background:rgba(246,244,240,.92);backdrop-filter:blur(8px);border-top:1px solid var(--val-linie);z-index:20;margin:16px -24px -24px}   /* A.11 */
.actbar .note{font-size:var(--val-d-small);color:var(--val-grau)}
.mini{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-small);letter-spacing:0;text-transform:none;display:inline-flex;align-items:center;gap:6px;
      background:transparent;border:1px solid var(--val-linie);color:var(--val-petrol);height:28px;padding:0 10px;border-radius:var(--val-r-sm);cursor:pointer;line-height:1}   /* = kompakter Sekundär A.1 */
.mini:hover{border-color:var(--val-petrol);background:var(--val-info-bg)}
.mini.danger{color:var(--val-danger);border-color:var(--val-linie)}
.mini.danger:hover{border-color:var(--val-danger);background:var(--val-err-bg)}
@keyframes val-spin{to{transform:rotate(360deg)}}
.ring{display:inline-block;width:16px;height:16px;border-radius:50%;border:2px solid var(--val-lind);border-top-color:var(--val-ki-text);animation:val-spin .8s linear infinite;vertical-align:middle}   /* Ladezustand S.22 */

/* ── Textlink, Avatar (I.1, I.2) ─────────────────────────────────────── */
.lnk{color:var(--val-petrol);font-weight:var(--val-w-demi);text-decoration:none;display:inline-flex;align-items:center;gap:4px;cursor:pointer;background:none;border:0;padding:0;font-family:inherit;font-size:inherit}
.lnk:hover{color:var(--val-petrol-hover);text-decoration:underline;text-underline-offset:2px}
.lnk .ico{width:14px;height:14px}
.on-petrol .lnk,.lnk.lind{color:var(--val-lind)}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--val-lind);color:var(--val-petrol);font-family:var(--val-sans);
    font-weight:var(--val-w-demi);overflow:hidden;flex-shrink:0;width:32px;height:32px;font-size:12px;line-height:1;text-transform:uppercase}
.av img{width:100%;height:100%;object-fit:cover;display:block}
.av-24{width:24px;height:24px;font-size:10px}.av-32{width:32px;height:32px;font-size:12px}
.av-72{width:72px;height:72px;font-size:24px}.av-88{width:88px;height:88px;font-size:30px}
.av.assistent{background:var(--val-petrol);color:var(--val-lind)}
.av.on-petrol{background:rgba(255,255,255,.12);color:#fff}

/* ── Badges, Zähler, Chips, Zustände (C.1–C.12) ──────────────────────── */
.bdg,.k-badge,.e-job,.b,.tag,.badge,.status-badge{display:inline-flex;align-items:center;gap:4px;font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
   color:var(--val-petrol);background:var(--val-weiss);border:1px solid var(--val-linie);height:20px;padding:0 8px;border-radius:var(--val-r-pill);line-height:1;white-space:nowrap;vertical-align:middle}   /* C.1 Kategorie */
.bdg .ico{width:12px;height:12px}
.bdg-ok,.tag.kt{color:var(--val-ok-text);border-color:var(--val-ok-line);background:var(--val-ok-bg)}
.bdg-warn{color:var(--val-warn-text);border-color:var(--val-warn-line);background:var(--val-warn-bg)}
.bdg-err{color:var(--val-err-text);border-color:var(--val-err-line);background:var(--val-err-bg)}
.bdg-info,.tag.from{color:var(--val-info-text);border-color:var(--val-info-line);background:var(--val-info-bg)}
.bdg-fill{background:var(--val-petrol);border-color:var(--val-petrol);color:#fff}   /* S.18 Objektkarte („Off Market") */
.bdg-lind{background:var(--val-lind);border-color:var(--val-lind);color:var(--val-schwarz)}
.bdg-ki{background:var(--val-ki-bg);border-color:var(--val-ki-line);color:var(--val-ki-text)}
.bdg-on-img{border:1px solid #fff;box-shadow:var(--val-sh-1)}   /* C.10 */
.bdg-rolle-admin{background:var(--val-petrol);border-color:var(--val-petrol);color:#fff}   /* C.3 */
.bdg-rolle-team{color:var(--val-petrol);border-color:var(--val-petrol)}
.bdg-rolle-gast{color:var(--val-grau);border-color:var(--val-linie)}
.bdg-grau{color:var(--val-grau);border-color:var(--val-linie)}
.cnt{display:inline-flex;align-items:center;justify-content:center;height:18px;min-width:18px;padding:0 6px;border-radius:var(--val-r-pill);font-size:11px;font-weight:var(--val-w-demi);
     font-variant-numeric:tabular-nums;background:var(--val-beige);color:var(--val-grau);line-height:1}   /* C.4 Zähler */
.cnt.aktion{background:var(--val-petrol);color:#fff}
.sidebar .cnt{background:var(--val-lind);color:var(--val-petrol)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--val-linie);margin-right:6px;vertical-align:middle;flex-shrink:0}   /* C.7 */
.dot.ok{background:var(--val-ok-line)}.dot.warn{background:var(--val-warn-text);box-shadow:0 0 0 2px var(--val-warn-line)}.dot.err{background:var(--val-err-line)}
.chip,.sk{display:inline-flex;align-items:center;gap:6px;font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:12.5px;color:var(--val-petrol);
   background:var(--val-weiss);border:1px solid var(--val-linie);padding:3px 6px 3px 10px;border-radius:var(--val-r-pill);margin:2px 4px 2px 0;letter-spacing:0;text-transform:none;line-height:1.3}
.sk .x,.chip .x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--val-beige);color:var(--val-grau);font-size:12px;line-height:1;cursor:pointer;opacity:1;border:0;padding:0}
.sk .x:hover,.chip .x:hover{background:var(--val-err-bg);color:var(--val-danger)}
.sk .x .ico,.chip .x .ico{width:10px;height:10px}
.chip.ki,.sk.ki{background:var(--val-ki-bg);border:1.5px solid var(--val-ki-line);color:var(--val-schwarz)}   /* C.5 KI ungeprüft */
.chip.ki .ok,.sk.ki .ok{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--val-weiss);color:var(--val-ki-text);cursor:pointer;border:0;padding:0}
.sk-tip,.chip.vorschlag{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--val-grau);background:transparent;border:1px dashed var(--val-linie);padding:2px 9px;border-radius:var(--val-r-pill);margin:2px 4px 2px 0;cursor:pointer;font-weight:var(--val-w-demi)}
.sk-tip:hover,.chip.vorschlag:hover{border-style:solid;border-color:var(--val-petrol);color:var(--val-petrol)}
.sk-list{font-size:var(--val-d-small);color:var(--val-ki-text)}
.pills{display:inline-flex;gap:2px;background:var(--val-beige);border:1px solid var(--val-linie);border-radius:var(--val-r-pill);padding:3px}   /* Sektion 24 Nr. 9 / C.6 */
.pills a,.pills button{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:12.5px;color:var(--val-grau);text-decoration:none;padding:4px 12px;border-radius:var(--val-r-pill);border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.pills a:hover,.pills button:hover{color:var(--val-schwarz)}
.pills a.on,.pills button.on,.pills a.active,.pills button.active{background:var(--val-petrol);color:#fff}
.fchip{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:var(--val-w-demi);color:var(--val-petrol);border:1px solid var(--val-linie);background:var(--val-weiss);padding:3px 10px;border-radius:var(--val-r-pill);cursor:pointer;text-decoration:none}
.fchip.on{background:var(--val-info-bg);border-color:var(--val-petrol)}
.seg{display:inline-flex;gap:2px;background:var(--val-beige);border:1px solid var(--val-linie);border-radius:var(--val-r-md);padding:3px}   /* B.6 Segmented Control */
.seg button,.seg a{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-ui);color:var(--val-grau);height:30px;padding:0 12px;border-radius:8px;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none;line-height:1}
.seg button:hover,.seg a:hover{color:var(--val-schwarz)}
.seg button.on,.seg a.on,.seg button.active,.seg a.active{background:var(--val-weiss);color:var(--val-petrol);box-shadow:var(--val-sh-1)}
.seg button:disabled{opacity:.45;cursor:not-allowed}

/* ── KI-Markierung (Sektion 22, F.1–F.5) ─────────────────────────────── */
.ai,.ki{background:var(--val-ki-bg)!important;border:1.5px solid var(--val-ki-line)!important}
.ki-mark{color:var(--val-ki-text);font-weight:var(--val-w-demi)}
.ki-banner{display:flex;align-items:center;gap:12px;background:var(--val-ki-bg);border:1.5px solid var(--val-ki-line);border-radius:var(--val-r-md);padding:12px 16px;margin-bottom:16px;font-size:var(--val-d-body)}   /* F.1 */
.ki-banner .ico{color:var(--val-ki-text)}
.ki-banner .acts{margin-left:auto}
.ki-field{position:relative}   /* F.2 */
.ki-field .ki-ok{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:none;gap:4px}
.ki-field:hover .ki-ok,.ki-field:focus-within .ki-ok{display:inline-flex}
.ki-field .ki-ok .ibtn{color:var(--val-ki-text)}
.ki-mass .ai,.ki-mass .ki{background:transparent!important}   /* F.4 */

/* ── Signalzustände, Alert, Toast (Sektion 22, G.2) ──────────────────── */
.st-ok,.e.ok{background:var(--val-ok-bg);border-color:var(--val-ok-line);color:var(--val-ok-text)}
.st-warn,.e.offen{background:var(--val-warn-bg);border-color:var(--val-warn-line);color:var(--val-schwarz)}
.st-err,.e.fehler{background:var(--val-err-bg);border-color:var(--val-err-line);color:var(--val-schwarz)}
.st-info,.e.info{background:var(--val-info-bg);border-color:var(--val-info-line);color:var(--val-schwarz)}
.alert,.warn:not(.dot){display:flex;align-items:flex-start;gap:10px;background:var(--val-info-bg);border:1px solid var(--val-info-line);color:var(--val-info-text);padding:12px 16px;border-radius:var(--val-r-md);font-size:var(--val-d-body);line-height:1.5}
.alert>.ico{flex-shrink:0;margin-top:1px}
.alert .acts{margin-left:auto}
.alert a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.alert.ok{background:var(--val-ok-bg);border-color:var(--val-ok-line);color:var(--val-ok-text)}
.alert.warn,.warn:not(.dot){background:var(--val-warn-bg);border-color:var(--val-warn-line);color:var(--val-warn-text)}
.alert.err{background:var(--val-err-bg);border-color:var(--val-err-line);color:var(--val-err-text)}
.warn:not(.dot) a{color:var(--val-warn-text)}
.ok:not(.dot){color:var(--val-ok-text)}
.toast{position:fixed;bottom:var(--val-s-5);right:var(--val-s-5);left:auto;transform:translateY(12px);opacity:0;
       background:var(--val-ok-text);color:#fff;font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:13px;
       padding:10px 16px;border-radius:var(--val-r-md);box-shadow:var(--val-sh-2);z-index:2000;transition:all var(--val-dur);pointer-events:none;max-width:420px}
body.has-fab .toast{bottom:100px}   /* A.10: Toast rückt über den Schwebeknopf */
.toast.show{opacity:1;transform:translateY(0)}
.toast.fehler{background:var(--val-danger)}

/* ── Fortschritt, Phasen, Stepper (Sektion 22, C.8, H.4) ─────────────── */
.prog{height:8px;background:var(--val-beige);border:1px solid var(--val-linie);border-radius:var(--val-r-pill);overflow:hidden}
.prog>span{display:block;height:100%;background:var(--val-gruen);border-radius:var(--val-r-pill)}
.prog.voll>span{background:var(--val-ok-text)}
.prog-head{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--val-d-label);letter-spacing:.08em;text-transform:uppercase;color:var(--val-grau);font-weight:var(--val-w-demi);margin-bottom:4px}
.prog-head .num{font-size:var(--val-d-small);letter-spacing:0}
.phase{display:inline-block;font-size:var(--val-d-small);font-weight:var(--val-w-demi);padding:4px 12px;border-radius:var(--val-r-pill);border:1px solid var(--val-ph-open-line);background:var(--val-ph-open-bg);color:var(--val-ph-open-text)}
.phase.done{background:var(--val-ph-done-bg);border-color:var(--val-ph-done-line);color:var(--val-ph-done-text)}
.phase.now{background:var(--val-ph-now-bg);border-color:var(--val-ph-now-bg);color:var(--val-ph-now-text)}
.stepper{display:flex;align-items:flex-start;gap:0;margin:0 0 24px}
.step{flex:1;display:flex;flex-direction:column;align-items:center;position:relative;min-width:0}
.step .c{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--val-linie);background:var(--val-weiss);color:var(--val-grau);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--val-w-demi);z-index:1}
.step .l{font-size:var(--val-d-label);letter-spacing:.08em;text-transform:uppercase;color:var(--val-grau);margin-top:6px;text-align:center;font-weight:var(--val-w-demi)}
.step::before{content:'';position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--val-linie)}
.step:first-child::before{display:none}
.step.done .c{background:var(--val-ok-bg);border-color:var(--val-ok-text);color:var(--val-ok-text)}
.step.done::before{background:var(--val-ok-text)}
.step.now .c{background:var(--val-petrol);border-color:var(--val-petrol);color:#fff}
.step.now .l{color:var(--val-petrol)}
.step.now::before{background:var(--val-ok-text)}
.crumbs{font-size:12px;color:var(--val-grau);margin-bottom:8px}
.crumbs .now{color:var(--val-petrol);font-weight:var(--val-w-demi)}

/* ── Reiter ──────────────────────────────────────────────────────────── */
.k-tabs{display:flex;gap:var(--val-s-5);margin:var(--val-s-5) 0 0;border-bottom:1px solid var(--val-linie)}
.k-tab{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-ui);letter-spacing:0;text-transform:none;
       padding:8px 0 10px;border:0;border-bottom:2px solid transparent;background:none;color:var(--val-grau);cursor:pointer;text-decoration:none;display:inline-block;margin-bottom:-1px}
.k-tab:hover{color:var(--val-petrol)}
.k-tab.active{color:var(--val-petrol);border-bottom-color:var(--val-petrol);background:none}

/* ── Listen, Toolbar, KPI, Karten (D.1–D.12) ─────────────────────────── */
.k-list-item{background:var(--val-weiss);border:1px solid var(--val-linie);border-left:3px solid transparent;border-radius:var(--val-r-md);padding:10px 14px;cursor:pointer;transition:background var(--val-dur),border-color var(--val-dur)}
.k-list-item:hover{background:var(--val-zebra);border-color:var(--val-linie)}
.k-list-item.active{background:var(--val-info-bg);border-left-color:var(--val-petrol)}
.k-list-name{font-weight:var(--val-w-demi);font-size:var(--val-d-body)}
.k-list-sub{font-size:var(--val-d-small);color:var(--val-grau)}
.k-list-attr{font-size:var(--val-d-small);color:var(--val-grau);display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}   /* D.6 dritte Zeile */
.k-empty{text-align:center;padding:var(--val-s-7) var(--val-s-4);color:var(--val-grau);font-size:var(--val-d-body);border:1px dashed var(--val-linie);border-radius:var(--val-r-md);background:transparent}
.k-empty strong{display:block;color:var(--val-schwarz);margin-bottom:4px}
.k-empty .ico{color:var(--val-petrol);margin-bottom:8px;width:24px;height:24px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:16px}   /* D.7 */
.toolbar .search{flex:1;min-width:220px;position:relative}
.toolbar .search input{padding-left:34px}
.toolbar .search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--val-grau);pointer-events:none}
.toolbar select{width:180px}
.toolbar .acts{margin-left:auto}
.kpi{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-lg);box-shadow:var(--val-sh-1);padding:16px 18px;display:flex;flex-direction:column;gap:4px}   /* D.1 / S.24 Nr. 3 */
.kpi .ico{color:var(--val-petrol);width:22px;height:22px}
.kpi .lbl{font-size:12.5px;color:var(--val-petrol);font-weight:var(--val-w-demi);text-transform:none;letter-spacing:0}
.kpi .val{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:20px;color:var(--val-gruen);font-variant-numeric:tabular-nums;line-height:1.2}
.kpi .delta{font-size:11.5px;display:inline-flex;align-items:center;gap:4px;color:var(--val-ok-text)}
.kpi .delta.down{color:var(--val-warn-text)}
.kpi.hi{background:var(--val-petrol);border-color:var(--val-petrol)}
.kpi.hi .lbl,.kpi.hi .val,.kpi.hi .ico,.kpi.hi .delta{color:#fff}
.kpi-inline{display:flex;gap:20px;flex-wrap:wrap}
.kpi-inline>div .val{font-size:var(--val-d-h);font-weight:var(--val-w-demi);color:var(--val-schwarz);font-variant-numeric:tabular-nums}
.kpi-inline>div .lbl{font-size:var(--val-d-label);letter-spacing:.08em;text-transform:uppercase;color:var(--val-grau);font-weight:var(--val-w-demi)}
.kpi-big{font-size:28px;font-weight:var(--val-w-demi);color:var(--val-petrol);font-variant-numeric:tabular-nums;font-family:var(--val-sans)}
.bcard{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-md);padding:12px;cursor:pointer;transition:border-color var(--val-dur)}   /* D.2 Board-Karte */
.bcard:hover{border-color:var(--val-petrol)}
.bcard.late{border-left:3px solid var(--val-warn-line)}
.bcard .t{font-weight:var(--val-w-demi);font-size:var(--val-d-body);display:flex;justify-content:space-between;gap:8px}
.bcard .t small{font-weight:var(--val-w-light);font-size:var(--val-d-small);color:var(--val-grau)}
.bcard .s{font-size:var(--val-d-small);color:var(--val-petrol);font-weight:var(--val-w-demi);display:flex;align-items:center;gap:6px;margin-top:4px}
.bcard .p{font-size:var(--val-d-small);font-weight:var(--val-w-demi);color:var(--val-ok-text);margin-top:4px;font-variant-numeric:tabular-nums}
.bcard.dragging{transform:rotate(2deg);box-shadow:var(--val-sh-2)}
.board-col{background:var(--val-beige);border-radius:var(--val-r-md);padding:10px;min-height:120px}
.board-col-title{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--val-petrol);font-weight:var(--val-w-demi);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.pcard{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-lg);padding:20px;display:flex;gap:16px;align-items:flex-start;box-shadow:var(--val-sh-1)}   /* D.4 Personenkarte */
.pcard .name{font-family:var(--val-serif);font-weight:300;font-size:20px;line-height:1.2;color:var(--val-schwarz)}
.pcard .name em{font-style:italic}
.pcard .fn{font-size:var(--val-d-body);color:var(--val-grau);margin:2px 0 8px}
.pcard .kont{display:flex;flex-direction:column;gap:4px;font-size:var(--val-d-small);margin-top:8px}
.ocard{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--val-sh-1)}   /* D.5 Objektkarte */
.ocard .img{aspect-ratio:3/2;background:var(--val-beige);position:relative;display:flex;align-items:center;justify-content:center;color:var(--val-grau);font-size:var(--val-d-small)}
.ocard .img img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.ocard .img .bdg{position:absolute;top:12px;left:12px}
.ocard .img .ibtn{position:absolute;top:8px;right:8px;background:rgba(255,255,255,.9)}
.ocard .body{padding:16px 18px;flex:1}
.ocard .t{font-family:var(--val-serif);font-weight:300;font-size:20px;line-height:1.2;margin-bottom:4px}
.ocard .d{font-size:var(--val-d-body);color:var(--val-grau);line-height:1.5}
.ocard .price{font-weight:var(--val-w-demi);font-size:17px;color:var(--val-gruen);margin:10px 0 4px;font-variant-numeric:tabular-nums}
.ocard .foot{padding:12px 18px;border-top:1px solid var(--val-linie);display:flex;justify-content:flex-end;gap:8px}
.ocard.inaktiv{background:var(--val-zebra)}
.ocard.inaktiv .img img{filter:grayscale(1)}
.acc{border:1px solid var(--val-linie);border-radius:var(--val-r-md);background:var(--val-weiss);margin-bottom:8px}   /* D.11 Akkordeon */
.acc-head{display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;cursor:pointer;font-weight:var(--val-w-demi);font-size:var(--val-d-h);user-select:none}
.acc-head:hover{background:var(--val-zebra)}
.acc-head .r{margin-left:auto;display:flex;align-items:center;gap:8px}
.acc-head .chev{transition:transform var(--val-dur)}
.acc.open .acc-head .chev{transform:rotate(180deg)}
.acc-body{display:none;padding:16px;border-top:1px solid var(--val-linie)}
.acc.open .acc-body{display:block}
.t-act{text-align:right;white-space:nowrap;width:1%}   /* D.9 */
.t-act .ibtn{opacity:0;transition:opacity var(--val-dur)}
tr:hover .t-act .ibtn,tr:focus-within .t-act .ibtn{opacity:1}
@media(hover:none){.t-act .ibtn{opacity:1}}
.meta-line{display:flex;align-items:center;gap:6px;font-size:var(--val-d-small);color:var(--val-grau);font-variant-numeric:tabular-nums}   /* G.3 */
.meta-line .ico{width:12px;height:12px}

/* ── Externe Verweise (Portal-Ergänzung zu A.12) ──────────────────────
   Reihe von Sprungzielen zu fremden Diensten. Keine Anbieterfarben,
   kein eigenes Symbol je Dienst: ein external-link rechts für alle. */
.ext-gruppe{margin-bottom:12px}
.ext-gruppe:last-child{margin-bottom:0}
.ext-gruppe .ext-label{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-label);letter-spacing:.12em;text-transform:uppercase;color:var(--val-grau);margin-bottom:6px}
.ext-reihe{display:flex;flex-wrap:wrap;gap:6px}
.ext{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-sm);color:var(--val-petrol);font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-small);line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:border-color var(--val-dur),background var(--val-dur)}
.ext:hover{border-color:var(--val-petrol);background:var(--val-info-bg)}
.ext:focus-visible{outline:var(--val-focus);outline-offset:var(--val-focus-offset)}
.ext svg{color:var(--val-grau);flex-shrink:0}
.ext:hover svg{color:var(--val-petrol)}

/* ── Dateien (E.1, E.2) ──────────────────────────────────────────────── */
.dropzone,.drop-zone,.drop-zone-sm,.shot-zone{border:1.5px dashed var(--val-lind);background:var(--val-ki-bg);border-radius:var(--val-r-md);color:var(--val-schwarz);text-align:center;padding:24px 16px;cursor:pointer;font-size:var(--val-d-body);transition:background var(--val-dur),border-color var(--val-dur)}
.dropzone .ico,.drop-zone .ico{color:var(--val-petrol);width:24px;height:24px;display:block;margin:0 auto 8px}
.dropzone.compact{display:flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 16px}
.dropzone.compact .ico{width:16px;height:16px;margin:0}
.dropzone.over,.drop-zone.over,.drop-zone-sm.over,.shot-zone.drag-over{border-style:solid;border-color:var(--val-petrol);background:var(--val-info-bg)}
.up-row{display:flex;align-items:center;gap:8px;font-size:var(--val-d-small);margin-top:8px}
.up-row .nm{font-weight:var(--val-w-demi);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.up-row .prog{height:6px;flex:2}
.up-row.err .prog>span{background:var(--val-err-line)}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--val-linie);border-left:3px solid transparent;border-radius:var(--val-r-md);background:var(--val-weiss);margin-bottom:4px;cursor:pointer}
.file-row:hover{background:var(--val-zebra)}
.file-row.active{background:var(--val-info-bg);border-left-color:var(--val-petrol)}
.file-row>.ico{color:var(--val-petrol);width:20px;height:20px}
.file-row .nm{font-weight:var(--val-w-demi);font-size:var(--val-d-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-row .mt{font-size:var(--val-d-small);color:var(--val-grau)}
.file-row .acts{margin-left:auto}
.preview-body{background:var(--val-zebra);border:1px solid var(--val-linie);border-radius:var(--val-r-md);min-height:320px;display:flex;align-items:center;justify-content:center}

/* ── Tabellen ────────────────────────────────────────────────────────── */
table{border-collapse:collapse;width:100%;font-size:var(--val-d-body)}
th{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--val-petrol);text-align:left;padding:8px 10px}
td{padding:8px 10px;border-bottom:1px solid var(--val-linie);vertical-align:middle}
tr:nth-child(odd) td{background:var(--val-zebra)}
td.num,th.num{text-align:right}

/* ── Dropdown / Popover / Dialog (G.1) ───────────────────────────────── */
.ds-pop,.m-box,.pop,.mention-dropdown,.dropdown,.popover{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-md);box-shadow:var(--val-sh-2);padding:6px}
.ds-i,.m-item,.pop-item,.mention-option{display:flex;align-items:center;gap:8px;font-size:var(--val-d-body);min-height:36px;padding:6px 10px;border-radius:var(--val-r-sm);cursor:pointer;color:var(--val-schwarz);text-decoration:none;background:none;border:0;width:100%;text-align:left;font-family:inherit}
.ds-i:hover,.ds-i.sel,.m-item:hover,.pop-item:hover,.mention-option:hover,.mention-option.active{background:var(--val-zebra)}
.pop-item.danger{color:var(--val-danger)}
.pop-item.danger:hover{background:var(--val-err-bg)}
.pop-sep{height:1px;background:var(--val-linie);margin:4px 0}
.ds-h{font-size:var(--val-d-label);letter-spacing:.1em;text-transform:uppercase;color:var(--val-grau);padding:6px 10px;font-weight:var(--val-w-demi)}
.ds-i .t{font-weight:var(--val-w-demi)}
.ds-i .s,.m-item .s{color:var(--val-grau);font-size:var(--val-d-small)}
.sk-box{border:1px solid var(--val-linie);background:var(--val-weiss);border-radius:var(--val-r-sm);padding:6px 8px;min-height:2.4rem}
.ds-x{color:var(--val-grau)}
.ds-x:hover{color:var(--val-danger)}
.dlg-bg{position:fixed;inset:0;background:rgba(28,28,28,.4);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:val-fade var(--val-dur)}
.dlg{background:var(--val-weiss);border-radius:var(--val-r-lg);box-shadow:var(--val-sh-dlg);padding:24px;width:420px;max-width:90vw;max-height:90vh;overflow:auto}
.dlg.form{width:560px}.dlg.wide{width:720px}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.dlg-head h3,.dlg-title{font-family:var(--val-serif);font-weight:300;font-size:22px;margin:0;line-height:1.2}
.dlg-body{font-size:var(--val-d-body);line-height:1.5}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
@keyframes val-fade{from{opacity:0}to{opacity:1}}

/* ── Schwebender Assistent-Knopf (A.10) ──────────────────────────────── */
#cwBtn{position:fixed;right:24px;bottom:24px;width:52px;height:52px;border-radius:50%;border:0;background:var(--val-petrol);color:var(--val-lind);
       box-shadow:var(--val-sh-2);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:900;font-size:0}
#cwBtn .ico{width:22px;height:22px}
#cwBtn:hover{background:var(--val-petrol-hover)}
#cwBtn:active{transform:translateY(1px)}
#cwBtn:focus-visible{outline:2px solid var(--val-lind);outline-offset:3px}
#cwBtn.neu::after{content:'';position:absolute;top:2px;right:2px;width:10px;height:10px;border-radius:50%;background:var(--val-lind)}

/* ── Chat (F.6) ──────────────────────────────────────────────────────── */
.bub{max-width:68%;padding:10px 14px;font-size:var(--val-d-body);line-height:1.5;border-radius:var(--val-r-lg)}
.bub.me{background:var(--val-petrol);color:#fff;border-bottom-right-radius:4px;margin-left:auto}
.bub.ai{background:var(--val-weiss);border:1px solid var(--val-linie);border-bottom-left-radius:4px}
.bub.ai h1,.bub.ai h2,.bub.ai h3{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-h);margin:8px 0 4px}
.bub.ai code{background:var(--val-zebra);font-family:var(--val-mono);font-size:12.5px;padding:1px 4px;border-radius:4px}
.bub.ai ul{padding-left:16px}
.bub.ai li::marker{color:var(--val-gruen)}
.bub-time{font-size:var(--val-d-small);color:var(--val-grau);margin-top:4px}
.typing{display:inline-flex;gap:4px;padding:6px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--val-grau);animation:val-typing 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes val-typing{0%,60%,100%{opacity:.3}30%{opacity:1}}
.composer{display:flex;gap:8px;align-items:flex-end;border:1px solid var(--val-linie);border-radius:var(--val-r-md);background:var(--val-weiss);padding:6px 6px 6px 12px}
.composer textarea{border:0;box-shadow:none;padding:8px 0;min-height:32px;max-height:160px;resize:none;flex:1}
.composer textarea:focus{box-shadow:none;border:0}
.composer .ibtn.rec{background:var(--val-petrol);color:#fff;animation:val-pulse 1.2s infinite}
@keyframes val-pulse{0%{box-shadow:0 0 0 0 rgba(185,208,131,.7)}100%{box-shadow:0 0 0 10px rgba(185,208,131,0)}}
.ai-hint{font-size:var(--val-d-small);color:var(--val-grau);margin-top:6px}

/* ── Timeline / Protokoll (H.1, F.5) ─────────────────────────────────── */
.tl{position:relative;padding-left:32px}
.tl::before{content:'';position:absolute;left:15px;top:6px;bottom:6px;width:2px;background:var(--val-linie)}
.tl-item{position:relative;padding:6px 0 14px}
.tl-item .dot{position:absolute;left:-22px;top:10px;width:10px;height:10px;margin:0;background:var(--val-linie);border:2px solid var(--val-beige)}
.tl-item .dot.ki{background:var(--val-ki-line)}
.tl-item .zeit{font-size:var(--val-d-small);color:var(--val-grau);font-variant-numeric:tabular-nums}
.tl-item .titel{font-weight:var(--val-w-demi);font-size:var(--val-d-body);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tl-item .det{font-size:var(--val-d-small);color:var(--val-schwarz);margin-top:2px;line-height:1.5}
.tl-item.gesehen .titel{color:var(--val-grau);font-weight:var(--val-w-light)}
.tl-item.gesehen .det{display:none}
.tl-item.ki{background:var(--val-ki-bg);border:1.5px solid var(--val-ki-line);border-radius:var(--val-r-md);padding:8px 12px;margin-bottom:8px}
.tl-item.ki .dot{left:-30px}
.e{border-left-width:3px;border-radius:0 var(--val-r-sm) var(--val-r-sm) 0}
.e-titel{font-weight:var(--val-w-demi)}
.e-zeit{color:var(--val-grau);font-size:var(--val-d-small)}
.e-det{color:var(--val-schwarz)}
.cmt{display:flex;gap:8px;margin-top:12px;font-size:var(--val-d-body)}   /* H.2 */
.cmt .who{font-size:var(--val-d-small);font-weight:var(--val-w-demi)}
.cmt .who span{font-weight:var(--val-w-light);color:var(--val-grau);margin-left:6px}
.mention,.cmt .at{color:var(--val-petrol);font-weight:var(--val-w-demi)}

/* ── Kalender (H.3, FullCalendar) ────────────────────────────────────── */
.fc{font-family:var(--val-sans);font-size:var(--val-d-small)}
.fc .fc-toolbar-title{font-family:var(--val-serif);font-weight:300;font-size:18px}
.fc .fc-col-header-cell{background:var(--val-weiss);color:var(--val-grau);font-size:var(--val-d-label);letter-spacing:.08em;text-transform:uppercase;font-weight:var(--val-w-demi)}
.fc .fc-col-header-cell a{color:var(--val-grau)}
.fc .fc-col-header-cell.fc-day-today a{color:var(--val-petrol)}
.fc .fc-button{background:transparent;border:1px solid var(--val-petrol);color:var(--val-petrol);font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-small);text-transform:none;letter-spacing:0;border-radius:var(--val-r-sm);box-shadow:none!important}
.fc .fc-button:hover{background:var(--val-info-bg)!important;border-color:var(--val-petrol)!important;color:var(--val-petrol)!important}
.fc .fc-button-primary:not(:disabled).fc-button-active,.fc .fc-button-primary:not(:disabled):active{background:var(--val-petrol)!important;border-color:var(--val-petrol)!important;color:#fff!important}
.fc .fc-event{background:var(--val-info-bg);border:1px solid var(--val-info-line);color:var(--val-petrol);border-left:3px solid var(--val-ch-1);border-radius:var(--val-r-sm);font-weight:var(--val-w-demi)}
.fc .fc-event.q-google{border-left-color:var(--val-ch-2)}
.fc .fc-event.q-ms{border-left-color:var(--val-ch-3)}
.fc .fc-event .fc-event-main{color:var(--val-petrol)}
.fc .fc-event-past{background:var(--val-zebra);border-color:var(--val-linie);border-left-color:var(--val-linie);color:var(--val-grau)}
.fc .fc-event-past .fc-event-main{color:var(--val-grau)}
.fc .fc-timegrid-now-indicator-line{border-color:var(--val-petrol);border-width:2px 0 0}
.fc .fc-timegrid-now-indicator-arrow{border-color:var(--val-petrol);border-top-color:transparent;border-bottom-color:transparent}
.fc .fc-day-today{background:var(--val-zebra)!important}
.fc-theme-standard td,.fc-theme-standard th,.fc-theme-standard .fc-scrollgrid{border-color:var(--val-linie)}
.fc th{background:transparent;color:inherit;text-transform:none;letter-spacing:0;font-size:inherit;padding:0}   /* Kalender: keine Tabellenkopf-Optik */
.q-legend{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.q-legend .bdg{border-left:3px solid var(--val-ch-1)}
.q-legend .bdg.q-google{border-left-color:var(--val-ch-2)}
.q-legend .bdg.q-ms{border-left-color:var(--val-ch-3)}

/* ── Auth-Seiten (I.5, G.4) ──────────────────────────────────────────── */
.auth{min-height:100vh;display:grid;grid-template-columns:42% 1fr}
.auth .band{background:var(--val-petrol);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:40px}
.auth .band img{height:40px;max-width:160px;width:auto}
.auth .claim{font-family:var(--val-serif);font-weight:300;font-style:italic;font-size:26px;line-height:1.25;max-width:320px}
.auth .band .foot{font-size:12px;color:var(--val-lind)}
.auth .side{background:var(--val-beige);display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth .card{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-lg);padding:32px;width:420px;max-width:100%}
.auth .card h1{font-family:var(--val-serif);font-weight:300;font-size:24px;margin:0 0 4px}
.auth .card .sub{font-size:var(--val-d-body);color:var(--val-grau);margin-bottom:20px}
.auth .card .links{display:flex;justify-content:space-between;font-size:12px;margin-top:16px}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth .band{height:96px;padding:24px;justify-content:center}.auth .claim,.auth .band .foot{display:none}}

/* ── Kompatibilität Altseiten ────────────────────────────────────────
   Klassennamen, die auf den bestehenden Seiten wiederkehren. Hier auf die
   Tokens gezogen, damit die Seiten ohne Einzelumbau dem Brand folgen.
   v1.4: alles auf die Komponenten der Sektionen 28–36 gezogen.           */
.main{font-family:var(--val-sans)}
.stat,.card,.card-full,.panel,.detail-card{background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-lg);box-shadow:var(--val-sh-1)}   /* Karte: S.18 */
.stat-label,.card-title,.section-title,.section-divider,.done-toggle,.list-label{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-label);letter-spacing:.12em;text-transform:uppercase;color:var(--val-grau)}  /* Abschnittslabel: B.2 */
.card-title a{color:var(--val-petrol);font-weight:var(--val-w-demi);font-size:var(--val-d-label);letter-spacing:0;text-transform:none}   /* I.1 im Kartenkopf */
.stat-label{color:var(--val-petrol);letter-spacing:0;text-transform:none;font-size:12.5px}   /* D.1 KPI-Label */
.stat-value{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:20px;color:var(--val-gruen);line-height:1.2;font-variant-numeric:tabular-nums}   /* D.1: Mundial DemiBold 20 Markengrün */
.list-title,.detail-title,.modal-title,.welcome-title{font-family:var(--val-serif);font-weight:300;color:var(--val-schwarz)}
.form-row button,.np-btn,.btn-save,.send-btn,.btn-sm:not(.btn){font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-ui);letter-spacing:0;text-transform:none;background:var(--val-petrol);color:#fff;border:1px solid var(--val-petrol);border-radius:var(--val-r-md);height:36px;padding:0 16px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}  /* Primärbutton: S.18 */
.form-row button:hover,.np-btn:hover,.btn-save:hover,.send-btn:hover,.btn-sm:not(.btn):hover{background:var(--val-petrol-hover);border-color:var(--val-petrol-hover);color:#fff}
.done-btn,.pin-btn,.role-btn{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-small);letter-spacing:0;text-transform:none;background:transparent;border:1px solid var(--val-linie);color:var(--val-petrol);border-radius:var(--val-r-sm);height:28px;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}  /* A.1 kompakt Sekundär */
.done-btn:hover,.role-btn:hover{background:var(--val-info-bg);border-color:var(--val-petrol);color:var(--val-petrol)}
.pin-btn{border-color:transparent;width:28px;padding:0;justify-content:center;opacity:1}   /* A.2 Toggle: Zustand über Fläche, nicht Deckkraft */
.pin-btn:hover{background:var(--val-info-bg)}
.pin-btn.pinned{background:var(--val-info-bg);border-color:var(--val-petrol)}
.bulk-del-btn{font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-small);letter-spacing:0;text-transform:none;background:transparent;border:1px solid var(--val-danger);color:var(--val-danger);border-radius:var(--val-r-sm);height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;cursor:pointer}  /* Destruktiv Outline: S.22 */
.bulk-del-btn:hover{background:var(--val-err-bg);color:var(--val-danger);border-color:var(--val-danger)}
.nitem{border-bottom:1px solid var(--val-linie)}
.nitem-text{font-size:var(--val-d-body);color:var(--val-schwarz)}
.nitem-body:hover .nitem-text{color:var(--val-petrol)}
.nitem-meta,.empty-hint,.drop-queue{font-size:var(--val-d-small);color:var(--val-grau)}
.drop-queue span{background:var(--val-beige);border:1px solid var(--val-linie);border-radius:var(--val-r-pill);padding:1px 8px}
.finput,.list-search input,.list-search select{font-family:var(--val-sans);font-weight:var(--val-w-light);font-size:var(--val-d-body);color:var(--val-schwarz);background:var(--val-weiss);border:1px solid var(--val-linie);border-radius:var(--val-r-sm)}
.finput:focus,.list-search input:focus,.list-search select:focus{border-color:var(--val-petrol);box-shadow:0 0 0 1px var(--val-petrol)}
.finput.ai-pending,.finput.ai-locked{background:var(--val-ki-bg);border:1.5px solid var(--val-ki-line)}   /* KI-Markierung: S.22 */
.tab.active,.tab-btn.active{color:var(--val-petrol);border-color:var(--val-petrol)}
.ai-toast{background:var(--val-ok-text);color:#fff;border-radius:var(--val-r-md);font-family:var(--val-sans)}
.attach-icon{color:var(--val-ki-text)}
.card-scroll::-webkit-scrollbar-thumb{background:var(--val-linie)}
.list-item,.lead-item{border:1px solid var(--val-linie);border-left:3px solid transparent;border-radius:var(--val-r-md);background:var(--val-weiss)}   /* Listeneintrag: S.22 */
.list-item:hover,.lead-item:hover{background:var(--val-zebra)}
.list-item.active,.lead-item.active{background:var(--val-info-bg);border-left-color:var(--val-petrol)}

/* Altseiten: Knopfklassen ohne .btn-Basis erhalten die Form aus Sektion 18 / A.1 */
.btn-primary:not(.btn),.btn-secondary:not(.btn),.btn-danger:not(.btn),.btn-outline:not(.btn),.btn-ghost:not(.btn),.btn-ki:not(.btn),.btn-discard,.prev-open,.btn-approve,.btn-reject{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--val-sans);font-weight:var(--val-w-demi);font-size:var(--val-d-ui);
  letter-spacing:0;text-transform:none;height:36px;padding:0 16px;border-radius:var(--val-r-md);cursor:pointer;line-height:1;white-space:nowrap;text-decoration:none;border:1px solid transparent}
.btn-secondary:not(.btn),.btn-discard,.prev-open{color:var(--val-petrol);border-color:var(--val-petrol);background:transparent}
.btn-secondary:not(.btn):hover,.btn-discard:hover,.prev-open:hover{background:var(--val-info-bg);color:var(--val-petrol);border-color:var(--val-petrol)}
.btn-primary:not(.btn):hover{background:var(--val-petrol-hover);color:#fff}
.btn-danger:not(.btn):hover{background:var(--val-err-bg);color:var(--val-danger)}
button[disabled].btn-primary,button[disabled].btn-secondary,button[disabled].btn-ki{opacity:.45;cursor:not-allowed}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{width:100%;min-height:auto;padding:var(--val-s-4)}
  .s-bottom{margin-top:var(--val-s-4)}
  .f-grid>*{grid-column:span 12!important}
  .f-view{grid-template-columns:1fr}
  .step .l{display:none}
}
@media(max-width:640px){
  #cwBtn{width:44px;height:44px;right:16px;bottom:16px}
}