/* FAINO · ui/layout.css — Ansichtsvarianten (ui/layout.js) */
.f-who>.f-lay{padding:0 10px 0 12px}.f-lay svg{display:block}
@media (max-width:900px){.f-who>.f-lay,.f-lay-vs{display:none!important}}
.f-laym{width:320px;max-width:calc(100vw - 16px)}
.f-laym button{display:grid!important;grid-template-columns:30px 1fr;gap:10px;align-items:center;white-space:normal!important;padding:9px 10px!important}
.f-laym button i{display:grid;place-items:center;font-style:normal}.f-laym button i svg{width:22px;height:15px}
.f-laym button b{display:block;font-size:13px}.f-laym button small{display:block;font-weight:500;font-size:11.5px;color:var(--f-muted);margin-top:1px}
.f-laym button.on small{color:rgba(255,255,255,.72)}.f-laym button em{font-style:normal;font-weight:600;font-size:10.5px;color:var(--f-muted);margin-left:4px}
.f-laym button.soon{opacity:.55;cursor:default}.f-laym button.soon:hover{background:transparent}
/* Mini-Explorer am Projektnamen */
.f-mx{min-width:280px;max-width:min(380px,calc(100vw - 16px));max-height:min(70vh,560px);overflow:auto}
.f-mx .n{display:flex!important;align-items:center;gap:6px;width:100%;padding:7px 10px;font-weight:600;white-space:nowrap}
.f-mx .n .tw{width:12px;flex:none;font-size:10px;color:var(--f-faint)}.f-mx .n .lb{overflow:hidden;text-overflow:ellipsis}
.f-mx .n small{margin-left:auto;font-weight:500;font-size:11px;color:var(--f-muted)}.f-mx .n.lf{font-weight:500}
.f-mx .n.on{background:rgba(30,37,45,.86);color:#fff}.f-mx .n.on small{color:rgba(255,255,255,.7)}
/* AI: nur Chatleiste; Panels erscheinen nach Frage/Klick (f-peek) und blenden sich nach 30 s aus */
.f-pn .f-hide{display:none;margin-left:8px;font:500 11px var(--f-font);color:var(--f-muted)}
@media (min-width:901px){
  body.f-lay-ai .f-top .f-mods,body.f-lay-ai .f-lt,body.f-lay-ai .f-dock{display:none!important}
  body.f-lay-ai .f-pn.on:not(.f-peek){display:none!important}
  body.f-lay-ai .f-pn.f-peek .f-hide{display:inline}
  body.f-lay-ai .f-pn.f-peek{animation:f-peek .18s ease-out}
}
@keyframes f-peek{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Pläne und Dokumente auf dem ganzen Bildschirm (Andriy 27.10): weißes Blatt über die volle Fläche, Panels liegen darüber,
   das Bild selbst passt in den freien Bereich zwischen den Spalten (Maße --f-lw/--f-rw aus layout.js), Kopf mit Zoom/Öffnen oben in diesem Bereich */
@media (min-width:901px){
  body:not(.f-lay-ai) .f-view.f-wide,body.f-lay-ai .f-view.f-wide{position:fixed;inset:0;left:0!important;right:0!important;transform:none!important;width:auto!important;min-width:0;max-height:none;overflow:hidden;z-index:1;background:#fff}
  .f-view.f-wide .f-vc{box-sizing:border-box;height:100%;padding:calc(var(--f-top) + 8px) calc(var(--f-rw,0px) + 12px) calc(var(--f-pbot,16px) + 4px) calc(var(--f-lw,0px) + 12px);
    border:0;border-radius:0;background:#fff;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.f-lay-klassisch.f-lay-tight .f-view.f-wide .f-vc{padding-bottom:calc(var(--f-pbot,16px) + 4px)}
  .f-view.f-wide .f-pvw{flex:1;min-height:0;max-height:none;background:#fff}
  .f-view.f-wide .f-pvi{max-height:100%;max-width:100%}
  .f-view.f-wide .f-doc{flex:1;height:auto;min-height:0;border:0;border-radius:0;background:#fff}
  .f-view.f-wide .f-docw{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;background:#fff}
  .f-view.f-wide .f-docw .f-doc{width:100%;height:100%}
  .f-view.f-wide .f-docw{container-type:size}
  .f-view.f-wide .f-docw .f-doc.fit{flex:none;height:auto;aspect-ratio:var(--ar);width:min(100cqw,calc(100cqh * var(--ar)));box-shadow:0 1px 6px rgba(20,30,50,.12)}
}
/* ---------- Klassisch (#O-0032, Andriy 28.10): Spalten über die ganze Höhe, ohne Abstand zum Rand; Breite ziehbar ---------- */
.f-lnav,.f-rcol,.f-ctab{display:none}
@media (min-width:901px){
  body.f-kl .f-lnav,body.f-kl .f-rcol{display:flex;flex-direction:column;position:fixed;z-index:31;top:0;bottom:0;box-sizing:border-box;border-radius:0;font:13px/1.3 var(--f-font);color:var(--f-ink)}
  body.f-kl .f-lnav{left:0;width:var(--f-navw,320px);border-width:0 1px 0 0;padding:10px 0 12px}
  body.f-kl .f-rcol{right:0;width:var(--f-rcw,420px);border-width:0 0 0 1px;padding:10px;gap:8px}
  body.f-kl .f-lnav[hidden],body.f-kl .f-rcol[hidden]{display:none}
  body.f-kl .f-top .f-mods,body.f-kl .f-top .f-ttl,body.f-kl .f-top .f-home,body.f-kl .f-lt,body.f-kl .f-dock,body.f-kl .f-pwr{display:none!important}
  /* Leisten in den Spalten: kein eigenes Glas, keine eigene Breite */
  body.f-kl .f-lnav .f-pn,body.f-kl .f-rcol .f-pn,body.f-kl .f-ctab .f-pn{position:relative;inset:auto;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  body.f-kl .f-lnav .f-pn .f-pr,body.f-kl .f-rcol .f-pn .f-pr,body.f-kl .f-ctab .f-pn .f-pr,body.f-kl .f-lnav .f-ph [data-a],body.f-kl .f-rcol .f-ph [data-a],body.f-kl .f-ctab .f-ph [data-a]{display:none}
  body.f-kl .f-lnav .f-pn{margin:4px 0 6px 22px;border-left:1px solid var(--f-tree)}
  body.f-kl .f-lnav .f-pn .f-ph{padding:4px 8px 6px 12px;border-bottom:0}.f-lnav .f-pn .f-ph h4{font-size:12px;color:var(--f-muted)}
  body.f-kl .f-lnav .f-pn .f-pb{overflow:visible;padding:0 6px 0 8px}
  body.f-kl .f-lnav .f-pn .f-gh{background:transparent;position:static;margin:0;padding:8px 4px 4px}
  body.f-kl .f-rcol .rh{flex:none}
  body.f-kl .f-rcol .rh .f-who{display:flex;width:100%;box-sizing:border-box;pointer-events:auto}
  body.f-kl .f-rcol .rh .f-who .f-acct{margin-left:auto}
  /* Karte in der Arbeitsfläche (#O-0032): Punkt & Co. in der Mitte; beim Modell schwebt sie oben rechts über dem Modell */
  body.f-kl .f-kcard:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:30;top:16px;bottom:16px;left:calc(var(--f-navw,360px) + 16px);right:calc(var(--f-rcw,420px) + 16px);max-width:900px;margin:0 auto}
  body.f-kl.f-full .f-kcard:not([hidden]){left:auto;bottom:auto;width:340px;max-height:70vh;margin:0}
  body.f-kl .f-kcard .f-pn{position:relative;inset:auto;width:auto;max-height:none;flex:1;min-height:0}
  body.f-kl.f-full .f-kcard .f-pn{flex:none;max-height:70vh}
  body.f-kl .f-kcard .f-pn .f-pr,body.f-kl .f-kcard .f-ph [data-a="min"]{display:none}
  body.f-kl .f-kcard .f-pn{background:rgba(251,250,248,.95)}
  body.f-kl.f-kcard-on:not(.f-full):not(.f-kbv) .f-view{visibility:hidden}
  body.f-kl .f-rcol .f-cb{position:relative;left:auto;right:auto;bottom:auto;transform:none;width:auto;flex:none;margin:0}
  body.f-kl .f-rcol .f-cb .m{display:none}
  body.f-kl .f-kcard .f-pm{z-index:3}   /* Eingabe zum Punkt bleibt über Schritten/Kacheln, wenn die Karte scrollt */
  /* Mitte zwischen den Spalten */
  body.f-kl .f-view.f-wide .f-vc{padding:16px calc(var(--f-rcw,420px) + 16px) 16px calc(var(--f-navw,320px) + 16px)}
}
.f-lnav .bd{display:flex;align-items:center;gap:8px;padding:2px 14px 10px;text-decoration:none;color:var(--f-ink);font:800 15px var(--f-font);letter-spacing:.04em}
.f-lnav .bd .f-mk{width:22px;height:22px;display:block}
.f-lnav .tr{flex:1;min-height:0;overflow:auto;padding:0 8px 0 6px}
/* Baum mit Linien (#O-0032 p. 3) */
.f-lnav ul{list-style:none;margin:0;padding:0}
.f-lnav ul ul{margin-left:14px}
.f-lnav ul ul>li{position:relative;padding-left:12px}
.f-lnav ul ul>li::before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--f-tree)}
.f-lnav ul ul>li:last-child::before{bottom:auto;height:14px}
.f-lnav ul ul>li::after{content:'';position:absolute;left:0;top:14px;width:10px;border-top:1px solid var(--f-tree)}
.f-lnav li>.n{display:flex;align-items:center;gap:2px;min-height:28px;border-radius:8px}
.f-lnav li>.n:hover{background:var(--f-hover)}
.f-lnav li>.n.on{background:rgba(30,37,45,.86);color:#fff}.f-lnav li>.n.on small{color:rgba(255,255,255,.7)}.f-lnav li>.n.on .tw i{border-color:rgba(255,255,255,.8)}
.f-lnav .tw{flex:none;width:18px;height:24px;display:grid;place-items:center;border:0;background:transparent;padding:0;cursor:pointer;color:inherit}
.f-lnav button.tw i{width:5px;height:5px;border:solid var(--f-muted);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);transition:transform .12s}
.f-lnav li.op>.n button.tw i{transform:rotate(45deg) translate(-1px,-1px)}
.f-lnav .lb{flex:1;min-width:0;border:0;background:transparent;text-align:left;padding:5px 4px;font:600 13px var(--f-font);color:inherit;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-lnav ul ul .lb{font-weight:500}
.f-lnav li>.n small{flex:none;margin:0 8px 0 4px;font-size:11px;color:var(--f-muted)}
/* Griff zum Ziehen der Spaltenbreite */
.f-cr{position:absolute;top:0;bottom:0;width:8px;cursor:ew-resize;z-index:5}
.f-lnav .f-cr{right:-4px}.f-rcol .f-cr{left:-4px}
.f-cr::after{content:'';position:absolute;top:50%;left:3px;width:2px;height:40px;margin-top:-20px;border-radius:2px;background:rgba(30,37,45,.2);opacity:0;transition:opacity .15s}
.f-cr:hover::after,.f-cr.drag::after{opacity:1}
/* Verlauf mit FAINO (rechte Spalte, #O-0032 p. 4) */
.f-hist{flex:1;min-height:80px;display:flex;flex-direction:column}
.f-hist h5{flex:none;margin:4px 6px 6px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--f-muted)}
.f-hist .hl{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:2px 4px}
.f-hist .hm{max-width:92%;padding:8px 11px;border-radius:14px;font:13px/1.45 var(--f-font)}
.f-hist .hm b{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--f-muted);margin-bottom:2px}.f-hist .hm b .f-mk{width:13px;height:13px;display:block}
.f-hist .hm p{margin:0;white-space:pre-line}
.f-hist .hm.a{align-self:flex-start;background:rgba(255,255,255,.75);border:1px solid rgba(30,37,45,.06)}
.f-hist .hm.q{align-self:flex-end;background:rgba(30,37,45,.86);color:#fff}.f-hist .hm.q b{color:rgba(255,255,255,.7)}
.f-hist .f-empty{margin:auto 8px 8px;color:var(--f-muted);font-size:12.5px}
/* Startkarte, Klassisch: Projektkarte als Reiter in der Mitte neben der Karte (#O-0032 d) */
@media (min-width:901px){
  body.f-kl .f-ctab:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:30;top:0;bottom:0;left:var(--f-navw,320px);right:var(--f-rcw,420px);pointer-events:none}
  body.f-kl .f-ctab .tb{pointer-events:auto;align-self:flex-start;display:flex;gap:4px;margin:10px 12px 0;padding:4px;border-radius:999px}
  body.f-kl .f-ctab .bt{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:600 12.5px var(--f-font);color:var(--f-ink2);cursor:pointer;max-width:320px}
  body.f-kl .f-ctab .bt span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.f-kl .f-ctab .bt.on{background:rgba(30,37,45,.86);color:#fff}
  body.f-kl .f-ctab .bt .x{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-weight:500}.f-ctab .bt .x:hover{background:rgba(255,255,255,.25)}
  body.f-kl .f-ctab .cb{pointer-events:auto;flex:1;min-height:0;margin:10px 12px 12px;display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:#fff;border:1px solid rgba(30,37,45,.08);box-shadow:0 10px 40px rgba(20,30,50,.14)}
  body.f-kl .f-ctab.map .cb{display:none}
  body.f-kl .f-ctab .cb .f-pn.on{flex:1;min-height:0}
}
/* Kanban der Punkte in der Mitte (#O-0032, Andriy 28.10: in jedem Ansichtstyp, wenn links die Punkte gewählt sind) */
.f-view.f-kbw .f-vc{overflow:hidden;display:flex;flex-direction:column}
.f-kb{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:10px;align-items:start;margin-top:10px;flex:1;min-height:0;overflow:auto;padding-bottom:70px}
.f-kb .kc{background:rgba(30,37,45,.04);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.f-kb h6{display:flex;align-items:center;gap:6px;margin:2px 4px 2px;font:800 10.5px var(--f-font);letter-spacing:.07em;text-transform:uppercase;color:var(--f-ink)}
.f-kb h6 i{width:8px;height:8px;border-radius:50%;flex:none}.f-kb h6 small{margin-left:auto;font-weight:600;color:var(--f-muted);letter-spacing:0}
.f-kb .f-kci{background:#fff;border:1px solid rgba(30,37,45,.07);border-radius:10px;box-shadow:0 1px 3px rgba(20,30,50,.06);border-bottom:1px solid rgba(30,37,45,.07)}
.f-kb .f-kci.on{outline:2px solid var(--f-green)}
.f-kb .f-kci .f-pdot{display:none}
@media (min-width:901px){
  body.f-kl.f-kcard-over .f-kcard:not([hidden]){left:auto;width:min(560px,calc(100vw - var(--f-rcw,420px) - 32px));z-index:33;box-shadow:0 18px 60px rgba(20,30,50,.25);border-radius:16px}
}
/* ◐ Darstellung (#O-0034) */
.f-dispm{width:270px;gap:4px;padding:10px}.f-dispm.on{display:flex}
.f-dispm h6{margin:6px 2px 2px;font:800 10.5px var(--f-font);letter-spacing:.07em;text-transform:uppercase;color:var(--f-muted)}
.f-dispm .sg{display:flex;gap:2px;background:rgba(30,37,45,.06);border-radius:10px;padding:2px}.f-dispm .sg button{flex:1;border:0;background:transparent;border-radius:8px;padding:5px 4px;font:600 12px var(--f-font);color:var(--f-ink2);cursor:pointer}
.f-dispm .sg button.on{background:#fff;color:var(--f-ink);box-shadow:0 1px 3px rgba(20,30,50,.12)}
.f-dispm select{width:100%;padding:5px 6px;border:1px solid var(--f-line);border-radius:8px;font:13px var(--f-font);background:#fff}
.f-dispm .ck{display:flex;align-items:center;gap:8px;padding:3px 2px;font:13px var(--f-font);cursor:pointer}
.f-dispm [data-dreset]{margin-top:8px;align-self:flex-start}
/* ALIA-Demo (#A-0001, Andriy 28.10): keine Ansichtswahl auf /alia; in der Geschichte ohne Dokumentenliste und ohne Projektnavigator über der Szene */
body.f-alia .f-who>.f-lay,body.f-alia .f-lay-vs{display:none!important}
body.f-alia.f-story-on #dl,body.f-alia.f-story-on .f-top .f-ttl,body.f-alia.f-story-on .f-mx,body.f-alia.f-story-on .f-tdd{display:none!important}
/* Projekte am Projektnamen (Kreativ, AI) */
.f-mx .mh{display:flex;gap:6px;align-items:center;padding:6px 10px 4px;font:800 10.5px var(--f-font);letter-spacing:.07em;text-transform:uppercase;color:var(--f-muted)}.f-mx .mh small{margin-left:auto;font-weight:600;letter-spacing:0}
.f-mx .n .lb b{font-weight:700}.f-mx .n.mp{color:var(--f-green);font-weight:600;border-top:1px solid var(--f-line2);margin-top:4px}
/* Projektliste (Andriy 01.11): Code dünn, Name fett, Ort leiser */
.f-mx .n.lf .lb{display:flex;align-items:baseline;gap:8px;min-width:0}
.f-mx .n.lf .cd{font-weight:400;color:var(--f-muted);font-size:12px;letter-spacing:.02em;flex:none}.f-mx .n.lf .cd.only{font-weight:600;color:var(--f-ink2)}
.f-mx .n.lf .lb b{font-weight:650;overflow:hidden;text-overflow:ellipsis}
.f-mx .n.lf small{font-weight:400;color:var(--f-faint,#8A939D)}
.f-mx .n.lf.on .cd{color:var(--f-muted)}