/* ───────────────────────────────────────────────────────────────────────────
   klaus.css — Klaus design system, ported from ai-lawyer's _Klaus.css.

   In ai-lawyer this file sat on top of a Tailwind/index.css layer that set
   --font-sans globally to "Inter Tight". Here we own the root, so we set the
   base font stack directly on :root and let .k-app-root re-assert General Sans
   (matching the original behaviour). The .k-wizard override to Inter Tight for
   chats is preserved verbatim.

   Font paths point at /static/fonts/*.woff2 (served by the Go app).
   ─────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"General Sans";src:url("/static/fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/static/fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/static/fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("/static/fonts/general-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root {
  /* Base font stack — matches ai-lawyer's index.css :root default. The Klaus
     app shell (.k-app-root) overrides this to General Sans; chats (.k-wizard)
     override back to Inter Tight. */
  --font-sans:'Inter Tight',-apple-system,sans-serif;
  --font-serif:'Fraunces','Instrument Serif',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* Palette. Every brand color has its derived steps declared here (hover,
     soft background, border, text on soft, the dark gradient stops, the
     r,g,b triple for rgba()). /branding/theme.css (internal/branding)
     re-points them at a partner's colors, so nothing below may hard-code a
     brand or status color. */
  --klaus-blue:#2F6FED;--klaus-blue-rgb:47,111,237;--klaus-blue-hover:#2559C7;--klaus-blue-soft:#EAF1FF;--klaus-blue-border:#BFD2FF;--klaus-blue-dark:#143094;--klaus-blue-deep:#0A1740;
  --klaus-yellow:#FACC15;--klaus-yellow-rgb:250,204,21;--klaus-yellow-dark:#E5B800;--klaus-yellow-soft:#FEF9C3;--klaus-yellow-text:#854D0E;--klaus-yellow-deep:#3A2C08;
  --success-soft:#DCFCE7;--success-border:#BBF7D0;--success-text:#166534;
  --warning-soft:#FFF7ED;--warning-border:#FED7AA;--warning-text:#C2410C;
  --danger-rgb:239,68,68;--danger-hover:#B91C1C;--danger-soft:#FEF2F2;--danger-border:#FECACA;--danger-text:#991B1B;--state-error:#DC2626;
  --bg-cream:#F8F7F2;--bg-cream-deep:#EEECEA;--ink:#0A0A0A;--surface:#FFFFFF;
  --gray-100:#F3F4F6;--gray-200:#E5E7EB;--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;--gray-600:#4B5563;--gray-700:#374151;
  --fg:var(--ink);--fg-body:#374151;--fg-muted:#6B7280;--fg-on-dark:#FFFFFF;
  --risk-minimal:#22C55E;--risk-limited:#FACC15;--risk-high:#FB923C;--risk-banned:#EF4444;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-14:56px;--space-16:64px;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-2xl:32px;--radius-pill:9999px;
  --shadow-card:0 1px 2px rgb(0 0 0/5%);--shadow-soft:0 4px 6px -1px rgb(0 0 0/8%),0 2px 4px -2px rgb(0 0 0/6%);--shadow-floating:0 12px 30px rgb(47 111 237/18%);
  --border-card:1px solid var(--gray-200);--border-subtle:1px solid rgb(10 10 10/5%);--border-input:1px solid rgb(10 10 10/18%);
  --content-max:1280px;--content-max-wide:1440px;
  --ease-out:cubic-bezier(.2,.7,.2,1);--t-quick:150ms;--t-slow:300ms;
  --fs-display:68px;--fs-h1:48px;--fs-h2:40px;--fs-h3:36px;--fs-h4:22px;--fs-h5:19px;--fs-lead:19px;--fs-body:17px;--fs-base:16px;--fs-card:15px;--fs-small:14px;--fs-xs:13px;--fs-2xs:12px;--fs-3xs:11px;
  --lh-tight:1;--lh-snug:1.15;--lh-normal:1.35;--lh-relaxed:1.55;--lh-loose:1.6;
  --tracking-label:0.06em;
  --state-done:var(--risk-minimal);--state-active:var(--klaus-blue);--state-open:var(--gray-400);--state-locked:var(--gray-300);--state-skipped:var(--klaus-yellow-dark);
  --prio-hoch:var(--risk-banned);--prio-mittel:var(--risk-high);--prio-niedrig:var(--gray-500);
  --app-canvas:var(--bg-cream);--app-rail:var(--bg-cream-deep);--app-turn:var(--surface);--app-turn-alt:#FBFAF4;
  --rail-w:288px;--topbar-h:56px;--wizard-col:680px;--verdict-col:880px;--app-max:1440px;
  --border-warm:1px solid rgba(10,10,10,.07);--shadow-warm:0 2px 8px rgba(var(--klaus-blue-rgb),.08);
  --surface-warm:#FEFDFB;--border-dashed:1.5px dashed rgba(10,10,10,.08);--shadow-ledge:0 2px 0 0 rgba(10,10,10,.06);--shadow-blue-subtle:0 2px 8px rgba(var(--klaus-blue-rgb),.06),0 4px 16px rgba(10,10,10,.03);
}

*,*::before,*::after{box-sizing:border-box}
.k-app-root,.k-app-root *,.k-app-root *::before,.k-app-root *::after{margin:0;padding:0}
html,body{font-family:var(--font-sans);color:var(--fg);background:var(--app-canvas);-webkit-font-smoothing:antialiased;height:100%;overflow:hidden;margin:0}
/* Klaus app UI uses General Sans (index.css :root forces --font-sans to Inter
   Tight, so re-assert it here for everything under .k-app-root). */
.k-app-root{--font-sans:"General Sans","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-family:var(--font-sans)}
#root{height:100%}
.k-app-root :where(button){font-family:inherit;cursor:pointer;border:none;background:none}
/* Links carry no browser underline. :where() keeps this at class-level
   specificity, so a component that wants an underline (login footer, dev
   links) still sets one with its own rule. */
.k-app-root :where(a){text-decoration:none}
/* The superuser dashboard renders outside the app shell. */
.k-superuser :where(a){text-decoration:none}
.k-app-root textarea{font-family:inherit}
/* Chats use Inter Tight (matches the public Schulung chat), overriding the
   app-wide General Sans within the chat shell only. */
.k-wizard{--font-sans:'Inter Tight',-apple-system,sans-serif;font-family:var(--font-sans)}

/* ── Form controls (replaces Tailwind preflight/base for inputs) ─────────────
   In ai-lawyer, Tailwind's preflight reset inputs to inherit font + a neutral
   box, and component classes (.k-login-input, .k-info-request-input, …) layered
   the Klaus look on top. Here we own the base, so we provide a single .k-input
   class plus a bare-element reset that matches that preflight behaviour. Use
   .k-input for any text input/select/textarea that needs the standard Klaus
   chrome; bare inputs get only the reset (no border/padding) so they can be
   composed freely (e.g. .k-turn-alt textarea, .k-richtlinie-input textarea). */
.k-app-root :where(input,select,textarea){font-family:inherit;font-size:inherit;color:inherit;background:transparent;border:0;box-sizing:border-box}
.k-app-root :where(input,select,textarea):focus{outline:none}
.k-app-root :where(input,select)::placeholder{color:var(--fg-muted)}
.k-input{width:100%;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--fs-card);line-height:var(--lh-relaxed);background:var(--surface);color:var(--fg);box-sizing:border-box;transition:border-color var(--t-quick) ease,box-shadow var(--t-quick) ease}
.k-input::placeholder{color:var(--fg-muted)}
.k-input:focus{border-color:var(--klaus-blue);box-shadow:0 0 0 3px rgba(var(--klaus-blue-rgb),.12)}
.k-input:disabled{background:var(--bg-cream-deep);color:var(--fg-muted);cursor:not-allowed}
textarea.k-input{resize:vertical;min-height:72px}
select.k-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.k-field{display:grid;gap:6px;font-size:var(--fs-small);font-weight:600;color:var(--fg-body)}
.k-field>label{font-size:var(--fs-small);font-weight:600;color:var(--fg-body)}
.k-field-help{font-size:var(--fs-xs);font-weight:400;color:var(--fg-muted)}
.k-field-error{font-size:var(--fs-xs);font-weight:500;color:var(--state-error)}

.ribbon{background:var(--klaus-yellow);color:var(--ink);padding:2px 14px;display:inline-block;transform:rotate(-2deg);border-radius:4px}
.label-klaus{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border:2px dashed var(--klaus-blue);border-radius:9999px;font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--ink);transform:rotate(-0.35deg);white-space:nowrap}
.label-klaus::before{content:"";position:absolute;inset:-3px;border:1.5px dashed var(--klaus-blue);border-radius:9999px;opacity:.55;pointer-events:none;transform:rotate(0.8deg)}

.k-topbar{height:var(--topbar-h);background:var(--bg-cream-deep);border-bottom:none;box-shadow:0 1px 0 0 rgba(10,10,10,.04),0 4px 12px rgba(10,10,10,.02);display:flex;align-items:center;justify-content:space-between;padding:0 24px;position:sticky;top:0;z-index:100}
.k-brand{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);font-weight:600;cursor:pointer}
/* Partner wordmarks (branding.json) in the three brand slots: sized by height,
   the width follows the image. */
.k-brand-logo{display:block;height:34px;width:auto;max-width:220px}
.k-company-brand-logo{display:block;height:30px;width:auto;max-width:200px}
.k-plan-popup-brand-logo{display:block;height:28px;width:auto;max-width:200px}
.k-login-brand-wordmark{display:block;height:36px;width:auto;max-width:240px}
.k-login-hero-avatar{width:180px;max-width:50%;object-fit:contain}
.k-brand-mark{width:32px;height:32px;background:var(--klaus-blue);color:#fff;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px}
.k-brand-beta{font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--klaus-blue);border:1.5px dashed var(--klaus-blue);border-radius:var(--radius-pill);padding:2px 8px;position:relative;transform:rotate(-0.5deg)}
.k-brand-beta::before{content:"";position:absolute;inset:-2px;border:1px dashed var(--klaus-blue);border-radius:inherit;opacity:.35;pointer-events:none;transform:rotate(0.5deg)}
.k-topbar-center{display:flex;align-items:center;gap:12px;font-size:var(--fs-small);font-weight:500}
.k-topbar-right{display:flex;align-items:center;gap:10px}
.k-chip{font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);padding:4px 10px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;gap:4px}
.k-chip-blue{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-chip-green{background:var(--success-soft);color:var(--success-text)}
.k-chip-grey{background:var(--bg-cream-deep);color:var(--fg-body);border:1px solid var(--gray-300)}
.k-chip-yellow{background:var(--klaus-yellow-soft);color:var(--klaus-yellow-text)}
.k-chip-red{background:var(--danger-soft);color:var(--risk-banned)}
.k-chip-orange{background:var(--warning-soft);color:var(--warning-text)}

.k-layout{display:flex;height:calc(100vh - var(--topbar-h))}
.k-rail{width:var(--rail-w);background:var(--app-rail);border-right:var(--border-subtle);display:flex;flex-direction:column;overflow-y:auto;padding:20px 0;flex-shrink:0;position:relative;z-index:50;transition:width .3s var(--ease-out)}
.k-rail.collapsed{width:64px;overflow:visible}
.k-rail.collapsed .k-rail-header,.k-rail.collapsed .k-rail-topics,.k-rail.collapsed .k-rail-bottom,.k-rail.collapsed .k-rail-phase span:not(.k-rail-dot):not(.k-rail-connector),.k-rail.collapsed .k-rail-info
.k-rail.collapsed .k-rail-phase{justify-content:center;padding:10px 0;position:relative}
.k-rail.collapsed .k-rail-phase .k-rail-dot{cursor:pointer}
.k-rail-tooltip{display:none}
.k-rail.collapsed .k-rail-phase .k-rail-tooltip{position:absolute;left:72px;top:50%;transform:translateY(-50%);background:var(--ink);color:var(--fg-on-dark);font-size:11px;font-weight:600;padding:6px 12px;border-radius:var(--radius-sm);white-space:nowrap;z-index:9010;box-shadow:var(--shadow-soft);pointer-events:none;opacity:0;transition:opacity .2s ease .8s}
.k-rail.collapsed .k-rail-phase .k-rail-tooltip::before{content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;background:var(--ink)}
.k-rail.collapsed .k-rail-phase:hover .k-rail-tooltip{opacity:1}
.k-rail-header{font-size:var(--fs-3xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);padding:4px 20px 10px 22px;margin-bottom:2px}
.k-rail-expand{margin-top:auto;padding:12px 0;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:11px;font-weight:600;color:var(--fg-muted);border-top:var(--border-subtle);gap:6px;transition:color var(--t-quick) ease}
.k-rail-expand:hover{color:var(--ink)}
.k-rail.rail-enter{animation:k-slideInLeft .4s var(--ease-out)}
.k-rail-phase{padding:10px 20px;display:flex;align-items:center;gap:12px;font-size:var(--fs-small);font-weight:500;color:var(--fg-body);transition:background var(--t-quick) ease;position:relative}
a.k-rail-phase{text-decoration:none;color:inherit}
label.k-rail-phase{text-decoration:none;color:inherit;cursor:pointer}
a.k-rail-topic{text-decoration:none;color:inherit}
.k-rail-phase.done{cursor:pointer;color:var(--fg-body)}
.k-rail-phase.done:hover{background:rgba(0,0,0,.03)}
.k-rail-phase.active{background:var(--klaus-blue-soft);border-left:3px solid var(--klaus-blue);padding-left:17px;font-weight:600;color:var(--ink)}
.k-rail-phase.locked{cursor:default}
.k-rail-phase.locked .k-rail-dot{opacity:1}
.k-rail-phase.locked>span:not(.k-rail-dot):not(.k-rail-connector){opacity:.5}
.k-rail-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;position:relative;z-index:1}
.k-rail-connector{width:2px;background:var(--gray-300);position:absolute;z-index:0}
.k-rail-phase .k-rail-connector{left:30px;top:calc(50% + 11px);height:calc(100%)}
.k-rail-phase.active .k-rail-connector{left:27px}
.k-rail-phase.locked .k-rail-connector{top:0;height:100%}
.k-rail-phase.locked.after-active .k-rail-connector{top:0;background:transparent}
.k-rail.collapsed .k-rail-connector{left:50%;transform:translateX(-50%);top:calc(50% + 13px);height:calc(100% - 13px)}
.k-rail-phase.done .k-rail-connector{background:var(--state-done)}
.k-rail-phase.done.before-active .k-rail-connector{background:linear-gradient(to bottom,var(--state-done),var(--state-active))}
.k-rail-phase.active .k-rail-connector{background:var(--state-active)}
.k-rail-dot.done{background:var(--state-done);color:#fff}
.k-rail-dot.active{background:var(--state-active);color:#fff}
.k-rail-dot.locked{background:var(--bg-cream);color:var(--gray-400);border:2px solid var(--gray-300);z-index:2}
.k-rail-topics{padding:4px 0 4px 27px;display:flex;flex-direction:column;gap:2px;position:relative}
.k-rail-topics-line{position:absolute;left:30px;top:0;width:2px;background:var(--state-active);z-index:0;transition:height .4s var(--ease-out)}
.k-rail-topics-fill{position:absolute;left:30px;top:0;width:2px;background:var(--state-done);z-index:1;transition:height .4s var(--ease-out)}
.k-rail-topic{display:flex;align-items:center;gap:8px;padding:6px 20px 6px 0;font-size:var(--fs-xs);font-weight:500;color:var(--fg-body);cursor:pointer;position:relative}
.k-rail-topic.done:hover,.k-rail-topic.active:hover{background:rgba(0,0,0,.03);border-radius:4px}
.k-rail-topic.done{color:var(--fg-body)}
.k-rail-topic.active{color:var(--klaus-blue);font-weight:600}
.k-rail-topic.open{color:var(--fg-muted)}
.k-rail-topic-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;position:relative;z-index:1}
.k-rail-topic-dot.done{background:var(--state-done)}
.k-rail-topic-check{margin-left:auto;color:var(--state-done);font-size:var(--fs-3xs);font-weight:600;flex-shrink:0}
.k-rail-topic-dot.active{background:var(--state-active)}
.k-rail-topic-dot.open{border:1.5px solid var(--gray-300);background:var(--app-canvas)}
.k-rail-bottom{margin-top:auto;padding:16px 20px}
.k-rail-info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px dashed var(--gray-400);font-size:10px;color:var(--gray-500);cursor:pointer;margin-left:auto;position:relative}
.k-rail-preview{position:fixed;background:var(--surface);border:var(--border-card);border-radius:var(--radius-md);padding:12px 16px;width:260px;font-size:var(--fs-xs);color:var(--fg-body);box-shadow:var(--shadow-floating);z-index:9000;font-weight:400;white-space:normal;animation:k-fadeIn .15s var(--ease-out)}
.k-rail-phases{flex:1;overflow-y:auto}
.k-rail-footer{padding:12px 16px;border-top:var(--border-subtle)}
.k-rail-user{font-size:var(--fs-3xs);color:var(--fg-muted);margin-bottom:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-org-switcher{position:relative;margin-bottom:8px}
.k-org-switcher-trigger{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:var(--bg-cream-deep);border-radius:var(--radius-sm);font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--ink);cursor:pointer;transition:background var(--t-quick) ease;list-style:none}
.k-org-switcher-trigger::-webkit-details-marker{display:none}
.k-org-switcher-trigger:hover{background:var(--klaus-blue-soft)}
.k-org-switcher-trigger svg{flex-shrink:0;color:var(--fg-muted)}
.k-org-switcher-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.k-org-switcher[open] .k-org-switcher-trigger{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-org-switcher[open] .k-org-switcher-trigger svg{color:var(--klaus-blue)}
.k-org-switcher-menu{position:absolute;bottom:calc(100% + 4px);left:0;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 32px));background:var(--surface);border:var(--border-card);border-radius:var(--radius-md);box-shadow:var(--shadow-floating);padding:6px;z-index:100;max-height:320px;overflow-y:auto;animation:k-fadeIn .15s var(--ease-out)}
.k-org-switcher-head{font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);padding:6px 10px 8px}
.k-org-switcher-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:none;background:none;font:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--ink);cursor:pointer;border-radius:var(--radius-sm);transition:background var(--t-quick) ease;text-align:left}
.k-org-switcher-item:hover{background:var(--klaus-blue-soft)}
.k-org-switcher-item.active{font-weight:700;color:var(--klaus-blue)}
.k-org-switcher-item.active svg{color:var(--klaus-blue)}
.k-org-switcher-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.k-org-switcher-name{overflow-wrap:anywhere;line-height:1.3}
.k-org-switcher-meta{display:flex;gap:4px;flex-wrap:wrap}
.k-org-switcher-badge{flex-shrink:0;font-size:9px;padding:2px 6px}
.k-org-switcher-group{font-size:var(--fs-3xs);font-weight:600;color:var(--fg-muted);padding:10px 10px 4px;border-top:var(--border-subtle);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-rail-officer{margin-bottom:10px;padding:10px;border:var(--border-card);border-radius:var(--radius-md);background:var(--surface);display:flex;flex-direction:column;gap:6px;font-size:var(--fs-3xs)}
.k-rail-officer-label{font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted)}
.k-rail-officer-head{display:flex;align-items:center;gap:8px}
.k-rail-officer-avatar{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--klaus-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-3xs);position:relative;overflow:hidden}
.k-rail-officer-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#fff}
.k-rail-officer-name{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.k-rail-officer-name strong{font-size:var(--fs-xs);color:var(--ink);overflow-wrap:anywhere}
.k-rail-officer-name span{color:var(--fg-muted)}
.k-rail-officer-line{display:flex;align-items:flex-start;gap:6px;color:var(--fg-body);overflow-wrap:anywhere;line-height:1.35}
.k-rail-officer-line svg{width:13px;height:13px;flex-shrink:0;margin-top:1px;color:var(--fg-muted)}
a.k-rail-officer-line:hover{color:var(--klaus-blue)}
.k-rail-officer-missing p{margin:0;color:var(--fg-muted);line-height:1.4}
.k-rail-admin{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;padding-bottom:10px;border-bottom:var(--border-subtle)}
.k-rail-admin-link{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600;color:var(--fg-muted);transition:color var(--t-quick) ease,background var(--t-quick) ease}
.k-rail-admin-link svg{width:16px;height:16px;flex-shrink:0}
.k-rail-admin-link:hover{color:var(--klaus-blue);background:var(--klaus-blue-soft)}
.k-rail-admin-link.active{color:var(--klaus-blue);background:var(--klaus-blue-soft)}
.k-rail-role{font-size:var(--fs-3xs);font-weight:600;color:var(--fg-muted);margin:-2px 0 6px}
.k-rail-logout{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px;border:none;background:none;font:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--fg-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--t-quick) ease,background var(--t-quick) ease}
.k-rail-logout:hover{color:var(--ink);background:rgba(0,0,0,.04)}
.k-rail-superuser{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px;margin-bottom:4px;border:none;background:none;font:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--fg-muted);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--t-quick) ease,background var(--t-quick) ease}
.k-rail-superuser:hover{color:var(--klaus-blue);background:var(--klaus-blue-soft)}
.k-rail.collapsed .k-rail-footer{display:flex;justify-content:center;padding:12px 0}
.k-rail.collapsed .k-rail-logout{width:auto;padding:8px;justify-content:center}
.k-rail.collapsed .k-rail-logout span{display:none}
.k-rail-login{display:flex;align-items:center;gap:8px;width:100%;padding:8px 6px;border:none;background:none;font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--klaus-blue);cursor:pointer;border-radius:var(--radius-sm);transition:color var(--t-quick) ease,background var(--t-quick) ease}
.k-rail-login:hover{background:var(--klaus-blue-soft)}
.k-rail.collapsed .k-rail-login{width:auto;padding:8px;justify-content:center}
.k-rail.collapsed .k-rail-login span{display:none}

/* ── Login dialog ─────────────────────────────────────────────────────────── */
.k-login-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.35);z-index:9000;animation:k-fadeIn .15s ease}
.k-login-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9001;background:var(--bg-cream);border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);padding:28px 28px 24px;width:min(380px,calc(100vw - 48px));box-shadow:0 24px 48px rgba(0,0,0,.12);animation:k-turn-in .35s cubic-bezier(.22,.68,0,1.2) both}
.k-login-title{font-size:20px;font-weight:700;margin:0 0 6px;color:var(--ink)}
.k-login-desc{font-size:var(--fs-small);color:var(--fg-body);line-height:1.55;margin:0 0 16px}
.k-login-input{width:100%;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--fs-card);outline:none;background:var(--surface);color:var(--fg);box-sizing:border-box;transition:border-color var(--t-quick) ease;margin-bottom:12px}
.k-login-input:focus{border-color:var(--klaus-blue)}
.k-login-error{font-size:var(--fs-xs);color:var(--state-error);margin:0 0 8px;font-weight:500}
.k-login-back{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:var(--fs-xs);font-weight:500;color:var(--fg-muted);background:none;border:none;cursor:pointer;padding:0;margin-bottom:12px}
.k-login-back:hover{color:var(--ink)}
.k-login-link{display:inline-flex;align-items:center;gap:4px;text-align:center;margin-top:10px;font:inherit;font-size:var(--fs-xs);color:var(--fg-muted);background:none;border:none;cursor:pointer;padding:4px 0}
.k-login-link:hover{color:var(--klaus-blue)}

.k-center{flex:1;overflow-y:auto;background:var(--app-canvas)}
/* ── Footer (public shell only; authenticated shell uses .k-rail-footer) ──
   The footer sits below .k-layout. Because .k-layout fills the viewport minus
   the topbar, the footer is reached by scrolling within .k-center on long
   pages, or sits flush at the bottom of short pages. It mirrors the React
   footer: legal links left, copyright right. */
.k-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 24px;border-top:var(--border-subtle);background:var(--bg-cream-deep);font-size:var(--fs-xs);color:var(--fg-muted)}
.k-footer-legal{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.k-footer-legal a{color:var(--fg-muted);text-decoration:none;transition:color var(--t-quick) ease}
.k-footer-legal a:hover{color:var(--ink)}
.k-footer-copy{color:var(--fg-muted)}
.k-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 22px;border-radius:14px;background:var(--klaus-blue);color:#fff;font-weight:600;font-size:var(--fs-small);transition:background var(--t-quick) ease,transform var(--t-quick) ease,box-shadow var(--t-quick) ease;border:none;cursor:pointer;font-family:inherit;transform:rotate(-0.3deg);box-shadow:0 2px 0 0 var(--klaus-blue-hover),0 4px 12px rgba(var(--klaus-blue-rgb),.15)}
.k-btn:hover{background:var(--klaus-blue-hover);transform:rotate(0deg) translateY(-1px);box-shadow:0 3px 0 0 var(--klaus-blue-hover),0 6px 16px rgba(var(--klaus-blue-rgb),.2)}
.k-btn-ghost{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 16px;border-radius:14px;background:transparent;border:1.5px dashed rgba(10,10,10,.12);color:var(--ink);font-weight:500;font-size:var(--fs-small);transition:background var(--t-quick) ease,border var(--t-quick) ease,transform var(--t-quick) ease;cursor:pointer;font-family:inherit;transform:rotate(-0.15deg)}
.k-btn-ghost:hover{border-style:solid;border-color:var(--klaus-blue-border);background:var(--klaus-blue-soft);transform:rotate(0deg)}

.k-dashboard{max-width:var(--app-max);margin:0 auto;padding:36px 48px 80px}
.k-dash-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}
.k-dash-header>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.k-dash-title{font-size:32px;font-weight:700;line-height:var(--lh-snug);margin-top:12px;letter-spacing:-0.03em;display:inline-block;border-bottom:3px solid var(--klaus-yellow);padding-bottom:4px}
.k-dash-meta{font-size:var(--fs-card);color:var(--fg-muted);margin-top:6px}
/* Danger zone: isolated destructive-action section at the bottom of the
   project dashboard. Visually distinct from the rest of the page. */
.k-dash-danger-zone{margin-top:40px;padding:20px 24px;border:1.5px solid rgba(220,38,38,.18);border-radius:var(--radius-lg);background:rgba(254,242,242,.4);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.k-dash-danger-head{display:flex;align-items:center;gap:14px;min-width:0}
.k-dash-danger-head svg{color:var(--danger);flex-shrink:0;width:24px;height:24px}
.k-dash-danger-head h3{margin:0;font-size:var(--fs-small);font-weight:700;color:var(--danger)}
.k-dash-danger-head p{margin:2px 0 0;font-size:var(--fs-xs);color:var(--fg-muted)}
.k-dash-danger-zone .danger{color:var(--danger);border-color:rgba(220,38,38,.3)}
.k-dash-danger-zone .danger:hover{background:rgba(220,38,38,.08);border-color:var(--danger)}
.k-eyebrow{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);display:block;margin-bottom:4px}
.k-progress-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.k-progress-bar{width:260px;height:6px;background:var(--bg-cream-deep);border-radius:9999px;overflow:hidden}
.k-progress-fill{height:100%;background:var(--klaus-blue);border-radius:9999px;transition:width var(--t-slow) var(--ease-out)}
.k-progress-label{font-size:var(--fs-xs);color:var(--fg-muted);font-family:ui-monospace,"SFMono-Regular",Menlo,monospace;font-variant-numeric:tabular-nums}
.k-phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}
.k-phase-tile{background:linear-gradient(168deg,var(--surface) 60%,#FDFCF8 100%);border:1px solid rgba(10,10,10,.05);border-bottom:2px solid var(--bg-cream-deep);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:12px;transition:transform var(--t-quick) var(--ease-out),box-shadow var(--t-quick) ease;min-height:200px;box-shadow:0 1px 3px rgba(var(--klaus-blue-rgb),.04),0 4px 12px rgba(10,10,10,.03)}
.k-phase-grid>.k-phase-tile:nth-child(1){transform:rotate(-0.3deg)}
.k-phase-grid>.k-phase-tile:nth-child(2){transform:rotate(0.15deg)}
.k-phase-grid>.k-phase-tile:nth-child(3){transform:rotate(-0.2deg)}
.k-phase-grid>.k-phase-tile:nth-child(4){transform:rotate(0.25deg)}
.k-phase-grid>.k-phase-tile:nth-child(5){transform:rotate(-0.15deg)}
.k-phase-grid>.k-phase-tile:nth-child(6){transform:rotate(0.3deg)}
.k-phase-tile:not(.locked):hover{transform:rotate(0deg) translateY(-2px)}
.k-phase-tile.active{border-color:var(--klaus-blue);border-bottom:2px solid var(--klaus-blue);box-shadow:var(--shadow-floating);background:linear-gradient(168deg,var(--surface) 40%,var(--klaus-blue-soft) 100%)}
.k-phase-tile.done{background:linear-gradient(168deg,var(--surface) 70%,var(--success-soft) 100%);border-bottom-color:var(--state-done)}
.k-phase-tile.locked{opacity:.45;border-bottom-style:dashed;background:var(--app-turn-alt)}
.k-phase-tile.locked.next{opacity:1;border:2px dashed var(--klaus-blue-border);border-bottom:2px dashed var(--klaus-blue-border);background:var(--surface)}
.k-phase-tile-head{display:flex;align-items:center;justify-content:space-between}
.k-phase-num{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:var(--fs-small);font-weight:700;color:#fff;transition:transform var(--t-quick) var(--ease-out);transform:rotate(-2deg);box-shadow:0 2px 0 0 rgba(0,0,0,.1)}
.k-phase-tile:hover .k-phase-num{transform:rotate(-4deg) scale(1.05)}
.k-phase-num.done{background:var(--state-done)}
.k-phase-num.active{background:var(--state-active)}
.k-phase-num.locked{background:var(--bg-cream-deep);color:var(--gray-400)}
.k-phase-tile-title{font-size:var(--fs-h5);font-weight:700;line-height:1.15}
.k-phase-tile-sub{font-size:var(--fs-small);color:var(--fg-muted);margin-top:2px}
.k-phase-tile-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.k-phase-tile-footer .k-btn{white-space:nowrap}
.k-btn-short{display:none}
@media(max-width:1100px){.k-btn-long{display:none}.k-btn-short{display:inline}}
.k-phase-tile-meta{font-size:var(--fs-xs);color:var(--fg-muted)}

.k-tab-bar{display:flex;gap:0;border-bottom:1.5px dashed rgba(10,10,10,.08);margin-top:24px;margin-bottom:0}
.k-tab{padding:10px 22px;cursor:pointer;font-size:var(--fs-card);font-weight:500;color:var(--fg-muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:color var(--t-quick) ease,border-color var(--t-quick) ease;user-select:none}
.k-tab:hover{color:var(--ink)}
.k-tab.active{color:var(--ink);border-bottom:2.5px solid var(--klaus-blue);font-weight:600}
.k-tab-count{font-size:var(--fs-3xs);font-weight:700;background:var(--klaus-blue-soft);color:var(--klaus-blue);padding:1px 7px;border-radius:var(--radius-pill);margin-left:6px}

.k-analysis-section{background:var(--app-turn-alt);border:2px dashed var(--klaus-blue-border);border-radius:var(--radius-xl);padding:24px;margin-top:24px}
.k-analysis-row{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;background:var(--surface);border-left:3px solid transparent;border-radius:var(--radius-md);margin-bottom:4px;cursor:pointer;transition:background var(--t-quick) ease,box-shadow var(--t-quick) ease,border-left-color var(--t-quick) ease}
.k-analysis-row:hover{background:var(--klaus-blue-soft);box-shadow:var(--shadow-warm);border-left-color:var(--klaus-blue)}
.k-analysis-num{min-width:24px;font-size:var(--fs-card);font-weight:700;color:var(--klaus-blue)}
.k-analysis-title{flex:1;font-size:var(--fs-card);font-weight:500}
.k-analysis-detail{padding:6px 16px 14px 50px;font-size:var(--fs-xs);color:var(--fg-body);background:var(--app-turn-alt);border:1px solid var(--gray-200);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:6px;margin-top:-4px;line-height:1.5}
.k-risk-section{margin-top:20px}
.k-risk-list{margin:8px 0 0;padding:0 0 0 20px;list-style:disc;display:flex;flex-direction:column;gap:6px}
.k-risk-list li{font-size:var(--fs-xs);color:var(--fg-body);line-height:1.5}

.k-reg-row{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-left:3px solid transparent;border-radius:var(--radius-md);margin-bottom:4px;cursor:pointer;transition:background var(--t-quick) ease,box-shadow var(--t-quick) ease,border-left-color var(--t-quick) ease}
.k-reg-row:hover{background:var(--klaus-blue-soft);box-shadow:var(--shadow-warm);border-left-color:var(--klaus-blue)}
.k-reg-tone{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.k-reg-tone.green{background:var(--risk-minimal)}
.k-reg-tone.orange{background:var(--risk-high)}
.k-reg-tone.red{background:var(--risk-banned)}
.k-reg-tone.yellow{background:var(--risk-limited)}
.k-reg-title{flex:1;font-size:var(--fs-card);font-weight:500}
.k-reg-category{font-size:var(--fs-3xs);color:var(--fg-muted);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);white-space:nowrap}
.k-reg-detail{padding:6px 16px 14px 34px;font-size:var(--fs-xs);color:var(--fg-body);background:var(--app-turn-alt);border:1px solid var(--gray-200);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);margin-bottom:6px;margin-top:-4px;line-height:1.5}
.k-reg-group-label{font-size:var(--fs-small);font-weight:700;color:var(--ink);margin:16px 0 8px;display:flex;align-items:center;gap:8px}
.k-reg-group-count{font-size:var(--fs-3xs);font-weight:600;color:var(--fg-muted)}

.k-tasks-section{margin-top:24px}
.k-tasks-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.k-task-row{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--surface);border-left:3px solid transparent;border-radius:var(--radius-md);margin-bottom:4px;cursor:pointer;transition:background var(--t-quick) ease,box-shadow var(--t-quick) ease,border-left-color var(--t-quick) ease}
.k-task-row:hover{background:var(--klaus-blue-soft);box-shadow:var(--shadow-warm);border-left-color:var(--klaus-blue)}
.k-task-done-hint{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--risk-minimal);font-weight:600}
.k-task-prio{font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);padding:3px 10px;border-radius:var(--radius-pill);min-width:58px;text-align:center;border:1.5px solid currentColor}
.k-task-prio.hoch{background:var(--danger-soft);color:var(--risk-banned);box-shadow:1px 1px 0 0 rgba(var(--danger-rgb),.2)}
.k-task-prio.mittel{background:var(--warning-soft);color:var(--warning-text)}
.k-task-prio.niedrig{background:var(--gray-100);color:var(--gray-600)}
.k-task-label{flex:1;font-size:var(--fs-card);font-weight:500}
.k-task-phase{font-size:var(--fs-3xs);color:var(--fg-muted);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label)}
.k-task-detail{background:var(--surface);padding:12px 20px 16px 20px}
.k-task-detail-body{margin-bottom:14px}
.k-task-detail-desc{font-size:var(--fs-small);color:var(--fg-body);line-height:var(--lh-relaxed);margin-bottom:12px}
.k-task-detail-next{background:var(--surface);border:1px solid var(--klaus-blue-border);border-radius:var(--radius-sm);padding:12px 14px;margin-bottom:10px}
.k-task-detail-next-label{font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--klaus-blue);display:block;margin-bottom:4px}
.k-task-detail-next p{font-size:var(--fs-small);color:var(--fg-body);line-height:var(--lh-relaxed);margin:0}
.k-task-detail-meta{display:flex;gap:12px;align-items:center}
.k-task-detail-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.k-task-cta{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 8px;border:none;border-radius:14px;font-family:inherit;font-weight:600;font-size:var(--fs-small);line-height:1.3;cursor:pointer;text-decoration:none;transition:filter var(--t-quick) ease}
.k-task-cta:hover{filter:brightness(.94)}
.k-task-cta-icon{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.k-task-cta-klaus{background:var(--klaus-blue);color:#fff}
.k-task-cta-klaus .k-task-cta-icon{background:#fff;color:var(--klaus-blue)}
.k-task-cta-dieter{background:var(--klaus-yellow);color:#0A0A0A}
.k-task-cta-dieter .k-task-cta-icon{background:#0A0A0A;color:var(--klaus-yellow)}
.k-task-cta-eigen{background:var(--gray-700);color:#fff}
.k-task-cta-eigen .k-task-cta-icon{background:#fff;color:var(--gray-700)}
.k-task-cta-expert{background:transparent;color:var(--fg-muted);border:1px dashed var(--gray-300);font-size:var(--fs-xs);padding:6px 12px;border-radius:var(--radius-pill)}
.k-task-cta-expert:hover{color:var(--fg-body);border-color:var(--gray-400)}
.k-task-cta-expert .k-task-cta-icon{width:16px;height:16px;font-size:10px}
/* Dokumente-tab task rows + the task-chat document card */
.k-task-doc-error{font-size:var(--fs-xs);color:var(--danger-hover);max-width:280px;line-height:1.4}
.k-task-doc-card{display:flex;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--gray-200);border-radius:var(--radius-md);background:var(--surface);margin-bottom:16px;flex-wrap:wrap}
/* The "Anpassen" task-chat slide-over panel */
.k-task-chat-backdrop{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.2);backdrop-filter:blur(1px)}
.k-task-chat-panel{position:fixed;right:0;top:0;bottom:0;z-index:251;width:500px;max-width:90vw;display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--gray-200);box-shadow:-8px 0 32px rgba(0,0,0,.12);animation:k-slide-in-right .2s ease}
.k-task-chat-header{flex-shrink:0;display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gray-200);background:var(--gray-50,#FAFAFA)}
.k-task-chat-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.k-task-chat-footer{flex-shrink:0;padding:12px 16px;border-top:1px solid var(--gray-200);display:flex;gap:8px;align-items:flex-end}
.k-task-chat-footer .k-turn-alt{flex:1}
.k-task-chat-footer textarea{width:100%;resize:vertical}
.k-docdiff{font-size:var(--fs-small);line-height:1.55}
.k-docdiff-legend{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--fg-muted);margin:0 0 10px}
.k-docdiff-key{padding:1px 8px;border-radius:4px;font-weight:600}
.k-docdiff-key-add,.k-docdiff-add,.k-docdiff-row-add td{background:#E6F6EC}
.k-docdiff-key-del,.k-docdiff-del,.k-docdiff-row-del td{background:var(--danger-soft)}
.k-docdiff-key-add{color:#17663A}.k-docdiff-key-del{color:#9B2C2C;text-decoration:line-through}
.k-docdiff-add,.k-docdiff-del{border-left:3px solid;padding:4px 10px;margin:6px 0;border-radius:4px}
.k-docdiff-add{border-color:#22A35A}
.k-docdiff-del{border-color:#D64545;color:#7A2E2E}
.k-docdiff-del *,.k-docdiff-row-del td{text-decoration:line-through;text-decoration-color:rgba(155,44,44,.6)}
.k-docdiff-add>:first-child,.k-docdiff-del>:first-child{margin-top:0}.k-docdiff-add>:last-child,.k-docdiff-del>:last-child{margin-bottom:0}
.k-docdiff-toggle{display:flex;gap:6px}
.k-docdiff-toggle .active{background:var(--klaus-blue);color:#fff;border-color:var(--klaus-blue)}
.k-task-chat-older summary{cursor:pointer;font-size:var(--fs-xs);color:var(--fg-muted)}
.k-task-chat-msg-user{align-self:flex-end;max-width:85%;background:var(--klaus-blue-soft);color:var(--klaus-blue);border-radius:12px 12px 2px 12px;padding:10px 14px;font-size:var(--fs-small);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.k-task-chat-msg-assistant{max-width:100%;font-size:var(--fs-small);line-height:1.6}
.k-task-chat-msg-assistant :is(h1,h2,h3,h4){font-size:15px;margin:14px 0 6px}
.k-task-chat-msg-assistant table{width:100%;border-collapse:collapse;font-size:12.5px;margin:10px 0}
.k-task-chat-msg-assistant :is(th,td){border:1px solid var(--gray-200);padding:6px 8px;text-align:left}
.k-task-chat-status{display:flex;align-items:center;gap:10px;color:var(--fg-muted);font-size:var(--fs-small);padding:8px 0}
.k-task-chat-waiting{display:flex;align-items:center;gap:16px;margin-top:8px;padding:16px;border:1.5px dashed var(--klaus-blue-border);border-radius:var(--radius-lg);background:var(--surface-warm)}
.k-task-chat-waiting-title{margin:0;font-weight:600;font-size:var(--fs-small);animation:k-pulse 1.5s ease infinite}
.k-task-chat-waiting-sub{margin:2px 0 0;font-size:var(--fs-xs);color:var(--fg-muted)}
@keyframes k-slide-in-right{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}

.k-wizard{display:flex;flex-direction:column;height:100%}
.k-wizard-scroll{flex:1;overflow-y:auto;scroll-snap-type:y proximity}
/* width:100% is load-bearing: inside the flex column .k-active-viewport the
   auto margins disable stretch, so without it the column is fit-content sized
   and its width follows the streaming text. */
.k-wizard-center{width:100%;max-width:var(--wizard-col);margin:0 auto;padding:0 24px}

/* History log — lives above the active viewport, fades at the bottom */
.k-history-log{position:relative;padding:32px 0 0}
.k-history-log::after{content:"";display:block;height:80px;background:linear-gradient(to top,var(--app-canvas),transparent);pointer-events:none;position:sticky;bottom:0;margin-top:-80px;z-index:2}

/* Active viewport — takes full scroll-port height, top-anchored */
.k-active-viewport{min-height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding:max(24px,10vh) 0 32px;scroll-snap-align:start;scroll-snap-stop:always}

.k-history-turn{margin-bottom:20px;padding:18px 22px;background:transparent;border:none;border-left:2px solid var(--gray-200);border-radius:0;opacity:.75;position:relative}
@keyframes k-scroll-flash{0%,100%{background:transparent;border-left-color:var(--gray-200)}40%{background:var(--Klaus-blue-soft);border-left-color:var(--Klaus-blue);opacity:1}}
.k-history-turn.k-scroll-flash{animation:k-scroll-flash 1.2s ease forwards}
.k-history-q{font-size:var(--fs-small);font-weight:600;margin:4px 0 8px}
.k-history-msg{font-size:var(--fs-small);margin:4px 0 8px;line-height:var(--lh-relaxed)}
.k-history-msg p{margin:0 0 .4em}
.k-history-msg p:last-child{margin-bottom:0}
.k-history-msg ul,.k-history-msg ol{padding-left:1.1em;margin:.2em 0}
.k-history-msg li{margin:.1em 0}
.k-history-msg table{font-size:var(--fs-3xs);border-collapse:collapse;margin:.4em 0;max-width:100%;overflow:auto;display:block}
.k-history-msg th,.k-history-msg td{border:1px solid var(--gray-200);padding:3px 8px;text-align:left}

/* Subtle chat-sized headings for Klaus markdown (shared between history + active) */
.k-md-heading{font-size:inherit;font-weight:700;margin:.6em 0 .2em;line-height:var(--lh-snug)}

/* Active question area markdown */
.k-q-explain .k-md-heading{font-size:var(--fs-body);margin:.5em 0 .15em}
.k-q-explain p{margin:0 0 .45em}
.k-q-explain p:last-child{margin-bottom:0}
.k-q-explain ul,.k-q-explain ol{padding-left:1.1em;margin:.2em 0}
.k-q-explain li{margin:.1em 0}
.k-history-a{font-size:var(--fs-card);color:var(--klaus-blue);font-weight:500}
.k-history-divider{text-align:center;padding:16px 0;font-size:var(--fs-xs);color:var(--fg-muted);display:flex;align-items:center;gap:12px}
.k-history-divider::before,.k-history-divider::after{content:"";flex:1;height:0;border-top:1px dashed rgba(10,10,10,.08);background:none}
.k-history-divider-topic{font-size:var(--fs-3xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--klaus-blue);padding:8px 0}
.k-history-divider-topic::before,.k-history-divider-topic::after{border-top-color:var(--klaus-blue-border)}

.k-active-q{animation:k-fadeIn var(--t-slow) var(--ease-out)}
.k-klaus-header{margin-bottom:16px}
.k-mascot{position:relative;flex-shrink:0}
.k-mascot img{display:block;object-fit:contain}
.k-mascot::after{content:"";position:absolute;inset:-20%;background:radial-gradient(closest-side,var(--klaus-blue-soft),transparent 70%);filter:blur(6px);z-index:-1;border-radius:50%}
.k-mascot.sm{width:28px;height:28px}
.k-mascot.sm img{width:28px;height:28px}
.k-mascot.sm::after{display:none}
.k-mascot.lg{width:88px;height:88px}
.k-mascot.lg img{width:88px;height:88px}
.k-mascot.xl{width:72px;height:72px}
.k-mascot.xl img{width:72px;height:72px}
.k-mascot.xxl{width:120px;height:120px}
.k-mascot.xxl img{width:120px;height:120px}
/* Mascot + headline side by side */
.k-q-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px}
.k-q-row .k-q-title{margin-bottom:0}
.k-q-title{font-size:28px;font-weight:700;line-height:var(--lh-snug);margin:0 0 12px;letter-spacing:-0.02em}
.k-q-explain{font-size:var(--fs-body);color:var(--fg-body);line-height:var(--lh-relaxed)}

/* Tool-call interjection pills — inline mono tags that sit above or inside
   assistant messages. Port of ai-lawyer's .proto-tool-pill. */
.k-tool-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.k-tool-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;font-weight:400;letter-spacing:.08em;color:var(--k-mid);background:transparent;border:1px solid var(--k-line);border-radius:3px;padding:2px 7px;white-space:nowrap}
.k-tool-pill svg{width:10px;height:10px;flex-shrink:0;color:var(--k-mid)}
.k-tool-pill-count{font-size:9px;opacity:.7}
.k-tool-pill-spin{width:10px;height:10px;flex-shrink:0;border:1.5px solid var(--k-mid);border-top-color:transparent;border-radius:50%;animation:k-spin .8s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}
.k-tool-sep{display:flex;align-items:center;gap:8px;margin:6px 0}
.k-tool-sep-line{flex:1;border-top:1px solid var(--k-line)}
.k-tool-sep-label{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--k-mid)}

/* Thinking state: skeleton placeholder + mascot glow pulse, so long waits still feel alive */
.k-mascot-thinking .k-mascot::after{animation:k-glow-pulse 1.8s ease-in-out infinite}
@keyframes k-glow-pulse{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}
.k-thinking-skeleton{display:flex;flex-direction:column;gap:10px;max-width:560px;margin-top:28px}
.k-skel-line{height:13px;border-radius:7px;background:linear-gradient(90deg,var(--gray-100) 25%,var(--gray-200) 37%,var(--gray-100) 63%);background-size:400% 100%;animation:k-shimmer 1.6s ease infinite}
.k-skel-line.w-80{width:80%}
.k-skel-line.w-60{width:60%}
.k-skel-line.w-40{width:40%}
@keyframes k-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
/* Buch-Loader: Klaus' Wartesymbol für längere Wartezeiten. Reines CSS, damit
   die Animation ohne Re-Renders läuft. Erst ab 5s Wartezeit sichtbar (das
   Buch ist das Signal für "dauert länger", nicht der Standard). */
.k-book{position:relative;width:56px;height:38px;perspective:280px;flex-shrink:0}
.k-book::before{content:"";position:absolute;left:-2px;right:-2px;bottom:0;height:8px;background:var(--klaus-blue);border-radius:2px 2px 7px 7px}
.k-book::after{content:"";position:absolute;left:50%;top:2px;bottom:6px;width:2px;transform:translateX(-50%);background:rgba(10,10,10,.10)}
.k-book-page{position:absolute;top:2px;bottom:6px;width:50%;background-color:var(--surface-warm);background-image:repeating-linear-gradient(to bottom,transparent 0 6px,var(--gray-200) 6px 7px);background-size:72% 100%;background-position:center 6px;background-repeat:no-repeat;border:1px solid var(--gray-200)}
.k-book-page.left{left:0;border-radius:6px 1px 1px 4px;border-right:none}
.k-book-page.right{right:0;border-radius:1px 6px 4px 1px;border-left:none}
.k-book-leaf{position:absolute;left:50%;top:2px;bottom:6px;width:calc(50% - 1px);transform-origin:left center;background:linear-gradient(100deg,#FFFFFF 0%,var(--surface-warm) 55%,var(--bg-cream-deep) 100%);border:1px solid var(--gray-200);border-left:none;border-radius:1px 6px 4px 1px;animation:k-book-flip 2.4s cubic-bezier(.55,.08,.35,.92) infinite;will-change:transform,opacity}
.k-book-leaf.second{animation-delay:1.2s}
@keyframes k-book-flip{0%{transform:rotateY(0);opacity:1}42%{transform:rotateY(-178deg);opacity:1}50%{transform:rotateY(-178deg);opacity:0}51%{transform:rotateY(0);opacity:0}62%{transform:rotateY(0);opacity:1}100%{transform:rotateY(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.k-book-leaf{animation:none}.k-book-leaf.second{display:none}}
.k-thinking-elapsed{font-size:13px;font-weight:400;color:var(--fg-muted);margin-left:8px}
/* Kompakte Variante für die Funkstille MITTEN in einer Nachricht: nur Buch
   plus Hinweiszeile, ohne Mascot und Titel. */
.k-thinking-book-row{display:flex;align-items:center;gap:14px;margin-top:24px}
.k-thinking-note{font-size:var(--fs-small);color:var(--fg-muted);line-height:var(--lh-relaxed)}
/* Zwischenfazit blockquotes inside active question and history */
.k-q-explain blockquote,.k-history-msg blockquote{margin:0 0 8px;padding:8px 14px;border:1.5px solid var(--klaus-blue-border);background:var(--klaus-blue-soft);border-radius:var(--radius-md);font-size:var(--fs-small);color:var(--klaus-blue);font-style:normal;line-height:var(--lh-relaxed)}
.k-q-explain blockquote p,.k-history-msg blockquote p{margin:0}
/* GFM task lists (todo lists) in chat messages. goldmark emits
   <ul class="contains-task-list"><li class="task-list-item"><input
   type="checkbox" disabled> text</li></ul>. The markdown sanitizer allows
   input + the class attrs; these rules render them as real checkboxes. */
.k-q-explain .contains-task-list,.k-history-msg .contains-task-list{list-style:none;padding-left:0;margin:.2em 0}
.k-q-explain .task-list-item,.k-history-msg .task-list-item{list-style:none;display:flex;align-items:flex-start;gap:.4em;margin:.15em 0}
.k-q-explain .task-list-item input[type=checkbox],.k-history-msg .task-list-item input[type=checkbox]{margin:.35em 0 0;accent-color:var(--klaus-blue);flex-shrink:0}
.k-q-explain .task-list-item:has(input:checked),.k-history-msg .task-list-item:has(input:checked){text-decoration:line-through;color:var(--fg-muted)}
@keyframes k-turn-in{from{opacity:0;transform:rotate(-0.15deg) translateY(16px)}to{opacity:1;transform:rotate(-0.15deg) translateY(0)}}
.k-turn{background:var(--surface-warm);border:1.5px solid var(--klaus-blue-border);border-radius:var(--radius-lg);padding:16px 18px;margin-top:16px;margin-bottom:12px;transform:rotate(-0.15deg);animation:k-turn-in .55s cubic-bezier(.22,.68,0,1.2) both}
/* Turn already running: a neutral note, deliberately not the red error box —
   there is nothing broken and nothing for the customer to do. */
.k-busy-hint{padding:12px 16px;background:var(--bg-cream-deep);border:1px solid var(--gray-200);border-radius:var(--radius-md);margin-top:12px;font-size:var(--fs-small);color:var(--fg-muted);line-height:var(--lh-relaxed)}
.k-options{display:flex;flex-direction:column;gap:6px}
.k-option{background:var(--surface);border:var(--border-warm);border-radius:var(--radius-sm);padding:11px 14px;cursor:pointer;font-size:var(--fs-card);font-weight:500;display:flex;align-items:center;gap:10px;transition:border-color var(--t-quick) ease,background var(--t-quick) ease,transform var(--t-quick) var(--ease-out);user-select:none}
.k-option:hover{border-color:transparent;background:var(--klaus-blue-soft);transform:translateX(3px)}
.k-option:disabled{color:inherit;cursor:progress}
.k-option:disabled:hover{border:var(--border-warm);background:var(--surface);transform:none}
.k-option.selected{border-color:transparent;border-left:3px solid var(--klaus-blue);background:var(--klaus-blue-soft);font-weight:600;padding-left:13px}
.k-option-check{width:20px;height:20px;border-radius:4px;border:2px solid rgba(10,10,10,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--t-quick) ease;font-size:12px;color:transparent}
.k-option.selected .k-option-check{background:var(--klaus-blue);border-color:var(--klaus-blue);color:#fff}
.k-option-checkbox.selected .k-option-check::after{content:"✓";font-size:13px;line-height:1}
.k-turn-alt{border-top:2px dashed var(--klaus-blue-border);padding:12px 0 0;margin-top:12px}
.k-turn-alt textarea{width:100%;border:0;border-bottom:var(--border-input);background:transparent;font-size:var(--fs-card);padding:6px 0;resize:none;outline:none;line-height:var(--lh-relaxed);min-height:36px;caret-color:var(--klaus-blue)}
.k-turn-alt textarea:focus-visible{outline:none}
.k-turn-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:14px}
.k-turn-actions .k-btn:disabled{opacity:.5;cursor:not-allowed}

.k-turn-alt-label{font-size:var(--fs-3xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--klaus-blue);margin-bottom:6px}
.k-chip-solve{font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:var(--tracking-label);flex-shrink:0}
.k-chip-solve-klaus{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-chip-solve-dieter{background:var(--klaus-yellow-soft);color:var(--klaus-yellow-text)}
.k-chip-solve-eigen{background:var(--gray-100);color:var(--gray-500)}
.k-wizard-footer-sticky{flex-shrink:0;background:var(--app-canvas);border-top:none;box-shadow:0 -2px 12px rgba(10,10,10,.04);padding:12px 0;position:relative;z-index:10}
.k-wizard-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.k-wizard-footer-left{display:flex;align-items:center;gap:10px;min-width:0}
.k-wizard-footer-right{display:flex;gap:10px}

/* TodoPanel — collapsible "Arbeitsschritt" strip above the chat footer.
   Port of ai-lawyer's cases/TodoPanel.tsx (Klaus mode). Plain uppercase
   label strip, no card border; expanded shows the ○/● checklist.
   The expand/collapse uses the grid-template-rows:0fr↔1fr trick for a
   smooth height:auto animation without JS (mirrors Radix's
   collapsible-down/up feel). */
.k-todo-panel{max-width:70.4rem;margin:0 auto}
.k-todo-panel-toggle{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;appearance:none}
.k-todo-panel-summary{display:flex;align-items:center;gap:.5ch;padding:10px 20px 6px;background:none;border:none;cursor:pointer;letter-spacing:.06em;font-size:11px;font-weight:500;text-transform:uppercase;color:rgba(10,10,10,.4);line-height:1.2}
.k-todo-panel-label{color:rgba(10,10,10,.3)}
.k-todo-panel-current{color:rgba(10,10,10,.65);font-style:italic;text-transform:none;font-size:11px;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.k-todo-panel-count{margin-left:auto;color:rgba(10,10,10,.3);flex-shrink:0}
.k-todo-panel-chev{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:14px;height:14px;color:rgba(10,10,10,.3);transition:transform .25s var(--ease-out,ease)}
.k-todo-panel-chev svg{width:14px;height:14px}
.k-todo-panel-toggle:checked + .k-todo-panel-summary .k-todo-panel-chev{transform:rotate(180deg)}
.k-todo-panel-list{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s var(--ease-out,ease)}
.k-todo-panel-toggle:checked ~ .k-todo-panel-list{grid-template-rows:1fr}
.k-todo-panel-list-inner{overflow:hidden;min-height:0}
.k-todo-panel-list-inner ul{list-style:none;padding:8px 20px 12px;margin:0;display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(10,10,10,.07)}
.k-todo-item{display:flex;align-items:baseline;gap:8px;font-size:12px;letter-spacing:.01em}
.k-todo-bullet{flex-shrink:0;font-size:10px;line-height:1}
.k-todo-bullet-done{color:var(--klaus-blue)}
.k-todo-bullet-open{color:rgba(10,10,10,.3)}
.k-todo-text{color:rgba(10,10,10,.7)}
.k-todo-text-done{color:rgba(10,10,10,.3);text-decoration:line-through}

.k-verdict{max-width:var(--verdict-col);margin:0 auto;padding:40px 24px}
.k-verdict-headline{font-size:var(--fs-h2);font-weight:700;line-height:var(--lh-snug);margin:8px 0 12px;letter-spacing:-0.02em}
.k-verdict-body{font-size:var(--fs-body);color:var(--fg-body);line-height:var(--lh-relaxed);max-width:640px}
.k-verdict-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.k-finding-card{background:var(--surface);border:none;border-bottom:2px solid var(--bg-cream-deep);border-radius:var(--radius-lg);padding:20px}
.k-verdict-grid>.k-finding-card:nth-child(odd){transform:none}
.k-verdict-grid>.k-finding-card:nth-child(even){transform:none}
.k-finding-label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);margin-bottom:8px}
.k-finding-val{font-size:var(--fs-h5);font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.k-finding-note{font-size:var(--fs-small);color:var(--fg-muted);line-height:var(--lh-relaxed)}
.k-verdict-tasks{background:var(--app-turn-alt);border:2px dashed var(--klaus-blue-border);border-radius:var(--radius-xl);padding:24px;margin-top:24px}

.k-completion{max-width:var(--verdict-col);margin:0 auto;padding:48px 24px 80px}
.k-completion-hero{background:var(--klaus-blue);color:#fff;border-radius:var(--radius-2xl);padding:48px;text-align:center;margin-bottom:40px;position:relative;overflow:hidden}
.k-completion-hero .k-cert-icon{margin:0 auto 24px;width:72px;height:72px;position:relative;z-index:1}
.k-completion-hero h1{font-size:36px;font-weight:700;line-height:1.1;margin-bottom:12px;position:relative;z-index:1}
.k-completion-hero p{font-size:var(--fs-body);opacity:.85;line-height:var(--lh-relaxed);max-width:540px;margin:0 auto;position:relative;z-index:1}
.k-completion-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-pill);padding:10px 24px;margin-top:20px;font-size:var(--fs-small);font-weight:600;position:relative;z-index:1}
.k-completion-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.k-completion-stat{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-xl);padding:32px 24px;text-align:center}
.k-completion-stat-num{font-size:48px;font-weight:700;color:var(--klaus-blue);line-height:1;transform:rotate(-1deg);letter-spacing:-0.04em}
.k-completion-stat-label{font-size:var(--fs-card);color:var(--fg-body);margin-top:8px;font-weight:500}
.k-completion-stat-detail{font-size:var(--fs-xs);color:var(--fg-muted);margin-top:4px;line-height:var(--lh-relaxed)}
.k-fahrplan{margin-bottom:40px}
.k-fahrplan h2{font-size:var(--fs-h3);font-weight:700;margin-bottom:4px}
.k-fahrplan-sub{font-size:var(--fs-card);color:var(--fg-muted);margin-bottom:20px}
.k-fahrplan-group{margin-bottom:24px}
.k-fahrplan-group-label{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);padding-bottom:10px;margin-bottom:10px;border-bottom:1.5px dashed rgba(10,10,10,.1);padding-left:16px;position:relative}
.k-fahrplan-group-label::before{content:"";position:absolute;left:0;top:calc(50% - 5px);width:6px;height:6px;border-radius:50%;background:currentColor}
.k-completion-ctas{background:var(--surface);border:2px dashed var(--klaus-blue-border);border-radius:var(--radius-xl);padding:32px;text-align:center}
.k-completion-ctas h3{font-size:var(--fs-h4);font-weight:700;margin-bottom:8px}
.k-completion-ctas p{font-size:var(--fs-card);color:var(--fg-muted);margin-bottom:24px}
.k-completion-cta-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.k-completion-note{font-size:var(--fs-xs);color:var(--fg-muted);text-align:center;margin-top:24px;line-height:var(--lh-relaxed)}

.k-welcome{max-width:var(--wizard-col);margin:0 auto;padding:80px 24px;text-align:center}
.k-welcome .k-mascot{margin:0 auto 24px}
.k-welcome h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:12px}
.k-welcome p{font-size:var(--fs-body);color:var(--fg-body);line-height:var(--lh-relaxed);max-width:500px;margin:0 auto 28px}

.k-onboarding{flex:1;display:flex;align-items:center;justify-content:center;background:var(--app-canvas)}
.k-onboarding-card{background:var(--surface);border:var(--border-card);border-radius:var(--radius-xl);padding:48px;max-width:520px;text-align:center;box-shadow:var(--shadow-floating);animation:k-fadeIn .4s var(--ease-out)}
.k-onboarding-card .k-mascot{margin:0 auto 24px}
.k-onboarding-card h2{font-size:var(--fs-h2);font-weight:700;margin-bottom:12px}
.k-onboarding-card p{font-size:var(--fs-body);color:var(--fg-body);line-height:var(--lh-relaxed);margin-bottom:28px}

.k-onboarding-brand{height:var(--topbar-h);display:flex;align-items:center;padding:0 24px;background:var(--app-canvas);border-bottom:1px solid rgba(10,10,10,.05);flex-shrink:0}
.k-onboarding-chat{flex:1;display:flex;align-items:center;justify-content:center;background:var(--app-canvas);padding:24px}
.k-onboarding-msg{max-width:var(--wizard-col);width:100%;animation:k-fadeIn .5s var(--ease-out)}
.k-onboarding-msg-intro{display:flex;gap:20px;align-items:flex-start;background:var(--surface);border:var(--border-card);border-radius:var(--radius-xl);padding:32px;margin-bottom:24px;box-shadow:var(--shadow-soft)}
.k-onboarding-msg-intro .k-mascot{flex-shrink:0}
.k-onboarding-msg-intro h2{font-size:24px;font-weight:700;margin-bottom:8px;line-height:1.15}
.k-onboarding-msg-intro p{font-size:var(--fs-body);color:var(--fg-body);line-height:var(--lh-relaxed);margin:0}
@keyframes k-slideInLeft{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}
@keyframes k-slideDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}
.k-topbar.ob-enter{animation:k-slideDown .5s var(--ease-out)}
.k-rail.ob-enter{animation:k-slideInLeft .5s var(--ease-out)}

.k-coachmark{background:var(--surface);border:var(--border-card);border-radius:var(--radius-md);padding:12px 16px;box-shadow:var(--shadow-warm);font-size:var(--fs-small);color:var(--fg-body);display:flex;align-items:center;gap:12px;max-width:var(--wizard-col);margin:16px auto;animation:k-fadeIn .3s var(--ease-out)}
@keyframes k-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.k-tutorial-overlay{position:fixed;inset:0;z-index:9000;transition:background .3s ease}
.k-tutorial-bubble{position:fixed;z-index:9002;background:var(--surface);border-radius:var(--radius-md);padding:16px 20px;box-shadow:var(--shadow-float);max-width:300px;animation:k-fadeIn .3s var(--ease-out)}
.k-tutorial-bubble h4{font-size:var(--fs-small);font-weight:700;color:var(--ink);margin-bottom:4px}
.k-tutorial-bubble p{font-size:var(--fs-xs);color:var(--fg-body);line-height:1.5;margin-bottom:12px}
.k-tutorial-bubble .k-tutorial-footer{display:flex;align-items:center;justify-content:space-between}
.k-tutorial-bubble .k-tutorial-dots{display:flex;gap:5px}
.k-tutorial-bubble .k-tutorial-dot{width:6px;height:6px;border-radius:50%;background:var(--gray-300)}
.k-tutorial-bubble .k-tutorial-dot.active{background:var(--klaus-blue)}
.k-tutorial-highlight{position:fixed;z-index:9001;border-radius:var(--radius-md);box-shadow:0 0 0 4px var(--klaus-blue),0 0 0 9999px rgba(24,28,33,.35);pointer-events:none}

.k-proto-intro{position:fixed;inset:0;z-index:10000;background:var(--canvas);display:flex;align-items:center;justify-content:center;animation:k-fadeIn .4s var(--ease-out)}
.k-proto-intro-card{max-width:520px;text-align:center;padding:48px 40px;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-float);border:var(--border-card)}
.k-proto-intro-card h1{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin-bottom:8px}
.k-proto-intro-card p{font-size:var(--fs-body);color:var(--fg-body);line-height:1.6;margin-bottom:16px}
.k-proto-intro-card .k-proto-hint{font-size:var(--fs-small);color:var(--fg-muted);background:var(--canvas);border-radius:var(--radius-md);padding:14px 18px;text-align:left;line-height:1.6;margin-bottom:24px}
.k-proto-intro-card .k-proto-hint strong{color:var(--ink)}

.k-devbar{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:var(--fg-on-dark);z-index:9999;font-size:var(--fs-xs);display:flex;align-items:stretch;height:40px}
.k-devbar-section{padding:4px 12px;display:flex;align-items:center;gap:6px;border-right:1px solid rgba(255,255,255,.1)}
.k-devbar-label{font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-label);font-size:9px;color:rgba(255,255,255,.4);margin-right:2px}
.k-devbar button{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;color:var(--fg-on-dark);background:rgba(255,255,255,.1);transition:background var(--t-quick) ease;font-family:inherit;cursor:pointer;border:none;white-space:nowrap}
.k-devbar button:hover{background:rgba(255,255,255,.2)}
.k-devbar button.active{background:var(--klaus-blue)}

::selection{background:var(--klaus-blue-soft);color:var(--ink)}
.k-app-root *:focus-visible{outline:2px solid var(--klaus-blue);outline-offset:2px;border-radius:inherit}
.k-center::-webkit-scrollbar,.k-rail::-webkit-scrollbar{width:6px}
.k-center::-webkit-scrollbar-track,.k-rail::-webkit-scrollbar-track{background:transparent}
.k-center::-webkit-scrollbar-thumb,.k-rail::-webkit-scrollbar-thumb{background:rgba(var(--klaus-blue-rgb),.12);border-radius:9999px}
.k-center::-webkit-scrollbar-thumb:hover,.k-rail::-webkit-scrollbar-thumb:hover{background:rgba(var(--klaus-blue-rgb),.25)}
@keyframes k-pulse{0%,100%{opacity:1}50%{opacity:.5}}

/* Hide mobile-only elements on desktop */
.k-mobile-menu-btn{display:none}
.k-rail-backdrop{display:none}

/* ============================================================
   RESPONSIVE — Mobile Optimization
   ============================================================ */

/* --- Tablet Landscape / Small Desktop (≤1024px) --- */
@media (max-width:1024px){
  .k-topbar-center{display:none}
  .k-topbar{padding:0 16px}
  .k-dashboard{padding:24px 24px 60px}
  .k-phase-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .k-dash-header{flex-direction:column;align-items:flex-start;gap:16px}
  .k-progress-wrap{align-items:flex-start}
  .k-progress-bar{width:100%}
  .k-completion-stats{grid-template-columns:repeat(2,1fr)}
}

/* --- Tablet Portrait / Large Phone (≤768px) --- */
@media (max-width:768px){
  :root{
    --fs-display:40px;--fs-h1:32px;--fs-h2:28px;--fs-h3:24px;
    --fs-h4:19px;--fs-h5:17px;--fs-lead:17px;--fs-body:16px;
    --fs-card:14px;--fs-small:13px;--fs-xs:12px;--fs-2xs:11px;--fs-3xs:10px
  }
  .k-topbar{height:48px}
  .k-topbar .k-brand span:not(.k-brand-beta){display:none}
  .k-topbar .k-brand .k-brand-logo{display:block}
  .k-topbar .k-brand .k-brand-beta{display:inline-flex}
  .k-topbar-center{display:none}
  .k-topbar-right .k-btn-ghost{display:none}
  .k-layout{height:calc(100vh - 48px)}
  /* Rail as drawer overlay */
  .k-rail{
    position:fixed;top:48px;left:0;bottom:40px;
    width:min(280px,85vw);z-index:200;
    transform:translateX(-100%);
    transition:transform .3s var(--ease-out);
    box-shadow:none;
    overflow-y:auto;overflow-x:hidden
  }
  .k-rail.mobile-open{
    transform:translateX(0);
    box-shadow:4px 0 24px rgba(0,0,0,.15)
  }
  .k-rail-phase span[style]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .k-rail-expand{display:none}
  .k-rail-backdrop{
    display:block;
    position:fixed;inset:0;z-index:199;
    background:rgba(0,0,0,.3);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
  }
  /* Center takes full width */
  .k-center{flex:1}
  /* Dashboard */
  .k-dashboard{padding:20px 16px 60px}
  .k-phase-grid{grid-template-columns:1fr;gap:12px}
  .k-phase-tile{min-height:auto;padding:20px}
  .k-dash-title{font-size:24px}
  /* Wizard */
  .k-wizard-center{max-width:100%;padding:0 16px}
  .k-history-log{padding-top:20px}
  .k-active-viewport{padding:24px 0 20px}
  .k-q-row{gap:12px}
  .k-q-title{font-size:22px}
  .k-mascot.lg,.k-mascot.lg img{width:56px;height:56px}
  .k-wizard-footer{flex-wrap:wrap;gap:8px}
  /* Verdict */
  .k-verdict{padding:24px 16px;max-width:100%}
  .k-verdict-grid{grid-template-columns:1fr}
  .k-verdict-headline{font-size:24px}
  .k-verdict-tasks{padding:16px}
  .k-finding-card{transform:none!important}
  /* Completion */
  .k-completion{padding:24px 16px 60px;max-width:100%}
  .k-completion-hero{padding:32px 20px;border-radius:var(--radius-lg)}
  .k-completion-hero h1{font-size:26px}
  .k-completion-stats{grid-template-columns:1fr;gap:12px}
  .k-completion-cta-grid{flex-direction:column}
  .k-completion-cta-grid .k-btn,.k-completion-cta-grid .k-btn-ghost{width:100%;justify-content:center}
  /* Welcome */
  .k-welcome{padding:40px 16px}
  .k-welcome p{max-width:100%}
  /* Onboarding */
  .k-onboarding-card{padding:32px 20px;max-width:calc(100% - 32px);margin:0 16px}
  .k-onboarding-msg{max-width:100%;padding:0 16px}
  /* Tutorial */
  .k-tutorial-bubble{max-width:calc(100vw - 32px)}
  /* Proto intro */
  .k-proto-intro-card{max-width:calc(100% - 32px);margin:0 16px;padding:32px 20px}
  /* Touch targets */
  .k-btn{padding:14px 22px}
  .k-btn-ghost{padding:12px 16px}
  .k-option{padding:16px 16px}
  .k-rail-phase{padding:14px 20px}
  .k-rail-topic{padding:10px 20px 10px 0}
  .k-rail-info{width:32px;height:32px;font-size:13px}
  /* Devbar */
  .k-devbar{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .k-devbar-section{flex-shrink:0}
  .k-devbar button{white-space:nowrap}
  /* Hamburger button */
  .k-mobile-menu-btn{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;border:none;background:transparent;
    cursor:pointer;padding:0;margin-left:4px;border-radius:var(--radius-sm);
    transition:background var(--t-quick) ease
  }
  .k-mobile-menu-btn:hover{background:rgba(0,0,0,.04)}
  .k-mobile-menu-btn svg{width:22px;height:22px;stroke:var(--ink);stroke-width:2;fill:none}
}

/* --- Smartphone (≤480px) --- */
@media (max-width:480px){
  :root{
    --fs-display:32px;--fs-h1:28px;--fs-h2:24px;--fs-h3:22px;
    --fs-h4:18px;--fs-h5:16px;--fs-lead:16px;--fs-body:15px;
    --fs-card:14px;--fs-small:13px;--fs-xs:12px;--fs-2xs:11px;--fs-3xs:10px
  }
  .k-dashboard{padding:16px 12px}
  .k-dash-title{font-size:22px}
  .k-phase-tile{padding:16px}
  .k-wizard-center{padding:0 12px}
  .k-q-title{font-size:20px}
  .k-wizard-footer{flex-direction:column}
  .k-wizard-footer .k-btn,.k-wizard-footer .k-btn-ghost{width:100%;justify-content:center}
  .k-wizard-footer-right{width:100%;flex-direction:column}
  .k-verdict{padding:20px 12px}
  .k-verdict-headline{font-size:22px}
  .k-completion{padding:20px 12px 60px}
  .k-completion-hero{padding:24px 16px}
  .k-completion-hero h1{font-size:24px}
  .k-welcome{padding:32px 12px}
  .k-onboarding-card{padding:24px 16px;max-width:calc(100% - 24px);margin:0 12px}
  .k-proto-intro-card{max-width:calc(100% - 24px);margin:0 12px;padding:24px 16px}
  .k-proto-intro-card h1{font-size:22px}
}

/* --- Touch device: hover neutralization + active feedback --- */
@media (hover:none){
  .k-phase-tile:not(.locked):hover{transform:none}
  .k-option:hover{background:var(--surface);border-color:var(--gray-200)}
  .k-btn:hover{transform:none}
  .k-task-row:hover{background:var(--surface);box-shadow:none}
  .k-phase-tile:hover .k-phase-num{transform:none}
  .k-rail-phase.done:hover{background:transparent}
  .k-btn:active{background:var(--klaus-blue-hover);transform:scale(.97)}
  .k-btn-ghost:active{background:rgba(10,10,10,.06)}
  .k-option:active{background:var(--klaus-blue-soft);border-color:var(--klaus-blue-border)}
  .k-phase-tile:not(.locked):active{transform:scale(.98)}
  .k-task-row:active{background:var(--klaus-blue-soft)}
}

/* --- Safe area insets (iPhone notch/homebar) --- */
@supports (padding-bottom:env(safe-area-inset-bottom)){
  .k-devbar{padding-bottom:env(safe-area-inset-bottom)}
  @media (max-width:768px){
    .k-rail{bottom:calc(40px + env(safe-area-inset-bottom))}
  }
}

/* ============================================================
   KONSERVATIVER MODUS (Anwaltsmodus)
   ============================================================ */
[data-theme="konservativ"] {
  --font-sans:"Source Serif 4","Georgia","Times New Roman",serif;
  --bg-cream:#FFFFFF;--bg-cream-deep:#F5F5F5;
  --ink:#111111;--surface:#FFFFFF;
  --fg:var(--ink);--fg-body:#222222;--fg-muted:#666666;
  --klaus-blue:#111111;--klaus-blue-hover:#333333;--klaus-blue-soft:#F0F0F0;--klaus-blue-border:#D0D0D0;
  --klaus-yellow:#111111;--klaus-yellow-dark:#333333;
  --gray-100:#F5F5F5;--gray-200:#E0E0E0;--gray-300:#CCCCCC;--gray-400:#999999;--gray-500:#666666;--gray-600:#444444;--gray-700:#333333;
  --risk-minimal:#555555;--risk-limited:#888888;--risk-high:#444444;--risk-banned:#111111;
  --state-done:#111111;--state-active:#111111;--state-open:#AAAAAA;--state-locked:#D0D0D0;--state-skipped:#888888;
  --prio-hoch:#111111;--prio-mittel:#444444;--prio-niedrig:#888888;
  --app-canvas:#FFFFFF;--app-rail:#F5F5F5;--app-turn:#FFFFFF;--app-turn-alt:#FAFAFA;
  --radius-sm:4px;--radius-md:4px;--radius-lg:8px;--radius-xl:8px;--radius-2xl:12px;
  --shadow-card:0 1px 4px rgb(0 0 0/12%);--shadow-soft:0 2px 6px rgb(0 0 0/14%);--shadow-floating:0 4px 16px rgb(0 0 0/18%);--shadow-warm:none;
  --border-card:1px solid #D0D0D0;--border-subtle:1px solid #D0D0D0;--border-input:1px solid #999;--border-warm:1px solid #D0D0D0;
}
[data-theme="konservativ"] .k-topbar{background:#FFFFFF;border-bottom:1px solid #D0D0D0}
[data-theme="konservativ"] .k-brand-beta{color:#111;border-color:#D0D0D0}
[data-theme="konservativ"] .k-chip-blue{background:#F0F0F0;color:#111}
[data-theme="konservativ"] .k-chip-green{background:#E8E8E8;color:#111}
[data-theme="konservativ"] .k-chip-yellow{background:#E8E8E8;color:#333}
[data-theme="konservativ"] .k-chip-red{background:#E8E8E8;color:#111}
[data-theme="konservativ"] .k-chip-orange{background:#E8E8E8;color:#333}
[data-theme="konservativ"] .k-chip-grey{background:#F0F0F0;color:#333;border-color:#D0D0D0}
[data-theme="konservativ"] .k-btn{background:transparent;color:#111;border:1.5px solid #111;border-radius:4px}
[data-theme="konservativ"] .k-btn:hover{background:#111;color:#fff;transform:none}
[data-theme="konservativ"] .k-btn-ghost{border:1px solid #999;border-radius:4px}
[data-theme="konservativ"] .k-btn-ghost:hover{border-color:#111;background:transparent}
[data-theme="konservativ"] .k-rail{border-right:1px solid #D0D0D0}
[data-theme="konservativ"] .k-rail-phase.active{background:#F0F0F0;border-left:3px solid #111}
[data-theme="konservativ"] .k-rail-topic.active{color:#111}
[data-theme="konservativ"] .k-rail-dot.locked{background:#FFFFFF;border-color:#CCCCCC}
[data-theme="konservativ"] .k-turn{border-color:#D0D0D0;border-radius:8px}
[data-theme="konservativ"] .k-option{border-radius:4px}
[data-theme="konservativ"] .k-option:hover{border-color:#111;background:#F5F5F5;transform:none}
[data-theme="konservativ"] .k-option.selected{border-left:3px solid #111;background:#F0F0F0}
[data-theme="konservativ"] .k-option.selected .k-option-check{background:#111;border-color:#111}
[data-theme="konservativ"] .k-turn-alt{border-top:2px dashed #D0D0D0}
[data-theme="konservativ"] .k-turn-alt-label{color:#111}
[data-theme="konservativ"] .k-turn-alt textarea{caret-color:#111}

[data-theme="konservativ"] .k-phase-tile{border-radius:8px}
[data-theme="konservativ"] .k-phase-tile:not(.locked):hover{transform:none}
[data-theme="konservativ"] .k-phase-tile:hover .k-phase-num{transform:none}
[data-theme="konservativ"] .k-phase-tile.active{border-color:#111;box-shadow:none}
[data-theme="konservativ"] .k-phase-tile.locked.next{border-color:#AAA}
[data-theme="konservativ"] .k-tab.active{border-bottom-color:#111}
[data-theme="konservativ"] .k-tab-count{background:#E8E8E8;color:#111}
[data-theme="konservativ"] .ribbon{background:#111;color:#fff;transform:none}
[data-theme="konservativ"] .label-klaus{border-color:#111;transform:none}
[data-theme="konservativ"] .label-klaus::before{border-color:#111;transform:none}
[data-theme="konservativ"] .k-verdict-grid>.k-finding-card:nth-child(odd){transform:none}
[data-theme="konservativ"] .k-verdict-grid>.k-finding-card:nth-child(even){transform:none}

/* ============================================================
   ANIMATIONS — verdict/completion reveals, animated check,
   View Transitions for page navigation. Port of KlausAnimations.tsx
   motion/react equivalents. See SSR doc §6.
   ============================================================ */

/* View Transitions: smooth page-slide on navigation (company ↔ project rail).
   Datastar patches can also opt in via WithViewTransitions(). */
@view-transition { navigation: auto }

/* Verdict screen: staggered fade/slide reveal on load. Skip when re-opened
   from the dashboard (.k-verdict.is-result-view has no entrance anim). */
@keyframes k-verdict-reveal {
  from { opacity: 0; transform: translateY(24px) }
  to   { opacity: 1; transform: translateY(0) }
}
.k-verdict:not(.is-result-view) .k-Klaus-context,
.k-verdict:not(.is-result-view) .k-verdict-tasks,
.k-verdict:not(.is-result-view) .k-analysis-section,
.k-verdict:not(.is-result-view) .k-finding-card,
.k-verdict:not(.is-result-view) .k-verdict-grid > * {
  animation: k-verdict-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both
}
.k-verdict:not(.is-result-view) .k-Klaus-context { animation-delay: 0s }
.k-verdict:not(.is-result-view) .k-finding-card:nth-child(1),
.k-verdict:not(.is-result-view) .k-verdict-grid > *:nth-child(1) { animation-delay: 0.15s }
.k-verdict:not(.is-result-view) .k-finding-card:nth-child(2),
.k-verdict:not(.is-result-view) .k-verdict-grid > *:nth-child(2) { animation-delay: 0.25s }
.k-verdict:not(.is-result-view) .k-analysis-section { animation-delay: 0.3s }
.k-verdict:not(.is-result-view) .k-verdict-tasks { animation-delay: 0.35s }

/* Verdict expandable rows: the checkbox pattern — a hidden checkbox
   + label keeps the detail in the layout flow so the grid-rows transition
   animates both expand AND collapse (a <details> element would break it,
   see the TodoPanel note). The detail wrapper is a grid track that goes
   0fr → 1fr when the sibling checkbox is checked. */
.k-verdict-toggle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.k-verdict-task-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.k-verdict-task-detail > div{overflow:hidden;min-height:0}
.k-verdict-toggle:checked ~ .k-verdict-task-detail{grid-template-rows:1fr}
/* Analysis + regulation details: same pattern, but the detail div itself is
   the grid track (its content is a single text node). */
.k-analysis-detail,.k-reg-detail{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;overflow:hidden;padding-top:0;padding-bottom:0;border-top-width:0}
.k-verdict-toggle:checked ~ .k-analysis-detail,
.k-verdict-toggle:checked ~ .k-reg-detail{grid-template-rows:1fr;padding-top:6px;padding-bottom:14px;border-top-width:1px}
/* The row label's chevron flips when its checkbox is checked. */
.k-verdict-toggle:checked + .k-analysis-row span:last-child,
.k-verdict-toggle:checked + .k-reg-row span:last-child,
.k-verdict-toggle:checked + .k-task-row span:last-child{transform:rotate(180deg)}

/* Completion screen: staggered reveal of hero, stats, fahrplan, CTAs. */
@keyframes k-completion-reveal {
  from { opacity: 0; transform: translateY(20px) }
  to   { opacity: 1; transform: translateY(0) }
}
.k-completion-hero,
.k-completion-stats,
.k-fahrplan,
.k-completion-ctas {
  animation: k-completion-reveal 0.6s cubic-bezier(0.22, 1, 0.36, 1) both
}
.k-completion-hero { animation-delay: 0.1s }
.k-completion-stats { animation-delay: 0.3s }
.k-fahrplan { animation-delay: 0.5s }
.k-completion-ctas { animation-delay: 0.7s }

/* Animated check SVG (completion hero). The React version used motion paths;
   here we animate via CSS stroke-dashoffset + scale. */

/* Full-viewport overlay canvas for the verdict/completion confetti. */
.k-confetti-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999}
@keyframes k-check-draw {
  from { stroke-dashoffset: 176 }
  to   { stroke-dashoffset: 0 }
}
@keyframes k-check-circle-pop {
  0%   { transform: scale(0); opacity: 0 }
  60%  { transform: scale(1.1); opacity: 1 }
  100% { transform: scale(1); opacity: 1 }
}
@keyframes k-check-pulse-ring {
  0%   { transform: scale(1); opacity: 0.6 }
  100% { transform: scale(1.8); opacity: 0 }
}
.k-cert-icon svg { overflow: visible }
.k-cert-icon .k-check-outer-ring {
  stroke-dasharray: 176;
  animation: k-check-draw 0.8s ease-out both
}
.k-cert-icon .k-check-inner-circle {
  transform-origin: 36px 36px;
  animation: k-check-circle-pop 0.4s 0.3s ease-out both
}
.k-cert-icon .k-check-mark {
  stroke-dasharray: 40;
  animation: k-check-draw 0.5s 0.6s ease-out both
}
.k-cert-icon .k-check-pulse {
  transform-origin: 36px 36px;
  animation: k-check-pulse-ring 1.2s 1s ease-out both
}
[data-theme="konservativ"] .k-verdict-tasks{border-color:#D0D0D0}
[data-theme="konservativ"] .k-analysis-section{border-color:#D0D0D0;background:#FAFAFA}
[data-theme="konservativ"] .k-analysis-row:hover{background:#F0F0F0}
[data-theme="konservativ"] .k-analysis-num{color:#111}
[data-theme="konservativ"] .k-task-row:hover{background:#F0F0F0}
[data-theme="konservativ"] .k-task-prio.hoch{background:#E8E8E8;color:#111}
[data-theme="konservativ"] .k-task-prio.mittel{background:#E8E8E8;color:#333}
[data-theme="konservativ"] .k-task-prio.niedrig{background:#F0F0F0;color:#666}
[data-theme="konservativ"] .k-task-detail-next{border-color:#D0D0D0}
[data-theme="konservativ"] .k-task-detail-next-label{color:#111}
[data-theme="konservativ"] .k-task-cta-klaus{background:#111;color:#fff}
[data-theme="konservativ"] .k-task-cta-klaus .k-task-cta-icon{background:#fff;color:#111}
[data-theme="konservativ"] .k-task-cta-dieter{background:#666;color:#fff}
[data-theme="konservativ"] .k-task-cta-dieter .k-task-cta-icon{background:#fff;color:#666}
[data-theme="konservativ"] .k-chip-solve-klaus{background:#F0F0F0;color:#111}
[data-theme="konservativ"] .k-chip-solve-dieter{background:#F0F0F0;color:#333}
[data-theme="konservativ"] .k-chip-solve-eigen{background:#F0F0F0;color:#666}
[data-theme="konservativ"] .k-history-a{color:#111}
[data-theme="konservativ"] .k-mascot img{filter:grayscale(1)}
[data-theme="konservativ"] .k-mascot::after{display:none}
[data-theme="konservativ"] .k-completion-hero{background:#111}
[data-theme="konservativ"] .k-completion-stat-num{color:#111}
[data-theme="konservativ"] .k-completion-ctas{border-color:#D0D0D0}
[data-theme="konservativ"] .k-progress-fill{background:#111}
[data-theme="konservativ"] .k-onboarding-card{box-shadow:0 1px 3px rgb(0 0 0/10%)}
[data-theme="konservativ"] .k-coachmark{box-shadow:none;border:1px solid #D0D0D0}
[data-theme="konservativ"] .k-tutorial-dot.active{background:#111}
[data-theme="konservativ"] .k-tutorial-highlight{box-shadow:0 0 0 4px #111,0 0 0 9999px rgba(24,28,33,.35)}
[data-theme="konservativ"] ::selection{background:#E0E0E0;color:#111}
[data-theme="konservativ"] *:focus-visible{outline-color:#111}
[data-theme="konservativ"] .k-center::-webkit-scrollbar-thumb,[data-theme="konservativ"] .k-rail::-webkit-scrollbar-thumb{background:#DDD}
[data-theme="konservativ"] .k-reg-row:hover{background:#F0F0F0}
.k-kons-toggle{border:1px solid rgba(10,10,10,.18);border-radius:var(--radius-md);padding:4px 12px;font-size:var(--fs-3xs);font-weight:600;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);background:transparent;cursor:pointer;transition:all var(--t-quick) ease;white-space:nowrap}
.k-kons-toggle:hover{color:var(--ink);border-color:var(--ink)}
[data-theme="konservativ"] .k-kons-toggle{background:#111;color:#fff;border-color:#111}

/* ── Info Requests ───────────────────────────────────────── */
.k-info-requests{margin-bottom:24px}
.k-info-requests-section-header{margin-bottom:12px}
.k-info-requests-banner{background:linear-gradient(135deg,var(--warning-soft),var(--warning-soft));border:1.5px solid var(--warning-border);border-radius:var(--radius-md);padding:16px 20px;margin-bottom:16px}
.k-info-requests-banner-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.k-info-requests-banner-title{font-size:var(--fs-body);font-weight:700;color:var(--warning-text);display:block}
.k-info-requests-banner-desc{font-size:var(--fs-small);color:var(--warning-text);margin:4px 0 0;line-height:var(--lh-relaxed)}
.k-info-requests-list{display:flex;flex-direction:column;gap:6px}
.k-info-request-card{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--t-quick) ease}
.k-info-request-card:hover{box-shadow:0 1px 4px rgba(0,0,0,.06)}
.k-info-request-card.answered{opacity:.7}
.k-info-request-header{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;user-select:none}
.k-info-request-question{font-size:var(--fs-small);font-weight:600;color:var(--fg-body);flex:1;line-height:var(--lh-relaxed)}
.k-info-request-phase{font-size:var(--fs-3xs);color:var(--fg-muted);flex-shrink:0;padding:2px 8px;border-radius:var(--radius-pill);background:var(--gray-100)}
.k-info-request-body{padding:0 14px 14px;border-top:1px solid var(--gray-100)}
.k-info-request-context{font-size:var(--fs-xs);color:var(--fg-muted);line-height:var(--lh-relaxed);margin:12px 0 10px;padding:8px 12px;background:var(--gray-50);border-radius:var(--radius-sm);border-left:3px solid var(--warning-border)}
.k-info-request-input{width:100%;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-size:var(--fs-small);line-height:var(--lh-relaxed);font-family:inherit;resize:vertical;min-height:72px;transition:border-color var(--t-quick) ease;background:var(--surface)}
.k-info-request-input:focus{outline:none;border-color:var(--klaus-blue);box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.k-info-request-input::placeholder{color:var(--fg-muted)}
.k-info-request-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.k-info-request-answer{padding:6px 14px 12px;font-size:var(--fs-xs);color:var(--fg-body);line-height:var(--lh-relaxed);white-space:pre-wrap}
.k-info-requests-answered{margin-top:12px}


/* ── Company scope: shell, KI-Richtlinie, Schulung ─────────────────────── */
.k-company-root{height:100vh;display:flex;flex-direction:column;background:var(--bg-cream)}
.k-company-topbar{gap:14px}
.k-company-brand-btn{border:0;background:transparent;padding:0;cursor:pointer}
.k-company-brand{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--ink)}
.k-company-brand-mark{width:28px;height:28px;border-radius:9px;background:var(--klaus-blue);color:white;display:inline-flex;align-items:center;justify-content:center;font-weight:800;transform:rotate(-4deg);box-shadow:0 2px 0 var(--klaus-blue-hover)}
.k-company-title{display:flex;align-items:center;gap:10px;font-weight:700;margin-left:auto}
.k-plan-badge{cursor:pointer;transition:background var(--t-quick) ease,color var(--t-quick) ease}
.k-plan-badge:hover{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-upgrade-banner{display:flex;align-items:center;gap:10px;background:var(--klaus-blue-soft);color:var(--klaus-blue-hover);border-bottom:1px solid var(--klaus-blue-border);padding:9px 24px;font-size:var(--fs-xs);font-weight:600}
.k-upgrade-banner span{flex:1;min-width:0}
.k-upgrade-banner .k-btn-ghost{flex-shrink:0;padding:5px 12px;font-size:var(--fs-3xs)}
/* Email-verification banner — the consumables gate, kept visible so it
   never fails silently (same layout as the upgrade banner). */
.k-verify-banner{display:flex;align-items:center;gap:10px;background:var(--klaus-yellow-soft);color:var(--klaus-yellow-text);border-bottom:1px solid var(--klaus-yellow);padding:9px 24px;font-size:var(--fs-xs);font-weight:600}
.k-verify-banner span{flex:1;min-width:0}
.k-verify-banner .k-btn-ghost{flex-shrink:0;padding:5px 12px;font-size:var(--fs-3xs);color:var(--klaus-yellow-text)}
/* Superuser takeover banner: the superuser is acting in a customer's org. */
.k-impersonation-banner{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:var(--warning-soft);color:var(--warning-text);border-bottom:1px solid var(--warning-border);padding:9px 24px;font-size:var(--fs-xs);font-weight:600}
.k-impersonation-banner svg{flex-shrink:0;width:18px;height:18px}
.k-impersonation-banner span{flex:1;min-width:0}
.k-impersonation-banner form{margin:0}
.k-impersonation-banner .k-btn-ghost{flex-shrink:0;padding:5px 12px;font-size:var(--fs-3xs);color:var(--warning-text)}
/* Kanzlei Verwaltung: Mandanten list, members, admins. */
.k-verwaltung-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.k-verwaltung-row details{border:var(--border-card);border-radius:var(--radius-md);background:var(--surface)}
.k-verwaltung-row summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;cursor:pointer;list-style:none}
.k-verwaltung-row summary::-webkit-details-marker{display:none}
.k-verwaltung-name{font-weight:700;flex:1;min-width:160px}
.k-verwaltung-detail{padding:0 14px 14px;display:flex;flex-direction:column;gap:12px}
.k-verwaltung-actions{display:flex;gap:8px;flex-wrap:wrap}
.k-verwaltung-members{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.k-verwaltung-members th,.k-verwaltung-members td{text-align:left;padding:6px 8px;border-bottom:var(--border-subtle)}
.k-verwaltung-admins{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.k-verwaltung-admins li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:var(--fs-small)}
.k-verwaltung-add{display:flex;gap:8px;flex-wrap:wrap}
.k-verwaltung-add input{flex:1;min-width:200px;padding:8px 10px;border:var(--border-input);border-radius:var(--radius-sm);font:inherit}
.k-superuser-kanzlei-form{display:flex;flex-direction:column;gap:10px;max-width:420px;margin-top:24px}
.k-superuser-kanzlei-form h2{font-size:var(--fs-h5);margin:0}
.k-superuser-kanzlei-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-xs);font-weight:600}
.k-superuser-kanzlei-form input:not([type=checkbox]){padding:8px 10px;border:var(--border-input);border-radius:var(--radius-sm);font:inherit}
.k-superuser-kanzlei-form .k-superuser-check{flex-direction:row;align-items:center;font-weight:500}
/* Read-only notice: the member may look, not change (same layout). */
.k-readonly-banner{display:flex;align-items:center;gap:10px;background:var(--bg-cream-deep);color:var(--fg-body);border-bottom:var(--border-subtle);padding:9px 24px;font-size:var(--fs-xs);font-weight:600}
.k-readonly-banner span{flex:1;min-width:0}
.k-readonly-note{margin-top:12px;font-size:var(--fs-xs);color:var(--fg-muted)}
.k-banner-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:22px;height:22px;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.6;transition:opacity var(--t-quick) ease;border-radius:var(--radius-sm)}
.k-banner-close:hover{opacity:1}
.k-banner-close svg{width:16px;height:16px}

/* ── Flash banner (PRG redirect messages) ────────────────────────────── */
.k-flash-banner{display:flex;align-items:center;gap:10px;padding:10px 24px;font-size:var(--fs-xs);font-weight:600;border-bottom:1px solid transparent}
.k-flash-banner svg{flex-shrink:0;width:18px;height:18px}
.k-flash-banner span{flex:1;min-width:0}
.k-flash-success{background:var(--success-soft);color:var(--success-text);border-color:var(--success-border)}
.k-flash-error{background:var(--danger-soft);color:var(--risk-banned);border-color:var(--danger-border)}

/* ── Plan popup (Stripe upgrade modal) ──────────────────────────────── */
@keyframes kwFadeIn{from{opacity:0}to{opacity:1}}
@keyframes kwSlideUp{from{opacity:0;transform:scale(.88) translateY(24px)}to{opacity:1;transform:scale(1) translateY(0)}}
.k-plan-popup-backdrop{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:kwFadeIn .35s ease both}
.k-plan-popup-dialog{background:#fff;border-radius:28px;width:min(720px,100%);max-height:92vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,.18),0 6px 20px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.06);animation:kwSlideUp .45s cubic-bezier(.34,1.3,.64,1) both}
.k-plan-popup-header{background:linear-gradient(145deg,var(--klaus-blue-deep) 0%,var(--klaus-blue-deep) 35%,var(--klaus-blue-dark) 65%,var(--klaus-blue) 100%);position:relative;overflow:hidden;padding:28px 28px 24px}
.k-plan-popup-header-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;pointer-events:none}
.k-plan-popup-header-glow{position:absolute;width:280px;height:280px;background:rgba(var(--klaus-blue-rgb),.25);border-radius:50%;filter:blur(64px);top:-60px;right:60px;pointer-events:none}
.k-plan-popup-header-content{position:relative;z-index:2}
.k-plan-popup-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.k-plan-popup-klaus-icon{width:38px;height:38px;background:var(--klaus-blue);border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 16px rgba(0,0,0,.2)}
.k-plan-popup-brand-name{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1}
.k-plan-popup-title{font-size:22px;font-weight:700;color:#fff;letter-spacing:-.4px;line-height:1.2;margin-bottom:6px}
.k-plan-popup-subtitle{font-size:12.5px;color:rgba(255,255,255,.62);line-height:1.55}
.k-plan-popup-body{padding:22px 28px 24px;display:flex;flex-direction:column;gap:16px}
.k-plan-popup-step{display:flex;flex-direction:column;gap:16px}
.k-plan-popup-interval-toggle{display:flex;justify-content:center}
.k-plan-popup-interval-toggle{display:inline-flex;background:#f7f8fc;border:1.5px solid #e4e9f4;border-radius:999px;padding:3px;gap:2px;margin:0 auto}
.k-plan-popup-interval-btn{padding:7px 16px;border-radius:999px;border:none;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;background:transparent;color:#636366;transition:background .15s,color .15s}
.k-plan-popup-interval-btn.k-active{background:var(--klaus-blue);color:#fff}
.k-plan-popup-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.k-plan-card{background:#f7f8fc;border:1.5px solid #e4e9f4;border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:8px;text-align:left}
.k-plan-card.k-current{border:2px solid var(--klaus-blue)}
.k-plan-card-name{font-size:15px;font-weight:700;color:#1C1C1E}
.k-plan-card-limits{font-size:11.5px;color:#636366;line-height:1.4}
.k-plan-card-features{display:flex;flex-direction:column;gap:5px}
.k-plan-card-feature{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:#636366}
.k-plan-card-check{width:16px;height:16px;border-radius:5px;background:var(--klaus-blue-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:var(--klaus-blue)}
.k-plan-card-price{font-size:13px;font-weight:700;color:var(--klaus-blue);margin-top:auto}
.k-plan-card-current-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--klaus-blue);background:var(--klaus-blue-soft);border-radius:6px;padding:3px 8px}
.k-plan-card-enterprise-price{color:var(--klaus-blue)}
.k-plan-popup-enterprise-form{background:#f7f8fc;border:1.5px solid #e4e9f4;border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.k-plan-popup-label{font-size:11px;font-weight:600;color:#636366;display:block}
.k-plan-popup-input{width:100%;padding:10px 12px;font-size:14px;font-family:inherit;border:1.5px solid #e4e9f4;border-radius:10px;outline:none;background:#fff;color:#1C1C1E;box-sizing:border-box}
.k-plan-popup-enterprise-btn{margin-top:4px;width:100%;padding:11px 0;background:#1C1C1E;color:#fff;font-size:13px;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:background .15s;justify-content:center}
.k-plan-popup-error{font-size:11.5px;color:var(--risk-banned);margin-top:4px}
.k-plan-popup-checkout-row{display:flex;flex-direction:column;gap:10px}
.k-plan-popup-back-btn{margin-left:auto;background:rgba(255,255,255,.12);border:none;border-radius:8px;padding:6px 12px;color:#fff;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit}
.k-plan-popup-free-hint{display:flex;align-items:flex-start;gap:10px;background:#f7f8fc;border:1.5px dashed #e4e9f4;border-radius:14px;padding:12px 16px;font-size:11.5px;color:#636366;line-height:1.5}
.k-plan-popup-free-hint strong{color:#1C1C1E}
.k-plan-card{cursor:pointer;position:relative;transition:border-color .15s,background .15s}
.k-plan-card.k-selected{border:2px solid var(--klaus-blue);background:var(--klaus-blue-soft)}
.k-plan-card-badge{position:absolute;top:10px;right:10px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;padding:3px 8px}
.k-plan-card-badge-active{background:var(--success-soft);color:var(--success-text)}
.k-plan-card-badge-blocked{background:#f1f2f6;color:#8b8b8f}
.k-plan-card-price-area{margin-top:auto}
.k-plan-card-yearly-detail{font-size:10.5px;color:#8b8b8f;margin-top:2px}
.k-plan-card-check-green{width:16px;height:16px;border-radius:5px;background:rgba(52,199,89,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#34C759}
.k-plan-popup-enterprise-panel{background:#f7f8fc;border:1.5px solid #e4e9f4;border-radius:14px;padding:16px 18px}
.k-plan-popup-enterprise-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.k-plan-popup-enterprise-title{font-size:15px;font-weight:700;color:#1C1C1E}
.k-plan-popup-enterprise-price-label{font-size:13px;font-weight:600;color:#636366}
.k-plan-popup-enterprise-features{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.k-plan-popup-enterprise-feature{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:#636366}
.k-plan-popup-cta-btn:disabled{background:#e4e9f4;color:#636366;cursor:default;box-shadow:none}
.k-plan-popup-cta-btn{width:100%;padding:13px 0;background:var(--klaus-blue);color:#fff;font-size:14px;font-weight:700;border:none;border-radius:12px;cursor:pointer;box-shadow:0 4px 14px rgba(var(--klaus-blue-rgb),.3);transition:background .15s;justify-content:center}
.k-plan-popup-cta-btn:hover:not(:disabled){background:#2a5fd4}
.k-plan-popup-blocked-hint{background:var(--warning-soft);border:1.5px solid var(--warning-border);border-radius:12px;padding:12px 16px;font-size:11.5px;color:var(--warning-text);line-height:1.5}
.k-plan-popup-blocked-hint strong{display:block;margin-bottom:3px}
.k-plan-popup-close-link{background:none;border:none;font-size:11.5px;color:#AEAEB2;cursor:pointer;font-family:inherit;padding:0;align-self:center;margin-top:2px}
.k-plan-popup-footer-links{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}
.k-plan-popup-legal{font-size:10.5px;color:#AEAEB2;line-height:1.5;text-align:center;margin:4px 0 0}
.k-plan-popup-cancelled{margin-top:4px;padding-top:12px;border-top:1px solid #EDEEF2;text-align:center}
.k-plan-popup-cancelled p{font-size:11px;color:#8b8b8f;margin:0}
.k-plan-popup-submitted{text-align:center;padding:8px 0 4px}
.k-plan-popup-submitted-icon{width:48px;height:48px;border-radius:50%;background:var(--success-soft);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--success-text)}
.k-plan-popup-submitted-title{font-size:15px;font-weight:700;color:#1C1C1E;margin-bottom:6px}
.k-plan-popup-submitted-text{font-size:12.5px;color:#636366;line-height:1.55;max-width:380px;margin:0 auto 16px}

/* ── Callback popup (expert/Dieter callback from project tasks) ─────────── */
/* Reuses k-plan-popup-* classes for the backdrop, dialog, body, inputs, etc.
   Only the Dieter-specific header gradient + the info box + the form layout
   need their own rules. */
.k-callback-popup-header{background:linear-gradient(145deg,var(--klaus-yellow-deep) 0%,var(--klaus-yellow-deep) 40%,var(--klaus-yellow-text) 75%,var(--klaus-yellow) 100%)}
.k-callback-popup-header-dieter .k-plan-popup-header-glow{background:rgba(var(--klaus-yellow-rgb),.28)}
.k-callback-popup-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:2px solid rgba(255,255,255,.2);box-shadow:0 4px 16px rgba(0,0,0,.25);color:#0A0A0A;font-size:19px;font-weight:800;letter-spacing:-.5px;line-height:1;background:var(--klaus-yellow)}
.k-callback-popup-icon-expert{background:var(--klaus-blue);color:#fff}
.k-callback-popup-info{background:var(--klaus-yellow-soft);border:1px solid var(--klaus-yellow);border-radius:12px;padding:14px 16px}
.k-callback-popup-info-title{font-size:12.5px;font-weight:700;color:#0A0A0A;margin-bottom:4px}
.k-callback-popup-info-text{font-size:12.5px;color:#636366;line-height:1.6;margin-bottom:10px}
.k-callback-popup-info-link{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--klaus-yellow-text);text-decoration:none;border-bottom:1px dashed var(--klaus-yellow-text);padding-bottom:1px}
.k-callback-popup-context{font-size:12.5px;color:#636366;line-height:1.5}
.k-callback-popup-context strong{color:#1C1C1E}
.k-callback-popup-divider{height:1px;background:#f0f0f2}
.k-callback-popup-form{display:flex;flex-direction:column;gap:12px}
.k-callback-popup-textarea{resize:vertical;min-height:64px;font-family:inherit}
.k-callback-popup-submit{width:100%;padding:12px 0;background:var(--klaus-yellow);color:#0A0A0A;font-size:13.5px;font-weight:700;border:none;border-radius:10px;cursor:pointer;box-shadow:0 4px 14px rgba(var(--klaus-yellow-rgb),.35);transition:background .15s;justify-content:center}
.k-callback-popup-submit:hover{background:var(--klaus-yellow-dark)}
.k-callback-popup-visit{display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;margin:0 auto 12px;width:auto;padding:12px 24px}

/* ── Dieter sync page (/dashboard/dieter) ─────────────────────────────── */
.k-dieter-alert{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius-md);font-size:var(--fs-small);line-height:var(--lh-relaxed);border:1px solid transparent}
.k-dieter-alert svg{flex-shrink:0;margin-top:1px}
.k-dieter-alert-error{background:var(--danger-soft);color:var(--risk-banned);border-color:var(--danger-border)}
.k-dieter-alert-success{background:var(--success-soft);color:var(--success-text);border-color:var(--success-border)}
.k-dieter-alert-warn{background:var(--warning-soft);color:var(--warning-text);border-color:var(--warning-border)}
.k-dieter-card{background:linear-gradient(168deg,var(--surface) 60%,#FDFCF8 100%);border:1px solid rgba(10,10,10,.05);border-bottom:2px solid var(--bg-cream-deep);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 3px rgba(var(--klaus-blue-rgb),.04),0 4px 12px rgba(10,10,10,.03)}
.k-dieter-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.k-dieter-card-head h2{font-size:var(--fs-h5);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0}
.k-dieter-card-body{color:var(--fg-muted);font-size:var(--fs-small);line-height:var(--lh-relaxed);margin:0;max-width:680px}
.k-dieter-link-id{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--fg-body);background:var(--bg-cream-deep);border-radius:var(--radius-sm);padding:6px 12px;width:fit-content}
.k-dieter-link-id code{font-family:var(--font-mono);font-size:var(--fs-3xs);color:var(--fg-muted)}
.k-dieter-company-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.k-dieter-company-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-md);transition:border-color var(--t-quick) ease,box-shadow var(--t-quick) ease}
.k-dieter-company-row:hover{border-color:var(--klaus-blue-border);box-shadow:0 2px 8px rgba(var(--klaus-blue-rgb),.06)}
.k-dieter-company-info{display:flex;align-items:center;gap:12px;min-width:0}
.k-dieter-company-info svg{flex-shrink:0;color:var(--klaus-blue)}
.k-dieter-company-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.k-dieter-company-name{font-size:var(--fs-card);font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-dieter-company-id{font-family:var(--font-mono);font-size:var(--fs-3xs);color:var(--fg-muted)}
.k-dieter-create-form{display:flex;flex-direction:column;gap:14px;max-width:480px}
.k-dieter-create-form .k-btn{align-self:flex-start}
@media(max-width:640px){.k-dieter-company-row{flex-direction:column;align-items:stretch}.k-dieter-company-row .k-btn{width:100%;justify-content:center}}
.k-company-layout{min-height:0}
.k-company-rail{width:260px;background:var(--app-rail);border-right:var(--border-subtle);display:flex;flex-direction:column;overflow:hidden;padding:20px 0;flex-shrink:0;z-index:50}
.k-rail-switch{position:relative;flex:1;min-height:0;overflow:hidden}
.k-rail-pane{position:absolute;inset:0;display:flex;flex-direction:column;overflow-y:auto;will-change:transform}
.k-company-nav-item,.k-company-project,.k-company-project-new{font:inherit;border:0;background:transparent;text-align:left;cursor:pointer}
.k-company-nav-item{margin:2px 12px;padding:11px 12px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:var(--fs-small);font-weight:650;color:var(--fg-body)}
.k-company-nav-item:hover,.k-company-nav-item.active{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-company-nav-item.locked{color:var(--fg-muted);cursor:not-allowed;background:transparent}
.k-company-nav-badge,.k-company-status{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-radius:999px;background:var(--klaus-blue-soft);color:var(--klaus-blue);padding:3px 8px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.k-company-nav-badge.over{background:var(--warning-soft);color:var(--warning-text)}
.k-company-status.done,.k-training-status.done{background:var(--success-soft);color:var(--success-text)}
.k-company-lock-hint{font-size:var(--fs-xs);color:var(--fg-muted);line-height:1.4;margin:8px 22px 12px}
.k-company-project-list{display:flex;flex-direction:column;gap:4px;margin:0 12px 8px 24px}
.k-company-project-new{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:700;color:var(--klaus-blue)}
.k-company-project-new:hover{background:var(--klaus-blue-soft)}
.k-company-project{width:100%;padding:9px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:600;color:var(--fg-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-company-project{display:flex;align-items:center;gap:8px}
.k-company-project-name{overflow:hidden;text-overflow:ellipsis}
.k-company-project.archived{color:var(--fg-muted);font-weight:500}
.k-company-project-archive{margin:8px 10px 2px;font-size:var(--fs-3xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-muted)}
.k-company-project-hint{margin:4px 10px;font-size:var(--fs-2xs);color:var(--fg-muted);line-height:1.4;white-space:normal}
.k-ampel{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.k-ampel-red{background:var(--state-error)}
.k-ampel-green{background:#16a34a}
.k-ampel-urgent{flex:0 0 auto;margin-left:auto;width:16px;height:16px;border-radius:50%;background:var(--state-error);color:#fff;font-size:11px;font-weight:800;line-height:16px;text-align:center}
.k-company-ai-pruefung{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:var(--fs-xs);color:var(--fg-body)}
.k-company-ai-pruefung .k-btn-ghost{margin-left:auto}
.k-archive-banner{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:var(--gray-100);color:var(--fg-body);font-size:var(--fs-small)}
.k-company-project:hover,.k-company-project.active{background:var(--surface);box-shadow:var(--shadow-warm)}
.k-rail-back{display:flex;align-items:center;gap:6px;width:100%;padding:12px 22px 8px;border:0;background:none;font:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--fg-muted);cursor:pointer;transition:color var(--t-quick) ease}
.k-rail-back:hover{color:var(--klaus-blue)}
.k-rail-overview{display:flex;align-items:center;gap:8px;margin:2px 12px 4px;padding:9px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);font-weight:650;color:var(--fg-body)}
.k-rail-overview:hover{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-rail-overview svg{width:15px;height:15px;flex-shrink:0}
/* Gear (project options) in the dashboard header, left of the progress ring. */
.k-dash-options{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-md);color:var(--fg-muted);transition:background var(--t-quick) ease,color var(--t-quick) ease}
.k-dash-options:hover{background:var(--klaus-blue-soft);color:var(--klaus-blue)}
.k-dash-options svg{width:20px;height:20px}
.k-company-center{padding:0}
.k-company-page{max-width:var(--app-max);margin:0 auto;padding:36px 48px 80px}
.k-page-stack{display:grid;gap:20px}
/* View toggle (list/grid) for the unternehmen page. */
.k-page-head-right{display:flex;align-items:center;gap:16px;flex-shrink:0}
.k-view-toggle{display:inline-flex;gap:2px;padding:3px;background:var(--bg-cream-deep);border:1px solid var(--gray-200);border-radius:var(--radius-md)}
.k-view-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;border:none;background:transparent;color:var(--fg-muted);border-radius:calc(var(--radius-md) - 2px);cursor:pointer;transition:background var(--t-quick) ease,color var(--t-quick) ease}
.k-view-toggle-btn:hover{color:var(--ink)}
.k-view-toggle-btn.active{background:var(--surface);color:var(--klaus-blue);box-shadow:0 1px 3px rgba(10,10,10,.08)}
.k-view-toggle-btn svg{width:18px;height:18px}
/* In grid mode, the AI-systems list also becomes a card grid. */
.k-company-grid .k-company-ai-list{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.k-company-eyebrow{font-size:var(--fs-3xs);font-weight:800;text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--klaus-blue);margin:0 0 4px}
.k-page-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:8px}
.k-page-title{font-size:clamp(28px,2.6vw,36px);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin:8px 0 0;display:inline-block;border-bottom:3px solid var(--klaus-yellow);padding-bottom:6px}
.k-page-lead{max-width:680px;color:var(--fg-muted);font-size:var(--fs-base);line-height:var(--lh-loose);margin:12px 0 0}
.k-page-head .k-mascot{width:64px;height:auto;flex-shrink:0;filter:drop-shadow(0 12px 20px rgba(var(--klaus-blue-rgb),.14))}
.k-page-head .k-btn{flex-shrink:0;white-space:nowrap}
.k-richtlinie-banner{background:linear-gradient(150deg,var(--surface) 55%,var(--klaus-blue-soft) 100%);border:1px solid rgba(var(--klaus-blue-rgb),.18);border-bottom:3px solid var(--klaus-blue);border-radius:var(--radius-xl);padding:20px 24px;display:flex;align-items:center;gap:18px;box-shadow:0 2px 0 rgba(var(--klaus-blue-rgb),.06),0 10px 28px rgba(10,10,10,.05)}
.k-richtlinie-banner.done{background:linear-gradient(150deg,var(--surface) 55%,var(--success-soft) 100%);border-color:var(--success-border);border-bottom-color:var(--state-done)}
.k-richtlinie-banner>.k-phase-num{width:40px;height:40px;flex-shrink:0;font-size:16px}
.k-richtlinie-banner-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.k-richtlinie-banner-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.k-richtlinie-banner-title h2{font-size:var(--fs-h5);font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0}
.k-richtlinie-banner-copy>p{color:var(--fg-muted);font-size:var(--fs-small);line-height:1.5;margin:0}
.k-richtlinie-banner .k-btn{flex-shrink:0;white-space:nowrap}
.k-richtlinie-facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.k-richtlinie-facts span{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--gray-200);background:var(--surface);color:var(--fg-body);border-radius:999px;padding:5px 11px;font-size:var(--fs-2xs);font-weight:600}
.k-richtlinie-facts svg{color:var(--klaus-blue);flex-shrink:0}
.k-company-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:20px;margin-bottom:0;align-items:start}
.k-company-panel{background:linear-gradient(168deg,var(--surface) 60%,#FDFCF8 100%);border:1px solid rgba(10,10,10,.05);border-bottom:2px solid var(--bg-cream-deep);border-radius:var(--radius-xl);box-shadow:0 1px 3px rgba(var(--klaus-blue-rgb),.04),0 4px 12px rgba(10,10,10,.03);padding:24px;min-width:0}
.k-richtlinie-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px}
.k-richtlinie-panel-head>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.k-richtlinie-panel-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--klaus-blue);background:var(--klaus-blue-soft);border-radius:10px;width:36px;height:36px;flex-shrink:0;box-shadow:0 2px 0 rgba(var(--klaus-blue-rgb),.14)}
.k-eu-symbol{margin-top:20px;padding-top:16px;border-top:var(--border-card);display:flex;flex-direction:column;gap:12px}
.k-eu-symbol a{overflow-wrap:anywhere}
.k-eu-symbol-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.k-eu-symbol-table th{text-align:left;font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);padding:0 12px 8px 0;border-bottom:1px solid var(--gray-200)}
.k-eu-symbol-table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--gray-200);vertical-align:top}
.k-eu-symbol-table tbody tr:last-child td{border-bottom:0}
.k-company-panel h2{font-size:var(--fs-h5);line-height:1.1;margin:0;font-weight:800;letter-spacing:-.02em}
.k-company-muted{color:var(--fg-muted);font-size:var(--fs-small);line-height:var(--lh-relaxed);margin:0}

/* Belegung der Mitarbeiterplätze: steht VOR der Mitarbeiterliste, damit die
   Zahl gesehen wird, bevor man weiterklickt. Über dem Plan-Limit wird die
   Kachel orange, das ist das eigentliche Signal. */
.k-seat-meter{border:1px solid var(--border-card);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:18px;background:var(--klaus-blue-soft)}
.k-seat-meter.over{border-color:var(--risk-high);background:var(--warning-soft)}
.k-seat-meter-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.k-seat-meter-count{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;color:var(--klaus-blue)}
.k-seat-meter.over .k-seat-meter-count{color:var(--warning-text)}
.k-seat-meter-label{color:var(--fg-muted);font-size:var(--fs-small)}
.k-seat-meter.over .k-seat-meter-label{color:var(--warning-text)}
.k-seat-meter-hint{margin:8px 0 0;color:var(--fg-muted);font-size:var(--fs-small);line-height:var(--lh-relaxed)}
.k-seat-meter.over .k-seat-meter-hint{color:var(--warning-text)}
.k-company-data-list{display:grid;gap:0;margin:0}
.k-richtlinie-chat-full .k-richtlinie-messages{min-height:420px}
.k-company-data-list>div{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:12px 0;border-top:1px solid rgba(10,10,10,.06)}
.k-company-data-list>div:first-child{border-top:0;padding-top:0}
.k-company-data-list>div:last-child{padding-bottom:0}
.k-company-ai-card dl div{display:grid;grid-template-columns:96px 1fr;gap:12px}
.k-company-data-list dt,.k-company-ai-card dt{color:var(--fg-muted);font-size:var(--fs-xs);font-weight:600}
.k-company-data-list dd,.k-company-ai-card dd{margin:0;font-size:var(--fs-small);line-height:1.45;color:var(--fg-body);overflow-wrap:anywhere}
.k-company-ai-list{display:grid;gap:14px;margin-top:0}
.k-company-ai-card{border:1px dashed var(--klaus-blue-border);border-radius:var(--radius-lg);padding:18px;background:var(--app-turn-alt);min-width:0}
.k-company-ai-card-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}
.k-company-ai-card-top>div{min-width:0}
.k-company-ai-card h3{margin:0 0 4px;font-size:var(--fs-card);line-height:1.2;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.k-company-ai-card p{margin:0;color:var(--fg-body);font-size:var(--fs-small);line-height:1.45;overflow-wrap:anywhere}
.k-company-ai-card dl{display:grid;gap:10px;border-top:1px solid rgba(10,10,10,.06);padding-top:14px}
.k-company-ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.k-company-ai-card.inactive{opacity:.55;border-style:solid;border-color:var(--gray-200)}
.k-active-selection-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.k-company-ai-card .k-active-selection-row{border-top:1px solid rgba(10,10,10,.06);padding-top:12px}
.k-active-selection-row .k-btn-ghost{padding:5px 12px;font-size:var(--fs-3xs);transform:none}
.k-active-selection-list{display:grid;gap:0;margin:0;list-style:none;padding:0}
.k-active-selection-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid rgba(10,10,10,.06);font-size:var(--fs-small)}
.k-active-selection-list li:first-child{border-top:0;padding-top:0}
.k-active-selection-list li:last-child{padding-bottom:0}
.k-company-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.k-company-section-head p{margin:4px 0 0;color:var(--fg-muted);font-size:var(--fs-small)}
.k-richtlinie-chat{margin-top:18px}
.k-richtlinie-messages{display:flex;flex-direction:column;gap:12px;min-height:220px;max-height:520px;overflow:auto;padding:8px;background:var(--bg-cream);border-radius:var(--radius-lg);border:1px solid var(--gray-200)}
.k-richtlinie-empty{text-align:center;margin:auto;max-width:420px;padding:32px 12px}
.k-richtlinie-empty h3{margin:10px 0 6px}
.k-richtlinie-message{display:flex}
.k-richtlinie-message.user{justify-content:flex-end}
.k-richtlinie-bubble{max-width:min(720px,86%);background:var(--surface);border:1px solid var(--gray-200);border-radius:18px;padding:12px 16px;font-size:var(--fs-small);line-height:var(--lh-relaxed)}
.k-richtlinie-message.user .k-richtlinie-bubble{background:var(--klaus-blue);color:white;border-color:var(--klaus-blue)}
.k-richtlinie-suggestions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.k-richtlinie-suggestions button{border:1px dashed var(--klaus-blue-border);background:var(--klaus-blue-soft);color:var(--klaus-blue);border-radius:999px;padding:7px 12px;font:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer}
.k-richtlinie-input{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.k-richtlinie-input textarea{flex:1;border:1.5px solid var(--gray-200);border-radius:var(--radius-lg);padding:11px 13px;font:inherit;resize:vertical;background:var(--surface)}
.k-richtlinie-complete-turn{display:flex;gap:14px;padding:24px 26px}
.k-richtlinie-complete-icon{flex-shrink:0;width:40px;height:40px;border-radius:12px;background:var(--success-soft);color:var(--success-text);display:flex;align-items:center;justify-content:center}
.k-richtlinie-complete-turn h3{margin:2px 0 8px;font-size:var(--fs-h5);line-height:1.35}
.k-richtlinie-complete-turn p{margin:0;font-size:var(--fs-card);color:var(--fg-body);line-height:var(--lh-relaxed)}
.k-richtlinie-complete-turn .k-richtlinie-complete-question{margin-top:var(--space-5);font-weight:600;color:var(--fg)}
.k-richtlinie-complete-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}
.k-training-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.k-training-card{border:1px dashed var(--klaus-blue-border);border-radius:var(--radius-lg);background:var(--app-turn-alt);padding:18px}
.k-training-card h3,.k-training-empty h3{margin:0 0 4px;font-size:var(--fs-card);line-height:1.2;font-weight:800;letter-spacing:-.02em}
.k-training-card p,.k-training-empty p{margin:0;color:var(--fg-body);font-size:var(--fs-small);line-height:1.5}
.k-training-empty{text-align:center;padding:40px 20px}
.k-training-empty p{max-width:400px;margin:0 auto}
.k-training-empty .k-btn{margin-top:16px}
.k-training-table-wrap{overflow:auto}
.k-training-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.k-training-table th{text-align:left;font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);padding:0 12px 10px;border-bottom:1px solid var(--gray-200)}
.k-training-table th:first-child{padding-left:0}
.k-training-table th:last-child{padding-right:0}
.k-training-table th:last-child,.k-training-table th:nth-last-child(2){width:1%}
.k-training-table td{padding:14px 12px;border-bottom:1px solid var(--gray-200);vertical-align:middle}
.k-training-table .k-cell-name{padding-left:0;font-weight:600}
.k-training-table .k-training-delete{padding-right:0}
.k-training-table td.k-cell-inner{border-bottom-color:rgba(10,10,10,.05)}
.k-training-table td.k-cell-flush{border-bottom:0}
.k-training-table tbody tr:last-child td{border-bottom:0;padding-bottom:0}
.k-training-status{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700;background:var(--gray-100);color:var(--fg-muted);white-space:nowrap}
.k-training-status.sent{background:var(--klaus-yellow-soft);color:var(--klaus-yellow-text)}
.k-task-belege{margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-200)}
.k-task-belege-head{font-size:var(--fs-xs);font-weight:700;color:var(--fg-body);margin-bottom:8px}
.k-task-belege-empty,.k-task-belege-hint{font-size:var(--fs-xs);color:var(--fg-muted);margin:0 0 10px;line-height:1.5}
.k-task-belege-hint{margin:6px 0 0}
.k-task-beleg{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:var(--fs-xs)}
.k-task-beleg-name{display:inline-flex;align-items:center;gap:6px;color:var(--fg-body);font-weight:600;text-decoration:underline;overflow-wrap:anywhere}
.k-task-beleg-meta{color:var(--fg-muted);white-space:nowrap;margin-left:auto}
.k-task-beleg-upload{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:var(--fs-xs)}
.k-training-status.due{background:var(--warning-soft);color:var(--warning-text)}
.k-training-status.overdue{background:var(--danger-soft);color:var(--danger-text)}
.k-training-due-note{margin:0 0 12px;padding:10px 14px;border-radius:10px;background:var(--warning-soft);color:var(--warning-text);font-size:var(--fs-small)}
.k-cell-sub{margin-top:5px;font-size:var(--fs-xs);color:var(--fg-muted);line-height:1.4}
.k-training-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.k-training-actions .k-btn-ghost{padding:7px 12px;font-size:var(--fs-xs);transform:none;white-space:nowrap}
.k-training-delete .k-btn-ghost{padding:7px 9px;transform:none}
.k-btn-ghost.danger{color:var(--danger-hover)}
.k-training-dialog-backdrop{position:fixed;inset:0;background:rgba(10,10,10,.35);z-index:9100;display:flex;align-items:center;justify-content:center;padding:24px}
.k-training-dialog{background:var(--bg-cream);border:1.5px solid var(--gray-200);border-radius:var(--radius-xl);padding:24px;width:min(420px,100%);box-shadow:var(--shadow-floating);display:grid;gap:12px}
.k-training-dialog h2{margin:0;font-size:var(--fs-h5)}
.k-training-dialog label{display:grid;gap:6px;font-size:var(--fs-small);font-weight:600}
.k-training-dialog input,.k-training-dialog select{border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);padding:10px 12px;font:inherit;background:var(--surface)}
.k-confirm-dialog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100vh - 32px);overflow:auto;border:1.5px solid var(--gray-200);border-radius:var(--radius-xl);padding:24px;width:min(440px,calc(100% - 32px));background:var(--bg-cream);color:var(--ink);box-shadow:var(--shadow-floating)}
.k-confirm-dialog::backdrop{background:rgba(10,10,10,.35)}
.k-confirm-dialog h2{margin:0 0 12px;font-size:var(--fs-h5);font-weight:800;letter-spacing:-.02em}
.k-confirm-dialog-body{display:grid;gap:8px;font-size:var(--fs-small);line-height:var(--lh-relaxed);color:var(--fg-body)}
.k-confirm-dialog-body p{margin:0}
.k-confirm-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.k-btn.k-btn-danger{background:var(--risk-banned);box-shadow:0 2px 0 0 var(--danger-text),0 4px 12px rgba(var(--danger-rgb),.15)}
.k-btn.k-btn-danger:hover{background:var(--danger-hover)}
.k-training-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}
/* html/body never scroll (overflow:hidden above): the page is exactly the
   viewport. The chat fills what the brand leaves and scrolls inside
   #chat-scroll, so its footer (Weiter) stays on screen; a card page that is
   taller than the viewport scrolls in <main>. */
.k-public-training{height:100%;overflow-y:auto;background:var(--bg-cream);display:flex;flex-direction:column;align-items:center;padding:32px 20px;color:var(--ink)}
.k-public-brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:28px}
.k-public-card{width:min(720px,100%);background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-2xl);box-shadow:var(--shadow-floating);padding:34px}
.k-public-card h1{font-size:30px;margin:0 0 10px}
.k-public-training:has(.k-public-chat){padding-bottom:0}
.k-public-chat{flex:1;min-height:0;width:100%;display:flex;flex-direction:column}
.k-public-chat .k-wizard{width:100%;flex:1;min-height:0;align-self:stretch}
.k-public-chat .k-wizard-footer-sticky{background:var(--bg-cream)}
.k-public-complete{text-align:center}
.k-public-complete svg{color:var(--state-done);margin-bottom:12px}
@media(max-width:820px){.k-richtlinie-banner{flex-direction:column;align-items:stretch}.k-richtlinie-banner .k-btn{width:100%;justify-content:center}}

/* ─── Split-screen login page (auth/LoginPage.tsx, Klaus variant) ──────── */
/* Faithful port of the shadcn/ui login page themed with the Klaus palette.
   The ai-lawyer login uses shadcn Button/Input/Label/InputOTP (NOT the k-*
   classes), so these .k-auth-* classes mirror shadcn's exact sizing/spacing
   with the Klaus theme tokens (--k-blue etc., from index.css .theme-klaus). */
.k-login-page{
  --k-blue:#2C5EE8;--k-blue-dark:#1E4AC0;--k-blue-tint:#EEF2FD;
  --k-ink:#18181B;--k-mid:#52525B;--k-line:#E4E4E7;--k-bg:#F4F4F5;--k-white:#FFFFFF;
  --k-radius:0.5rem;
  height:100vh;overflow:auto;display:grid;grid-template-columns:1fr;background:var(--k-bg);
  font-family:var(--font-sans);color:var(--k-ink);
}
@media(min-width:1024px){.k-login-page{grid-template-columns:1fr 1fr;overflow:hidden}}

/* Left pane: brand + form */
.k-login-pane-form{display:flex;flex-direction:column;gap:16px;padding:24px;min-height:0;overflow-y:auto}
@media(min-width:768px){.k-login-pane-form{padding:40px}}
@media(min-width:1024px){.k-login-pane-form{overflow:hidden}}
.k-login-brand{display:flex;align-items:center;gap:8px}
.k-login-brand-logo{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px}
.k-login-brand-logo img{width:24px;height:24px}
.k-login-brand-text{display:flex;flex-direction:column;line-height:1.1}
.k-login-brand-name{font-size:14px;font-weight:600;color:var(--k-ink)}
.k-login-brand-beta{font-size:10px;font-weight:700;color:var(--k-mid)}
.k-login-form-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}
/* Dev-only login shortcuts (KLAUS_DEV_AUTH=1): below the card, never beside it. */
.k-login-dev-link{width:100%;max-width:320px;display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px dashed var(--k-line, #d4d4d8);font-size:13px;line-height:1.4;text-align:center}
.k-login-dev-link a{color:var(--k-mid);text-decoration:underline;text-underline-offset:2px}
.k-login-dev-link a:hover{color:var(--k-ink)}
.k-login-form-card{width:100%;max-width:320px;display:flex;flex-direction:column;gap:24px}

/* Form header */
.k-login-form-head{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.k-login-heading{font-size:24px;font-weight:700;line-height:1.2;color:var(--k-ink);margin:0}
.k-login-sub{font-size:14px;color:var(--k-mid);line-height:1.4;margin:0;text-wrap:balance}

/* Form body */
.k-login-form{display:flex;flex-direction:column;gap:24px}
.k-login-field{display:flex;flex-direction:column;gap:12px}
.k-login-label{font-size:14px;font-weight:500;line-height:1;color:var(--k-ink)}
.k-login-input{
  width:100%;height:36px;border:1px solid var(--k-line);border-radius:calc(var(--k-radius) - 2px);
  background:transparent;padding:8px 12px;font:inherit;font-size:14px;color:var(--k-ink);
  outline:none;box-sizing:border-box;transition:box-shadow .15s,border-color .15s;
}
.k-login-input::placeholder{color:var(--k-mid)}
/* A dotted placeholder in a password field reads like a pre-filled password:
   drop it as soon as the field has focus. Covers every password input. */
input[type="password"]:focus::placeholder{color:transparent;opacity:0}
.k-login-input:focus-visible{border-color:var(--k-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-blue) 20%,transparent)}

/* shadcn Button (default variant, default size) */
.k-auth-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:8px 16px;border-radius:calc(var(--k-radius) - 2px);
  background:var(--k-blue);color:var(--k-white);border:none;
  font:inherit;font-size:14px;font-weight:500;white-space:nowrap;
  box-shadow:0 1px 2px 0 rgb(0 0 0 / 5%);
  cursor:pointer;transition:background-color .15s,opacity .15s;
}
.k-auth-btn:hover:not(:disabled){background:color-mix(in srgb,var(--k-blue) 90%,var(--k-white))}
.k-auth-btn:disabled{pointer-events:none;opacity:.5}
/* busy.js: a submitted form's button (spinner + data-busy-label). */
.k-btn-busy,.k-btn-busy:disabled{opacity:.85;cursor:progress}
.k-btn-busy::before{content:"";width:14px;height:14px;flex-shrink:0;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:k-spin .8s linear infinite}

/* shadcn link-variant button */
.k-auth-link-btn{
  background:none;border:none;font:inherit;font-size:14px;color:var(--k-blue);
  text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:0;
}
.k-auth-link-btn:hover{color:var(--k-blue-dark)}

.k-login-error{font-size:14px;color:var(--state-error);margin:0;text-align:center}
.k-login-footer{text-align:center;font-size:14px;color:var(--k-mid)}
.k-login-footer a{color:var(--k-blue);text-decoration:underline;text-underline-offset:4px}
.k-login-footer a:hover{color:var(--k-blue-dark)}
.k-login-hint{font-size:13px;color:var(--k-mid);line-height:1.4;margin:6px 0 0}
.k-login-notice{font-size:14px;color:var(--k-mid);margin:0;text-align:center}
.k-login-linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--k-blue);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.k-login-linkbtn:hover{color:var(--k-blue-dark)}
.k-login-code{font-size:20px;letter-spacing:.35em;text-transform:uppercase;text-align:center;font-variant-numeric:tabular-nums}
a.k-auth-btn{display:flex;align-items:center;justify-content:center;text-decoration:none}

/* Right pane: Klaus splash on blue gradient */
.k-login-pane-hero{display:none;position:relative;overflow:hidden;align-items:center;justify-content:center;min-height:0;background:linear-gradient(160deg,var(--klaus-blue-deep) 0%,var(--klaus-blue-dark) 55%,var(--klaus-blue) 100%)}
@media(min-width:1024px){.k-login-pane-hero{display:flex}}
.k-login-hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(120% 100% at 35% 25%,#000 30%,rgba(0,0,0,.55) 65%,transparent 100%);mask-image:radial-gradient(120% 100% at 35% 25%,#000 30%,rgba(0,0,0,.55) 65%,transparent 100%)}
.k-login-hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 60% at 80% 100%,#6f8dff 0%,rgba(111,141,255,0) 60%),radial-gradient(70% 55% at 25% 5%,#1d3aa8 0%,rgba(29,58,168,0) 65%)}
.k-login-hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;padding:0 32px;max-width:460px;color:#fff}
.k-login-hero-mascot{width:224px;max-width:60%;height:auto;user-select:none;filter:drop-shadow(0 18px 32px rgba(0,0,0,.35))}
.k-login-hero-title{font-size:30px;font-weight:800;letter-spacing:-0.02em;line-height:1.15;margin:0;color:#fff}
.k-login-hero-sub{font-size:16px;line-height:1.6;margin:0;color:rgba(255,255,255,.85)}
@media(max-width:760px){.k-company-rail{position:fixed;top:var(--topbar-h);bottom:0;left:0;transform:translateX(-100%);transition:transform .25s var(--ease-out)}.k-company-rail.mobile-open{transform:translateX(0)}.k-company-page{padding:24px 24px 56px}.k-page-head{flex-direction:column;gap:12px;align-items:flex-start}.k-page-head .k-mascot{display:none}.k-company-data-list>div,.k-company-ai-card dl div{grid-template-columns:1fr;gap:4px}.k-company-data-list>div{padding:10px 0}.k-company-title{margin-left:0}.k-richtlinie-input{flex-direction:column;align-items:stretch}.k-training-actions{flex-direction:column}.k-public-card{padding:24px}}

/* ─── Superuser dashboard ─────────────────────────────────────────────── */
/* Full-bleed admin page (no company shell). Reuses k-page-head/k-page-title
   + k-tab-bar/k-tab for the tab nav, and a dedicated table that mirrors
   k-training-table's structure but is denser (admin data, not end-user UI). */
/* html,body never scroll (overflow:hidden above): the superuser pages are
   their own scroll container. */
.k-superuser-page{height:100%;overflow-y:auto}
.k-superuser{max-width:var(--app-max);margin:0 auto;padding:36px 48px 80px;display:grid;gap:20px}
.k-superuser-search{display:flex;align-items:center;gap:12px;max-width:560px}
.k-superuser-search-count{font-size:var(--fs-xs);color:var(--fg-muted);white-space:nowrap}
.k-superuser-head{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:4px}
.k-superuser-head .k-page-lead{max-width:640px}
.k-superuser-table .k-cell-kind{white-space:nowrap}
.k-superuser-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.k-superuser-actions form{margin:0}
.k-superuser-transcript{display:grid;gap:14px;max-width:820px}
.k-transcript-msg{background:var(--surface);border:1px solid var(--gray-200);border-radius:var(--radius-lg);padding:14px 18px;display:grid;gap:6px}
.k-transcript-user{background:var(--bg-cream);margin-left:48px}
.k-transcript-user p{margin:0;white-space:pre-wrap}
.k-superuser-takeover{align-items:center}
.k-superuser-takeover span{flex:1;min-width:0}
.k-superuser-takeover form{margin:0}
.k-superuser-head svg{width:48px;height:auto;flex-shrink:0;color:var(--klaus-blue);opacity:.7}
.k-superuser-head-actions{display:flex;align-items:center;gap:20px;flex-shrink:0}
.k-superuser-head-actions form{margin:0}
.k-superuser-table-wrap{overflow:auto;border:1px solid var(--gray-200);border-radius:var(--radius-lg);background:var(--surface)}
.k-superuser-table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.k-superuser-table th{text-align:left;font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--fg-muted);padding:12px 10px 10px;border-bottom:1px solid var(--gray-200);background:var(--bg-cream-deep);white-space:nowrap}
.k-superuser-table th.k-cell-num{text-align:right}
.k-superuser-table td{padding:12px 10px;border-bottom:1px solid var(--gray-200);vertical-align:middle;max-width:320px}
.k-superuser-table tbody tr:last-child td{border-bottom:0}
.k-superuser-table tbody tr:hover{background:var(--bg-cream)}
.k-superuser-table .k-cell-name{font-weight:600;overflow-wrap:anywhere;min-width:160px}
.k-superuser-table .k-cell-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.k-superuser-table .k-cell-date{color:var(--fg-muted);font-size:var(--fs-xs);white-space:nowrap}
.k-superuser-table .k-cell-truncate{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg-body)}
.k-superuser-table .k-cell-muted{color:var(--fg-muted);font-style:italic}
.k-superuser-table .k-cell-empty{text-align:center;color:var(--fg-muted);padding:32px 14px}
.k-superuser-table .k-cell-action{width:1%;white-space:nowrap;text-align:right;padding-right:14px}
.k-superuser-table .k-row-anonymous{opacity:.6}
.k-btn-sm{padding:6px 12px;font-size:var(--fs-xs);transform:none}
.k-btn-sm:hover{transform:none}
@media(max-width:900px){.k-superuser{padding:20px 12px 48px}.k-superuser-head{flex-direction:column;align-items:flex-start;gap:12px}.k-superuser-table{font-size:var(--fs-xs)}.k-superuser-table th,.k-superuser-table td{padding:8px 10px}}

.k-superuser-plan{display:flex;gap:6px;align-items:center}
.k-superuser-plan select{font:inherit;font-size:var(--fs-xs);padding:4px 6px;border:1px solid var(--border-input);border-radius:6px;background:#fff;color:inherit}