/* fokus-view.css — generiert aus cockpit-v2.html (27.06.2026).
Gescopt unter #fokus-view via CSS-Nesting; erbt index' Theme-Tokens (inkl. Dark). */
#fokus-view {
--track:#efece5;
padding-bottom:20px;
/* ── Kopfzeile ──────────────────────────────────────────────────── */
.top {
display:flex; align-items:flex-end; justify-content:space-between;
gap:18px; flex-wrap:wrap; margin-bottom:18px;
}
.top .brand { font-size:26px; font-weight:800; color:var(--anthrazit); letter-spacing:-.3px; }
.top .brand .sub { display:block; font-size:13px; font-weight:500; color:var(--muted); margin-top:3px; letter-spacing:0; }
.top .meta { text-align:right; font-size:13px; color:var(--muted); }
.top .meta .day { font-size:15px; font-weight:700; color:var(--anthrazit); }
/* ── Kategorie-Leiste (Tabs) ────────────────────────────────────── */
.tabbar {
display:flex; gap:9px; margin-bottom:22px;
overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
scrollbar-width:thin;
}
.tab {
flex:0 0 auto; cursor:pointer; user-select:none;
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
padding:11px 16px 12px; min-width:128px;
display:flex; flex-direction:column; gap:5px;
transition:border-color .14s, box-shadow .14s, transform .08s;
}
.tab:hover { border-color:#d8d2c4; }
.tab:active { transform:translateY(1px); }
.tab .t-row { display:flex; align-items:center; gap:8px; }
.tab .t-emo { font-size:16px; line-height:1; }
.tab .t-name { font-size:13px; font-weight:700; color:var(--anthrazit); white-space:nowrap; }
.tab .t-key {
margin-left:auto; font-size:9.5px; font-weight:700; color:var(--muted);
border:1px solid var(--line); border-radius:5px; padding:1px 4px; line-height:1.3;
}
.tab .t-metric { font-size:19px; font-weight:800; color:var(--anthrazit); letter-spacing:-.4px; line-height:1.05; }
.tab .t-metric small { font-size:11px; font-weight:600; color:var(--muted); letter-spacing:0; }
.tab .t-badge {
display:inline-block; align-self:flex-start; margin-top:1px;
font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px;
background:var(--pill-crit); color:var(--crit);
}
.tab .t-badge.ok { background:var(--pill-ok); color:var(--ok); }
.tab .t-badge.warn { background:var(--pill-warn); color:var(--warn); }
.tab.active {
border-color:var(--senfgelb); background:#fffdf7;
box-shadow:0 3px 14px rgba(212,166,70,.18), inset 0 0 0 1px var(--senfgelb);
}
.tab.active::before { content:""; position:relative; }
.tab.active .t-name { color:#9a7220; }
/* ── Layout: Bühne + Kontextspalte ──────────────────────────────── */
.layout { display:grid; grid-template-columns:1fr 312px; gap:20px; align-items:start; }
/* ── Fokus-Bühne ────────────────────────────────────────────────── */
.stage {
background:var(--card); border:1px solid var(--line); border-radius:18px;
border-top:4px solid var(--senfgelb);
padding:26px 30px 28px; min-height:560px;
}
.stage-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:6px; }
.stage-head .s-emo {
font-size:24px; width:48px; height:48px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
background:var(--bg); border-radius:12px;
}
.stage-head .s-titles h1 { font-size:23px; font-weight:800; color:var(--anthrazit); letter-spacing:-.4px; }
.stage-head .s-titles p { font-size:13.5px; color:var(--muted); margin-top:2px; }
.stage-head .s-key { margin-left:auto; font-size:11px; color:var(--muted); }
.stage-head .s-key kbd {
display:inline-block; font-family:ui-monospace,SFMono-Regular,monospace;
font-size:11px; border:1px solid var(--line); border-bottom-width:2px;
border-radius:5px; padding:1px 6px; background:var(--bg); color:var(--anthrazit);
}
.stage-divider { height:1px; background:var(--line); margin:18px 0 20px; }
/* Panels */
.panel { display:none; animation:fade .18s ease-out; }
.panel.show { display:block; }
/* Sub-Sektionen */
.sec-title {
font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.7px;
color:var(--muted); margin:26px 0 12px;
display:flex; align-items:center; gap:8px;
}
.sec-title:first-child { margin-top:0; }
.sec-title .count { color:var(--anthrazit); background:var(--bg); border-radius:9px; padding:1px 8px; font-size:11px; }
.sec-title .line { flex:1; height:1px; background:var(--line); }
/* Spalten */
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
@media (max-width:720px){ .cols2 { grid-template-columns:1fr; gap:0; } }
/* Fortschrittsbalken */
.bar-block { margin:6px 0 4px; }
.bar-block .bl-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.bar-block .bl-label { font-size:13px; color:var(--ink); }
.bar-block .bl-val { font-size:14px; font-weight:700; color:var(--anthrazit); font-variant-numeric:tabular-nums; }
.bar-block .bl-val small { font-weight:500; color:var(--muted); }
.track { height:11px; background:var(--track); border-radius:7px; overflow:hidden; }
.track .fill { height:100%; border-radius:7px; background:var(--senfgelb); }
.track .fill.ok { background:var(--ok); }
.track .fill.warn { background:var(--warn); }
.track .fill.crit { background:var(--kirschrot); }
.bar-cap { font-size:11.5px; color:var(--muted); margin-top:6px; }
/* Mini-Balken */
.mbar-row { display:grid; grid-template-columns:118px 1fr 64px; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.mbar-row:last-child { border-bottom:0; }
.mbar-row .mb-name { font-size:13px; font-weight:600; color:var(--ink); }
.mbar-row .mb-track { height:13px; background:var(--track); border-radius:7px; overflow:hidden; }
.mbar-row .mb-fill { height:100%; border-radius:7px; }
.mbar-row .mb-meta { font-size:12.5px; color:var(--muted); text-align:right; font-variant-numeric:tabular-nums; }
.mbar-row .mb-meta b { color:var(--anthrazit); font-weight:700; }
/* Listen */
.rows { display:flex; flex-direction:column; }
.row {
display:flex; align-items:center; gap:14px; padding:13px 0;
border-bottom:1px solid var(--line);
}
.row:last-child { border-bottom:0; }
.row .r-main { flex:1; min-width:0; }
.row .r-title { font-size:14px; font-weight:600; color:var(--anthrazit); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row .r-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.row .r-right { text-align:right; flex:0 0 auto; }
.row .r-amount { font-size:15px; font-weight:700; color:var(--anthrazit); font-variant-numeric:tabular-nums; }
.row.alert { background:var(--alert-bg); margin:0 -14px; padding:13px 14px; border-radius:10px; border-bottom-color:transparent; }
.chip { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:9px; background:var(--bg); color:var(--muted); white-space:nowrap; }
.chip.ok { background:var(--pill-ok); color:var(--ok); }
.chip.warn { background:var(--pill-warn); color:var(--warn); }
.chip.crit { background:var(--pill-crit); color:var(--crit); }
.chip.neutral { background:#eef0f2; color:var(--anthrazit); }
.act {
font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:9px; cursor:pointer;
background:var(--anthrazit); color:#fff; border:0; white-space:nowrap;
}
.act:hover { filter:brightness(1.12); }
.act.ghost { background:transparent; color:var(--kirschrot); border:1px solid var(--line); }
.act.ghost:hover { border-color:var(--kirschrot); filter:none; }
.act[disabled], .act.read-only { opacity:.5; cursor:default; pointer-events:none; }
/* Kalender-Zeilen */
.cal { display:flex; flex-direction:column; }
.cal-line { display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.cal-line:last-child { border-bottom:0; }
.cal-line .c-time { font-variant-numeric:tabular-nums; color:var(--muted); width:46px; font-weight:600; }
.cal-line .c-title { flex:1; color:var(--ink); }
.cal-line.done .c-title { color:var(--muted); }
.cal-line.done .c-time { text-decoration:line-through; }
.cal-line .c-flag { font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:9px; }
.cal-line.done .c-flag { background:var(--pill-ok); color:var(--ok); }
.cal-line.up .c-flag { background:var(--pill-warn); color:var(--warn); }
/* Woche-Strip */
.weekstrip { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:4px; }
.weekstrip .wd { text-align:center; padding:11px 4px 9px; background:var(--bg); border:1px solid var(--line); border-radius:11px; }
.weekstrip .wd .dow { font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; font-weight:600; }
.weekstrip .wd .num { font-size:19px; font-weight:800; color:var(--anthrazit); margin:3px 0 2px; }
.weekstrip .wd .cnt { font-size:10.5px; color:var(--muted); }
.weekstrip .wd.today { border-color:var(--senfgelb); background:var(--pill-warn); }
.weekstrip .wd.today .num { color:#9a7220; }
.weekstrip .wd.past { opacity:.5; }
/* Stat-Kacheln */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.stat { background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:15px 16px; }
.stat .s-lab { font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); font-weight:700; }
.stat .s-val { font-size:24px; font-weight:800; color:var(--anthrazit); margin-top:5px; letter-spacing:-.5px; }
.stat .s-val.warn { color:var(--warn); }
.stat .s-val.crit { color:var(--crit); }
.stat .s-val.ok { color:var(--ok); }
.stat .s-foot { font-size:11.5px; color:var(--muted); margin-top:3px; }
/* Inbox-Mailzeilen */
.mail { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-bottom:1px solid var(--line); }
.mail:last-child { border-bottom:0; }
.mail .m-dot { width:8px; height:8px; border-radius:50%; background:var(--senfgelb); margin-top:6px; flex:0 0 auto; }
.mail .m-body { flex:1; min-width:0; }
.mail .m-from { font-size:13px; font-weight:700; color:var(--anthrazit); }
.mail .m-subj { font-size:12.5px; color:var(--ink); margin-top:1px; }
.mail .m-snip { font-size:12px; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
/* ── Kontextspalte ──────────────────────────────────────────────── */
.context { position:sticky; top:18px; display:flex; flex-direction:column; gap:16px; }
.focus-card {
background:linear-gradient(150deg,var(--senfgelb) 0%,#bd8d37 100%);
color:var(--anthrazit); border-radius:16px; padding:20px 20px 22px;
box-shadow:0 6px 20px rgba(212,166,70,.28);
}
.focus-card .fc-label { font-size:10.5px; text-transform:uppercase; letter-spacing:1.2px; font-weight:800; opacity:.8; margin-bottom:14px; }
.focus-card ol { list-style:none; counter-reset:fc; }
.focus-card li { counter-increment:fc; display:flex; gap:12px; padding:11px 0; border-top:1px solid rgba(0,0,0,.12); }
.focus-card li:first-child { border-top:0; padding-top:0; }
.focus-card li::before {
content:counter(fc); flex:0 0 auto;
width:25px; height:25px; border-radius:50%;
background:var(--anthrazit); color:var(--senfgelb);
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:800;
}
.focus-card .fc-text { font-size:13.5px; font-weight:600; line-height:1.35; }
.focus-card .fc-kind { display:block; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; opacity:.7; margin-top:3px; }
.focus-card .fc-empty { font-size:13px; opacity:.7; font-style:italic; }
.ctx-block { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 18px 20px; }
.ctx-block .cb-title { font-size:11px; text-transform:uppercase; letter-spacing:.7px; font-weight:800; color:var(--muted); margin-bottom:13px; display:flex; align-items:center; gap:7px; }
.ctx-block .cb-title .emo { font-size:14px; }
.ctx-next { display:flex; gap:11px; padding:9px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.ctx-next:last-child { border-bottom:0; }
.ctx-next .cn-time { font-size:12px; font-weight:700; color:var(--senfgelb); font-variant-numeric:tabular-nums; width:42px; flex:0 0 auto; }
.ctx-next .cn-txt { font-size:12.5px; color:var(--ink); }
.ctx-next .cn-txt small { display:block; color:var(--muted); font-size:11px; margin-top:1px; }
.ctx-empty { font-size:12px; color:var(--muted); font-style:italic; }
.waiting { font-size:12px; color:var(--muted); }
.waiting .w-row { padding:7px 0; border-bottom:1px dashed var(--line); }
.waiting .w-row:last-child { border-bottom:0; }
.waiting .w-row b { color:var(--anthrazit); }
/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:980px){
.layout { grid-template-columns:1fr; }
.context { position:static; flex-direction:column; }
.stage { min-height:auto; padding:22px 20px 24px; }
.stat-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:560px){
.wrap { padding:16px 14px 50px; }
.stat-grid { grid-template-columns:1fr; }
.mbar-row { grid-template-columns:96px 1fr 56px; gap:8px; }
.row .r-right { display:none; }
.top .brand { font-size:22px; }
}
.foot-note { text-align:center; font-size:11.5px; color:var(--muted); margin-top:28px; }
.foot-note kbd { font-family:ui-monospace,monospace; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:10.5px; background:var(--card); }
/* Lead-Wahrscheinlichkeits-Balken */
.lead-track { height:8px; background:var(--track); border-radius:5px; overflow:hidden; margin-top:8px; max-width:260px; }
.lead-track .fill { height:100%; border-radius:5px; }
}
@keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
/* Dark-Mode: cockpit-v2 hat keine Dark-Varianten → hartkodierte Hell-Werte hier mappen */
html[data-theme="dark"] #fokus-view { --track:#2f3238; }
html[data-theme="dark"] #fokus-view .tab:hover { border-color:#4a4d53; }
html[data-theme="dark"] #fokus-view .tab.active { background:#2a2616; }
html[data-theme="dark"] #fokus-view .tab.active .t-name,
html[data-theme="dark"] #fokus-view .weekstrip .wd.today .num { color:var(--senfgelb); }
html[data-theme="dark"] #fokus-view .chip.neutral { background:#33363c; color:var(--ink); }
html[data-theme="dark"] #fokus-view .focus-card { background:linear-gradient(150deg,#3a2e15 0%,#2a2310 100%); color:var(--ink); box-shadow:0 6px 20px rgba(0,0,0,.4); }
html[data-theme="dark"] #fokus-view .focus-card li { border-top-color:rgba(255,255,255,.12); }
html[data-theme="dark"] #fokus-view .focus-card li::before { background:var(--senfgelb); color:var(--anthrazit); }
/* Doppelte Kopfzeile vermeiden: index-Header trägt Marke+Datum schon → cockpit-v2 .top aus */
#fokus-view .top { display:none; }
/* Gesperrte Kalender-Einträge (status 'locked') gedämpft markieren */
#fokus-view .cal-line.locked .c-title { color:var(--muted); }
#fokus-view .cal-line.locked .c-flag { background:var(--bg); color:var(--muted); }