/* FAINO · ui/index.css — Startseite (Karte). ui 0.9.0 · 24.10.2026 */
body.f-start .f-work{position:fixed;inset:0}
#f-mapbox{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.f-map-svg{width:100%;height:100%;display:block}
.f-map.drag{cursor:grabbing}
.f-map-z{position:absolute;right:var(--f-gut);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;z-index:3}
.f-map-z button{width:38px;height:38px;border-radius:12px;border:1px solid var(--f-line);background:var(--f-glass2);font:600 18px var(--f-font);color:var(--f-ink);cursor:pointer;box-shadow:var(--f-shadow)}
.f-map-z button:hover{color:var(--f-accent);border-color:var(--f-accent)}
body.f-start .f-top .f-mods{display:none}
.f-lt{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:2;pointer-events:auto;display:flex;gap:2px;padding:4px;border-radius:14px;background:var(--f-glass2);border:1px solid var(--f-line2);box-shadow:var(--f-shadow);max-width:calc(100% - 340px);overflow-x:auto;scrollbar-width:none}
.f-lt button{font:600 13px var(--f-font);color:var(--f-ink2);background:transparent;border:0;border-radius:10px;padding:8px 12px;white-space:nowrap;cursor:pointer;min-height:36px}
.f-lt button small{font-weight:500;color:var(--f-muted);margin-left:3px}
.f-lt button:hover{background:var(--f-hover)}
.f-lt button.on{background:var(--f-dark);color:#fff}.f-lt button.on small{color:#C9D1D9}
.f-uv{font:600 10px var(--f-font);color:#8C6A1E;background:#FBF3DF;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.f-note{font-size:12.5px;color:var(--f-muted);margin:10px 0 0}
@media (max-width:1100px){.f-lt{max-width:calc(100% - 200px)}.f-lt button{padding:8px 9px;font-size:12.5px}}
@media (max-width:900px){.f-lt{position:fixed;top:58px;left:var(--f-gut);right:var(--f-gut);transform:none;max-width:none}.f-map-z{top:auto;bottom:45%;transform:none}}
/* nach Anmeldung (#O-0005): Projektzeile mit Status, PL/PM, Punkten; Projektkarte mit Ändern am Ort */
.f-pts{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.f-pts i{font:600 10.5px var(--f-font);font-style:normal;border-radius:999px;padding:1px 7px;background:rgba(44,111,148,.1);color:#2C6F94}
.f-pts i.me{background:rgba(201,161,63,.16);color:#8A6514}.f-pts i.late{background:rgba(226,69,42,.1);color:#B23A22}.f-pts.big{margin:0 0 10px}.f-pts.big i{font-size:12px;padding:3px 9px}
.f-tcp{margin:0 0 8px;color:var(--f-muted);font-size:12.5px}
.f-tcf{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px}.f-tcf label{display:flex;flex-direction:column;gap:3px;font:600 10.5px var(--f-font);color:var(--f-muted);text-transform:uppercase;letter-spacing:.04em}
.f-tcf select{width:100%;box-sizing:border-box;font:13px var(--f-font);color:var(--f-ink);border:1px solid var(--f-line,rgba(30,37,45,.14));border-radius:9px;padding:6px 8px;background:#fff;text-transform:none;letter-spacing:0}
.f-tcf select:disabled{background:transparent;border-color:transparent;padding-left:0;-webkit-appearance:none;appearance:none;opacity:1;color:var(--f-ink)}
.f-dotin{display:flex;gap:2px;align-items:center;min-height:30px}.f-dotin button{border:0;background:none;cursor:pointer;padding:5px 3px;line-height:0}.f-dotin i{display:block;width:11px;height:11px;border-radius:50%;background:#E1E4E7}.f-dotin button.on i{background:#B5832B}.f-dotin button:disabled{cursor:default}
.f-tch{margin:10px 0 4px;font:700 10.5px var(--f-font);letter-spacing:.06em;text-transform:uppercase;color:var(--f-muted)}.f-tcl{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:3px}.f-tcl small{color:var(--f-muted);margin-left:6px}
/* Projektliste als Tabelle (Variante A, Andriy 25.10): eine Zeile je Projekt; Spalten blenden sich bei schmaler Leiste aus */
#f-pn-list .f-pb{container-type:inline-size}
.f-ptr{display:grid;grid-template-columns:minmax(88px,1.05fr) minmax(56px,1fr) 92px minmax(70px,.8fr);column-gap:8px;align-items:center}
body.f-in .f-ptr{grid-template-columns:minmax(88px,1.05fr) minmax(56px,1fr) 92px 62px 50px minmax(70px,.8fr)}
a.f-li.f-ptr{padding-top:8px;padding-bottom:8px}
.f-ptr>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.f-ptr .c-code{display:flex;align-items:center;gap:4px}.f-ptr .c-code b{font-size:13.5px}
.f-ptr .c-place{color:var(--f-ink2);font-size:12.5px}
.f-ptr .c-size{text-align:right;color:var(--f-ink2);font-size:12px}
.f-pf{display:inline-flex;color:#1F6E5A;flex:none}
.f-lpb{display:inline-flex;align-items:flex-end;gap:2px;margin-right:5px;vertical-align:middle}.f-lpb i{display:block;width:4px;height:12px;border-radius:1px;background:#E3E6E9}.f-lpb i.d{background:#9FD3BD}.f-lpb i.c{background:#1F6E5A}
.f-ptr .c-lp{display:flex;align-items:center}.f-lpw{display:inline-flex;align-items:center}
.c-lp b,.f-lpw b{font:700 12.5px var(--f-font);vertical-align:middle}
.f-ph0{color:var(--f-muted);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-ring{display:inline-flex;align-items:center;gap:4px;font-size:12.5px}.f-ring svg{flex:none}.f-ring b{font-weight:700}.f-ring em{font-style:normal;color:#C0392B;font-weight:700;font-size:11.5px}
.f-nop{color:#C9CDD2}
.f-dots{display:inline-flex;gap:3px}.f-dots i{width:7px;height:7px;border-radius:50%;background:#E1E4E7}.f-dots i.on{background:#B5832B}
.f-pt-h{position:sticky;top:-6px;z-index:2;background:#fff;border-bottom:1px solid var(--f-line2,rgba(30,37,45,.1));padding:7px 16px 6px;margin:-6px -8px 0;height:30px;box-sizing:border-box}
#f-pn-list .f-pt-h~.f-gh{top:24px}
.f-pt-h>span{display:flex;align-items:center;gap:1px;overflow:visible}
.f-pt-h .c-size{justify-content:flex-end}
.f-pt-h button{border:0;background:none;padding:2px 0;font:700 10.5px var(--f-font);letter-spacing:.07em;text-transform:uppercase;color:#9A8F7C;cursor:pointer;white-space:nowrap}
.f-pt-h button.on,.f-pt-h button:hover{color:var(--f-ink)}
.f-pt-h .fl{position:relative;display:inline-grid;place-items:center;width:16px;height:18px;font-size:10px;color:#B9B0A0;border-radius:4px;cursor:pointer}
.f-pt-h .fl:hover{color:var(--f-ink);background:var(--f-hover)}.f-pt-h .fl.on{color:#fff;background:#1F6E5A}
.f-pt-h .fl select{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.f-flt{margin:6px 0 2px;font-size:12px;color:var(--f-muted)}
.f-tcm{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 10px;font-size:12.5px;color:var(--f-ink2)}
@container (max-width:470px){body.f-in .f-ptr{grid-template-columns:minmax(80px,1fr) 92px 62px 50px}body.f-in .f-ptr .c-place,body.f-in .f-ptr .c-size{display:none}}
@container (max-width:380px){.f-ptr{grid-template-columns:minmax(80px,1fr) minmax(50px,1fr) 92px}.f-ptr .c-size{display:none}body.f-in .f-ptr{grid-template-columns:minmax(80px,1fr) 92px 62px}body.f-in .f-ptr .c-prio{display:none}}
/* nach Anmeldung (Andriy 25.10, erster Bildschirm): Zeile CODE · PROJEKT/Ort · TYP · PHASE · PUNKTE · PRIO */
body.f-in .f-ptr{grid-template-columns:58px minmax(90px,1fr) 96px 92px 74px 46px 50px}
body.f-in a.f-li.f-ptr{padding-top:4px;padding-bottom:4px}
.f-ptr .c-code:not(:has(b)){font:11.5px ui-monospace,Menlo,monospace;color:#6B7580}
.f-ptr .c-name{display:flex;flex-direction:column;min-width:0}.f-ptr .c-name b{font-size:13px;overflow:hidden;text-overflow:ellipsis}.f-ptr .c-name small{color:#8A939B;font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.f-ptr .c-pf{display:flex;align-items:center;gap:5px;color:#1F6E5A;font-size:11.5px}.f-ptr .c-pf small{overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.f-ptr .c-pf .f-pf svg{width:22px;height:22px}
.f-lpn{display:inline-block;width:34px;font:700 12px var(--f-font)}
.f-ptr.ps .c-name b{color:#9AA3AD;font-weight:600}.f-ptr.ps .c-code{color:#B0B6BD}
.f-ring{display:inline-flex;align-items:center}
.f-gh.tg{cursor:pointer;display:flex;gap:6px;align-items:baseline}.f-gh.tg .cv{margin-left:auto;color:#AAA}.f-gh.tg:hover{background:#F6F8F7}
@container (max-width:520px){body.f-in .f-ptr{grid-template-columns:58px minmax(80px,1fr) 92px 70px 46px 50px}body.f-in .f-ptr .c-pf{display:none}}
@container (max-width:400px){body.f-in .f-ptr{grid-template-columns:minmax(80px,1fr) 100px 40px}body.f-in .f-ptr .c-code,body.f-in .f-ptr .c-prio,body.f-in .f-ptr .c-size{display:none}}
/* Projektkarte */
.f-tch2{display:flex;gap:12px;align-items:center;margin:0 0 8px}.f-tch2 .ty3{flex:none;width:52px;height:52px;border-radius:12px;background:#EEF6F2;color:#1F6E5A;display:grid;place-items:center}
.f-tch2 .code{font:12px ui-monospace,Menlo,monospace;color:#6B7580}.f-tch2 .nm{font-size:19px;font-weight:800;line-height:1.2}.f-tch2 .sub{color:#5D6670;font-size:12.5px}
.f-kp{display:grid;grid-template-columns:1.2fr 1fr .9fr 1.3fr;gap:8px;align-items:center;margin:0 0 8px}.f-kp b{font-size:13px}
.kl{display:block;font:700 10px var(--f-font);letter-spacing:.08em;text-transform:uppercase;color:#9A8F7C}
.f-kp .pt{display:flex;gap:6px;align-items:center}.f-kp .od{color:#C0392B;font-size:11.5px;font-weight:600}
.f-kp .f-dotin{min-height:22px}.f-kp .f-dotin i{width:9px;height:9px}.f-kp .f-dotin button{padding:4px 2px}
.f-tabs{display:flex;gap:2px;border-bottom:1px solid var(--f-line2);margin:4px -4px 10px}.f-tabs button{border:0;background:none;padding:8px 9px;font:500 12.5px var(--f-font);color:#6B7580;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.f-tabs button.on{color:var(--f-ink);font-weight:700;border-bottom-color:#1F6E5A}.f-tabs small{color:#999}
/* .f-pn svg setzt 17 px / Strich 2 — für Symbole mit eigener Größe zurücknehmen */
.f-pn .f-ring svg,.f-pn .ty3 svg,.f-pn .f-pf svg,.f-pn .chip svg{width:auto;height:auto}
.f-pn .chip svg{stroke-width:1.4}
.f-pn .f-ring svg{stroke:none}

/* QA 26.10 (#O-0010): Prio in der Liste per Klick (A30), Reiter Punkte mit Liste (A28), Kopf ohne «Frist vorbei» (A26) */
.f-dots.ed{gap:2px;padding:4px 0}.f-dots.ed i{cursor:pointer;width:9px;height:9px;transition:transform .12s}.f-dots.ed i:hover{transform:scale(1.35);background:#D8B36A}.f-dots.ed i.on:hover{background:#9C6F1F}
body.f-in .f-ptr .c-size{font-size:11.5px}
.f-kp .pt .kl{white-space:nowrap}
.f-ptl{display:flex;flex-direction:column;margin:10px 0 0;border-top:1px solid #EEF0F2}
.f-pti{display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:7px 4px;border-bottom:1px solid #EEF0F2;text-decoration:none;color:inherit;border-left:3px solid transparent}
.f-pti:hover{background:#F6F8F7}.f-pti b{font:600 12px ui-monospace,Menlo,monospace;color:#6B7580;grid-row:span 2}
.f-pti span{font-size:12.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-pti small{grid-column:2;color:#8A939B;font-size:11px}
.f-pti.me{border-left-color:#1F8A70}.f-pti.me b{color:#1F6E5A}.f-pti.late small{color:#B23A22}
/* Status/Phase in der Liste ändern (#P-0017), Projektseite-Knopf (#P-0018), LP5+ (#P-0016) */
.f-ptr .c-lp.ed{cursor:pointer;border-radius:6px}.f-ptr .c-lp.ed:hover{background:rgba(31,138,112,.10);outline:1px dashed rgba(31,138,112,.45)}
.f-lpop{position:fixed;z-index:70;display:flex;flex-direction:column;gap:8px;min-width:230px;padding:10px 12px;border-radius:12px;background:#fff;box-shadow:0 10px 30px rgba(20,30,50,.22);border:1px solid rgba(30,37,45,.1);font-size:13px}
.f-lpop label{display:flex;flex-direction:column;gap:3px}.f-lpop label span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--f-faint,#8793A1)}
.f-lpop select{font:inherit;padding:5px 6px;border:1px solid rgba(30,37,45,.18);border-radius:7px;background:#fff}
.f-tch2 .f-pgo{display:inline-block;margin-top:8px}
.f-lpd{display:block;font-size:11px;color:var(--f-muted);margin-top:2px;line-height:1.2}
/* Chatsuche: Ergebnisliste (#O-0021) */
body .f-li.f-ptr.f-ask{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:8px;align-items:center}.f-ask .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.f-ptr.f-ask>span.nn{overflow:visible;font-size:12px;color:var(--f-muted);white-space:nowrap}.f-ask .nn b{color:var(--f-ink)}.f-ask .nn em{font-style:normal;color:#C0392B}

/* Startkarte: Detailkarte des Projekts so hoch wie die Liste links (Andriy 03.11) */
body.f-start:is(.f-lay-kreativ,.f-lay-ai) #f-pn-card.on{bottom:var(--f-pbot);max-height:none}