/* ==========================================================================
   Gestaltung „Werkbank“ (03.10.2026) — nach Flavios Vorlage
   docs/werkbank-vorlage/ (template.html, shot-*.png, sec-*.html).

   Wird NACH allen Bereichs-Stilen geladen und gilt für html.wb (Partner-Bereich,
   Admin). Grundsätze der Vorlage:
   - Schrift Manrope (selbst gehostet), Ziffern tabellarisch.
   - Kantig: Radius 0 überall. Ausnahmen nur, wo die Vorlage sie setzt:
     angehobene Hero-Karten (.wb-hero, 24 px + Schatten) und Segment-
     schalter (.wb-round-all).
   - Rahmen: Seite #E7E8E3, weißer Rahmen mit weißer Seitenleiste,
     Arbeitsfläche #F3F4F0, Karten weiß ohne Rand und ohne Schatten.
   - Aktion in der Akzentfarbe (Standard Grün #187A52, je Konto wählbar — Einstellungen ›
     Oberfläche, siehe unten); Hauptaktion im Seitenkopf Dunkel #16201B.
   - Status in Schraffur (−45°, 5 px), siehe --wb-st-*.
   Kontraste: Texte ≥ 4,5:1 (Hilfsgrau #6E786F statt #8A948C der Vorlage).
   ========================================================================== */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

html.wb{
  --font-head:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-num:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;

  /* Grundflächen: neutrales Grau + ein kleiner Anteil der Akzentfarbe (Wunsch Flavio, 04.10.2026).
     Mit Standard-Grün höchstens 4 Stufen je Kanal neben den alten Werten (#E7E8E3, #F3F4F0,
     #F1F2EE, #FAFAF8, #F6F7F4, #EAEBE6, #EEEFEB, #E3E5DF); mit Blau kühl, mit Gelb warm. */
  --wb-page:color-mix(in srgb,var(--wb-tint) 5%,#EEEEEE); --wb-frame:#FFFFFF;
  --wb-work:color-mix(in srgb,var(--wb-tint) 4%,#F9F9F9); --wb-hover:color-mix(in srgb,var(--wb-tint) 5%,#F9F9F9);
  --wb-soft:color-mix(in srgb,var(--wb-tint) 2%,#FDFDFD); --wb-seg:color-mix(in srgb,var(--wb-tint) 6%,#F3F3F3);
  --canvas:var(--wb-work); --bg:var(--wb-work); --surface:#FFFFFF; --surface-2:color-mix(in srgb,var(--wb-tint) 3%,#FBFBFB);
  --ink:#16201B; --ink-mid:#3A443E; --ink-soft:#646E66; --ink-faint:#6E786F;
  --line:color-mix(in srgb,var(--wb-tint) 3%,#F2F2F2); --field-line:color-mix(in srgb,var(--wb-tint) 4%,#E8E8E8); --wb-line-2:var(--field-line);
  /* Akzent: alles aus EINER Farbe (--accent). Wählt ein Konto eine eigene Farbe, setzt partner.php
     --accent, --accent-ink (Schrift darauf, weiß oder dunkel nach Kontrast) und ein kontrastsicheres
     --accent-dark per <style id="wbAkzent"> (lib/oberflaeche.php, partner.js KFWOberflaeche).
     --accent-dark  Schrift/Link/Fokus in Akzent auf Weiß (≥ 4,5 : 1)
     --accent-hover Hauptknopf beim Überfahren
     --accent-soft  zarte getönte Fläche
     Statusfarben (--wb-st-*, --wb-pill-*, --sc-f*) und Warnfarben folgen dem Akzent bewusst NICHT. */
  --accent:#187A52; --accent-ink:#FFFFFF;
  /* Tönung der Grundflächen: folgt der Akzentfarbe, bis das Konto eine eigene wählt (Einstellungen › Oberfläche).
     Gewählt wird nur der Farbton; Sättigung und Helligkeit stehen fest, die Flächen bleiben gleich hell. */
  --wb-tint:var(--accent);
  --accent-dark:color-mix(in srgb,var(--accent) 80%,#000);
  --accent-hover:color-mix(in srgb,var(--accent) 86%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 12%,#fff);
  --wb-dark:#16201B; --wb-dark-hover:#2A352F;
  /* Alte Namen aus partner.css & Co.: --green ist dort meist Schrift → kontrastsicherer Ton. */
  --green-700:var(--accent); --green-600:var(--accent); --green-500:var(--accent); --green:var(--accent-dark); --green-soft:var(--accent-soft);
  --gold:#B5501C; --bronze-500:#16201B; --bronze-600:#2A352F; --bronze-100:#F6EBD8; --bronze-ink:#6B4313;
  --red:#A4461A; --info:#3E6E92; --hint-bg:var(--surface-2);
  --forest-900:#FFFFFF; --forest-800:#16201B;
  --verdict-bg:#16201B; --verdict-ink:#FFFFFF; --verdict-ink-soft:#C9D0CA;
  --wb-warn-bg:#F7E1D3; --wb-warn:#A4461A; --wb-warn-line:#F0D9CB;
  --r-xs:0; --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-pill:0; --radius:0;
  --shadow-raised:none; --shadow-sm:none;
  --wb-card:0 1px 2px rgba(22,32,27,.035),0 8px 18px -10px rgba(22,32,27,.13);
  --shadow:0 12px 32px rgba(22,32,27,.16),0 0 0 1px rgba(22,32,27,.05);
  --wb-lift:14px 0 36px -6px rgba(22,32,27,.09),2px 0 6px rgba(22,32,27,.03);
  --wb-tab-on:0 1px 3px rgba(22,32,27,.12);
  --fw-head-mid:600;

  /* Stand-Vokabular (Wohnungsspiegel, Balken, Pillen) */
  --wb-st-frei:#F2F3EF; --wb-st-frei-bd:#E6E8E2; --wb-st-frei-fg:#4A544D;
  --wb-st-gespr-a:#BFDDCB; --wb-st-gespr-b:#B1D5C0; --wb-st-gespr-fg:#14513A;
  --wb-st-res-a:#E2B776; --wb-st-res-b:#D9AA64; --wb-st-res-fg:#4D3410;
  --wb-st-verk-a:#187A52; --wb-st-verk-b:#1C8058; --wb-st-verk-fg:#FFFFFF;
  --wb-st-fs-a:#A2651F; --wb-st-fs-b:#9A5E1A; --wb-st-fs-fg:#FFFFFF;
  --wb-pill-frei-bg:#E3F0E8; --wb-pill-frei-fg:#14513A;
  --wb-pill-res-bg:#F6EBD8; --wb-pill-res-fg:#6B4313; --wb-pill-res-dot:#CC9550;
  --wb-pill-neu-bg:#F1F2EE; --wb-pill-neu-fg:#4A544D;
  --wb-pill-kont-bg:#F5EFE3; --wb-pill-kont-fg:#6B5530;
}
html.wb[data-theme="dark"]{
  /* Dunkle Grundflächen ebenso: dunkles Neutral + 3–6 % Akzent (alt: #0B0F0C, #141A16, #0F1411,
     #1E2620, #1A211C, #171E19, #1C241E, #242C26, #323B34). */
  --wb-page:color-mix(in srgb,var(--wb-tint) 3%,#0B0B0B); --wb-frame:color-mix(in srgb,var(--wb-tint) 4%,#151515);
  --wb-work:color-mix(in srgb,var(--wb-tint) 3%,#101010); --wb-hover:color-mix(in srgb,var(--wb-tint) 5%,#1F1F1F);
  --wb-soft:color-mix(in srgb,var(--wb-tint) 5%,#1B1B1B); --wb-seg:color-mix(in srgb,var(--wb-tint) 5%,#1F1F1F);
  --canvas:var(--wb-work); --bg:var(--wb-work); --surface:color-mix(in srgb,var(--wb-tint) 5%,#181818); --surface-2:color-mix(in srgb,var(--wb-tint) 5%,#1D1D1D);
  --ink:#EDF1EC; --ink-mid:#CBD3CC; --ink-soft:#AAB3AB; --ink-faint:#949E96;
  --line:color-mix(in srgb,var(--wb-tint) 5%,#262626); --field-line:color-mix(in srgb,var(--wb-tint) 6%,#353535); --wb-line-2:var(--field-line);
  /* Kein --accent hier: Die Fläche bleibt die gewählte Farbe. Schrift-Akzent hell, zarte Fläche dunkel. */
  --accent-dark:#5CC593; --accent-soft:color-mix(in srgb,var(--accent) 18%,var(--surface));
  --wb-dark:#EDF1EC; --wb-dark-hover:#CBD3CC;
  --gold:#E39A62; --red:#F08B6A; --hint-bg:var(--surface-2);
  --forest-900:var(--wb-frame); --bronze-100:#2B2316; --bronze-ink:#F1D7AE;
  --verdict-bg:#1C241E; --verdict-ink:#EDF1EC;
  --wb-warn-bg:#3A2117; --wb-warn:#F3A27F; --wb-warn-line:#4D2C1E;
  --wb-st-frei:#1C241E; --wb-st-frei-bd:#2C352E; --wb-st-frei-fg:#CBD3CC;
  --wb-st-gespr-a:#24533C; --wb-st-gespr-b:#204B36; --wb-st-gespr-fg:#D7EFE1;
  --wb-st-res-a:#7A5A26; --wb-st-res-b:#6F5122; --wb-st-res-fg:#FBEBD0;
  --wb-pill-frei-bg:#16301F; --wb-pill-frei-fg:#8FD9B2;
  --wb-pill-res-bg:#33281A; --wb-pill-res-fg:#F1CF98;
  --wb-pill-neu-bg:#232A25; --wb-pill-neu-fg:#CBD3CC;
  --wb-pill-kont-bg:#2E281D; --wb-pill-kont-fg:#E7D2A8;
  --shadow:0 12px 32px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);
  --wb-lift:14px 0 36px -6px rgba(0,0,0,.45),2px 0 6px rgba(0,0,0,.2);
}

/* ---------- Grundlagen ---------- */
html.wb body{font-family:var(--font-body);font-feature-settings:'tnum' 1;font-variant-numeric:tabular-nums;background:var(--wb-page);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html.wb h1,html.wb h2,html.wb h3,html.wb h4,html.wb button,html.wb input,html.wb select,html.wb textarea{font-family:var(--font-body)}
html.wb *{text-transform:none;letter-spacing:normal}
html.wb h1,html.wb h2,html.wb h3{letter-spacing:-.02em;font-weight:600}

/* Kantig — außer Hero-Karten und Segmentschaltern der Vorlage */
html.wb *:not(.wb-hero):not(.wb-round-all):not(.wb-round-all *):not(input[type=radio]):not(.wb-keep-round):not(:is(.ib-avatar,.cp-av,.cp-part .cp-kachel,.wbv-av,.fin-av,.fa-av,.gw-avatar,.acc-avatar,.nav-avatar,.mlc-av,.ld-av,.fl-av,.fw-av,.upd-emp-av,.ak-composer-av,.betreuer-photo,.acc-photo-row img,.wbk-av,.av,.crm-av,.fl-pm-logo,.pf-av)):not(:is(.ib-avatar,.cp-av,.cp-part .cp-kachel,.wbv-av,.fin-av,.fa-av,.gw-avatar,.acc-avatar,.nav-avatar,.mlc-av,.ld-av,.fl-av,.fw-av,.upd-emp-av,.ak-composer-av,.betreuer-photo,.acc-photo-row img,.wbk-av,.av,.crm-av,.fl-pm-logo,.pf-av) *){border-radius:0!important}
/* Profilbilder und Kürzel von Personen/Firmen sind immer rund (Flavio, 03.10.2026) */
html.wb :is(.ib-avatar,.cp-av,.cp-part .cp-kachel,.wbv-av,.fin-av,.fa-av,.gw-avatar,.acc-avatar,.nav-avatar,.mlc-av,.ld-av,.fl-av,.fw-av,.upd-emp-av,.ak-composer-av,.betreuer-photo,.acc-photo-row img,.wbk-av,.av,.crm-av,.fl-pm-logo,.pf-av){border-radius:50%!important;overflow:hidden}
html.wb :is(.ib-avatar,.cp-av,.cp-part .cp-kachel,.wbv-av,.fin-av,.fa-av,.gw-avatar,.acc-avatar,.nav-avatar,.mlc-av,.ld-av,.fl-av,.fw-av,.upd-emp-av,.ak-composer-av,.betreuer-photo,.acc-photo-row img,.wbk-av,.av,.crm-av,.fl-pm-logo,.pf-av) img{border-radius:50%!important;object-fit:cover}
html.wb .wb-hero{border-radius:24px!important;box-shadow:var(--wb-lift)!important}
html.wb .wb-round-all{border-radius:12px!important}
html.wb .wb-round-all > *{border-radius:9px!important}

/* Keine Schatten, keine Bewegung beim Überfahren — außer schwebenden Ebenen */
html.wb *:not(.wb-hero){box-shadow:none}
html.wb .modal-card,html.wb [role=menu],html.wb .upd-menu-pop,html.wb .bell-pop,html.wb .ib-search-results,html.wb .toast,html.wb .wb-float{box-shadow:var(--shadow)!important}
html.wb *:hover{transform:none}
html.wb :focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}

/* ---------- Rahmen ---------- */
/* Ganze Oberfläche auf 90 % (mehr Inhalt je Bildschirm); --wb-vh gleicht die Viewport-Höhe wieder aus. Kein Außenrahmen. */
html.wb{--wb-vh:100vh}
@media (min-width:901px){html.wb{zoom:.9;--wb-vh:calc(100vh / .9)}}
html.wb .ib-shell{margin:0;min-height:var(--wb-vh);background:var(--wb-frame);overflow:clip}
html.wb .ib-sidebar{width:244px;background:var(--wb-frame)!important;color:var(--ink)!important;border-right:0;padding:26px 18px 20px;gap:0;top:0;height:var(--wb-vh)}
html.wb .ib-main{background:var(--wb-work)}
html.wb .p-wrap{padding:22px 26px 34px}

/* Marke */
html.wb .ib-brand-row{padding:0 10px 30px}
html.wb .ib-brand{gap:11px}
html.wb .ib-brand-mark{width:34px;height:23px}
html.wb .ib-brand-text .brand-word{font-family:var(--font-body)!important;font-size:19px;letter-spacing:-.02em;line-height:1;color:var(--ink)!important;font-weight:400}
html.wb .ib-brand-text .brand-word b{font-weight:700}
html.wb .ib-brand-text small{font-size:12px;color:var(--ink-faint)!important;margin-top:3px;font-weight:400}
html.wb .ib-collapse,html.wb .ib-hamburger{color:var(--ink-faint)!important}
html.wb .ib-collapse:hover,html.wb .ib-hamburger:hover{background:var(--wb-hover)!important;color:var(--ink)!important}

/* Navigation: schlanke Zeilen, der aktive Bereich in der Akzentfarbe (zarte Fläche, Schrift und Symbol im Akzent),
   ohne Balken (Flavio, 29.10.2026, nach dem Entwurf des Postfachs). Die Ordner des Postfachs darunter behalten ihren Balken. */
html.wb .ib-nav{gap:2px}
html.wb .ib-nav-item{position:relative;gap:12px!important;padding:9px 12px!important;color:var(--ink-mid)!important;font-size:15px!important;font-weight:500!important;background:transparent!important}
html.wb .ib-nav-item:hover{background:var(--wb-hover)!important;color:var(--ink)!important}
html.wb .ib-nav-item.active{background:var(--accent-soft)!important;color:var(--accent-dark)!important;font-weight:650!important}
html.wb .ib-nav-ico svg{width:19px;height:19px}
html.wb .ib-nav-sub{padding-left:47px!important;font-size:14.5px!important}
html.wb .ib-nav-sub .ib-nav-ico{display:none}
html.wb .ib-nav-sub::before{content:"";position:absolute;left:21px;top:-2px;bottom:-2px;width:1px;background:var(--line)}
html.wb .ib-nav-item .nav-badge,html.wb .ib-nav-item [class*="badge"],html.wb .ib-nav-item [class*="count"]{background:var(--wb-dark)!important;color:var(--wb-frame)!important;font-size:11.5px!important;font-weight:700!important;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
html.wb #tab-account{margin-top:0}

/* Fuß: Mandant + Nutzer in einer Karte */
html.wb .wb-side-card{margin-top:auto;border:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px}
html.wb .ib-partner{padding:0}
html.wb .ib-partner img{filter:none!important;max-height:38px!important;max-width:100%!important}
html.wb .ib-side-foot{margin:0;padding:14px 0 0;border-top:1px solid var(--line)!important;gap:10px}
html.wb .ib-partner:empty + .ib-side-foot{padding-top:0;border-top:0!important}
html.wb .ib-avatar{width:34px;height:34px;background:#E9DCC4!important;color:#5B4320!important;font-family:var(--font-body)!important;font-size:12.5px;font-weight:700;border:0}
html.wb[data-theme="dark"] .ib-avatar{background:#3A3122!important;color:#F1DDB6!important}
html.wb .ib-profile-name{font-size:13.5px;font-weight:600;color:var(--ink)!important}
html.wb .ib-profile-sub{font-size:12px;color:var(--ink-faint)!important}
html.wb .ib-logout{width:30px;height:30px;color:var(--ink-faint)!important;background:transparent!important}
html.wb .ib-logout:hover{background:var(--wb-hover)!important;color:var(--ink)!important}

/* ---------- Kopfleiste ---------- */
html.wb .wb-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:22px 26px 0}
html.wb .wb-top .ib-search{flex:1 1 280px;max-width:460px;padding:0}
html.wb .wb-top .ib-search-ico{left:18px;color:var(--ink-faint)}
html.wb .wb-top .ib-search-input{height:48px;padding:0 18px 0 46px;font-size:15px;background:var(--surface)!important;border:0!important;color:var(--ink)!important}
html.wb .wb-top .ib-search-input::placeholder{color:var(--ink-faint)}
html.wb .wb-top .ib-search-input:focus{outline:2px solid var(--accent-dark);outline-offset:-2px}
html.wb .wb-top-fill{flex:1}
html.wb .wb-top .ib-icon-btn{position:relative;width:48px;height:48px;background:var(--surface)!important;color:var(--ink-mid)!important;display:flex;align-items:center;justify-content:center;border:0}
html.wb .wb-top .ib-icon-btn:hover{background:var(--wb-soft)!important;color:var(--ink)!important}
html.wb .wb-top .ib-icon-btn svg{width:20px;height:20px}
html.wb .wb-top .ib-bell [class*="dot"],html.wb .wb-top .ib-bell i,html.wb .wb-top .ib-bell .bell-n{top:12px!important;right:13px!important}
html.wb .wb-top-primary{display:flex;align-items:center;gap:9px;height:48px;padding:0 20px;border:0;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:600;cursor:pointer}
html.wb .wb-top-primary:hover{background:var(--accent-hover)}
html.wb .wb-top-primary.hidden{display:none}
html.wb .wb-sicht{display:flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;background:var(--surface);height:48px}
html.wb .wb-sicht.hidden{display:none}
html.wb .wb-sicht-lbl{font-size:12.5px;font-weight:600;color:var(--ink-faint)}

/* ---------- Seitenkopf ---------- */
html.wb .page-head{align-items:flex-end;gap:14px;margin-bottom:22px}
html.wb .page-title,html.wb .p-wrap h1{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-family:var(--font-body)!important}
html.wb .page-sub{font-size:15px;color:var(--ink-soft);margin-top:8px}
html.wb .page-actions{gap:10px}
html.wb .page-actions .btn,html.wb .page-head .btn{height:44px;padding:0 16px!important;font-size:14px!important;font-weight:600!important;border:0!important;background:var(--surface)!important;color:var(--ink)!important}
html.wb .page-actions .btn:hover,html.wb .page-head .btn:hover{background:var(--wb-soft)!important}
html.wb .page-actions .btn-primary,html.wb .page-head .btn-primary{background:var(--wb-dark)!important;color:var(--wb-frame)!important}
html.wb .page-actions .btn-primary:hover,html.wb .page-head .btn-primary:hover{background:var(--wb-dark-hover)!important}

/* ---------- Knöpfe ---------- */
html.wb .btn{font-weight:600!important;font-family:var(--font-body)}
html.wb .btn-primary{background:var(--accent)!important;color:var(--accent-ink)!important;border:1px solid var(--accent)!important}
html.wb .btn-primary:hover{background:var(--accent-hover)!important;border-color:var(--accent-hover)!important}
html.wb .btn-ghost{background:var(--surface)!important;color:var(--ink)!important;border:1px solid var(--field-line)!important}
html.wb .btn-ghost:hover{background:var(--wb-soft)!important}
html.wb .btn-bronze{background:var(--wb-dark)!important;color:var(--wb-frame)!important}
html.wb .btn-danger,html.wb #confirmButtons .btn-danger,html.wb #modal .btn-danger{background:#A4461A!important;color:#fff!important;border:1px solid #A4461A!important}
html.wb .btn-danger:hover{background:#8A3912!important;border-color:#8A3912!important}
/* Kein Anheben, kein Schatten — auch nicht in Dialogen und Seitenköpfen */
html.wb .btn,html.wb .btn:hover,html.wb #modal .btn,html.wb #confirmDialog .btn,html.wb .page-actions .btn{box-shadow:none!important;transform:none!important}
/* Entwurfsband der Bemusterung: feste dunkle Fläche, in beiden Modi lesbar */
html.wb .bem-vorschau-band.ist-entwurf{background:#6B4313}

/* ---------- Karten ---------- */
html.wb [class$="-card"],html.wb [class*="-card "],html.wb [class$="-karte"],html.wb [class*="-karte "],
html.wb .cp-karte,html.wb .dash-card,html.wb .ck-card,html.wb .vg-card,html.wb .acc-card,html.wb .obj-tabcard,html.wb .upd-card,
html.wb .an-card,html.wb .bem-card,html.wb .koop-card,html.wb .sc-karte,html.wb .pd-card,html.wb .gw-card,html.wb .inbox-card,
html.wb .lead-table-wrap,html.wb .bk-table-wrap{background:var(--surface);border:0!important;box-shadow:var(--wb-card)!important}
html.wb .cp-ktitel,html.wb .dash-card-head h3,html.wb .ck-head h3,html.wb .vg-card-head h3,html.wb .acc-card h3,html.wb .upd-cardhead h3,html.wb .sc-karte h2,html.wb .sc-karte h3{font-size:19px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--ink)}

/* ---------- Reiter: Segmentleiste ---------- */
html.wb [role="tablist"]:not(.ib-nav){display:inline-flex;gap:2px;padding:4px;background:var(--wb-seg);border:0!important;max-width:100%;overflow-x:auto}
html.wb [role="tablist"]:not(.ib-nav) [role="tab"]{padding:10px 16px;border:0!important;background:transparent;color:var(--ink-faint);font-size:15px;font-weight:600;white-space:nowrap}
html.wb [role="tablist"]:not(.ib-nav) [role="tab"][aria-selected="true"],html.wb [role="tablist"]:not(.ib-nav) [role="tab"].on,html.wb [role="tablist"]:not(.ib-nav) [role="tab"].active{background:var(--surface)!important;color:var(--ink)!important;box-shadow:var(--wb-tab-on)!important}
html.wb [role="tablist"]:not(.ib-nav) [role="tab"]::after{display:none!important}

/* ---------- Tabellen ---------- */
html.wb table th{font-size:13px;font-weight:500;color:var(--ink-faint);background:transparent!important;border-bottom:1px solid var(--line)}
html.wb table td{border-color:var(--line)}

/* ---------- Felder ---------- */
html.wb input[type=text],html.wb input[type=email],html.wb input[type=tel],html.wb input[type=number],html.wb input[type=search],html.wb input[type=date],html.wb input[type=password],html.wb select,html.wb textarea{border-color:var(--field-line);font-family:var(--font-body)}

/* ---------- Hinweisleiste „… warten auf Sie“ ---------- */
html.wb .ib-todo{background:var(--surface)!important;border:0!important;border-left:0!important}
html.wb .ib-todo-mini{background:var(--surface)!important;color:var(--ink)!important;border:0!important}
html.wb .ib-todo-mini-cta{color:var(--accent-dark)!important}

/* ---------- Dialoge ---------- */
html.wb .modal-card>h3,html.wb #confirmTitle{background:var(--surface)!important;color:var(--ink)!important;font-family:var(--font-body)!important;font-size:19px!important;font-weight:600!important;border-bottom:1px solid var(--line)!important}
html.wb .modal-card:has(>h3) .modal-close,html.wb #confirmDialog .modal-close{color:var(--ink-faint)!important;background:transparent!important}
html.wb .modal-card:has(>h3) .modal-close:hover{background:var(--wb-hover)!important;color:var(--ink)!important}
html.wb #modal .modal-buttons .btn-primary,html.wb #confirmButtons .btn-primary{background:var(--accent)!important;border-color:var(--accent)!important}
html.wb .modal-card>h3 .anl-step.on .n{background:var(--accent)!important;color:var(--accent-ink)!important}
html.wb .modal-card>h3 .anl-step,html.wb .modal-card>h3 .anl-step.on{color:var(--ink-faint)!important}
html.wb .modal-card>h3 .anl-step .n{background:var(--surface-2)!important;color:var(--ink-faint)!important}

/* ---------- Mobil ---------- */
@media (max-width:900px){
  html.wb .ib-shell{margin:0;min-height:100vh}
  html.wb .ib-sidebar{width:auto;height:auto;top:0;padding:9px 12px}
  html.wb .ib-brand-row{padding:0}
  html.wb .wb-side-card{display:none}
  html.wb .wb-top{padding:12px 14px 0;gap:8px}
  html.wb .wb-top .ib-search{flex-basis:100%;max-width:none;order:9}
  html.wb .wb-top .ib-icon-btn,html.wb .wb-top-primary,html.wb .wb-sicht{height:42px}
  html.wb .wb-top .ib-icon-btn{width:42px}
  html.wb .p-wrap{padding:16px 14px 70px}
}
@media (min-width:901px){
  html.wb .mlc{height:calc(var(--wb-vh) - 92px)}
  html.wb body.imp-active .ib-sidebar{height:calc(var(--wb-vh) - var(--imp-h))!important}
}

/* ---------- Auswahlkästen: eigener Pfeil statt Systemoptik ---------- */
html.wb select:not([multiple]):not([size]){-webkit-appearance:none;appearance:none;border-radius:0;padding-right:30px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23748078' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:12px 12px!important}
/* ---------- Systemnotizen: Fläche statt farbiger Seitenkante ---------- */
html.wb .crm-note.note-sys .note-body{background:var(--bronze-100)!important;border:0!important;color:var(--ink)}
html.wb .crm-note.note-sys.warn .note-body{background:var(--wb-warn-bg)!important;border:0!important}
html.wb .cf-inherit-note{border-left:0;background:var(--surface-2)}
/* ---------- Phasen-Pille (Kundenakte, Listen): Stand-Vokabular statt Rot/Grün-Mischung ---------- */
html.wb .phase-badge{background:var(--wb-pill-neu-bg);color:var(--wb-pill-neu-fg);font-weight:700;padding:4px 9px}
html.wb .phase-badge[data-status="beratung"]{background:var(--wb-pill-frei-bg);color:var(--wb-pill-frei-fg)}
html.wb .phase-badge[data-status="reserviert"]{background:var(--wb-pill-res-bg);color:var(--wb-pill-res-fg)}
html.wb .phase-badge[data-kind="won"]{background:var(--wb-st-verk-a);color:var(--wb-st-verk-fg)}   /* Status Abschluss: fest */
html.wb .phase-badge[data-kind="lost"]{background:var(--wb-warn-bg);color:var(--wb-warn)}

/* ---------- Kleiner Schatten an allen Karten (Wunsch Flavio, 03.10.2026) ---------- */
html.wb[data-theme="dark"]{--wb-card:0 1px 2px rgba(0,0,0,.3),0 8px 18px -10px rgba(0,0,0,.55)}
html.wb .wbv-card,html.wb .wbv-herowrap,html.wb .wbv-objs,html.wb .wbv-phase,html.wb .finb-karte,html.wb .finb .fe-karte,html.wb .cp-hero,html.wb .cp-erl,
html.wb .ib-todo,html.wb .dash-kpi,html.wb .pk-card,html.wb .sc-kz,html.wb .obj-card,html.wb .acc-main>section,html.wb .wbk-card,html.wb .wbo-card,
html.wb .vg-card,html.wb .ak-card,html.wb .crm-kpi,html.wb .mlc,html.wb .lead-kpi,html.wb .tools-card{box-shadow:var(--wb-card)!important}
/* Karte in Karte bekommt keinen zweiten Schatten */
html.wb :is([class$="-card"],[class*="-card "],[class$="-karte"],[class*="-karte "],.wbv-card,.vg-card,.cp-karte,.finb-karte) :is([class$="-card"],[class*="-card "],[class$="-karte"],[class*="-karte "],.wbv-card,.vg-card,.cp-karte):not(.wb-hero){box-shadow:none!important}
html.wb .cp-hero .wb-hero,html.wb .wbv-herowrap .wb-hero{box-shadow:var(--wb-lift)!important}
html.wb .wb-side-card{box-shadow:none!important}

/* ---------- Dialoge nach Flavios Beispielen (03.10.2026): getönter Kopf, weißer Rumpf, grauer Fuß ---------- */
html.wb{--wbm-kopf:color-mix(in srgb,var(--accent) 9%,var(--surface));--wbm-fuss:var(--wb-soft);--wbm-feld:#D5D8D0}
html.wb[data-theme="dark"]{--wbm-kopf:color-mix(in srgb,var(--accent) 16%,var(--surface));--wbm-feld:#3A443C}
html.wb .modal-card>h3,html.wb #confirmTitle{background:var(--wbm-kopf)!important;color:var(--ink)!important;font-size:24px!important;font-weight:700!important;letter-spacing:-.015em;line-height:1.2;padding:26px 92px 26px 32px!important;border-bottom:1px solid var(--line)!important}
html.wb .modal-card>h3 .modal-sub{display:block;margin-top:8px;font-size:16px;font-weight:400;letter-spacing:0;line-height:1.45;color:var(--ink-soft)}
html.wb .modal-card:has(>h3) .modal-close,html.wb #confirmDialog .modal-close{top:24px!important;right:30px!important;width:44px!important;height:44px!important;min-width:0;min-height:0;font-size:20px!important;color:var(--ink)!important;background:color-mix(in srgb,var(--ink) 8%,var(--wbm-kopf))!important}
html.wb .modal-card:has(>h3) .modal-close:hover,html.wb #confirmDialog .modal-close:hover{background:color-mix(in srgb,var(--ink) 15%,var(--wbm-kopf))!important;color:var(--ink)!important}
html.wb .modal-card #modalBody,html.wb .modal-card #confirmBody{padding:26px 32px}
html.wb .modal-card .modal-buttons{background:var(--wbm-fuss);padding:18px 32px!important;gap:12px;align-items:center;border-top:1px solid var(--line)}
html.wb .modal-card .modal-buttons .btn{height:50px;padding:0 24px;font-size:16.5px}
html.wb .modal-card .modal-buttons .btn-ghost{background:transparent!important;border-color:transparent!important;color:var(--ink)!important}
html.wb .modal-card .modal-buttons .btn-ghost:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)!important}
html.wb .modal-card .modal-buttons .wbm-fussnote{margin-right:auto;font-size:15.5px;color:var(--ink-soft)}
html.wb .modal-card .modal-buttons .wbm-fussnote b{color:var(--ink);font-weight:700}
/* Felder im Dialog */
html.wb #modalBody .field>span,html.wb #modalBody label.field>span{font-size:15.5px;font-weight:600;color:var(--ink-mid)}
html.wb #modalBody .wbm-pflicht{font-style:normal;font-weight:400;font-size:14px;color:var(--ink-faint);margin-left:8px}
html.wb #modalBody .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),html.wb #modalBody .field select,html.wb #modalBody .field textarea{border:1.5px solid var(--wbm-feld)!important;background:var(--surface)!important;font-size:16.5px;padding:0 16px;min-height:52px;color:var(--ink)}
html.wb #modalBody .field textarea{padding:12px 16px}
html.wb #modalBody .field input:focus,html.wb #modalBody .field select:focus,html.wb #modalBody .field textarea:focus{border-color:var(--accent-dark)!important;outline:none;box-shadow:0 0 0 1px var(--accent-dark)!important}
html.wb #modalBody .field+.field,html.wb #modalBody .field{margin-top:18px!important}
html.wb #modalBody .field:first-child{margin-top:0!important}
/* Felder nebeneinander: Der Abstand gehört der Reihe, nicht dem einzelnen Feld. Sonst stünde das erste Feld
   einer Reihe (ohne Abstand) höher als sein Nachbar. */
html.wb #modalBody .crm-grid2{margin-top:18px!important;gap:18px 20px;align-items:start}
html.wb #modalBody .crm-grid2+div:not([class]){margin-top:18px!important}
html.wb #modalBody .crm-grid2>.field,html.wb #modalBody .crm-grid2>.field+.field,html.wb #modalBody .crm-grid2>*{margin-top:0!important}
/* Dasselbe für das Formular der Mitarbeiterkonten (.acc-form, zweispaltig): Nachname stand 18px tiefer als Vorname (21.10.2026). */
html.wb #modalBody .acc-form{gap:18px 20px;align-items:start}
html.wb #modalBody .acc-form>.field,html.wb #modalBody .acc-form>.field+.field,html.wb #modalBody .acc-form>*{margin-top:0!important}
html.wb #modalBody select[hidden]{display:none!important}
html.wb #modalBody .pf-obj-choose{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 20px;border:1.5px dashed var(--wbm-feld);background:var(--surface);color:var(--accent-dark);font-size:16.5px;font-weight:600;cursor:pointer}
html.wb #modalBody .pf-obj-choose:hover{border-color:var(--accent-dark);background:var(--accent-soft)}
html.wb .wbm-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:4px;background:var(--wb-work)}
html.wb .wbm-seg button{height:44px;padding:0 8px;border:0;background:transparent;color:var(--ink-soft);font-size:15.5px;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .wbm-seg button.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--wb-tab-on)}
@media (max-width:620px){
  html.wb .modal-card>h3,html.wb #confirmTitle{font-size:20px!important;padding:20px 72px 20px 20px!important}
  html.wb .modal-card:has(>h3) .modal-close{top:16px!important;right:16px!important}
  html.wb .modal-card #modalBody,html.wb .modal-card #confirmBody{padding:20px}
  html.wb .modal-card .modal-buttons{padding:14px 20px!important}
  html.wb .wbm-seg{grid-auto-flow:row}
  html.wb .modal-card .modal-buttons .wbm-fussnote{flex-basis:100%}
}

/* ---------- Kopfleiste: Profil mit Bild, Name und Abmelden (statt in der Seitenleiste) ---------- */
html.wb .wb-top .wb-profil{display:flex;align-items:center;gap:10px;height:48px;margin:0;padding:0 6px 0 8px!important;border:0!important;background:var(--surface);min-width:0;flex:none}
html.wb .wb-top .wb-profil .ib-avatar{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
html.wb .wb-top .wb-profil .ib-avatar img{width:100%;height:100%;object-fit:cover}
html.wb .wb-top .wb-profil .ib-profile-text{display:flex;flex-direction:column;min-width:0;max-width:190px;line-height:1.25}
html.wb .wb-top .wb-profil .ib-profile-name,html.wb .wb-top .wb-profil .ib-profile-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.wb .wb-top .wb-profil .ib-profile-name{font-size:14.5px}
html.wb .wb-top .wb-profil .ib-logout{width:38px;height:38px;flex:none;background:transparent;color:var(--ink-soft)}
html.wb .wb-top .wb-profil .ib-logout:hover{background:var(--wb-hover);color:var(--ink)}
/* Menü unter dem Namen (30.10.2026): Ihr Konto und Neuerungen */
html.wb .wb-top .wb-profil{position:relative}
html.wb .wb-profil-knopf{display:flex;align-items:center;gap:10px;min-width:0;height:100%;margin:0;padding:0 8px 0 2px;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
html.wb .wb-profil-knopf:hover{background:var(--wb-hover)}
html.wb .wb-profil-knopf:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
html.wb .wb-profil-menue{position:absolute;top:calc(100% + 6px);right:0;z-index:80;display:flex;flex-direction:column;min-width:210px;padding:6px 0;background:var(--surface);box-shadow:var(--shadow)}
html.wb .wb-profil-menue[hidden]{display:none}
html.wb .wb-profil-menue [role=menuitem]{padding:10px 16px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
html.wb .wb-profil-menue [role=menuitem]:hover,html.wb .wb-profil-menue [role=menuitem]:focus-visible{background:var(--wb-hover);outline:none}
html.wb .wb-side-card:has(.ib-partner:empty){display:none}
html.wb .ib-collapsed .wb-side-card{padding:8px}
@media (max-width:900px){
  html.wb .wb-top .wb-profil{height:42px;padding:0 2px 0 4px!important}
  html.wb .wb-top .wb-profil .ib-profile-text{display:none}
}
/* ---------- Hinweis-Punkte sind rund ---------- */
html.wb .bell-dot:not(#_),html.wb .live-fresh-dot:not(#_),html.wb .live-dot:not(#_),html.wb .ann-br-dot:not(#_),html.wb .ib-nav-dot:not(#_),html.wb .tab-dot:not(#_){border-radius:50%!important}
html.wb .bell-dot{box-shadow:0 0 0 2px var(--surface)!important}
/* ---------- „Neu“-Knöpfe im Seitenkopf: überall gleich groß und dunkel ---------- */
html.wb .page-head .page-actions>.btn,html.wb .page-head .page-actions .seg,html.wb .mlc-btn-dark{height:44px;min-height:44px;padding-top:0;padding-bottom:0;font-size:15px;display:inline-flex;align-items:center;zoom:1!important}
html.wb .page-head .page-actions>.btn{padding-left:18px;padding-right:18px}
html.wb .mlc-btn-dark{background:var(--wb-dark)!important;color:var(--wb-frame)!important;border:0!important;padding:0 18px;font-weight:600;gap:8px}
html.wb .mlc-btn-dark:hover{background:var(--wb-dark-hover)!important}
/* ---------- Eingabetaste im Hauptknopf einfacher Dialoge ---------- */
html.wb .wbm-enter{display:inline-flex;align-items:center;justify-content:center;width:30px;height:24px;margin-left:12px;background:color-mix(in srgb,var(--accent-ink) 20%,transparent);color:inherit;font:inherit;border:0;vertical-align:middle}
html.wb .page-head .page-actions .seg{height:auto;min-height:0;padding:0}
html.wb .page-head .page-actions .seg .seg-btn{height:44px}
html.wb .wbm-seg button{font-size:14.5px;padding:0 4px}
/* ---------- Seitenleiste: Partner-Logo oben, immobricks + Einklappen unten (Flavio, 03.10.2026) ---------- */
@media (min-width:901px){
  html.wb .wb-side-card{order:-1;margin:0 0 26px;border:0;padding:4px 10px 0;gap:0}
  html.wb .ib-partner img{max-height:46px!important}
  html.wb .ib-nav{order:0}
  html.wb .ib-brand-row{order:9;margin-top:auto;padding:18px 10px 0;border-top:1px solid var(--line)}
  html.wb .ib-collapsed .ib-brand-row{padding:14px 0 0}
  /* Das immobricks-Logo steht mittig in der Seitenleiste, der Knopf zum Einklappen rechts daneben, ohne es zu verschieben. */
  html.wb .ib-brand-row{position:relative;justify-content:center}
  html.wb .ib-brand-row .ib-collapse{position:absolute;right:-8px;top:18px;bottom:0;margin:auto 0;height:fit-content}
  html.wb .ib-collapsed .ib-brand-row .ib-collapse{position:static;margin:0}
}
/* Ohne Logo steht der Firmenname — lesbar, nicht blass */
html.wb .ib-partner,html.wb .ib-partner *:not(img){color:var(--ink)!important;opacity:1!important;font-size:16px;font-weight:600;letter-spacing:-.01em}
/* Eingeklappte Seitenleiste: Suche und Profil gehören zur Kopfleiste und bleiben unverändert */
html.wb .ib-collapsed .wb-top .ib-search{display:block}
html.wb .ib-collapsed .wb-top .wb-profil{flex-direction:row!important;gap:10px}
html.wb .ib-collapsed .wb-top .wb-profil .ib-profile-text{display:flex!important}
html.wb .ib-collapsed .wb-top .wb-profil .ib-logout{display:flex!important}
@media (max-width:900px){html.wb .ib-collapsed .wb-top .wb-profil .ib-profile-text{display:none!important}}

/* ---------- Datei-Upload: Vorschau des Eintrags, Fortschritt als durchscheinende Fläche darüber ---------- */
html.wb .dok-lade-wb{margin:0 0 10px;padding:0}
html.wb .dok-lade-zeile{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 14px;background:var(--surface);border:1px dashed var(--field-line);overflow:hidden}
html.wb .dok-lade-fuell{position:absolute;inset:0 auto 0 0;width:0;background:color-mix(in srgb,var(--accent) 16%,transparent);border-right:2px solid var(--accent);transition:width .18s linear;pointer-events:none}
html.wb .dok-lade-ico{position:relative;flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:var(--wb-hover);color:var(--ink-mid)}
html.wb .dok-lade-t{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.wb .dok-lade-t b{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.wb .dok-lade-t .dok-prog-t{display:block;margin:0;font-size:12.5px;color:var(--ink-soft)}
html.wb .dok-lade-pct{position:relative;flex:none;font-size:14px;font-weight:700;color:var(--accent-dark);min-width:44px;text-align:right}
html.wb .dok-lade-wb.fertig .dok-lade-fuell{width:100%!important;border-right-color:transparent}
@media (prefers-reduced-motion:no-preference){html.wb .dok-lade-wb.fertig .dok-lade-fuell{animation:dokLadeAtmen 1.2s ease-in-out infinite}}
@keyframes dokLadeAtmen{0%,100%{opacity:1}50%{opacity:.45}}
html.wb .dok-lade-wb{margin:10px 12px 4px}
html.wb .dok-lade-frei.dok-lade-wb{margin:10px 0 4px;flex-basis:100%;width:100%;grid-column:1/-1;min-width:0}
html.wb .bm-p>.dok-lade-frei.dok-lade-wb{margin:2px 0 0}

/* Kopf der Feature-Ankündigung: --forest-900 ist im hellen Thema Weiß, die weiße Schrift darauf war unsichtbar. */
/* Schrift als Gegenfarbe zur Fläche (--wb-frame): --wb-dark ist im Dunkelmodus hell, festes Weiß wäre dort unlesbar */
html.wb .ann-head,html.wb .ann-head .bw{background:var(--wb-dark);color:var(--wb-frame)}
html.wb .ann-head .bw{background:transparent}
html.wb .ann-head .ann-x{color:var(--wb-frame);opacity:.72}
html.wb .ann-head .ann-x:hover{opacity:1}

/* ---------- Fest eingetragenes Grün aus den älteren Stilen folgt jetzt Akzent und Tönung (09.10.2026) ----------
   In partner.css und styles.css standen einzelne Flächen als festes rgba-Grün. Mit einer anderen Akzentfarbe blieb
   dort das alte Grün stehen, am deutlichsten in der Glocke (ungelesene Zeilen, Symbolfläche). */
html.wb .bell-item.unseen{background:color-mix(in srgb,var(--wb-tint) 5%,var(--surface))}
html.wb .bell-item.unseen:hover{background:color-mix(in srgb,var(--wb-tint) 9%,var(--surface))}
html.wb .bell-ico.t-green{background:var(--accent-soft);color:var(--accent-dark)}
html.wb .koop-role.is-peer{background:var(--accent-soft);color:var(--accent-dark)}
html.wb .xp-badge.live{background:var(--accent-soft);color:var(--accent-dark);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
html.wb .xp-src.auto{background:var(--accent-soft);color:var(--accent-dark)}
html.wb .xp-check.on{background:color-mix(in srgb,var(--accent) 7%,transparent)}
html.wb .ovw-band-accent,html.wb .ovw-rate,html.wb .bp-cost-final{border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
html.wb .ovw-rate-phase-next{border-top-color:color-mix(in srgb,var(--accent) 28%,transparent)}