/* klar.inspect brand layer
 * The underlying product UI remains intact. This layer translates the approved
 * brand system into the real application without copying conceptual mockups.
 */
:root{
  --ki-canvas:#f6f5f1;
  --ki-surface:#fff;
  --ki-surface-muted:#f0eef5;
  --ki-ink:#18171d;
  --ki-deep:#281f55;
  --ki-focus:#6e56cf;
  --ki-focus-soft:#eae6f8;
  --ki-track:#d9d6e1;
  --ki-muted:#6f6b79;
  --ki-pass:#2e9d70;
  --ki-pass-soft:#ddf1e9;
  --ki-warning:#d99a35;
  --ki-warning-soft:#f8ecd5;
  --ki-blocker:#e36f5a;
  --ki-blocker-soft:#f9e1db;
  --ki-evidence:#54788a;
  --ki-evidence-soft:#e2edf1;
  --ki-control-radius:8px;
  --ki-card-radius:14px;
  --ki-panel-radius:20px;
  --ki-font:Geist,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ki-mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --violet:var(--ki-focus);
  --violet-dark:var(--ki-deep);
  --violet-soft:var(--ki-focus-soft);
  --mint:var(--ki-pass);
  --mint-soft:var(--ki-pass-soft);
  --amber:var(--ki-warning);
  --rose:var(--ki-blocker);
  --ink:var(--ki-ink);
  --line:var(--ki-track);
  color:var(--ki-ink);
  background:var(--ki-canvas);
  font-family:var(--ki-font);
}

body{background:var(--ki-canvas);color:var(--ki-ink)}
body>header{min-height:68px;padding:0 28px;gap:28px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--ki-track);box-shadow:none;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;min-width:198px;color:var(--ki-ink)}
.brand:before{content:none!important}
.brand img{display:block;width:142px;height:auto}
.brand .brand-tagline{max-width:78px;margin:0;padding-left:10px;border-left:1px solid var(--ki-track);color:var(--ki-muted);font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.045em;text-transform:uppercase;white-space:normal}

.main-nav>a,.nav-menu>summary{color:var(--ki-muted);border-radius:var(--ki-control-radius)}
.main-nav>a:hover,.nav-menu>summary:hover,.nav-menu[open]>summary,.main-nav>a.active{background:var(--ki-focus-soft);color:var(--ki-deep)}
.main-nav>a.active{box-shadow:inset 0 -2px 0 var(--ki-focus)}
.nav-pop{background:var(--ki-surface);border-color:var(--ki-track);border-radius:var(--ki-card-radius);box-shadow:0 18px 40px rgba(40,31,85,.13)}
.nav-pop a{color:var(--ki-muted)}
.nav-pop a:hover{background:var(--ki-focus-soft);color:var(--ki-deep)}

.project-bar{top:68px;min-height:54px;padding:8px 28px;background:var(--ki-surface);border-color:var(--ki-track);box-shadow:none}
.project-identity{gap:9px}
.project-kicker{color:var(--ki-muted);font-weight:800;letter-spacing:.09em}
.project-identity>strong{color:var(--ki-deep)}
.project-env{background:var(--ki-surface-muted);color:var(--ki-muted)}
.project-nav>a,.project-nav>.nav-menu>summary{position:relative;color:var(--ki-muted);border-radius:var(--ki-control-radius)}
.project-nav>a:hover,.project-nav>a.active,.project-nav>.nav-menu>summary:hover,.project-nav>.nav-menu[open]>summary{background:var(--ki-focus-soft);color:var(--ki-deep)}
.project-nav>a.active:not(.project-run-button):after{content:"";position:absolute;right:9px;bottom:2px;left:9px;height:2px;border-radius:2px;background:var(--ki-focus)}
.project-run-button,.cockpit-start{margin-left:8px!important;padding:8px 13px!important;background:var(--ki-deep)!important;color:#fff!important;border:1px solid var(--ki-deep)!important;box-shadow:none!important}
.project-run-button:hover,.cockpit-start:hover{background:var(--ki-focus)!important;border-color:var(--ki-focus)!important}
.project-live{max-width:1440px;background:var(--ki-deep);border:1px solid rgba(255,255,255,.12);border-radius:var(--ki-card-radius);box-shadow:none}
.live-dot{background:var(--ki-focus);box-shadow:0 0 0 6px rgba(110,86,207,.2);animation:kiLivePulse 1.7s infinite}
@keyframes kiLivePulse{50%{box-shadow:0 0 0 10px rgba(110,86,207,.06)}}

main{max-width:1500px;padding:30px 30px 52px}
h1,h2,h3,strong{color:inherit}
.shell-hero p,.cockpit-top p,.section-head p,.muted{color:var(--ki-muted)}
.eyebrow{color:var(--ki-focus)}
.card,.quality-card,.product-area,.flow-card,.performance-list,.issue-card,.cockpit-panel,.portfolio-card,.story-step,.visual-compare-card,.handoff-status-card{background:var(--ki-surface);border-color:var(--ki-track);box-shadow:0 8px 26px rgba(40,31,85,.045)}
.card,.quality-card,.product-area,.flow-card,.performance-list,.issue-card,.portfolio-card{border-radius:var(--ki-card-radius)}
.cockpit-panel,.story-step{border-radius:var(--ki-panel-radius)}

.btn,button{border:1px solid var(--ki-deep);border-radius:var(--ki-control-radius);background:var(--ki-deep);color:#fff;box-shadow:none}
.btn:hover,button:hover{background:var(--ki-focus);border-color:var(--ki-focus);color:#fff}
.secondary{border-color:var(--ki-track)!important;background:var(--ki-surface)!important;color:var(--ki-deep)!important;box-shadow:none!important}
.secondary:hover{border-color:var(--ki-focus)!important;background:var(--ki-focus-soft)!important;color:var(--ki-deep)!important}
input,textarea,select{border-color:var(--ki-track);border-radius:var(--ki-control-radius);color:var(--ki-ink);background:var(--ki-surface)}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid rgba(110,86,207,.24);outline-offset:2px;border-color:var(--ki-focus)}

.notice{background:var(--ki-evidence-soft);color:var(--ki-ink)}
.notice.error{background:var(--ki-blocker-soft);border-left:4px solid var(--ki-blocker)}
/* Eine gute Nachricht darf auch so aussehen. Auf der Seite "Testnutzer"
 * steht jetzt haeufig, dass die Anmeldung eingerichtet IST - in der Farbe
 * eines Hinweises las sich das wie ein Mangel. */
.notice.ok{background:var(--ki-pass-soft);border-left:4px solid var(--ki-pass)}
.code{font-family:var(--ki-mono);background:var(--ki-deep);color:#f7f5ff}
code,.nav-email,.performance-row small,.timing small{font-family:var(--ki-mono)}

.badge,.badge.ok,.status-pill.passed,.status-pill.confirmed,.status-pill.verified,.story-status.ok{background:var(--ki-pass-soft);color:#176c4b}
.badge.bad,.status-pill.failed,.story-status.bad{background:var(--ki-blocker-soft);color:#9a3829}
.badge.warn,.status-pill.queued,.status-pill.untested,.story-status.open{background:var(--ki-warning-soft);color:#81570f}
.status-pill.running,.status-pill.ready,.status-pill.sent{background:var(--ki-focus-soft);color:var(--ki-deep)}
.status-pill.implemented{background:var(--ki-evidence-soft);color:#365d6e}
.status-pill.reopened{background:var(--ki-blocker-soft);color:#9a3829}
.status-dot,.node-status{background:var(--ki-pass);color:var(--ki-pass)}
.state-indicator.tested{background:var(--ki-evidence)}
.state-indicator.problem,.state-indicator.critical,.state-indicator.major{background:var(--ki-blocker)}
.state-indicator.new,.state-indicator.minor{background:var(--ki-warning)}

.pui-progress{background:var(--ki-track)}
.pui-progress span{background:var(--ki-focus)}
.map-summary{background:var(--ki-deep)}
.map-summary .pui-progress{background:rgba(255,255,255,.18)}
.map-summary .pui-progress span{background:var(--ki-focus)}
.area-icon,.tree-icon,.panel-title>span,.story-number,.story-arrow,.flow-preview-step>b,.film-step>b{background:var(--ki-focus-soft);color:var(--ki-deep);box-shadow:none}
.flow-step{background:var(--ki-focus-soft);color:var(--ki-deep);border-color:#d7cff3}
.page-tabs a.active,.scope-tabs a.active{background:var(--ki-deep);color:#fff}
.score-ring{background:conic-gradient(var(--ki-focus) calc(var(--score)*1%),var(--ki-track) 0)}
.score-label{color:var(--ki-deep)}
.cockpit-flow,.builder-canvas,.story-explainer{background:var(--ki-surface);border-color:var(--ki-track)}
.cockpit-node{background:var(--ki-evidence-soft);border-color:#acc5cf;box-shadow:none}
.cockpit-node:nth-of-type(3n){background:#f8f6fc;border-color:#c9bced}
.next-step,.cockpit-brief,.handoff-status-card{background:var(--ki-surface)}
.flow-editor-entry,.story-step>header{background:var(--ki-surface)}
.builder-node,.builder-node.active{box-shadow:none}
.handoff-pipeline .active span{box-shadow:0 0 0 4px rgba(110,86,207,.18)}
.notice .inline-action button{box-shadow:none}
.performance-score{background:var(--ki-deep);box-shadow:none}
.performance-score.good,.performance-score.watch,.performance-score.regression{background:var(--ki-surface);color:var(--ki-ink);border:1px solid var(--ki-track)}
.performance-score.good{border-left:4px solid var(--ki-pass)}
.performance-score.watch{border-left:4px solid var(--ki-warning)}
.performance-score.regression{border-left:4px solid var(--ki-blocker)}
.performance-score.good small,.performance-score.watch small,.performance-score.regression small{color:var(--ki-muted)}
.chart-column>i,.chart-column>i.watch,.chart-column>i.slow{background:currentColor}
.chart-column>i{color:var(--ki-pass)}
.chart-column>i.watch{color:var(--ki-warning)}
.chart-column>i.slow{color:var(--ki-blocker)}

/* The visual trace marks what the tester acted on. It is focus, not an error. */
.story-target{border-color:var(--ki-focus);background:rgba(110,86,207,.13);box-shadow:0 0 0 5px rgba(110,86,207,.10),0 5px 16px rgba(40,31,85,.25)}
.story-target i{background:var(--ki-focus);color:#fff}
.filmstrip-card.visual .story-target,.flow-preview .story-target{box-shadow:0 0 0 3px rgba(110,86,207,.14)}
.issue-story .story-step{border-left-color:var(--ki-blocker)}
.danger-button{background:var(--ki-blocker)!important;border-color:var(--ki-blocker)!important}
.stop-kette{display:inline-flex;align-items:center}
.stop-kette .danger-button{font-size:15px;padding:10px 16px}
.fortsetzung-schalter{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.auth-layout{display:grid;grid-template-columns:minmax(280px,1fr) minmax(340px,460px);gap:64px;align-items:center;min-height:calc(100vh - 190px);max-width:1040px;margin:0 auto}
.auth-intro{padding:28px 0}
.auth-intro h1{max-width:660px;margin:10px 0 14px;color:var(--ki-deep);font-size:clamp(38px,5vw,62px);line-height:.98;letter-spacing:-.055em}
.auth-intro>p{max-width:610px;color:var(--ki-muted);font-size:17px;line-height:1.65}
.auth-points{display:grid;gap:11px;margin-top:26px}
.auth-points span{display:flex;align-items:center;gap:10px;color:var(--ki-deep);font-weight:700}
.auth-points span:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ki-focus);box-shadow:0 0 0 5px var(--ki-focus-soft)}
.auth-card{margin:0;padding:30px;border-radius:var(--ki-panel-radius)}
.auth-card h2{margin:0 0 7px;font-size:27px;letter-spacing:-.035em}
.auth-card>p{margin:0 0 22px;color:var(--ki-muted)}
.auth-card button{width:100%;margin-top:4px}

@media(max-width:1080px){
  .brand{min-width:auto}.brand .brand-tagline{display:none}
  .project-bar{padding-right:18px;padding-left:18px}
}
@media(max-width:800px){
  body>header{padding:12px 15px}.brand img{width:132px}
  .project-bar{top:auto}.project-run-button{margin-left:0!important}
  .auth-layout{grid-template-columns:1fr;gap:12px;min-height:auto}.auth-intro{padding-bottom:8px}.auth-intro h1{font-size:40px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Product workspace: global navigation stays in the header; the selected
 * product owns a persistent, collapsible navigation rail. */
.app-layout{display:grid;grid-template-columns:256px minmax(0,1fr);min-height:calc(100vh - 68px);transition:grid-template-columns .18s ease}
.app-content{min-width:0}
.project-sidebar{position:sticky;top:68px;align-self:start;height:calc(100vh - 68px);padding:18px 13px 22px;background:var(--ki-surface);border-right:1px solid var(--ki-track);overflow-y:auto;overflow-x:hidden;z-index:14}
.project-side-head{display:grid;gap:10px;padding:0 2px 14px;border-bottom:1px solid var(--ki-track)}
.project-side-identity{display:flex;align-items:center;gap:10px;min-width:0;padding:4px;border-radius:10px;color:var(--ki-deep)}
.project-side-identity:hover{background:var(--ki-focus-soft);color:var(--ki-deep)}
.project-side-mark{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:10px;background:var(--ki-deep);color:#fff;font-size:15px;font-weight:850}
.project-side-copy{display:grid;min-width:0;line-height:1.18}
.project-side-copy small,.project-side-group{color:var(--ki-muted);font-size:9px;font-style:normal;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.project-side-copy strong{max-width:168px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ki-deep);font-size:13px}
.project-side-copy em{margin-top:3px;color:var(--ki-muted);font-size:10px;font-style:normal}
.project-side-toggle{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border:1px solid var(--ki-track);background:var(--ki-surface)!important;color:var(--ki-muted)!important;font-size:11px;box-shadow:none!important}
.project-side-toggle:hover{border-color:var(--ki-focus);background:var(--ki-focus-soft)!important;color:var(--ki-deep)!important}
.project-side-toggle .project-side-icon{transition:transform .18s ease}
.project-side-nav{display:grid;gap:3px;padding-top:12px}
.project-side-link{display:flex;align-items:center;gap:11px;min-height:40px;padding:8px 10px;border-radius:9px;color:var(--ki-muted);font-size:12px;font-weight:720;white-space:nowrap}
.project-side-link:hover,.project-side-link.active{background:var(--ki-focus-soft);color:var(--ki-deep)}
.project-side-link.active{box-shadow:inset 3px 0 0 var(--ki-focus)}
.project-side-icon{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px}
.project-side-icon svg{display:block;width:20px;height:20px}
.project-side-label{overflow:hidden;text-overflow:ellipsis}
.project-side-group{display:block;padding:17px 10px 5px}
.project-side-run{margin:7px 0 2px;background:var(--ki-deep);color:#fff}
.project-side-run:hover,.project-side-run.active{background:var(--ki-focus);color:#fff;box-shadow:none}
.app-layout.sidebar-collapsed{grid-template-columns:76px minmax(0,1fr)}
.sidebar-collapsed .project-sidebar{padding-right:10px;padding-left:10px}
.sidebar-collapsed .project-side-head{justify-items:center}
.sidebar-collapsed .project-side-identity{justify-content:center;padding:4px}
.sidebar-collapsed .project-side-copy,.sidebar-collapsed .project-side-label,.sidebar-collapsed .project-side-group{display:none}
.sidebar-collapsed .project-side-toggle,.sidebar-collapsed .project-side-link{justify-content:center;width:44px;padding-right:0;padding-left:0}
.sidebar-collapsed .project-side-toggle .project-side-icon{transform:rotate(180deg)}
.sidebar-collapsed .project-side-link.active{box-shadow:inset 0 -3px 0 var(--ki-focus)}
.app-content>.project-live{max-width:none;margin:14px 28px 0}

@media(max-width:1080px) and (min-width:801px){.app-layout{grid-template-columns:224px minmax(0,1fr)}.app-layout.sidebar-collapsed{grid-template-columns:72px minmax(0,1fr)}.project-sidebar{padding-right:10px;padding-left:10px}.project-side-link{padding-right:8px;padding-left:8px}}
@media(max-width:800px){
  .app-layout,.app-layout.sidebar-collapsed{display:block;min-height:0}
  .project-sidebar{position:static;width:auto;height:auto;padding:9px 12px;border-right:0;border-bottom:1px solid var(--ki-track);overflow:visible}
  .project-side-head{display:flex;align-items:center;padding:0 0 8px;border:0}.project-side-identity{flex:1}.project-side-toggle{display:none}
  .project-side-nav{display:flex;gap:5px;padding:0;overflow-x:auto}.project-side-group{display:none}
  .project-side-link,.sidebar-collapsed .project-side-link{justify-content:center;flex:0 0 42px;width:42px;min-height:40px;padding:8px}
  .project-side-label,.sidebar-collapsed .project-side-label{display:none}.project-side-link.active,.sidebar-collapsed .project-side-link.active{box-shadow:inset 0 -3px 0 var(--ki-focus)}
  .app-content>.project-live{margin:8px 12px}
}