/* TARVI look (started with Büro, now every area except Tarvi Live and Zuhause) – calm, clear and premium. Same family as Zuhause (soft surfaces, rounded shapes, a side menu with groups),
   but without colour worlds or pictures: graphite surfaces and one accent (blue for Geschäftlich, lavender for Privat).
   The Büro sections are the existing panels; they read the --k-* tokens of ui-system.css, so redefining the tokens here
   gives every section the same look without touching special surfaces (Office editor, note paper, calendar grid). */

/* ---------- tokens ---------- */
#workspace > :not(#voice-panel) {
  --k-surface: rgba(14, 22, 34, .84);
  --k-surface-2: rgba(255, 255, 255, .04);
  --k-surface-3: rgba(255, 255, 255, .075);
  --k-line: rgba(255, 255, 255, .07);
  --k-line-strong: rgba(255, 255, 255, .12);
  --k-text: #f4f7fb;
  --k-muted: #c4cedb;
  --k-faint: #8d9aac;
  --k-accent: #8fb2ff;
  --k-accent-hover: #abc5ff;
  --k-accent-ink: #081430;
  --k-accent-soft: rgba(143, 178, 255, .14);
  --k-radius: 20px;
  --k-radius-sm: 12px;
  --b-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .75);
  --b-head: radial-gradient(130% 140% at 100% 0%, color-mix(in srgb, var(--k-accent) 26%, transparent), transparent 58%),
            linear-gradient(160deg, #16243a 0%, #0d1726 60%, #0a121e 100%);
}
body[data-buero="on"][data-scope="private"] #workspace > :not(#voice-panel) {
  --k-accent: #c3b2ff; --k-accent-hover: #d5c9ff; --k-accent-ink: #170d36; --k-accent-soft: rgba(195, 178, 255, .15);
}
:root[data-theme="light"] #workspace > :not(#voice-panel) {
  --k-surface: rgba(255, 255, 255, .92);
  --k-surface-2: #f4f6fa;
  --k-surface-3: #e9edf4;
  --k-line: #e1e6ee;
  --k-line-strong: #cbd3df;
  --k-text: #0d1829;
  --k-muted: #3f4c62;
  --k-faint: #5f6b80;
  --k-accent: #2f56d6;
  --k-accent-hover: #2546b4;
  --k-accent-ink: #fff;
  --k-accent-soft: #e6ecfd;
  --b-shadow: 0 1px 2px rgba(20, 32, 51, .05), 0 22px 44px -32px rgba(20, 32, 51, .35);
  --b-head: radial-gradient(130% 140% at 100% 0%, color-mix(in srgb, var(--k-accent) 30%, transparent), transparent 60%),
            linear-gradient(160deg, #1d2d4a 0%, #15223a 60%, #101a2d 100%);
}
:root[data-theme="light"] body[data-buero="on"][data-scope="private"] #workspace > :not(#voice-panel) { --k-accent: #6646d1; --k-accent-hover: #5536b8; --k-accent-soft: #eee9fc; }

/* ---------- layout: side menu + content ---------- */
body[data-buero-layout="side"] #workspace:not([hidden]) { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 32px; align-items: start; }
body[data-buero-layout="side"] #workspace > * { grid-column: 1 / -1; }
body[data-buero-layout="side"] #workspace > #buero-bar { grid-column: 1; position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; margin: 0; }
body[data-buero-layout="side"] #workspace > section:not([hidden]) { grid-column: 2; min-width: 0; }

/* ---------- side menu ---------- */
#workspace #buero-bar { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; }
#workspace #buero-bar .buero-head { position: relative; display: grid; gap: 4px; padding: 22px 20px 20px; border-radius: 22px; color: #fff; overflow: hidden;
  background: var(--b-head); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 24px 44px -30px rgba(0, 0, 0, .8); }
#workspace #buero-bar .buero-head::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px) 0 0 / 100% 22px; mask: linear-gradient(200deg, #000, transparent 70%); opacity: .5; }
#workspace #buero-bar .buero-head strong { font-size: 28px; font-weight: 750; letter-spacing: -.035em; line-height: 1.05; }
#workspace #buero-bar .buero-meta { font-size: 13px; font-weight: 550; color: rgba(255, 255, 255, .72); }
#workspace #buero-bar .buero-modes { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border: 1px solid var(--k-line); border-radius: 999px; background: var(--k-surface-2); }
#workspace #buero-bar .buero-modes[hidden] { display: none; }
#workspace #buero-bar .buero-modes button { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 650; color: var(--k-muted); background: transparent; cursor: pointer;
  transition: color .2s, background-color .25s var(--k-ease-out), box-shadow .25s; }
#workspace #buero-bar .buero-modes button[aria-pressed="true"] { color: var(--k-accent-ink); background: var(--k-accent); box-shadow: 0 8px 18px -10px var(--k-accent); }
body[data-scope="private"] #workspace #buero-bar .buero-modes button[aria-pressed="true"] { background: var(--k-accent); }
#workspace #buero-bar .buero-modes button:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }

#workspace #buero-bar .buero-nav.segments { flex: none; display: grid; gap: 4px; width: auto; margin: 0; padding: 8px; border: 1px solid var(--k-line); border-radius: 22px; background: var(--k-surface); box-shadow: var(--b-shadow); overflow: visible; }
#workspace #buero-bar .buero-group { display: grid; gap: 2px; }
#workspace #buero-bar .buero-group[hidden] { display: none; }
#workspace #buero-bar .buero-group + .buero-group { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--k-line); }
#workspace #buero-bar .buero-group-label { margin: 4px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-faint); }
#workspace #buero-bar .buero-group > .segment { position: relative; display: flex; align-items: center; width: 100%; min-height: 40px; padding: 0 12px 0 14px; border: 0; border-radius: 12px;
  font: inherit; font-size: 14.5px; font-weight: 550; color: var(--k-muted); background: transparent; text-align: left; cursor: pointer;
  transition: color .15s, background-color .2s; }
#workspace #buero-bar .buero-group > .segment[hidden] { display: none; }
#workspace #buero-bar .buero-group > .segment[aria-current="page"] { color: var(--k-text); font-weight: 650; background: var(--k-surface-3); }
#workspace #buero-bar .buero-group > .segment[aria-current="page"]::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--k-accent); }
#workspace #buero-bar .buero-group > .segment:focus-visible { outline: 2px solid var(--k-accent); outline-offset: -2px; }
#workspace #buero-bar .buero-group > .segment:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) { #workspace #buero-bar .buero-group > .segment:not([aria-current="page"]):hover { color: var(--k-text); background: var(--k-surface-2); } }

/* ---------- content (every area except Tarvi Live and Zuhause) ---------- */
/* titles: one size, generous */
#workspace :is(section, div)[id$="-panel"]:not(#voice-panel) > .section-head :is(h1, h2),
#workspace #tools-panel [id$="-view"] > .section-head h2,
#workspace #tools-panel [id$="-view"] > .card > header h2,
#workspace .calendar-hero h1,
body[data-buero="on"] #workspace #books-panel .bk-head h2 { font-size: clamp(1.85rem, 2.6vw, 2.35rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; }
#workspace .eyebrow:not(#voice-panel *, #home-panel *) { color: var(--k-accent); opacity: 1; letter-spacing: .14em; font-size: .68rem; }

/* surfaces */
#workspace .card:not(#voice-panel *, #home-panel *) { border-color: var(--k-line); border-radius: 22px; box-shadow: var(--b-shadow); backdrop-filter: blur(14px) saturate(1.15); }
body[data-buero="on"] #workspace #books-panel :is(.bk-tile, .bk-row) { box-shadow: none; }
body[data-buero="on"] #workspace #books-panel .bk-tile { padding: 18px 20px; border-radius: 18px; background: var(--k-surface); box-shadow: var(--b-shadow); }
body[data-buero="on"] #workspace #books-panel .bk-tile strong { font-size: clamp(1.25rem, 2vw, 1.65rem); font-weight: 750; }
body[data-buero="on"] #workspace #books-panel .bk-tile-label { font-size: .7rem; letter-spacing: .12em; font-weight: 650; }
body[data-buero="on"] #workspace #books-panel .bk-tiles > .bk-tile:first-child { border-color: transparent; color: #fff; background: var(--b-head); }
body[data-buero="on"] #workspace #books-panel .bk-tiles > .bk-tile:first-child :is(strong, .bk-tile-label) { color: #fff; }
body[data-buero="on"] #workspace #books-panel .bk-tiles > .bk-tile:first-child small { color: rgba(255, 255, 255, .7); }
body[data-buero="on"] #workspace #books-panel .bk-row { border-radius: 14px; padding: 12px 14px; }
body[data-buero="on"] #workspace #books-panel .bk-tiles { grid-template-columns: repeat(auto-fit, minmax(min(46%, 160px), 1fr)); }

/* buttons: pills, neutral; the main action carries the accent */
#workspace .button:not(#voice-panel *, #home-panel *):not(.small) { border-radius: 999px; padding: 0 18px; }
#workspace .button.primary:not(#voice-panel *, #home-panel *) { box-shadow: 0 10px 22px -14px var(--k-accent); }
#workspace :is(.vs-subtabs, .segments, .mail-folders, .calendar-view-switch, .calls-tabs, .bk-nav):not(.buero-nav):not(#voice-panel *, #home-panel *) { border-radius: 999px; padding: 4px; background: var(--k-surface-2); }
#workspace :is(.vs-subtabs, .segments, .mail-folders, .calendar-view-switch, .calls-tabs, .bk-nav):not(.buero-nav):not(#voice-panel *, #home-panel *) > :is(button, .button, .segment) { border-radius: 999px; }
#workspace :is(.segments, .mail-folders, .calendar-view-switch, .calls-tabs, .bk-nav):not(.buero-nav):not(#voice-panel *, #home-panel *) > :is([aria-pressed="true"], [aria-selected="true"], [aria-current="page"], .active) {
  color: var(--k-text); background: var(--k-surface-3); box-shadow: inset 0 0 0 1px var(--k-line-strong); }

/* fields */
#workspace :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea):not(#voice-panel *, #home-panel *):not(#notes-view *, #image-studio-view *, #cut-studio-view *, #cad-view *) { border-radius: 12px; background: rgba(0, 0, 0, .22); }
:root[data-theme="light"] #workspace :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]), select, textarea):not(#voice-panel *, #home-panel *):not(#notes-view *, #image-studio-view *, #cut-studio-view *, #cad-view *) { background: #fff; }
#workspace :is(input, select, textarea):not(#voice-panel *, #home-panel *):focus-visible { border-color: color-mix(in srgb, var(--k-accent) 70%, transparent); }

/* tables */
#workspace table:not(#voice-panel *, #home-panel *) th { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k-faint); }
#workspace table:not(#voice-panel *, #home-panel *) :is(td, th) { border-color: var(--k-line); }

/* accordions */
#workspace details:not(#voice-panel *, #home-panel *):not(#notes-view *) > summary { cursor: pointer; }

/* ---------- Zuhause sections inside Büro (Haushalt, Angebote, Pakete, Einkauf): no second menu, quiet header ---------- */
body[data-buero="on"] #home-panel .home-heading, body[data-buero="on"] #home-panel .home-menu { display: none; }
body[data-buero="on"] #home-panel .home-layout { grid-template-columns: minmax(0, 1fr); }
body[data-buero="on"] #home-panel [data-tone] { --h-a: #16243a; --h-b: #22385a; --h-accent: var(--k-accent); --h-soft: var(--k-accent-soft); }
body[data-buero="on"] #home-panel .hl-hero { background: var(--b-head); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
body[data-buero="on"] #home-panel :is(.hl-hero-art, .hl-chips) { display: none; }
body[data-buero="on"] #home-panel .home-content > section { background: transparent; border: 0 !important; box-shadow: none; padding: 0 !important; }

/* ---------- small screens: the menu sits on top and scrolls sideways ---------- */
@media all {
  #workspace #buero-bar.is-top { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 22px; }
  #workspace #buero-bar.is-top .buero-nav.segments { flex: 1 1 420px; min-width: 0; }
  #workspace #buero-bar.is-top .buero-head { grid-template-columns: auto auto; align-items: baseline; gap: 12px; padding: 10px 18px; border-radius: 999px; }
  #workspace #buero-bar.is-top .buero-head strong { font-size: 22px; }
  #workspace #buero-bar.is-top .buero-meta { white-space: nowrap; }
  #workspace #buero-bar.is-top .buero-head::after { display: none; }
  #workspace #buero-bar.is-top .buero-modes { width: 230px; }
  #workspace #buero-bar.is-top .buero-nav.segments { display: flex; gap: 2px; padding: 4px; border-radius: 999px; overflow-x: auto; scrollbar-width: none; box-shadow: none; }
  #workspace #buero-bar.is-top .buero-nav.segments::-webkit-scrollbar { display: none; }
  #workspace #buero-bar.is-top .buero-group { display: flex; gap: 2px; flex: none; }
  #workspace #buero-bar.is-top .buero-group + .buero-group { margin: 0 0 0 6px; padding: 0 0 0 6px; border-top: 0; border-left: 1px solid var(--k-line); }
  #workspace #buero-bar.is-top .buero-group-label { display: none; }
  #workspace #buero-bar.is-top .buero-group > .segment { width: auto; min-height: 36px; padding: 0 14px; border-radius: 999px; white-space: nowrap; font-size: 14px; }
  #workspace #buero-bar.is-top .buero-group > .segment[aria-current="page"] { color: var(--k-accent-ink); background: var(--k-accent); }
  #workspace #buero-bar.is-top .buero-group > .segment[aria-current="page"]::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { #workspace #buero-bar .buero-group > .segment:active { transform: none; } }

/* refinements */
#workspace #buero-bar > * { flex: none; }
@media all {
  #workspace #buero-bar:not(.is-top) .buero-group > .segment { min-height: 34px; font-size: 14px; }
  #workspace #buero-bar:not(.is-top) .buero-group-label { margin: 2px 12px 4px; }
  #workspace #buero-bar:not(.is-top) .buero-group + .buero-group { margin-top: 4px; padding-top: 6px; }
  #workspace #buero-bar:not(.is-top) .buero-head { padding: 18px 20px; }
  #workspace #buero-bar:not(.is-top) { scrollbar-width: none; padding-right: 2px; }
  #workspace #buero-bar::-webkit-scrollbar { display: none; }
}

/* Office-Studio file list: the Privat/Geschäftlich chip squeezed the title into a one-letter column; it gets its own line */
body[data-buero="on"] #office-view #of-library .of-file { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 2px; }
body[data-buero="on"] #office-view #of-library .of-file > .of-file-open { grid-column: 1; grid-row: 1; }
body[data-buero="on"] #office-view #of-library .of-file > .of-file-more { grid-column: 2; grid-row: 1; }
body[data-buero="on"] #office-view #of-library .of-file > .scope-chip { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin: 0 0 8px 48px; }
@media (max-width: 999px) {
  #workspace #buero-bar.is-top .buero-head { flex: 1 1 100%; grid-template-columns: auto minmax(0, 1fr); }
  #workspace #buero-bar.is-top .buero-meta { overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
  #workspace #buero-bar.is-top .buero-modes { flex: 1 1 100%; width: auto; }
  #workspace #buero-bar.is-top .buero-nav.segments { flex: 1 1 100%; }
}
#workspace #buero-bar.is-top .buero-group > .segment { flex: none; }

/* Kalender beside the menu: the toolbar wraps instead of squeezing Monat/Woche/Tag */
body[data-buero-layout="side"] #calendar-panel .dashboard { grid-template-columns: minmax(280px, 330px) minmax(0, 1fr); }
body[data-buero-layout="side"] #calendar-panel .calendar-tools-top { grid-template-columns: auto auto minmax(150px, 1fr); }
body[data-buero-layout="side"] #calendar-panel .calendar-tools-top { grid-template-columns: auto 1fr; }
body[data-buero-layout="side"] #calendar-panel .calendar-tools-top > .calendar-view-switch { justify-self: end; }
body[data-buero-layout="side"] #calendar-panel .calendar-tools-top > .calendar-search-wrap { grid-column: 1 / -1; }
body[data-buero="on"] #home-panel .hl-panel :is(button[type=submit], .button.primary) { color: var(--k-accent-ink) !important; background: var(--k-accent) !important; box-shadow: 0 10px 22px -14px var(--k-accent) !important; }
body[data-buero="on"] #home-panel .hl-hero { padding: 26px 30px; margin-bottom: 22px; }
body[data-buero="on"] #home-panel .hl-hero h2 { font-size: clamp(1.85rem, 2.6vw, 2.35rem) !important; font-weight: 750; }
body[data-buero="on"] #home-panel .hl-panel input[type=checkbox]:checked { background: var(--k-accent); }
body[data-buero="on"] #workspace :is(#notes-view .nt-head, #fieldwork-view .fw-list-head, #fieldwork-photos-view .fw-list-head, #itplan-view .ip-head, #calls-view .calls-header .section-head) h2 {
  margin: 0; font-size: clamp(1.85rem, 2.6vw, 2.35rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; color: var(--k-text); }

/* E-Mail beside the menu: list and reading pane side by side, writing below over the full width */
body[data-buero-layout="side"] #mail-panel .mail-grid { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); gap: 18px; }
body[data-buero-layout="side"] #mail-panel .mail-grid > :nth-child(n+3) { grid-column: 1 / -1; }

/* ---------- side menu for every area with sub-sections (Tools, Einstellungen, Projekte, Workflows) ----------
   The existing sub-navigation stays where it is in the page; on wide screens the panel becomes a two-column grid and the
   navigation spans the left column like the Büro menu. Tools inside Büro keeps the Büro menu (its own bar is hidden there). */
#workspace .pj-head h2 { font-size: clamp(1.85rem, 2.6vw, 2.35rem); font-weight: 750; letter-spacing: -.035em; line-height: 1.08; }
@media (min-width: 1000px) {
  body:not([data-buero="on"]) #workspace > #tools-panel:not([hidden]),
  #workspace > :is(#settings-panel, #projects-panel, #workflows-panel):not([hidden]) {
    display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; row-gap: 0; align-items: start; }
  body:not([data-buero="on"]) #workspace > #tools-panel > *,
  #workspace > :is(#settings-panel, #projects-panel, #workflows-panel) > * { grid-column: 2; min-width: 0; }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs:not(#voice-panel *),
  #workspace > #settings-panel > .settings-subnav:not(#voice-panel *),
  #workspace > #projects-panel > .pj-nav:not(#voice-panel *),
  #workspace > #workflows-panel > #wf-segments:not(#voice-panel *) {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; top: 18px; align-self: start;
    display: grid; gap: 2px; width: auto; max-width: none; margin: 0; padding: 8px; overflow: visible;
    border: 1px solid var(--k-line); border-radius: 22px; background: var(--k-surface); box-shadow: var(--b-shadow); }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs::before,
  #workspace > #settings-panel > .settings-subnav::before,
  #workspace > #projects-panel > .pj-nav::before,
  #workspace > #workflows-panel > #wf-segments::before {
    margin: 6px 12px 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-faint); }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs::before { content: "Werkzeuge"; }
  #workspace > #settings-panel > .settings-subnav::before { content: "Einstellungen"; }
  #workspace > #projects-panel > .pj-nav::before { content: "Ansichten"; }
  #workspace > #workflows-panel > #wf-segments::before { content: "Bereiche"; }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs:not(#voice-panel *) > :is(button, .button),
  #workspace > #settings-panel > .settings-subnav:not(#voice-panel *) > :is(button, .button),
  #workspace > #projects-panel > .pj-nav:not(#voice-panel *) > :is(button, .segment),
  #workspace > #workflows-panel > #wf-segments:not(#voice-panel *) > button {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px 0 14px;
    border: 0; border-radius: 12px; box-shadow: none; text-align: left; white-space: normal;
    font-size: 14.5px; font-weight: 550; color: var(--k-muted); background: transparent; }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs:not(#voice-panel *) > [aria-current="page"],
  #workspace > #settings-panel > .settings-subnav:not(#voice-panel *) > [aria-pressed="true"],
  #workspace > #projects-panel > .pj-nav:not(#voice-panel *) > [aria-selected="true"],
  #workspace > #workflows-panel > #wf-segments:not(#voice-panel *) > [aria-pressed="true"] {
    color: var(--k-text); font-weight: 650; background: var(--k-surface-3); box-shadow: none; }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs:not(#voice-panel *) > [aria-current="page"]::before,
  #workspace > #settings-panel > .settings-subnav:not(#voice-panel *) > [aria-pressed="true"]::before,
  #workspace > #projects-panel > .pj-nav:not(#voice-panel *) > [aria-selected="true"]::before,
  #workspace > #workflows-panel > #wf-segments:not(#voice-panel *) > [aria-pressed="true"]::before {
    content: ""; position: absolute; left: 4px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--k-accent); }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs > [hidden],
  #workspace > :is(#settings-panel, #projects-panel, #workflows-panel) > :is(.settings-subnav, .pj-nav, #wf-segments) > [hidden] { display: none; }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs:not(#voice-panel *) > :not([aria-current="page"]):hover,
  #workspace > #settings-panel > .settings-subnav:not(#voice-panel *) > :not([aria-pressed="true"]):hover,
  #workspace > #projects-panel > .pj-nav:not(#voice-panel *) > :not([aria-selected="true"]):hover,
  #workspace > #workflows-panel > #wf-segments:not(#voice-panel *) > :not([aria-pressed="true"]):hover { color: var(--k-text); background: var(--k-surface-2); }
}

/* Workflows: the four key figures in the quiet style (one accent, first figure as dark head tile) */
#workspace #workflows-panel .wf-overview > div { --tile: var(--k-line-strong); border-radius: 18px; background: var(--k-surface); box-shadow: var(--b-shadow); }
#workspace #workflows-panel .wf-overview > div::before { display: none; }
#workspace #workflows-panel .wf-overview > div:first-child { color: #fff; border-color: transparent; background: var(--b-head); }
#workspace #workflows-panel .wf-overview > div:first-child span { color: rgba(255, 255, 255, .72); }
#workspace #workflows-panel .wf-overview strong { font-size: 1.75rem; font-weight: 750; }

/* ---------- Dashboard (own full-screen layer outside #workspace): same graphite surfaces, one accent ---------- */
#dashboard-panel.tarvi-dashboard { border-color: rgba(255, 255, 255, .07); border-radius: 26px;
  background: radial-gradient(120% 90% at 0 0, rgba(143, 178, 255, .09), transparent 45%), #0a111c; }
#dashboard-panel .dashboard-card { border-color: rgba(255, 255, 255, .07); border-radius: 20px; padding: 14px;
  background: rgba(14, 22, 34, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .75); }
#dashboard-panel .dashboard-heading h1 { font-size: clamp(1.85rem, 2.6vw, 2.35rem); font-weight: 750; }
#dashboard-panel .dashboard-heading .eyebrow { color: #8fb2ff; font-size: .68rem; font-weight: 650; }
#workspace #dashboard-panel .button:not(#voice-panel *) { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px; color: #eef2f8; background: rgba(255, 255, 255, .04); font-weight: 600; }
#dashboard-panel .dashboard-calendar-views button[aria-pressed=true] { color: #eef2f8; background: rgba(255, 255, 255, .09); }
@media (hover: hover) and (pointer: fine) { #workspace #dashboard-panel .button:not(#voice-panel *):hover { background: rgba(255, 255, 255, .08); } }
:root[data-theme="light"] #dashboard-panel.tarvi-dashboard { background: radial-gradient(120% 90% at 0 0, #e6ecfd, transparent 45%), #f6f8fb; border-color: #e1e6ee; color: #142033; }
:root[data-theme="light"] #dashboard-panel .dashboard-card { border-color: #e1e6ee; background: #fff; box-shadow: 0 1px 2px rgba(20, 32, 51, .05), 0 22px 44px -32px rgba(20, 32, 51, .35); }
:root[data-theme="light"] #workspace #dashboard-panel .button:not(#voice-panel *) { color: #142033; border-color: #cbd3df; background: #f4f6fa; }
:root[data-theme="light"] #dashboard-panel .dashboard-heading .eyebrow { color: #2f56d6; }

/* ---------- main header: no surface of its own, tabs always in the middle ----------
   It scrolls away with the page (a see-through sticky bar would sit on top of the content), and the scrollbar's room is
   always kept, so switching between a short and a long area does not move the tabs. The phone bar (≤ 640 px) keeps its glass. */
@media (min-width: 641px) {
  html { scrollbar-gutter: stable; }
  /* the kept scrollbar room shows the page canvas: give it the colour of ground plus daylight veil (fixed layers do not reach it) */
  :root { background: #0f1c29; }
  html[data-theme="light"] { background-color: #fff; }
  #workspace:not([hidden]) > .tabs-bar { position: relative; justify-content: center; border-bottom: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-theme="light"] #workspace:not([hidden]) > .tabs-bar { background: none; box-shadow: none; }
  #workspace > .tabs-bar > .tabs { justify-content: safe center; }
}
@media (min-width: 1000px) {
  body[data-buero-layout="side"] #workspace > #buero-bar { top: 18px; max-height: calc(100vh - 36px); }
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs,
  #workspace > :is(#settings-panel, #projects-panel, #workflows-panel, #media-panel) > :is(.settings-subnav, .pj-nav, #wf-segments, #media-views),
  #home-panel .home-menu { top: 18px !important; }
  #workspace :is(.ip-detail, .business-calendar .create-card, .vs-library, .mt-side, .of-library, .of-assistant) { top: 12px; }
  #workspace :is(#vs-editor > .vs-output, .research-history, .research-document) { top: 12px; max-height: calc(100vh - 24px); }
  #workspace :is(.of-paper[data-kind=docx] #of-tabs, .of-find) { top: 0; }
}

/* ---------- Recherche, Nachrichten, Medien in the same calm look as the other areas ----------
   Page head above the cards (like Projekte), Medien's views as the side menu, graphite cards instead of the old streaming tint. */
#workspace > :is(#chat-panel, #news-panel, #media-panel) > .section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 22px; }
#workspace > :is(#chat-panel, #news-panel, #media-panel) > .section-head .eyebrow { margin: 0 0 8px; }
#workspace #media-panel .media-top { margin: 0 0 22px; }
#workspace #media-panel .media-card { max-width: none; margin: 0; padding: 24px 26px; border-color: var(--k-line); background: var(--k-surface); }
#workspace #media-panel .media-card:hover { border-color: var(--k-line-strong); box-shadow: var(--b-shadow); }
#workspace #media-panel > #media-views { margin: 0 0 18px; }
#workspace #media-panel .media-hit-featured { border-color: var(--k-line); background: var(--k-surface-2); }
#workspace #media-panel .media-thumb-play { box-shadow: 0 8px 26px -8px var(--k-accent); }
#workspace :is(#chat-panel, #news-panel) .card { background: var(--k-surface); }
@media (min-width: 1000px) {
  #workspace > #media-panel:not([hidden]) { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 32px; row-gap: 0; align-items: start; }
  #workspace > #media-panel > * { grid-column: 2; min-width: 0; }
  #workspace > #media-panel > #media-views:not(#voice-panel *) {
    grid-column: 1; grid-row: 1 / span 40; position: sticky; align-self: start;
    display: grid; gap: 2px; width: auto; max-width: none; margin: 0; padding: 8px; overflow: visible;
    border: 1px solid var(--k-line); border-radius: 22px; background: var(--k-surface); box-shadow: var(--b-shadow); }
  #workspace > #media-panel > #media-views::before { content: "Entdecken"; margin: 6px 12px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-faint); }
  #workspace > #media-panel > #media-views:not(#voice-panel *) > .button {
    position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; min-height: 40px; padding: 0 12px 0 14px;
    border: 0; border-radius: 12px; box-shadow: none; text-align: left; white-space: normal;
    font-size: 15px; font-weight: 550; color: var(--k-muted); background: transparent; }
  #workspace > #media-panel > #media-views:not(#voice-panel *) > .button[hidden] { display: none; }
  #workspace > #media-panel > #media-views:not(#voice-panel *) > [aria-pressed="true"] { color: var(--k-text); font-weight: 650; background: var(--k-surface-3); box-shadow: none; }
  #workspace > #media-panel > #media-views:not(#voice-panel *) > [aria-pressed="true"]::before {
    content: ""; position: absolute; left: 4px; top: 11px; bottom: 11px; width: 3px; border-radius: 3px; background: var(--k-accent); }
}
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) {
  #workspace > #media-panel > #media-views:not(#voice-panel *) > :not([aria-pressed="true"]):hover { color: var(--k-text); background: var(--k-surface-2); }
}

/* ---------- Dokumente as an explorer: folders, Office-Studio files inside the tree, import folded away ---------- */
#documents-office-files { display: none; }
#workspace #documents-panel .documents-explorer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
#workspace #documents-panel .documents-explorer-head h3 { margin: 0; }
#workspace #documents-panel .documents-tree { display: grid; gap: 1px; margin: 10px 0 14px; }
#workspace #documents-panel .documents-tree details { margin: 0; padding: 0; border: 0; background: none; }
#workspace #documents-panel .documents-tree details > :not(summary) { margin-left: 18px; }
#workspace #documents-panel .documents-tree summary { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 10px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--k-text); }
#workspace #documents-panel .documents-tree summary::-webkit-details-marker { display: none; }
#workspace #documents-panel .documents-tree summary::before { content: ""; position: static; flex: none; width: 7px; height: 7px; margin: 0 2px 0 2px;
  border-right: 2px solid var(--k-faint); border-bottom: 2px solid var(--k-faint); transform: rotate(-45deg); transition: transform .2s var(--k-ease-out); }
#workspace #documents-panel .documents-tree details[open] > summary::before { content: ""; transform: rotate(45deg); border-color: var(--k-accent); }
#workspace #documents-panel .documents-tree summary::after { display: none; }
#workspace #documents-panel .documents-tree details { border-left: 0; padding-left: 0; }
#workspace #documents-panel .documents-tree { max-height: none; overflow: visible; }
#workspace #documents-panel .documents-import-box > summary { list-style: none; }
#workspace #documents-panel .documents-import-box > summary::-webkit-details-marker { display: none; }
#workspace #documents-panel .documents-tree summary small { margin-left: auto; color: var(--k-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
#workspace #documents-panel .documents-tree .documents-file { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 10px;
  color: var(--k-muted); background: transparent; font: inherit; font-size: 14px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
#workspace #documents-panel .documents-tree .documents-file::before { content: "PDF"; flex: none; display: grid; place-items: center; width: 30px; height: 20px; border-radius: 5px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .02em; color: var(--k-muted); background: var(--k-surface-3); }
#workspace #documents-panel .documents-tree .documents-file[data-kind=docx]::before { content: "W"; }
#workspace #documents-panel .documents-tree .documents-file[data-kind=xlsx]::before { content: "X"; }
#workspace #documents-panel .documents-tree .documents-file[data-kind=pptx]::before { content: "P"; }
#workspace #documents-panel .documents-tree .documents-file[aria-current] { color: var(--k-text); background: var(--k-surface-3); }
#workspace #documents-panel .documents-tree .documents-file[aria-current]::before { color: var(--k-accent-ink); background: var(--k-accent); }
@media (hover: hover) and (pointer: fine) {
  #workspace #documents-panel .documents-tree :is(summary, .documents-file):hover { background: var(--k-surface-2); color: var(--k-text); }
}
#workspace #documents-panel .documents-import-box { margin: 6px 0 0; padding: 0; border: 1px solid var(--k-line); border-radius: 16px; }
#workspace #documents-panel .documents-import-box > summary { padding: 12px 14px; font-weight: 600; color: var(--k-muted); }
#workspace #documents-panel .documents-import-box > :not(summary) { margin-left: 14px; margin-right: 14px; }
#workspace #documents-panel .documents-import-box > :last-child { margin-bottom: 14px; }
#workspace #documents-panel .documents-tree .documents-file { position: relative; margin: 0; border: 0 !important; box-shadow: none; }
#workspace #documents-panel .documents-tree .documents-file::before { position: static; transform: none; }
#workspace #documents-panel .documents-tree .documents-file::after { display: none; }


/* ---------- readability: a little larger, more contrast, calmer rhythm (every area except Tarvi Live's stage) ---------- */
/* rem-based sizes grow by 6 % while Tarvi Live is closed; Live and its dashboard keep their own scale */
html:has(#workspace:not([hidden]) > #voice-panel[hidden]) { font-size: 106.25%; }
#workspace > :not(#voice-panel) { line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
#workspace .help:not(#voice-panel *) { color: var(--k-muted); font-size: .94rem; line-height: 1.6; }
#workspace label:not(#voice-panel *, #home-panel *) { color: var(--k-text); }
#workspace :is(input, select, textarea):not(#voice-panel *, #home-panel *, #image-studio-view *, #cut-studio-view *, #cad-view *) { font-size: 1rem; }
#workspace .button:not(#voice-panel *, #home-panel *):not(.small) { font-size: .92rem; }
#workspace .card:not(#voice-panel *, #home-panel *) :is(h2, h3) { color: var(--k-text); letter-spacing: -.02em; }
#workspace .card:not(#voice-panel *, #home-panel *) h3 { font-size: 1.12rem; }
#workspace .card:not(#voice-panel *, #home-panel *) h2 { font-size: 1.22rem; }
#workspace table:not(#voice-panel *, #home-panel *) td { font-size: .95rem; }
#workspace :focus-visible:not(#voice-panel *) { outline: 2px solid var(--k-accent); outline-offset: 3px; }

/* the stylish detail: a short accent line in front of every kicker above a title */
#workspace .eyebrow:not(#voice-panel *, #home-panel *) { display: inline-flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
#workspace .eyebrow:not(#voice-panel *, #home-panel *)::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: currentColor; opacity: .9; }
/* page titles: crisp white with a whisper of the accent at the end */
#workspace :is(section, div)[id$="-panel"]:not(#voice-panel, #home-panel) > .section-head :is(h1, h2),
#workspace #tools-panel [id$="-view"] > .section-head h2,
#workspace .calendar-hero h1,
#workspace #books-panel .bk-head h2,
#workspace .pj-head h2 {
  background: linear-gradient(100deg, var(--k-text) 55%, color-mix(in srgb, var(--k-accent) 70%, var(--k-text))); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* menus: a touch larger */
#workspace #buero-bar:not(.is-top) .buero-group > .segment { font-size: 15px; min-height: 36px; }
#workspace #buero-bar .buero-group-label { font-size: 11.5px; color: var(--k-faint); }
#workspace #buero-bar .buero-meta { font-size: 13.5px; color: rgba(255, 255, 255, .8); }
#workspace #buero-bar .buero-modes button { font-size: 14px; }
@media (min-width: 1000px) {
  body:not([data-buero="on"]) #workspace > #tools-panel > .vs-subtabs:not(#voice-panel *) > :is(button, .button),
  #workspace > #settings-panel > .settings-subnav:not(#voice-panel *) > :is(button, .button),
  #workspace > #projects-panel > .pj-nav:not(#voice-panel *) > :is(button, .segment),
  #workspace > #workflows-panel > #wf-segments:not(#voice-panel *) > button { font-size: 15px; }
}
#workspace .tabs-bar .tab { font-size: 15px; }
#workspace #documents-panel .documents-tree .documents-file { font-size: 15px; color: var(--k-muted); }
#workspace #books-panel .bk-summary { background: none; }

/* Dokumente als Explorer (02.11.2026): Ordner ziehen, Kontextmenü, Umbenennen, Mehrfachauswahl, Ablageregeln */
#documents-panel .documents-tree-help { margin: 4px 2px 0; font-size: 13px; }
#documents-panel .documents-tree summary[draggable=true], #documents-panel .documents-tree .documents-file[draggable=true] { cursor: grab; }
#documents-panel .documents-tree summary[aria-selected] { background: var(--k-surface-2, rgba(255,255,255,.06)); color: var(--k-text, #fff); }
#documents-panel .documents-tree .documents-file[aria-selected] { background: color-mix(in srgb, var(--k-accent, #5ac8fa) 16%, transparent); color: var(--k-text, #fff); }
#documents-panel .documents-tree .drop-over { outline: 2px dashed var(--k-accent, #5ac8fa); outline-offset: -2px; background: color-mix(in srgb, var(--k-accent, #5ac8fa) 14%, transparent) !important; }
#documents-panel .documents-tree.drop-root { outline: 2px dashed var(--k-line, rgba(255,255,255,.2)); }
#documents-panel .documents-more { margin-left: 4px; padding: 0 8px; border-radius: 8px; color: var(--k-faint, #8a96a3); font-weight: 700; line-height: 26px; opacity: 0; }
#documents-panel .documents-tree summary:is(:hover, :focus-within, [aria-selected]) .documents-more { opacity: 1; }
#documents-panel .documents-more:hover { background: var(--k-surface-3, rgba(255,255,255,.1)); color: var(--k-text, #fff); }
@media (hover: none) { #documents-panel .documents-more { opacity: 1; } }
#documents-panel .documents-rename { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border-radius: 8px; font: inherit; }
#documents-panel .documents-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; padding: 8px 10px; border-radius: 12px;
  background: var(--k-surface-2, rgba(255,255,255,.06)); }
#documents-panel .documents-selection span { margin-right: auto; font-weight: 600; }
#documents-panel .documents-menu { position: fixed; z-index: 60; min-width: 210px; padding: 6px; border-radius: 12px; border: 1px solid var(--k-line, rgba(255,255,255,.12));
  background: var(--k-surface, #16202b); box-shadow: 0 18px 48px rgba(0,0,0,.45); display: grid; gap: 2px; }
#documents-panel .documents-menu-item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 8px; background: none; color: var(--k-text, #eef3f7); text-align: left; font: inherit; cursor: pointer; }
#documents-panel .documents-menu-item:is(:hover, :focus-visible) { background: var(--k-surface-3, rgba(255,255,255,.1)); outline: none; }
#documents-panel .documents-menu-item.danger { color: #ff8a80; }
#documents-panel .documents-dialog { position: fixed; z-index: 61; left: 50%; top: 12vh; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); max-height: 76vh;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; padding: 18px; border-radius: 16px; border: 1px solid var(--k-line, rgba(255,255,255,.12));
  background: var(--k-surface, #16202b); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
#documents-panel .documents-dialog h4 { margin: 0; }
#documents-panel .documents-dialog-list { overflow: auto; display: grid; gap: 1px; align-content: start; min-height: 120px; }
#documents-panel .documents-dialog-item { padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--k-muted, #c4cdd5); text-align: left; white-space: pre; font: inherit; cursor: pointer; }
#documents-panel .documents-dialog-item:hover { background: var(--k-surface-2, rgba(255,255,255,.06)); }
#documents-panel .documents-dialog-item[aria-current] { background: var(--k-accent, #5ac8fa); color: var(--k-accent-ink, #04121c); }
#documents-panel .documents-dialog-item.new { color: var(--k-accent, #5ac8fa); font-weight: 600; }
#documents-panel .documents-rules-box { margin-top: 12px; }
#documents-panel .documents-rules-box > summary { cursor: pointer; font-weight: 600; padding: 6px 2px; }
#documents-panel .documents-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--k-line, rgba(255,255,255,.08)); }
#documents-panel .documents-rule span { flex: 1 1 220px; }
#documents-panel .documents-rule-form { display: grid; gap: 8px; margin-top: 10px; }
#documents-panel .documents-rule-form label, #documents-panel .documents-rule-offer label { display: grid; gap: 4px; font-size: 13px; }
#documents-panel .documents-rename-file { width: 100%; margin: 2px 0; }